Pixelblog - 60 - Side View Run 'N Gun

Intro

In the simplest terms, any game that allows the player to run and shoot at the same time could be described as a run ‘n gun. However, such a broad generalization confuses the distinction of this hybrid genre, which is best defined by the gameplay. To explain, let’s compare two famous examples, Contra, and Ikari Warriors. In contrast, the former is a side scroller that involves platforming, while the latter is top down with no jumping. Moreover, the genre defining similarities are on foot characters in scrolling levels that urge the player to keep on the move, shooting enemies, and dodging various attacks. To get even more nitty gritty, I could include the distinction of auto versus manual scrolling, and how this muddles the genre terms, but I’m here to discuss pixel art, so I’ll nip my geekdom for precise gameplay vocabulary there.

For this feature, I’ve targeted the concept of a run ‘n gun in the vein of Contra. Hence the important distinction of ‘Side View’ in the title. Furthermore, we will cover a robust set of character animations that combine shooting with various types of movement, and a complete environment design to place our protagonists in. All this is done in a very economical small scale, and colored with the NES palette.

DUMMY Sprite

As standard, the animation starts with a simplified dummy model. After designing 8x8px characters, 8x16px feels like a gracious amount of space to portray surprisingly realistic anatomy. Well, 8x16 is the average base, but some poses slightly break those dimension. A good place to start is a basic front view to establish proportions, but in truth, I jumped right into the walk cycle. The walk and, or run cycle is foundational to a character sprite, as it establishes the expression, and standard of fluidity that should be carried across the other animation cycles.

WALK
For the walk, I went with a generous 8 frames. Depending on the character design, and desired playback speed, it’s possible to make a serviceable cycle with less frames. For example, chibi style characters with stubby limbs, and fast movement are more suitable for low frame cycles, but full length appendages usually require more frames to convey convincing movement. Sprite size also plays into the animation, as we discovered in the previous feature, there may not even be enough pixels to accommodate more than a few frames. Granted the size permits, 8 frames hits a sweet spot by capturing all core poses, contact, down, pass, and up, as established by traditional cartoonists, most famously in the Animator’s Survival Kit.

For this sequence I partly referred to the aforementioned ASK, but I didn’t want it quite as exaggerated and noodley, so I incorporated analysis of real life studies covered in Pixelblog 50. All that along with a dash of intuitive experimentation in the moment to capture a lively, confident swagger.

RUN
For the run cycle, I built off the walk model, leaned the head and torso forward, cranked up the stride, and increased the playback speed. The forward tilted gesture with head slightly down really helps sell it. Also, note the increased bounce motion and modified rhythm in comparison to the walk.

MOVE WITH GUN
After making the basic walk and run cycles, I created the gun toting versions. To do this, I simply removed the arms from each frame, and replaced them with arms holding a gun. Most of the work is already done, as shoulder position and bounce follows the same motion. The general manner of holding the gun, and its sway require a bit of imagination, but yield another layer of expression.

MOVE & SHOOT
In order to allow shooting while moving, the legs and torso must be cut into separate layers. This allows the legs to continuously flow through the various animations irrespective to the action of the top half of the sprite. As you can see in the standing and crouching poses, the shooting animation includes 3 frames. Furthermore, an identical, or similar version of these 3 frames should be supplied and positioned for all frames of every animation that permits linear motion of the sprite (i.e. walk, run, and jump). Some frames share identical poses, but it’s still worth designating them for the sake of organization.

JUMP
For responsive control input, which is essential for run ‘n gun gameplay, it’s best to make the jump animation simple. At minimum it only requires 1 frame, usually a pose with the limbs tucked in (almost like crouching in the air) translates well into jumping motion. In my Castlevania Study I learned the jump and the crouch are literally the same pose. While that’s a clever use of economy, adding just one more pose takes things to the next level. Moreover, I create an ‘up’ pose for when the character is ascending, and a ‘down’ pose for when the character is descending. Not only does this give the motion more life, but the visual cue when you reach the apex can help with timing your jumps.

You might expect there to be some kind of anticipation where the character bends their knees before launching. Sure, that make sense in a stand alone study of jumping, or a cinematic platformer, but in the context of most games, you don’t want the input delay that would add. Since the staging concept of this feature is a run ‘n gun, the jump occurs instantly.

LANDING
While I prefer my jumps to have instant response, I respect a game that requires some commitment to jumping, such as limited, or no ability to correct the trajectory once airborne. Also, there may be a slight delay upon landing. Furthermore, I’ve included a subtle landing pose that recycles the crouch pose, and adds one slight iteration with the head and arms slightly dipped down on the first frame upon landing. While this helps sell the feeling of gravity, it could be reduced, or omitted if you want no loss of momentum when jumping. For example, you could have one pose with the knees slightly bent that only shows for a split second when landing, but sprite movement is not stopped. Another solution is to combine these ideas into a dynamic system, so the land delay only occurs if falling a certain distance.

PLAYBACK SPEED
The duration each frame is shown through an animation. Here’s the run down on my examples in milliseconds.
Idle, Walk - 120
Run, Shoot, Land, Dust effects - 60

Following the same model as the male, the female illustrates only subtle differences in the basic anatomy, but captures more distinction in the expression of the animation. The female physique relies on lower, and core strength to manage the weight of the long barrel gun. Moreover, she holds the weapon downward from her center, when not shooting. Also note the swing of arms and legs is more playful with a slight more grace of movement than the male counterpart. Otherwise, the timing, and set of moves follows the same model.

Character Sprite

After establishing the dummy model, creating a complete character design is mostly a practice of painting by number, however, loose fabric, bulky fashions, and hair require an extra layer of thought. For my male character design, the only thing that doesn’t conform within the dummy model is the hair, which has subtle movement to enhance the run, and jump animations.

I’m usually not a fan of straight up black outlines, but it works well with the background design presented below. Also, the heavy contrast suits the stark colors of the NES palette.

The female character design also closely conforms to the dummy, but has long hair, and the clothing slightly puffs up the shoulders in some poses. As with the male, the hair animates along with the run, and jump, but with slightly more involved movement to accommodate the fuller length. Additionally, it felt appropriate to add some movement to the hair during the shooting action. This hair movement applies to all shooting combinations, except for when running. I felt the rhythmic bounce of the hair while running should override the shooting hair flip, as it provides a nice lively rhythm with less noise. As for shooting while jumping, I tinkered a couple pixels so it feels neutral for both up and down states. If the level design permits prolonged moments of falling, I might make distinct shoot frames for the falling state, but otherwise there would rarely be more than a split second to shoot while falling.

Background Design

After all that hard work animating, I consider tile design a relaxing cool down. The tiles are 8x8px and my target resolution for the game mock up is 320x180px. This size is 16:9 ratio, and scales pixel perfect into full HD. Furthermore, the relative size of the characters, and tiles on the screen at this resolution strikes a fine balance for both aesthetics, and gameplay.

The first two rows of the step by step process section of the tutorial shows the core tiles needed to make the interactive layer of a stage. The 3x3 tile structure shown first is most fundamental, as it provides floors, ceilings, and walls. Secondly, the 4x4 tile diamond shaped structure provides the inner corner pieces that are need to connect ‘L’ shaped formations. With these 12 tiles you can create all manner of level design, sans angled slopes.

Full screen 16:9 mockup, native resolution 320×180px

I’ve worked with 16x16px tiles in side view several times, but this was my first time using 8x8px. The smaller size is much easier to work with, and the visual quality holds up surprisingly well. Capturing depth with the background while maintaining clear visual separation of the layers and objects is the key challenge of side view environmental tile design. Due to this, I find top down tile design more approachable. However, the economy of 8x8px units, and the strange harmony of the NES palette seems to have mitigated much of the difficulty. I can’t discredit my experience, and skill crossover from other areas of study, but things just clicked in a way that makes me much more confident to approach side view level design in future projects.

Final Thoughts

Guess I was having fun. This one quickly spilled into a prolific stream of content. Yet, there’s still more left in the tank. While I covered the basic animation concept to combine shooting with various movements, multidirectional shooting is missing. More complex moves like roll, dash, wall jump, and ledge climbing would also be nice. Fleshing out the world with enemies, and more environments is always exciting too. If you enjoyed it as much as I did, you might be seeing more.

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials, and use them for commercial projects. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available for commercial use in Side View Run ‘N Gun Asset Pack

Source files used in the making of this Pixelblog are available in Side View Run ‘N Gun Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter

Pixelblog - 59 - Tiny Sci-Fi Pixels

Intro

It’s time to have more fun with minimalistic designs in a spiritual sequel to Pixelblog 47. While continuing with top-down designs, based around an 8x8px tilemap, we depart the fantasy theme of the past feature, and warp into a near future sci-fi world. To further distinguish this cyberpunk setting, I’ve restricted the colors to the NES palette, and utilized outlines. I typically prefer no outlines, but they are often necessary to preserve readability within a limited palette. Not only do outlines help define sprites and interactive objects from the background, sometimes the retro aesthetic they evoke just feels right, especially when paired with the NES palette. So get cozy, as we put this style to the test with various animated character designs, and a complete exterior city environment.

Characters

While I’m using the NES palette, I’m not using the technical restrictions imposed in an actual NES game. Furthermore, the sprites are more colorful than what you typically see in NES games, but I maintain a minimalistic mindset to create simple, clear details. All of the sprites start from a simple 8 pixel tall figure. Once the details and outlines are applied they become slightly larger, but are still functional for an 8x8px tilemap environment.

The orange character is intended to be the hero of this imagined game world, and gets a full 6 frame run cycle. Most characters could get by with a 4 frame cycle, like the trench coat wearing agent character, but 6 frames gives it a little more weight, and pep. Given the sprites are so small, a few extra frames for the sake of smoothness won’t keep me up at night. However, you only need so many frames to maximize the motion across so few pixels of possible movement.

The robot character opts for a rocket boosted dash instead of a traditional run. Note, the subtle light effects during the dash, and the hero shoot animation. This is produced simply by baking in lighter colors on specific frames.

I simplified the hero idle animation by making only one direction. No matter what direction you are running or shooting in, the character faces forward when you stop. I actually think this makes the character feel lively by focusing on the view with the most personality.

Finally, I created several static NPC designs to inspire more possible inhabitants of this world. By extrapolating from the poses of the established animations, it’s not hard imagine multi-directional animations for these colorful folks. You could probably get by with a simple 2-frame walk animation

Frame timing reference in milliseconds (of course you can modify to your own preferences)
Hero Run- 100, 150, 100, 100, 150, 100
Hero Shoot - 50, 100, (return to idle, or shoot again)
Agent Run- 100, 100, 100, 100
Robot Dash- 50, 50, 50, 50

Mech

No sc-fi setting would be complete without some kind of mech content. Furthermore, the power fantasy of a personal mech lies at the heart this imagined game concept. Roughly in the whereabouts of 16x16px, this slightly larger sprite is a useful vehicle for your 8x8px character to jump in and out of at will. This could make for interesting level design that exploits the advantages and weaknesses of the mech, vs on foot. For example, the mech would have greater firepower, and defense, while the on foot hero would have higher agility, a smaller hitbox, and ability to access narrow passages. This dynamic inspires many clever play mechanics, and I dream to truly make a game like this someday.

As for the animation, the walk cycle plays through 12 frames. That’s a bit on the high side, but is still economical when you consider the reused frames, reflected frames, and relatively small scale of the sprite. Moreover, on the front and back facing cycles, frames 6 and 12 are identical, and frames 1-5, can be flipped to produce frames 7-11, as the design is symmetrical. For the side facing cycle, all 12 frames are unique, however, the entire animation can be flipped to cover both left and right directions.

The walk movement is somewhat slow, and plodding to capture the sense of weight. So, to balance things out it also has a tactical rocket dash. This would be a limited burst in one direction, that is completely linear, or could have slight steer. The animation uses 4 frames, and has baked in lighting effects.

The shooting animation jolts back the shooting arm 1 pixel, while the flare effect is 2 frames. The lighting effect is baked into the first frame of the flare. The gun and shooting effects are a separate layer from the mech, so it would be possible to easily equip the mech with different weapons. Furthermore, since the gun is on a separate layer it’s easy to customize the position, so it realistically stays in the same hand for all directions.

The final touch is the dust animation. This is 4 frames per step, and it starts on the stomp in frames 3, and 9. The animation can be flipped and reused for both legs on the front and back facing cycles. The dust is only seen on the front leg of the side facing cycles. As with the walk cycle, the same dust frames can be flipped and used for both left and right directions. The dust is also on a separate layer to offer this economy and flexibility.

Specific walk frames are reused for the idle position.
Front/Back- Frame 6, or 12
Left- Frame 12
Right- Frame 6

Frame timing reference in milliseconds
Walk- All frames, including dust are 100
Dash- All frames are 50
Shoot- Body is 100, paired with 2 flare frames at 50

All assets and animation frames are available for study and commercial use through Patreon membership in the Tiny Sci-Fi Pixels Asset Pack.

City

Finally, we need an environment to complete the concept. I went with a somewhat generic urban setting, however, the colors, precise geometry, and lack of vegetation give it a synthetic future vibe. To push the sci-fi theme further, you could layer in more advanced infrastructure, like elevated roads and railways, or imagined technologies, like hover cars, and teleportation pods. Animated details such as neon signs, and circuitry pulsing through the roads and buildings could also take it to the next level. Ultimately, I kept it simple to leave room to inspire your own art direction. Grunge it up for more cyberpunk, or make it shine for a futuristic utopia.

The tutorial pretty much speaks for itself in terms of the process. I started by designing complete buildings within an 8x8px tilemap to guide my sizing. Then I broke things down into tiles and made modifications to economize the tile utility. The first two building styles exhibit the most economy and customization, as the width, height, and depth can be expanded, or collapsed to your choosing. in some cases, variants can also be used to break up the pattern of the window layout, and roof arrangement. Doorway styles, placement, and amount can also be varied.

On the other hand, building 3 with the large garage entrances is much more unique, and leaves little room for variation. However, I still broke it into tiles to show how bitmap data can be saved if you want to maximize your texture atlases. Also, some of the roof elements can be mixed and reused across the building styles for more variety.

The sprites are a touch big in relation to the buildings, but that’s an intentional design convention to keep the level design compact. This makes traversal of the exterior city more manageable, and it has a certain aesthetic charm. Just like retro RPGS, the building might look small on the outside, but when you walk in, you’re presented with a much larger interior environment. I would handle this game in a similar fashion, and have an extensive network of diverse interiors that can mostly only be accessed on foot, while the exterior city is most effectively traversed with the mech.

Final Thoughts

Tiny pixels, huh? That’s what I refer to any pixel art that is designed within an 8x8px tile framework, or less. I have a lot of experience with 16x16 tiles, but I’ve become quite smitten with this 8x8 business. The economy allows rapid development of concepts, but still leaves room for beautiful visuals. The tiny scale requires a level of abstraction that gives just enough detail to tickle the imagination, and inspire a vision that goes far beyond the pixels. I hope you can feel my inspiration flowing throughout this feature, as I hope to do more. I have plenty of ideas to do a straight follow up, or I could branch into whole new theme!

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available in Tiny Sci-Fi Pixels Asset Pack

Source files used in the making of this Pixelblog are available in Tiny Sci-Fi Pixels Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter

Pixelblog - 58 - Top Down Character Animation Part 3

Intro

Welcome to the 3rd installment of an interconnected series of top down character animation studies. In review, the first lesson in Pixelblog 55 introduced the basic anatomy of the character, including idle and run animations for the dummy version of the character. The blue haired character design was also given an idle animation, but no run. The second lesson in Pixelblog 56 expanded the dummy template with weapons based attack animations. Finally, in this 3rd episode, run and attack animations are applied to our blue haired warrior. If you’re just jumping in now, I highly recommend reviewing the simplified dummy versions of the previous lessons before attempting to animate a detailed character design.

Run

With the animation already established with a dummy template in part 1, this should be a piece of cake… right? Not so much. Every detail of the character design significantly increases the workload for animation. The main challenge is translating every element of the design consistently across all directions, and frames with minimal visual noise. To make things even more laborious, I chose to respect asymmetric details. For example, the sword and shield stay in the proper hands across all orientations, even details of the the hair are respected. Furthermore, If you want to create your own original character using this model, remember that every detail will need to be carried across 36 unique frames of animation, and that’s just for the run.

Not to diminish the utility of the dummy, it provides a shorthand that ensures the quality of the overall animation. Going in raw and working out the movement while dealing with the character details would end up taking more time than it does to first set up a dummy version. Furthermore, the quality of the animation would likely suffer without the clarity of anatomy provided by the dummy version.

First, I started by animating the base character with armor, but without the sword, shield and cape. This allows the option to create different equipment sets on top of the base character. The motion of the base character exactly follows the dummy template, however, when holding the sword and shield I reduced the swing of the arms to give a more natural weighted feel to the equipment.

As with the dummy animation, each frame of the 6 frame cycle plays at 100 milliseconds (0.1 seconds).

Attack

I took the same approach for the sword attack animation, first animating the base character, then adding the equipment on top. Likewise, the motion of the left hand is modified when holding the shield to imply a natural weight of the equipment.

The sequence also includes the idle animation from part 1. However, I made some minor modifications to a small number of frames to improve clarity and consistency of some details, mostly in the arms.

As with the dummy sword attack animation, the frame timing for the 6 frame cycle goes as follows.
In milliseconds- 100, 50, 50, 50, 100, 50

While I’ve only demonstrated the sword attack, other melee based weapons could be interchanged with slight modification to the posing and frame timing, as can be referenced with examples in Pixelblog 56.

Feeling it out

Much of art could be described as a happy accident, and this is especially so with animation. Furthermore, taking a concept from the mind to a tangible moving product involves trial and error, and trust in the process. No matter how much experience I gain, there’s always a limbo state amid creation, but I’ve learned to embrace it, and find a comfort with the discomfort, so to speak. A comfort that is only gained after consistently coming through the dark to a happy result numerous times.

Natural talent provides a boost, but isn’t a necessity. Organization and the proper tool for the job goes a long way when fueled with a hard working spirit. For me, the practical animation functions in Aseprite greatly ease the struggle. The frame based timeline, which allows multiple layers is easy to use and stay organized with tags. Realtime playback/preview, and onion skin are also essentials. These features allow me to clearly see how my animation is looking, how one frame connects to the next, and experiment in real time to make incremental improvements.

I had become proficient with the frame animation in Photoshop over several years, yet, my workflow was improved from day one in Aseprite. I didn’t intend on making an advertisement. It’s not like I’m getting anything to promote the app, but it has genuinely improved my animation abilities, turning a dreaded process into a joy. I haven’t tried all the apps, so I’m sure there are others with similar features, that might even be better. Ultimately, the creative will determines the artist, and I always recommend to use whatever is accessible, and feels comfortable to you.

Concerning the animation work at hand, clarity of motion with minimal noise takes precedent over maintaining the details of every pixel in every frame. Any flickering pixels that draw the eye away from the overall motion I would describe as noise. These are often seen in the sub pixels, but can also appear in the outer form. Furthermore, there are instances where clusters come together and create noise that reduce readability of the motion. These are easiest to catch when repeatedly playing back the cycle at full speed. Even though the details are accurate to the static character design, they can get lost in the noise when put in motion. Therefore, reducing colors and simplifying the clusters may provide the fix.

Final Thoughts

Animating this character design in all 8 direction was more time consuming than I expected, and I was only able to deliver 2 new mini tutorials for this Pixelblog. Fortunately, they are quite dense, and will take plenty of time to fully digest. Animating the cape physics, hair bounce, and equipment on top of the base character movement accounts for its own chapter of the process. Especially if you are not caught up on parts 1 and 2, you have a solid journey ahead of you. Ultimately, I’m glad to have completed all the animations from the series for the complete blue haired warrior design, rounding out a nice set of assets to utilize for an 8 directional character controller. Finishing the trilogy feels like a good resting point for the series, but surely there is more to be done.

RESOURCES

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available in Top Down Character Animation Part 3 Asset Pack

Source files used in the making of this Pixelblog are available in Top Down Character Animation Part 3 Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter

Pixelblog - 57 - Knights, Monsters, & Castles

Intro

Prepare to step into a world of swords and sorcery, where fabled creatures lurk in the lands seen from grand castle spires. Indeed, it would be treacherous to venture out alone without sword, armor, and the will to fight. Steel your spirit as we depart on a fantastic pixel outing.

Free from the pressure of animation, this feature focuses on the pixels. Of course, sound fundamentals are always in play, but without the laborious demands to create multiple frames that evoke clear motion, the dial gets turned up on the details. By integrating fundamentals of anatomy, color, and pixel clustering, advanced results can be achieved by incremental steps. Proceed with patient discipline, and the treasure will be yours!

Knight

Ensconced in lustrous armor from head to toe, the knight figure continues to captivate the imagination centuries after they served the upper class as mounted warriors. While they hold a real place in history, their armor clad visage is often romanticized in the realms of fantasy. Taking on both heroic and frightful forms, the knight is the quintessential avatar for high adventure.

It’s always helpful to establish a fundamental anatomy model before jumping into a fully posed final character design. If you have exceptional talent, or keep routine anatomy practice, you might comfortably skip this step, but since I can’t claim either, the process starts with a front facing anatomy breakdown. Especially with bulky armor and clothing, the design will most likely suffer without establishing the underlying figure. Furthermore, I also breakdown the prominent armor pieces before dressing up our good sir.

After establishing the basic armored figure, the detailed process of shading and coloring begins. First, define the light source with simple, prominent clusters that capture the overall contrast. Next, refine the lighting by blending colors with more detailed clusters. Avoid too many small scattered clusters, and overly gradated color transitions to prevent unnecessary noise, and blurred features. The idea is to push the detail just far enough until the mind can fill in the rest. Lastly, outline the character if it needs more pop on the desired background. Start with a simple one color outline, then blend it lighter or darker according to the adjacent colors within the outline.

I take the same approach for the posed version. It starts with the simple dummy figure in the desired pose with the addition of a sword. Next, apply the armor by carefully reimagining the changes in perspective compared to the straight forward version. Repeat the detailing process while accounting for the shift in pose. This pose doesn’t stray too far from the straight on version, so it’s not too difficult to imagine the subtle shifts in perspective and lighting. The same process can be used for more dynamic poses, but will require strong vision to accurately distort the design. Use references!

Monsters

The descriptions of mythical monsters may vary across cultures, but the universal inclusivity of beastly legends speaks from a place of truth. Fact or fiction, all extraordinary beings are fair game in the world of fantasy.

Anatomy knowledge will aid the creation of these relatively humanoid baddies, but a playful imagination and willingness to deform features is vital. With the flexibility provided by their imaginary nature, I felt comfortable skipping the anatomy breakdown, and immediately blobbing out the final design with a few of the desired colors. After I completed the final designs I reverse engineered the process into distinct steps to make a digestible tutorial. That’s usually how these things go, but my organic process does often start with basic color coded dummies when it comes to character design.

Of course, references are almost always part of the equation. I always start with a basic vision in my head, then I source multiple references to fuel the inspiration. Usually, I use one main reference, along with several complimentary references that help inform modifications for my personal vision. Quality input is essential, but it ultimately comes down to the output on the canvas. In other words, don’t get hung up on the details of a reference, and let your own intuition flow out from fundamental principles.

It’s all about balance. Don’t rely too heavily on a single reference, but don’t let the pride of your vision blind you from outside influences. Don’t agonize over every detail mid-process, but don’t rush for immediate results. Ingrain and exploit the conventions, but don’t be afraid to bend the rules. Listen to critique, but don’t react to every opinion.

Castle

After a day of XP grinding, it’s good to have a secure castle to come home to. Both a fortress, and a fairy tale home, the grand towers, turrets, and spires of these fantastic structures inspires endless possibilities.

Inspired by my recent series of castle studies, I’m compelled to pass on the pleasure of creating a dream castle of your own. Done in my trademark architectural style, I’ve broken down a typical example to showcase not only the process, but the primary elements involved. Therefore, giving you the tools to make iterations and invent unique builds of your own.

There’s no right or wrong place to start, as the various structures can be mixed, matched, and layered to construct the composition that suits you. I usually start with a roof capped tower, which establishes the color scheme and light direction. For example, you can see the various color samples along the bottom of the tutorial. Then I use that as a style guide to create a rough plan of the overall structure to capture a pleasing composition within the buildings, and in context of the canvas. From there, it’s just about filling in the details that come naturally from the established method.

Here are several more examples from my Castles series to help inspire your designs. These all use color palettes showcased in the examples at the bottom of the tutorial. Can you discern which is which? While these are all inviting daytime styles, spooky dark castles can also be made with color choice. The last color example at the bottom of the tutorial is intended for a dark castle at dawn, but if you want to see a complete example in context, you’ll have to subscribe to my Patreon, where I post exclusive content.

Final Thoughts

I hope my sense of fun comes through the work, as I greatly enjoyed working on this feature. The hardest part was picking the subjects of the tutorials, among a world of endless possibilities. This was a fun intro to an assortment of fantasy subjects, but I’d be down for a deeper dive into swords and sorcery to create more applicable gamedev art models. For example, animated warriors, spell casting, and detailed studies of gear. Well, good to know I won’t be running out of ideas for content any time soon.

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Assets featured in this Pixelblog are available in Knights,Monsters, & Castles Asset Pack

Source files used in the making of this Pixelblog are available in Knights, Monsters, & Castles Source Files

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter

Pixelblog - 56 - Top Down Character Attack Animation

Intro

In the last Pixelblog, we established a template for an 8-direction top down character with idle, and run animations. With a solid foundation set, our character takes the stage once more to showcase weapon based attacks in all 8 directions. Honoring asymmetric details, all 8 positions offer a unique view of the action as the weapon always remains in the same hand. Wether you prefer to slice, stab or bash your enemies, our versatile character model can handle various offensive equips.

Motion Breakdown

No matter the direction, the action is performed in 6 frames. Depending on the weapon type, the motion spans 4, or 5 phases with varying frame timing.

Anticipation- This phase expresses the wind up of the strike, drawing back the weapon to a point where it can naturally strike with powerful momentum. This model uses 1 frame, at various delay durations. The longer and more dramatic the wind up, the more impactful a strike can feel, but results in more input delay in the context of gameplay.

Smear- This phase captures the greatest leap in motion, conveying movement from the wind up all the way to nearly the extent of the strike. Spanning multiple frames of brief duration, the weapon leaves a smeared trailed to emphasize the speed, and define the path of travel.

Rebound- This phase is only seen in the hammer example, and could be applicable in other weapons, or attack styles that have the weapon make contact with the ground. It captures a subtle bounce after the weapon hits the ground in 1 brief frame.

Follow Through- Shown with 1 frame, this phase marks the full extension of the attack, moving into the target 1 more pixel without any smear effects. The frame duration holds longer to emphasize the commitment of the attack, and weight of the weapon.

Recover- This phase shows the weapon being drawn back to the default idle position. The movement is captured in 1 frame, positioned somewhere between the follow through, and first idle frame. The frame duration can be slightly delayed to emphasize a heavy weapon, but is relatively fast.

No matter how great the jump in movement appears in the anticipation, and recover frames, refrain from using smear effects, as it noisily distracts from the forwards striking movement.

As described, the frame timing strongly plays into the the physical characteristics of each weapon. Specific timing for each frame is provided for each weapon type.

Sword

Of course, we start with the most popular choice of cold steel in hand- the trusty ol’ sword. More specifically, a medium weight short sword, which offers a neutral weight to length balance. While somewhat lacking range, the sweeping motion across the body provides a relatively wide area of attack. Furthermore, the slashing action is quick with minimal delay on the anticipation, follow through, and recover frames. The angular shapes of the smears captures strong motion while providing a solid feel to the weapon. The motion and angle of the swipe are fairly consistent, but there are deliberate variations made to keep the hitbox of the attack relatively balanced across all directions.

Frame timing in milliseconds- 100, 50, 50, 50, 100, 50
Total cycle- 400

Spear

Keep your distance and poke em’ to death. The spear offers greater range than the sword, but holds longer on the anticipation and follow through, as slightly more commitment is needed to get the full power of this long weapon. Otherwise, the distribution of frames across the phases of motion are the same as the sword. Note, the underhand grip of the spear in the idle position, and how that transfers into the attack animation, in contrast to the upheld sword.

Frame timing in milliseconds- 200, 50, 50, 50, 150, 50
Total cycle- 550

Hammer

A true chad weapon. The weighty hammer offers a hefty strike, that is countered by the longest anticipation, follow through, and recover frames of the bunch. Along with the longer frame duration, the screen shake effect, and subsequent rebound frame help sell the powerful weight behind the strike. While the strike comes from overhead like the sword, the forward trajectory creates a slimmer hitbox, compensated by greater attack strength. Again, the sharp geometry of the smears evokes a greater feeling of impact than a curvy style.

Frame timing in milliseconds- 250, 50, 50, 50, 300, 100
Total cycle- 800

FINAL THOUGHTS

True talent for animating characters is a rare thing, and I’m no exception. Only through numerous attempts and failures have I made gains. At this point, I’ve built enough confidence to trust the process, but it never comes easy. At first, approaching an 8 direction character felt overwhelming, but my doubts eased as I settled into the process. After all, animation happens one frame at a time. Through careful organization and steady pacing, I was able to produce satisfying results, and dare I say, I even had a little fun. I’m sure there is still much that could be improved. I tried to keep the poses of every frame consistent across all angles, but I took some liberties to bring out the romance of each view point, and balance the hitboxes for potential gameplay. If you rotated the sprite on every step of the animation I’m sure you could spot some jankyness, but I don’t think such detail would be noticed in a practical context.

I was going to flesh out the run animation, and an attack animation with the complete character design from last lesson, but I figured it’s more useful to make more weapon variants with the dummy character. Ultimately, I hope my journey into the frontier of 8 direction animation provides solid footing to make your venture as smooth as possible.

RESOURCES

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available in Top Down Character Attack Animation Asset Pack

Source files used in the making of this Pixelblog are available in Top Down Character Attack Animation Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter

Pixel Diary - Sky Pit

View fullsize

Intro

Guided by an innate desire to create, humans make things. As such a matter of course, I find it hard to put words to the why and how without attempting to unravel the meaning of existence. Humbly, I cannot declare a clean escape from this quintessential philosophical bog, but a cursory look at civilization through time indicates our role as makers keeps us afloat. From a ham sandwich, to life itself, we all play our part as makers.

Pictures made with deliberate arrangements of tiny squares, that’s my mark in this business of world making. A humble craft, yet venerable enough to justly earn the term pixel ‘art.’ The ‘pixels’ provide the flavor I so adore, while the ‘art’ holds the purpose. Ultimately, my drive is fueled by love- to know, and be known among the multitudes in a servitude that can be deemed good. Now that I’ve sufficiently justified my existence as a pixel pusher, allow me to demonstrate the deed.

Concept

Staring at a blank canvas leads nowhere, but once I start sketching, the ideas pop off. I often make hand drawn thumbnail sketches to get a very general concept, then I move on to pixel sketching to form a better game plan for the composition, colors, and appropriate resolution. Sometimes I have a fairly clear vision in my head, but most often I start with a general vibe in mind. In this case, I was in the mood for a dreamy landscape that somehow featured flying machines.

The above image shows my thumbnails sketches before I went to the digital canvas. The idea started as a cliff landscape from a high vantage point that focused on dramatic geology and structures. The composition is strong, but I wanted more sky, while maintaining a wide canvas format. So, I tilted the view to more of a sideview, and included an airship for more of my trademark flavor. Lastly, I scribbled out more detailed concepts for possible ship designs.

My first pixel sketch followed my hand sketches pretty closely. I liked the colors, but the composition wasn’t quite there yet. It could probably use more cliff elements in the background, and foreground, and some resizing of elements. A vertical format might suite the subject better, but I was dead set on a wide format, as my last couple Pixelcast videos feature vertical compositions. Proper execution was looking to exceed my time budget for these videos. I like to keep the process recording under 5 hours, so the final time-lapse can reasonably be condensed into about 5 minutes. Not to mention the painfully tedious days of editing, and production to put the whole video together. Ultimately, my interest for tackling the technical issues in capturing an atmospheric landscape wained in favor of focusing on the design of airships.

Therefore, we move on to the final rough concept. I ditched the cliffs and buildings for an airship as the focal point. A docking area at the edge of the canvas adds interest to the composition, and a sense of wonder to the context of the scenario. More ships in the distance imply an area of heavy traffic.

Not a far cry from the final version, I like to develop the concept sketch well enough to establish colors, proportions, and even some areas of high detail to help crystalize the complete vision in my head. This makes the recording process go much smoother by cutting out confusing trial and error as I problem solve, furthermore, reducing the load of video editing. I’m sure some would be interested in seeing my raw process from the first pixel of the concept, but I think that would be better suited for a livestream, or long format style video.

Process

Documented for posterity, and proof of human intent, I’ve crammed 4 hours of problem solving into 5 minutes. Don’t blink, or you’ll miss the action. Try setting a slower playback speed to make it easier to follow along.

Aseprite with a wacom tablet connected to a desktop computer are my hardwares of choice. Pencil, marquee, and the eyedropper are my most frequently used tools, along with economic use of layers. There’s not much more I can add here that’s not better shown in the video.

Final Thoughts

View fullsize

Sky Pit, 320×180px, 22 colors, Aseprite

I stuck with a familiar formula to create another solid entry in the aircraft section of my portfolio. Of course, it would not be complete without a lovely mound of puffy clouds. It’s actually been a while since I’ve made a detailed design of this particular style of side-view airship. Sometimes we have to indulge in our comfort foods to stay connected to a core inspiration, and refresh the spirit. Maintaining an original sense of style, while contending with the pressure to keep pushing into new boundaries is always a dilemma. The potential of the my initial clifftops scene still beckons me. Perhaps, I will better formulate the vision without the burden of capturing the screen recording. There are always more problems to solve, and I’m grateful for that.

Support

I have so much more to give. If you appreciate my work, please considering giving back by supporting me.
Patreon
Donate
Shop

Thank you!
-Raymond Schlitter

Pixelblog - 55 - Top Down Character Animation

Intro

Offering the perfect combination of function and aesthetic, the top down perspective is one of the most popular vantage points to employ in pixel art games. Specifically, I refer to the 3/4 top down projection, which shows a large portion of the front, as well as the top of objects, commonly used in RPGs, a la Chrono Trigger. As a personal favorite style to work in, top down assets have graced the Pixelblog many times, yet there are still many beasts to slay, especially in the realm of animation. Equip your weapon of choice, and join the quest, as we take on the dreaded 8-direction top down character.

Dummy Sprite

I presented my first top down character model way back in Pixelblog 22. While I still think the basic sprite design is high quality, the walk/run animation is merely serviceable, and a bit on the stiff side. Furthermore, I only designed frames to support 4 directions of movement. Bang for buck, 4 directions is still a worthy design approach, as you can have 8 directional movement, but limited character orientation. This limitation actually makes for interesting design solutions, exemplified in Zelda: Link to the Past. Link is able to walk in angles, but he can only face up, down, left, right. To compensate, he has a wide slash arc, can strafe when charging the sword, and can access angled attacks with secondary weapons like the boomerang. This limited move set allows the designers to create interesting gameplay challenges without overly complicated dungeon layouts, and enemy behaviors. On the hand, if the player can attack in 8 directions, it demands much more from the level, and enemy design to provide meaningful challenge that utilizes the increased attack geometry. A problem worth overcoming to meet the sensibilities of modern gamers, and keep pixel art a relevant medium for game design - not just for nostalgia.

Designing with a particular balance of form, function, and economy, I didn’t use any particular reference for this model. Keeping things on the small side, the dimensions of the neutral front facing figure is 26x32px. Same as my aforementioned character model, this roughly conforms to 1x2 16x16px tiles. Even if you are not using actual tiles for the environment, it brings cohesion to the level design, and aesthetic, to conform the sizing of assets to a consistent tile grid.

While still a bit on the chibi side, this model has slimmed down, and proportionally longer appendages than my old model. This allows for a nice range of clear movement without having to stretch and squish things much. More realistic than your traditional chibi, but deformed enough to express personality.

I started with the front facing figure, then made the up, and side facing versions. Finally, I saved those pesky angles for last. Fortunately, since the figure is symmetrical, the side and angle versions can be flipped, making only five orientations necessary to complete the circle.

As far as work flow, I first made a rough version of each orientation in one scene, making comparative measurements to decide the size and positions of the anatomy. Once I had all the angles covered, I put them into a uniform position on the canvas, and sequenced them into a rotation animation. This revealed many errors and issues I could not see by looking at them next to each other. With the animation set up, I could go through the frames and make fine adjustments until the rotation wasn’t jank, which improved the form and consistency among all orientations. The trick is keeping the thickness and length of appendages consistent. At such a small size, one pixel can make a huge difference.

Once the base figure of all the orientations was settled, I created the idle animation - again, starting from the front and eventually working to the angles. I can’t explain the idle animation better than the pictures tell. The frame timing/playback speed strongly effects the expression, and comes down to taste. Uniform playback speed at any rate felt a bit robotic to me, so I went with an offset timing that holds the frames at the extremities of the motion longer than the in between frames to give a more life-like feel.

For the run animation I started by completing the whole 6 frame cycle of the front facing version. Then, I translated the movement into the side version, followed by the up facing version. Once again, I left the angles for last. The side, and angles are flipped to cover all directions, reducing the workload to 5 different animations.

After I had rough animation for all directions, I arranged them in a circle and synced the motion. This allowed me to study the motion and efficiently compare related frames. From here, I could make many improvements to the overall quality and consistency of the animation. Frame by frame, one piece of anatomy at a time, I would make sure it logically follows the same cycle of motion, and maintains consistent proportions across all positions. For example, the bob of the head, the motion of the shoulder pivot, and the max swing of appendages are critical areas to observe.

For a small sprite with condensed anatomy, as such, the perfect balance of economy and smoothness can be captured in 6 frames. The core expression of the motion comes from the bob of the head. The key to capturing a natural flow is variable motion that bounces, rather than constant sine wave motion, which looks a bit robotic. For example, one stride of this 6 frame cycle, in relation to the previous frame, goes down 1px, down 1px, and up 2px. This flow repeats for the opposite stride, completing the 6 frame cycle. Furthermore, the up movement is faster than the down movement, expressed in the ‘pass’ frame where the legs come together under the torso. Of course, everybody has a unique nuance to their gate. Try experimenting with the size of movements, and how they are distributed across the frames. For a more detailed breakdown of the fundamentals of run cycles, I refer you to Pixelblog 8.

Character Design

We can’t go questing with a dummy - time to make a real character.

This image shows the main iterations of my character design process. Note, that some changes are informed by testing out the other positions of the 8 directions, and attempting to animate the idle. What looks best in one static position might become undefined noise in other frames of the animation. In other words, the design philosophy for a static image, vs a character that will be animated differs, as compromises and simplification should be favored for clarity of motion.

1. I got the hair shape and equipment set figured out. Colors need work and lack cohesive relationships. Odd balance of lights and darks with all the contrast noisily bundled in the center, while the mid values of the extremities obscure the definition of the overall figure. All a bit generic.

2. Better balance of lights and darks, but some areas still lack definition. Bright hair gives personality and distinction, but soaks up too much focus. Cape cowl adds character and coheres the shield to the character. Nice unity and composition among colors of hair, cowl, shield and sword.

3. Removal of armor skirt reduces noise. Light dark balance is more even, while still providing good contrast that better defines the figure. Brown leather boots and armbands are interesting, but create some noisy areas where too many similar colors come together.

4. I like the blazing blonde hair, but considering the character in action I’m afraid it may bleed into the sword in some situations and take focus away from the slash effects when attacking. The dark blue hair creates more cohesion to the character, and overall better balance of values, along with chopping down the boots. The foot gear change also improves definition of the figure, and adds verticality that makes him feel taller. Revision to the hand and forearm colors keeps them well defined through all positions.

The character design accounts for a lot of the leg work, and should not be short handed. A complicated design may become a real headache to animate. A lame design will still be lame in motion. I suggest starting simple and working in details along the way. A layered approach allows flexible experimentation. For example, I made the cape and gear on a separate layer that can overlay the basic costume. This approach can also accommodate various equipment and costume options if that’s a feature you want in your game. In that case, I could go even more granular, separating the armor and boots as well.

Once the character design is settled, the real fun begins. Translating the design to all frames involves a lot of observation and comparison to keep things consistent. Along the process you may discover issues with the design that require modification to maintain clarity of the anatomy.

Same as the dummy, I first created all orientations in one scene. Due to asymmetry of the hair, and equipment, unique frames had to be created for all eight orientations. In the context of gameplay, you could probably get away with flipping things, so the sword and shield switch hands depending on what way you are facing, but it would certainly be odd to show the standing in place rotation.

The bounce in the hair adds extra liveliness with little effort. The hair shifts in frames 2 and 4, while all the rest are the same. The hair highlight looks odd if it stays in the same place in every orientation, but it’s distractingly noisy if it jumps around too much. I found it works best to make it shift around a small amount in a consistent rhythm.

Final Thoughts

After working with relatively large sprites in my realistic anatomy series, it’s refreshing to animate a more economical model. Not to say it’s easy, as every pixel can make a dramatic change, but I greatly enjoy the challenge of dealing with the abstraction of small sprites. I plan to expand on this model with more useful animations. It’s a good start, but there’s a lot left in the tank. I definitely want to complete the run cycles for character design. Attack, block, and dodge animations would surely have value as well. Beyond that, I could see enemy designs, and possibly new environment concepts. Think I’ve got myself into another multipart blog series. See you next time!

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available in Top Down Character Animation Asset Pack

Source files used in the making of this Pixelblog are available in Top Down Character Animation Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter

Pixelblog - 54 - More Isometric Pixels

Intro

The consistent angles of isometric projection are a perfect match with the low res abstraction of pixel art. Together, they form an eternally cozy style that deserves regular visitation. While the convincing illusion of 3D may appear challenging at a glance, patience, and consistency can overcome lack of graphic skills. Furthermore, I take a constructive approach that can be easily understood by beginners, while also providing a foundation to solve advanced graphic problems.

As the title implies, this is not the first Pixelblog to feature this lovely skew. If you are new to isometric pixel art, more of the fundamentals are covered in Pixelblog 41. and Pixelblog 4. However, if you are inclined to learn through action, much can be discovered by pixeling along with the following exercises. Similar to assembling a set of Legos, the picture on the box can be achieved by carefully following the directions, one pixel at a time.

CAR

1-2. The process starts with basic outlines of the main shapes of the overall object. While I’ve exploded the view for easy visual separation, it’s helpful to create each piece on separate layers, which allows the flexibility to move things around, and make edits with minimum consequence.

3-4. Colors and values are established across the various planes of the shapes. Bevels slice the edges with varying thickness to provide a smoother, more aerodynamic look. Further details are added, including windows, fenders, rims, lights and intakes.

5. Anti-aliasing is applied to smooth harsh edges, and subtle outlining is applied to make the sprite pop. Note the rhythmic dots added to the angled edges. Also, a bit more shine is added to the rims.

6. Racing stripes, and rear view windows are added. Lastly, a reflective sheen is given to the windows.

Ready to race!

Tree

Animated version

Due to the round shapes, isometric trees are almost indistinguishable from a 3/4 top down projection. Obviously, a perfect sphere appears the same from any perspective. In this case, which uses simple oval shaped foliage bundles, it could pass for either projection. However, if the tree was more complex, and exhibited individual limbs, the subtle differences may become more apparent.

For example, this fantastic tree in the above image definitely fits in an isometric landscape, but may appear out of place in a top down setting. Ultimately, it’s best practice to stick to the foundational guide lines of the desired projection when making assets.

Static version

Furthermore, the trunk of my isometric tree starts with creating a tapered cylinder that strictly conforms to the 2:1 line pattern of the isometric grid. One flat oval at the base, and another slightly smaller one placed above, then connect them at the sides along the Y axis. Roots at the base of the trunk also roughly flow along 2:1 paths to emphasize the isometric quality.

The shape of the foliage units are more about the style and species than a specific isometric ratio. Perfect spheres, vertically long ovals, or even rectangular shapes could be used for certain types of trees. In this case, I just eyeballed ovals that are roughly 3:2 ratio, which feels pretty natural for a bundle of leaves for any projection, and the overall shape lends itself well to the implied perspective of the isometric environment. Moreover, the somewhat cartoonish, large oval tree actually looks quite nice in an isometric setting.

For the multi-bundle version of the tree, I maintain a similar 3:2 ratio for the overall grouping. After layering the bundles together, some touch up is needed to smooth out the shading, and to remove unsightly clusters that result from the overlapping. Lastly, the tree is nestled in some grass and given a cast shadow. Yes, a happy tree indeed.

Fore more examples of layering foliage modules, check out Pixelblog 44.

House

Animated version

Again, the process starts with simple outlines, defining the main shapes, and basic features of the house. Mapping out the entire shape, including the lines that won’t be seen when filled with color, will ensure accurate sizing and alignment. I suggest creating each component on a separate layer, as designated by the unique colors, which allows for easy control to find the perfect size, and positioning. Just always make sure you have the proper layer selected before you start making edits! I’ve only made that mistake a few thousand times.

Static version

Setting the outlines takes care of most of the spatial calculations. From there, the fun of coloring and decorating your house can begin. When converting the outline areas into solid color fields, consider the light source, and luminous quality of the building materials to dictate the values. My light source is coming from the top right, providing warm glow to the brick walls, and a touch of shine to the freshly painted wooden roof. The strong directional light creates considerable contrast from the right facing side, to the left facing side of the house.

After the basic colors are established, drop shadows and highlighted edges are defined by the light source. Finally, subtle outlining and minor dithering smooths harsh cluster connections and gives the whole house a bit more pop. Ah, nothing like a cozy cottage in the isometric projection.

Final Thoughts

It always takes me a while to settle into the methods of making isometric pixel art when I haven’t done it in a while. Take your time, stay organized, stick with the process, and it will come together in joyous fashion. Some people find it helpful to work from a grid of isometric lines in the background. I made a custom grid once, but I find it sufficient to just have a single 2:1 guide line on a layer that I can use as a ruler to check alignments when needed.

While this is the 3rd Pixelblog to focus specifically on isometric pixel art, it’s my first one since I switched from Photoshop to Aseprite. I have to say, it’s much easier to drop those 2:1 lines in Aseprite with the live preview of the pencil tool when holding shift. The thought of animating isometric art still kind of terrifies me, but with Aseprite’s awesome animation tools, perhaps our next venture will come with motion!

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available in More Isometric Pixels Asset Pack

Source files used in the making of this Pixelblog are available in More Isometric Pixels Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter