Intro

The time has come for another venture into isometric pixel art. In this edition, I build out the concept for a turn-based tactical mech game, very much in the vein of the original Front Mission. Since this isn’t my first foray into the isometric style, or mecha designs, we are going to jump right into the heart of the action. So, if you are new to the subject, I suggest a review of my earlier studies in Pixeblog 4, and Pixelblog 41. With that out of the way, let’s start assembling a mecha battalion. By the end of the lesson we’ll have multiple types of mech units, and two different environment settings to stage glorious campaigns within.

Mech Units

I wouldn’t call myself a mech maniac, but I might be on my way with the many creations I’ve done on the subject over the years. While I have made a number of isometric mech designs, they have all been around 64x64px plus. Generally, lower resolution means less labor, but there is a learning curve to develop the imagination required to abstract details into few pixels that clearly communicate the intended depiction. Roughly working within 32x32px for this study, I had to overcome this challenge. Usually, I start by making simple geometric shapes, like cubes and spheres for the various parts. This method still works for the most part at this scale, but I had to omit parts and details that I normally include at a larger size. Until I actually referenced some Front Mission sprites I was struggling to fit all the components into the small space without just making a noisy blob. It’s like, oh, that hand is literally two pixels.

I found the best approach is to start with the body, and work your way out. Most of the defining characteristics are captured in the upper body. Treat the torso more like the front of a tank than a human chest, for a strong form that juts out further than the shoulders. Bulky shoulders, that often sit higher than the head express an imposing power. A sleek, low set head with only one or two brightly colored pixels to represent the optics feels practical, while giving just enough humanoid quality to capture a cool character.

The upper leg area is mostly unseen in the isometric view, and the groin unit can often be omitted. The entire leg, and foot can be designed as a single unit. However, don’t overlook the feet, as they are another prominently seen feature than can throw off the whole design if they don’t mesh well with the rest of the character. Think practical, and make them appear to offer a balanced area of stability, more like skis than regular feet. A straight up humanoid foot with no extra balancing protrusions looks awkward with the bulky style I’m going for. Rather, I look to shapes from animal anatomy, like talons, claws and hooves for distinct designs.

After creating all the parts, and arranging them into the complete unit, I then apply accent color stripes to areas that feel a little bare, and where they will enhance the shapes, rather than muddle with extra noise.

In terms of game design, the infantry unit is the basic all-rounder. Mobility, attack range, power and defense are all average. While decent in most situations, they are often outclassed in one on one situations, and should be moved in groups.

Following the same basic breakdown of components as the infantry, the artillery’s defining feature is a giant cannon merged with the head piece in exchange for a hand held weapon. Bulky legs, and elongated feet help balance the top-heavy design. Where the infantry unit uses more rounded shapes, the artillery is distinguished with sharp blocky shapes.

In terms of strategy, the artillery unit is high in range and attack power, low in mobility, and has average defense. Best to keep these at the rear of your battalion, where they can deal damage and remain invulnerable from most attacks. If you’re trying to take out an artillery, your best bet is to swarm it with multiple units, as you are sure to endure blows when closing the gap.

Threatening agility is evoked through sharp triangular shapes, and reverse jointed legs. Wielding a sword the fighter takes on opponents at close range with melee attacks. A pronounced groin piece connected to the body enhances the confident aura.

With high mobility, and attack strength, but low defense, the fighter is best used to pick off stragglers and make killing strikes to weakened units. If you’re going against a fighter you better make sure you can withstand a likely counter attack if you don’t finish it in one blow.

Environment

The 3D aspect of isometric projection lends to a great variety of tiles that can be layered into cohesive environments. To appropriately accommodate my mech sprites, the base tile unit is a cube that measures 32x32px. Since the top plane of the cube has 2px tall corners on the right and left ends of the diamond shape, adjacent tiles must be layered with consistent ordering to fit the textures flush, as the top row of pixels must be overlapped. This could be avoided by smashing the diamond down by 1 pixel, so those side corners are only 1px tall. I go through the trouble because I like the look of the wider corners, and cube shaped tiles have to be layered to some extend anyway. I know it’s confusing to explain, but if you play around with tiling these cube units it will make sense.

First. I made the basic dirt tile, then varied grass textures can be applied to the top, rather then duplicating the whole cube. Objects like the rock, and tree are also layered into base tiles.

The water tile is about half the height of the standard 32x32px cubes to make it naturally sit lower than the land, and create more interesting geometry to the landscape.

Put it all together and you can make quite a pleasing natural landscape. I imagine the trees, and rocks could be destroyed to convert the space into a traversable tile.

As for the water animation, the line texture on the top has one alternate version that only changes the placement of the highlights in the sub pixels. The entire texture moves down 1px each frame while alternating the highlights. The animation seamlessly loops over the course of 16 frames. Pretty easy, but if you want to see the concept illustrated more thoroughly with some extra effects, check out Micro Tutorial 7.

Next, we take the battle to the city. The gray cubes are used as a foundation layer to buildings, and/or a tiled ground texture. The brown cubes can be combined, layered, and stacked to create multi-storied buildings. The shallow, gray tiled texture works great for sidewalks, or just a variation of ground texture. The flat, dark tile represents asphalt texture for ground areas. Finally, the tank feature goes on top of buildings, which could contain, water, gas, or provide some other infrastructural function. Definitely cool if it’s a gas tank that can be destroyed, causing proximal damage.

A handful of simple textures turns into a sprawling city. I’m always amazed how much can be done with so few tiles. It’s worth taking the time to make the textures as balanced and pleasing as possible when used in repetition. I’ve spoken much on the principles of sound tile making, and repeating texture in past lessons, so I’ll just let the work speak for itself here.

Final Thoughts

I’ve been making tutorials for years, but with every feature, comes the assumption that it’s part of a game I’m making. I hate to disappoint, but the game ain’t real folks. It’s all for educational purposes, and the hope that I might spark the inspiration in someone to make a real game. We could definitely use more isometric pixel art turn-based strategy games with mechs. When it comes to actual gamedev, my wheelhouse for game design is more centered around shmups and arcade genres, but I do have a strong affinity for srpgs. My colleague and I have discussed the genre with great interest in concept pitching phases of development. Never say never!

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 Isometric Mecha Tactics Asset Pack

Source files used in the making of this Pixelblog are available in Isometric Mecha Tactics 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

INTRO

I’ve got so much going on with my content these days, I find it hard to sit down and just make original art that isn’t part of a series, a game asset, or tutorial. Yet, it’s so important to continue making art for art’s sake to stay connected to the deeper purpose of human expression, and grow technically, but more so spiritually. So without further ado, my first major piece of the year.

CONCEPT

It had been a while since I did anything outside the usual 'minis' series, and I was up for just about anything. As customary, I first scribbled a handful of thumbnail concepts to narrow the endless images scattering through my head. 

A figure on a rooftop, overlooking a ruined titan partially swallowed up in vegetation. The general idea and composition was there in the chatter. A return to a similar concept I had dabbled with in one of my favorite pieces from several years ago called Brain Spill, which you can still see gracing the banner art on several of my social sites. I was tickled to venture back to this surreal setting. 

PIXEL Start

In my first pixel iteration, I opted for a more natural setting, replacing the rooftop with cliffs, and removing buildings from the valley. I felt this puts more emphasis on the giant, and the contrast with the natural environment makes it more surreal and mysterious. 

I like the expression of the first version of the giant, but the movement and form wasn't quite flowing with the composition the way I wanted. I was using a reference I found online, and was struggling to adapt my own modifications. It's always good to use references, but I don't like to heavily rely on a publicly sourced image if it's a major feature in an original piece. Ultimately, I rigged my phone up on a shelve, set the camera on a timer, and modeled myself to capture the pose. Homemade references are more authentic, and featuring my likeness in the giant actually strengthens the concept. The aforementioned Brain Spill, was also something of a self portrait. 

From thereon, it was a mostly a grind with cluster work to gradually refine details. I went with a somewhat abstract style that prominently uses triangles, and simple shapes, while avoiding lots of tiny clusters, dithering, and heavy AA. I think the blend of flowing shapes, and sharp polygons balance each other in shared simplicity, forming a coherent style that gives just enough to read the implied depiction, while preserving the aesthetic of pure form.

COLOR

I started with a fairly natural color palette, but was sure it would change as I went along. Value is the important thing to establish early on, as it effects the forms and composition, while hues can be refined later on with less consequence, so long as you adjust for inherent changes in luminosity. About midway through I had around 24 colors, and I set the objective to narrow it down to 16. Partly, for the challenge, but also for the aesthetic value. 16 is a sweet spot for me. Just enough for about any problem while staying easy to manage. The subtracted colors were not missed. 

I scrutinized the palette extensively, and there are several more color iterations that are not included in the process video. Ultimately, I went with a more unnatural palette to play into the mysterious mood of the subject matter. As the view descends in the valley, the warm cliffs rapidly shift to cool desaturated hues, partly effected by the misty atmosphere, but there could also be a supernatural element at play, transforming perception in proximity to the giant. 

Process Time-lapse

Time spent is an interesting data point, but I don't like to think much about it while I'm in the process, so I can fully immerse myself in making the best art. Probably spent around 30 hours, from concept to finish. I enjoyed the problem solving, but it was not without some pain. Hope you like it!  

Final

Amnesic Valley

180x240px
16 colors
Aseprite

Support

If you found that valuable, helpful, or amusing, please consider supporting my work on Patreon. Get early access to diary post like this, download assets, and view many more exclusive contents.
Patreon
Donate
Shop

-Raymond Schlitter

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.

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

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

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

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

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

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

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

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

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

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.

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

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.

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

Intro

From first establishing basic proportions, It’s been a long journey to get these characters into fighting shape. We’ve put our patience and focus to the test, but now, we’re ready to step into some real action with flying fists and feet. Don’t let the excitement catch you off guard, we must maintain a disciplined approach to face this challenge straight.

Before getting into the nitty gritty, I must reiterate a disclaimer about the art direction of this anatomy series. While the underlying purpose is to gain proficiency in human anatomy, the animation style is dictated within the context of a hypothetical arcade action/beat em’ up game. Moreover, I’m building from real life references and combat sports principals, but filtering through an arcade game design lens in concern for gameplay and economy. I describe the style as hyper realism, which is much more akin to a Streets of Rage, than a Prince of Persia.

You have to learn to walk before you come out swinging. All of the following attacks flow out of the idle fighting stances established in the previous lesson. If you are new to this series, I recommend brushing up with the previous installments.

Human Anatomy
Walk Cycles
Idle Fighting Stance

Male Dummy Punches

JAB
Described as the most basic, yet most useful punch in the sport of boxing, the jab is the ultimate ice breaker when talking with fists. Based on the fighting stance, the lead hand fires straight forward from chin level, driving to the full extent of the arm with minor lean in and hip twist. This punch should strike quick without any wind up that can easily be telegraphed, and it should minimally compromise the fighting stance, so guard can instantly be recovered. A low risk/reward attack, good for leading combos, and creating openings for stronger strikes. With minimal input delay, it’s your safe button masher attack.


Smear: The first frame is the ‘smear’, which captures the velocity with abstract traces at the strongest point of motion. Keep colors simple in the smear for better legibility. The main key position of the striking pose is essentially achieved in the smear, less the actual smear. The front fist drives straight out from the shoulder, while the head drops 1 pixel. The front knee bends down 1 pixel and the back foot pivots out from the body. The torso leans forward 2 pixels at the groin, and more dramatically by 3 pixels at the chest level.

Hit: Further leans the entire body forward a few more pixels, subtly bending the front knee, and lifting the heel. Note the frame timing, displayed in milliseconds next to each frame. The hit frame is slightly longer to enhance the sense of impact.

Follow Through: The ‘follow through’ is almost the same as hit, but it extents the arm forward 1 more pixel from the shoulder pivot.

Recover: Shifts the legs nearly back to idle position with the punching arm bending back about half way to the idle position.

Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel to create an energetic snap back effect after every punch.

CROSS
The cross, or straight punch, drives out from the dominant hand for a more powerful attack. To garner more power, this punch includes a brief wind up relayed through the initial ‘pull’ and ‘load’ frames. While this creates a slight delay from input to impact, the risk is compensated with greater damage potential. I’d probably make it a combo finisher that automatically triggers after a couple jabs, rather than a stand alone input.

Load: Rolling out of the idle position, the animation starts with the ‘load’ frame, which raises both fists, and swings out the elbows like chicken wings, with a sharper degree on the punching arm. The knees slightly straighten to raise the entire figure from the knees up. The back heel subtly rotates the foot out from the body, foreshortening the foot with a 1 pixel shift in of the toes.

Pull: Nearly identical to load, except the punching forearm (defined by the bright green color) is pulled back 1 pixel.

Smear: The hips twist bringing the entire figure into a side profile view. The front knee bends and moves forward 4 pixels, while the back knee travels forward 9 pixels and down 6 pixels. The back heel dramatically lifts off the ground, place the foot at a 67.5 degree angle. The punching arm drives straight out to near full extend, while the head drops by 2 pixels. The back arm swings back, so the elbow can be seen jutting behind the torso.

Hit: The whole torso and front arm leans forward 1 more pixel while the back arm moves back 1 more pixels. The back knee and heel shift back 1 pixel, yet the ball of the foot stays planted.

Follow Through: Nearly identical to the hit frame, but the punching arm drives forward 1 more pixel from the shoulder pivot. The chest also rotates forward 1 pixel with sub pixel movement.

Recover: The back heel plants down on the ground, bringing the front knee back 3 pixels, and the back knee moves back 3 pixels and up 2 pixels. The torso shifts back and the hips rotate back about halfway to the idle stance. The punching arm pulls back in toward the body while the back arm moves forward, both about halfway to the idle position.

Overshoot: Very similar to the first frame of the idle, but the knees are shifted back 1 pixel, and the entire sprite is shifted back 1 pixel from the idle foot placement.

Female Dummy Kicks

FRONT KICK
The female fighter takes advantage of a lower center of gravity than her male counterpart, and comparative leg strength by utilizing fast ranged kicks. The front kick can easily be sprung from either leg, yet packs surprising power depending on execution. It’s performed by first raising the knee straight up - the higher the better. Many kicks in martial arts are prepared, or ‘chambered’ in this manner, as it puts the leg in position for a variety of strikes while maintaining centered balance. Once the knee reaches the apex, the foot is snapped straight out to the front.

Smear: To provide a quick basic attack with minimal delay, the animation snaps right into the leg snapped out in front, with the chambering only implied in the smear. From the idle stance, the hips twist, so the figure is seen from a side profile. The back leg is straightened and brought forward, raising the overall height 5 pixels from the first frame of the idle sequence. The arms are raised up, so the fist of the front arm goes the top of the head level, and the fist of the back arm is about shoulder level.

Hit: Very similar to the smear, but the smear effect is removed, the entire kicking leg moves forward 1 pixel from the hip pivot, and further straightens in form, raising the foot by 1 pixel. The back knee and hip slightly shifts forward by 1 pixel but the height doesn’t change. The momentum shifts the breast forward 1 pixel.

Follow Through: The front leg ripples back to the position of the smear frame, minus the smear. The back leg remains the same, but there is a slight depression in the buttocks. The front elbow is lowered 1 pixel, while the back arm is moved backward 1 pixel. The breast moves backward 1 pixel.

Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel.

ROUND KICK
The round kick garners more power than the front kick by utilizing more hip movement, and allows a higher strike point to knock foes right in the noggin. Paralleling the male’s cross punch, the round kick includes 2 prep frames to imply greater power. Also, it uses delay, screen shake, and a heavier hit effect to emphasize the thunder in those thighs.

Load: The first frame of chambering the kick moves the kicking leg and forward arm far from the idle position, warranting smears. Since the motion flows into the direction the kick will snap towards, the smear works well. However, if it were counter to the motion, as in the case of the load frame of the cross punch, the smear would detract from the motion. The knee moves straight up while the the foot curls in toward the body to increase the motion for it to spring out when the kick is delivered. The back leg is partially straightened, but still has a slight bend while the foot slightly rotates away from the body. The top of the head is raised 1 pixel from the first frame of the idle sequence.

Spring: The knee of the kicking leg is further raised, as the foot swings down in line with the knee. The supporting leg further straightens and rotates out from the body, raising everything from the hips up 2 pixels. The front arm raises up and begins to straight out while the back forearm slightly rotates up.

Smear: The kicking leg snaps out and upward, and the supporting leg pivots forward to a straight up position while rotating outward from the body, further foreshortening the foot. The hips twist into the kick, revealing most of the back and buttocks, while the whole torso pivots back about 45 degrees. The front arm straightens and extend outs parallel to the kicking leg. The back forearm maintains relative position while rotating back with the torso.

Hit: Very similar to the smear frame, but the whole body except the back forearm, leans forward 1 pixel from the pivot of the knee of the supporting leg. The hit effect starts on this frame.

Follow Through: The kicking leg bends inward and down 1 pixel from the pivot of the knee, while the foot slightly rotates downward. The back forearm moves back and down 1 pixel.

Recover: The hips twist back, bringing the whole figure into a side profile, while the torso rotates straight up. The front forearm rotates back, as the elbow remains raised up. The back arm swings up in a similar position, so both fist are about eye level. The kicking leg swings back down, and the knee lowers. The back leg bends backwards, and the foot rotates forward, bringing the back butt cheek back 6 pixels.

Overshoot: The overshoot frame is identical to the first frame of the idle, but shifted back 1 pixel.

Male Clothed Punches

Following the dummy animation, we suit up the figure with our good ol’ fisticuffs seeking salaryman. Much more than a palette swap, the physics applied to the details of the fabric and hair must be carefully considered. There’s not much more I can say than the tips I’ve given in previous lessons. Use references, go through the motions in front of a mirror and analyze the direction of the folds in the fabric. Try to add lively motion to the hair, and where the fabric hangs loosest. Keep details simple and focus on one area at a time, one frame at a time. Start with solid color and and motion of the main forms before the sub pixel animation. It’s better to preserve the legibility of the movement with minimal colors and details, than create complex details that cause jumbled noise when in motion. It will require trail and error to get satisfying results.

Pretty much the same story here. The suit is form fitting and doesn’t add much extra motion to the overall forms, but the sub pixel details greatly enhance the depth, and visualize movement that could only be implied in the dummy version. For example, the seams down the legs help illustrate the hip twist and rotation of the body into the punch. The hair flop adds character while increasing the sense of speed and impact.

Female Clothed Kicks

The skimpy form fitting dress of our femme fatale doesn’t require much detail in the way of folding fabric dynamics. However, special attention is given to the hair and skirt of the dress, which adds a surprising amount of expression over the dummy counter part. Also note how the high heels increase height and distort the shape of the feet.

Trial and error with a basic vision for the physics at hand is the primary method. I kinda just played around with the hair until it felt right. The way it flops down at the end of the kick, then flips back up in the recover is the key to the sell. Furthermore, It wasn’t until I made this version I realized how a little ass jiggle adds to the momentum. Pulling off these moves in high heels might be a bit fantastical, but surely a heel to the face could do some damage.

Final Thoughts

Raw talent for character animation is rare, and I'm no exception. If you’re struggling with the subject, I want you to know I am too. However, the wisdom gained from struggle provides the most enduring lessons. Looking back, I must acknowledge how far I’ve come, but not become overly proud in the competency I’ve developed, and continue pressing for improvement. Basically, I’m saying we all suck before we git gud. I hope my thorough approach provides some insight, and inspires you to take on the challenge of character animation. Afterall, you can’t learn this stuff through osmosis. Shall we continue the series? Jumping, aerial attacks, damage, death… so much is still on the table.

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 Punches and Kicks Asset Pack

Source files used in the making of this Pixelblog are available in Punches and Kicks 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

Intro

I arrange tiny squares on a digital canvas to make images called pixel art. Mechanically simple, but infinitely deep in intent, the human element is what legitimizes the pixels as art. I, a human being, thrust my intention with every choice made on the canvas, in an attempt to ascend myself and any willing viewers above the mundane, into the realm of sublime. However, intention alone won’t raise us from the mire of our sufferings, as beauty must propel the transcendence. While beauty is arguably subjective, I believe it has a fundamental quality, which directs us toward the divine, serving the ultimate truth and goodness. Indeed, a staircase to heaven, made out of pixels.

Pardon my pretentious philosophizing to justify my simple act in this world, but it’s important to contemplate the purpose of art, and man’s essential role as creators. Especially in the face of surging A.I. technologies, I’m disheartened to realize how few people appreciate, or even know what art is, as the masses gleefully amuse themselves with machine generated slop. How far are we willing to go for the sake of convenience? I concede, I’m reliant on the computer to facilitate the creation of my pixel art, yet there is still a considerable degree of labor required to transform a blank canvas into a coherent image, and mental anguish with every countless step along the way. I believe toil serves the art, and justifies the intention.

If a machine could instantly pull an image from my head, in spite of my intention, much of the art would be lost. Like taking a facsimile of a frame from the mind’s eye of a dream, I suspect the image would exhibit a predominance of vague distortions with peculiar areas of uncanny detail. Curious fascinations, but likely lacking in my definition of beauty. Automatically beautifying the image would grant the machine liberty to fill in any gaps that would be patched along the creative journey of human handy work. Therefore, diminishing human intention, and artfulness, no matter how pretty the result may be in objective design.

I wasn’t sure where this was going when I started writing this intro. Apparently, I’m not a fan of A.I., particularly in the world of art. I’ve done my best to ignore it’s presence, as I have no interest in its use, or products. However, it’s rapid permeation in all aspects of life have put weight on my heart. While it’s hard for me to see outside net negative, dystopian implications, I hold hope that its disruptive force can serve to awaken people to desire truth. It’s not a destination, but a quest we must endeavor through with the constant aim of achieving a higher good. As a lowly man with great propensity to sin, I humbly serve the quest through my authentic art. Now that I got that out of my system, how about some tangible goods to back up the word salad.

Inspiration

While I’m inclined to imaginary subjects and game inspired styles, a growing portion of my portfolio exhibits realistic landscape studies. I’ve done a fair bit of traveling in my past, witnessing the crystal blue waters of the Caribbean, mist filled verdant valleys of the Indian countryside, and the perfect chaos of far eastern metropolises, among many other highlights. However, nothing stirs my soul quite like my ol’ muse; the spirit hovering above the Kansas prairie. Modest, and seemingly unremarkable to the passerby, she requires you to slow down, and commit to her modest vistas before revealing her true grandeur. If you wait for the golden hour, that’s when she dances and dazzles with her crowning spectacle across the entire sky. Sure, the sun rises and falls across the world, but I’ve observed every place has unique characteristics in the nuance of color, texture, shape, and scope. Maybe it’s just because I can actually see the sky on the sparse, flat landscape, but I find nothing as epically inspiring, yet spiritually calming, as the Kansas sky.

Process

The process starts with finding the right scene to motivate me. Lately, the beautiful fall evening dog walks have been urging me to return to the subject. After a couple weeks of the daily routine, and snapping many photos, I sorted out the best shots. Funny enough, I ended up most drawn to a sunset from late July. I never seem to be timely with seasonal events. Maybe I’ll make a fall scene by next spring.

While I draw inspiration from several photos, and my feelings from the moment, I ultimately choose one image to reenvision in my pixel style. My goal is to marry realism with a human painterly quality, to form an image that speaks beyond the photographic source.

The main key to maintain a painterly quality is to observe the reference off to the side of the canvas to simulate the open air scenario of transferring observation into mark making. I advise to not directly paint over the reference, as it tends to result in a paint by number process that ends up looking more like a poorly down scaled photo than handmade pixel art. In contrast, separating the reference from the canvas engages the minds eye in order to make the jump. The idea is to capture the essence of the photo, but not every little detail. I’m still learning to trust my vision, and embellish more abstractions rather than obsess over precision.

This is my first realism piece since I switched from Photoshop to Aseprite. The setup is familiar, with my work window on the left hand, and my reference to the right. However, I do miss the ability to float out multiple file tabs. This allowed me to keep my reference visible in PS, so I could easily eye drop colors on the fly. Aseprite allows multiple file tabs, but as far as I know, only one can be viewed at once. Therefore, when I want to sample a new color, I have to click on the tab with my reference, sample the color, then click back into my work tab, while I use a separate image viewing app for the reference off to the side.

Canvas size significantly impacts the level of abstraction. Naturally, the smaller the canvas, the more abstraction, while the bigger the canvas, the more accurate the details can be made. Subject matter and desired detail should be considered when choosing a size. I like to work on a relatively small size, as obvious chonky pixels lend themselves to an abstract painterly look. On the other hand, a large canvas can obscure the pixels, diminishing the aesthetic of the medium.

For this piece, I went with a 320x180px canvas, which is on the large end of my scale. This size allows me capture the intricate textures in the clouds, and convincing leafy quality in the trees, yet the pixel clusters are still apparent.

EDITING

I edit the reference photo before I start pixeling. Usually, I up the saturation and vibrancy a bit to juice up the color. Nothing too extreme, just enough to give the pixels some life without pushing into the surreal. A color boost will also help prevent the low res photo look. Color correction is also preemptively done to my reference, as I color sample directly from the photo to form the palette.

Another edit I typically do is cropping, and sometimes distorting the image for my desired composition. In this case, I only cropped a portion of the photo to achieve a 16:9 ratio. The original composition was quite nice, but I wanted a wider format, and the crop eliminated labour without losing the most interesting clouds. However, I do miss the radiant light shooting above the clouds. I played with squishing the image, but any amount of uneven scaling appeared unsightly. An interesting vertical format was also possible, but I had my heart set on a wide format.

The last edit I do is scale down the entire image to closer match the size of the canvas I’ll be working on. This pixelates the image, giving me a better view of how to translate things into my own clusters, and saves me from stressing over unnecessary details. I only do this to a certain extent, as its good to scale some details with the imagination for the sake of unique clustering. In this case, I matched the 320x180px size of my canvas, as it still retained ample detail for the imagination to further simplify in my clusters.

BLOBBING

The first phase of pixeling I call blobbing. In this phase, I use the pencil tool with large round settings to blob out all the main shapes of the composition. I capture a rough overview of the entire composition before refining any small details. Unless the canvas is tiny, I rarely use the single pixel pencil setting in this phase.

I also establish the color palette in this phase. I’ll grab a color from the area of the reference that I intend to paint, then I blob with that color as far as I can until it feels like I need a new color. I repeat this pattern, scanning across the canvas until the entire area is filled, and all the basic shapes are established.

CLEANING

Once the basic composition is established with blobbing, I take a much more thorough pass over everything, cleaning up stray pixels, and better defining the rough shapes. I still make many checks with the reference to inform my shape making decisions, but I focus more on the quality of the clusters on my canvas. Many clusters will arrive at there final form in this phase.

POLISHING

The final hyper focused pass over, where I analyze every pixel to make sure the colors and cluster relationships are optimally defined. I check for consistency of details, so the image feels wholistic without any areas that feel unfinished, or areas that are overworked with unnecessary, or out of place details. I also check for any unsightly jagged connections, or pillowed shading. I want to achieve an overall consistent style in my cluster use, and detail level.

Cluster style is largely defined by the size, repetition, and common characteristics. For example, observe the relation of similar wavy/swirly shapes in the distance clouds, or the repeated small circles in the nearer dark clouds, which gives them a consistent puffy feel. Furthermore, I chose to use very little dithering, which is mostly in the trees to convey shape without using extra colors. This captures a leafy texture, and enhances depth by distinguishing them in the foreground. I also avoided anti-aliasing, and made sure to weed out anywhere I dabbled, opting for creative clustering and smooth color ramps.

Final Thoughts

With a roadmap supplied by nature, there isn’t much conceptual creativity involved beyond the initial photo taking and editing. However, there is a lot of potential for expressive creativity in the execution of the clustering, and handling of colors. The main challenge in a piece like this is patience, and persistence. Things happen quick in the blobbing phase, but the cleaning and polishing take exponentially more time. Unless you record the process, it starts to feel like you’ve been in the same state for hours. Before I had much experience with realistic pieces like this, I was easily discouraged, to the point of abandoning a few pieces. But these days, I find zen in the focus on pure technique. I estimate this one took around 25 hours. Some may say it just looks like a photo, and I may as well had a machine generate it. If no discernment for my handmade clusters, I rebuke with the journey of my process, and the intentions in my heart.

Thanks for coming by the studio!

-By Raymond Schlitter

Intro

Welcome back to another edition of my ongoing human anatomy series. In the pervious two entries (Pixelblogs 49, and 50), we covered basic male, female anatomy models, and walking animations. In this edition we take a detailed look at idle fighting stance animations. Calling them ‘idle’ animations makes it sound like there’s not much going on, however, a character’s idle loop is one of the most effective means of displaying personality, and bringing the sprite to life. Furthermore, minute changes from frame to frame amount to a surprisingly nuanced challenge. While small sprites can evoke expressive movement with few frames, larger sprites afford the pixels for smooth, hyper realistic motion, but require more frames to execute with satisfying results. In this lesson, I take my example sprites that encompass a size of 48x92px, and maximize fluidity of motion with a reasonably economic 8 frame idle loop.

While the main purpose of this series is to develop general proficiency with human anatomy, the underlying design perspective is driven by the concept of creating a 2D character action/beat em’ up game. Ultimately, I don’t know how far I’ll take this series, but it’s important to understand the foundation my design decisions come from, as we move more into the animation. Moreover, the goal is not rotoscoped realism, rather a stylized hyper realism within the context of action based gameplay.

Male Idle Fighting Stance

We start with the general pose of the color coded dummy based off the anatomy established in previous lessons. For the male character, I use a basic boxer’s stance to suit a character who will rely heavily on upper body strength with an arsenal of mostly punches. In this stance, the hands come up to protect the face while the neck scrunches down into the shoulders to further shield the vital head target. A soft bend in the knees keeps the fighter light on his feet, ready to quickly shift weight into a punch, or evade a strike.

Putting this pose in motion adds a gentle bounce to everything in a breath like up, down rhythm. Through the entire motion the initial pose is maintained while the force of gravity acts upon alert, yet relaxed pulsing muscles. Everything is anchored to the steady motion of the torso.

Frame 1 to 2: The Head and torso raise 1 pixel on account of the legs slightly straightening, which shifts the knees in 1 pixel. The shoulders, elbows, and outer fist raise by 2 pixels, while the inner fist raises by 4 pixels. Note the subtle shift in the forearm orientation, which is most apparent on the inner arm with the more pronounced fist movement.

Frame 2 to 3: The feet slightly bend raising the heels, which moves the entire body up 1 pixel, but nothing else changes in the pose. This is the greatest height the figure reaches through entire sequence.

Frame 3 to 4: The heels go back flat to the ground, dropping the torso, legs, and outer fist by 1 pixel, but the head stays at the same level. Shoulders, elbows, and the inner fist drop 2 pixels.

Frame 4 to 5: The knees bend, moving out 1 pixel, which moves the thighs, torso, head, shoulders, and elbows down by 1 pixel. The outer fist moves down 2 pixels, and the inner fist moves down 3 pixels. Note, the subtle change in the orientation of both forearms.

Frame 5 to 6: The knees continue to bend, moving out 1 more pixel, which moves the thighs, torso, head, shoulders, and elbows down by 1 pixel. Both fists move down by 2 pixels. Note, the subtle change to inner forearm orientation.

Frame 6 to 7: The bottom portion of the legs compress, dropping the knees, torso, head, shoulders, and elbows by 1 pixel. Both fists drop by 2 pixels. This is the lowest height the figures reaches through the entire sequence.

Frame 7 to 8: The bottom of the legs stretch back out, moving the entire body up 1 pixel, except the head remains at the same level.

Another detail to consider is the playback speed. Frames 1-4 play at 100 milliseconds/0.1 seconds, while frames 5-8 play faster at 50 milliseconds/0.05 seconds. This accentuates the force of gravity by speeding up the downward motion, and subtly slowing the motion at the max height of the bounce.

Adding clothes and design details to the dummy is more than just a color swap. While the suit is fairly form fitting, it hangs off the figure and slightly thickens the overall profile. You must consider the tension on the fabric imposed by the body position, and gravity in order to properly fit the clothing. Furthermore, the shoes thicken the feet, and raise the overall height by 1 pixel. The hair also slightly increases the overall height of the sprite.

When in motion, the fabric conforms to the figure, while making small sub movements in the wrinkles, and where it hangs loose. Additionally, the hair permits sub movements to further bring things to life. Capturing a natural feel to the flow of the fabric and hair definitely takes some trail and error. Part imagination, part reference study(mostly bouncing in front of a mirror), and a good dose of experimentation are required for satisfying results. I suggest starting with a form fitting design for the overall animation, then carefully work in the sub movements one area at a time.

Female Idle Fighting Stance

Moving on to the lady character, we take the same approach, starting with the pose of the dummy figure. For this character, I went with a karate stance to take advantage of the female’s lower center of gravity, and strong legs. From this posture she is poised to effectively strike with kicks, while defending attacks with clever spacing, and counter grapples.

The motion follows the same bouncing formula as the male, with subtle differences.

Frame 1 to 2: The outer knee shifts up and in 1 pixel, while the inner knee moves straight up one pixel. This moves the torso, breasts, and head up 1 pixel. Both arm units move up 2 pixels.

Frame 2 to 3: The feet bend, raising the heels off the ground, moving the entire body up 1 pixel.

Frame 3 to 4: The heels move back down flat on the ground. moving the torso and legs down 1 pixel. The head and breasts remain at the same level. The shoulders and elbows move down 2 pixels, but the hands only move down 1 pixel. Note the change in forearm orientation.

Frame 4 to 5: The outer knee moves out and down 1 pixel while the inner knee moves straight down 1 pixel. This moves the upper legs, torso, breasts, head, shoulders, and elbows down 1 pixel. The hands move down 2 pixels. Note the subtle shift of the forearms.

Frame 5 to 6: The outer knee moves out and down 1 more pixel. The inner knee moves down 1 pixel. Note, the compression movement in the legs. The lower legs, torso, head, shoulders, and elbows move down 1 pixel. The hands and breasts move down 2 pixels. Note the shift in orientation of the forearms.

Frames 6 to 7: A compression occurs in the lower legs moving the knees, legs, torso, head, shoulders, and elbows down 1 pixel. Note the subtle changes in the form of the legs. The hands and breasts move down 2 pixels. Note the shift in orientation of the forearms.

Frames 7 to 8: The lower legs decompress, moving the entire body up 1 pixel, except the head remains at the same level.

Same as the male, the frame timing plays at 100ms on frames 1 to 4, and 50ms on frames 5 to 8.

There is less fabric to go around on the female design, but there is a more dynamic contrast between the tight fit, and the loose portion at the bottom of the dress. Furthermore, there is obvious sub movement in the skirt area of the dress, and a subtle stretching of the outer shoulder strap, but everything else is skin tight. The high heels dramatically modify the feet shape and lift her height by 4 pixels. The hair jostles as she bounces to imply its relative lightness. Of course, jiggle physics are enabled.

Final Thoughts

I started this blog with the intention of including some simple melee animations as well. However, just breaking down the idle animation for for both models, along with the clothed designs, turned into a substantial amount of content. Moreover, it would be a waste to gloss over this crucial part of animated character design without a detailed explanation of the nuanced movement, as even a skilled visual learner may struggle to notice all the subtle changes between frames. I hope the information digests smoothly.

In the next edition, we’ll finally get to those melee animations. I’ve already started on multiple attacks for both characters. Stick with me, and do not fear the oncoming challenge. I’m on this journey with you, and we’ll be taking our time, so no one gets left behind.

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 Idle Fighting Stance Asset Pack

Source files used in the making of this Pixelblog are available in Idle FIghting Stance Resource Files

Get caught up on all my downloads

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

-By Raymond Schlitter

Intro

Made in the image of God, it’s in the nature of mankind to create, build, grow, and influence with the power of flesh, and the will of spirit. Within the digital realm, video games allow us to exercise these desires far beyond the limits of our earthly capacity. While all games contain some kind of god-like features, an entire genre emphasizes the overlord concept to such a degree, they’ve earned the moniker god-simulator. Among these games, I most enjoy the city builder type found in the early iterations of Sim-City. However, I never got deeply into the kind of games, for playing god is a stressful job. Nevertheless, I enjoy the creation aspect, and find great satisfaction witnessing a civilization flourish. You could describe much of my work as a practice in playing god, often featuring communal architecture from a top-down viewpoint. This has lead me to consider the compelling prospect of what a city builder game in my style might look like.

Top-Down Assets

Having spent most my life in Kansas, I approach the concept in terms of the typical mid-west city of the United States. Country style homes with lawns, wide roads, and a relatively flat, grid layout are key characteristics of these suburban getaways. From top to bottom, I present a couple houses, school, office building, and a church. The designs are classic idealizations for the sake of recognition and visual charm. More or less, they are colorful simplifications of real life counterparts in my neck of the woods. In reality, most roofing materials are dull browns, and grays. The modern school building is commonly a single story, tan brick prison, literally constructed by the same contractors who build the other kind of prison for convicted criminals. Multi-story office buildings are rare but do exist. The church is the most inspiring architecture, and probably the most accurate design, modeled after one of the many great limestone structures that grace these plains.

Moving on, I present more essential elements of any town of substance. From top to bottom, we have a post office, restaurant, courthouse, police station, and fire station. Again, they are somewhat cutified versions of irl counterparts, which check key characteristics to be easily recognizable.

As for the technical execution, I determine the size based on 16x16px grid units, which offers compatibility on a tile map with terrain tiles. The foundation of the area the structure will encompass adheres to 16x16px tiles, however I permit the height of the structure to slightly go beyond this foundation a few pixels at the top of the asset along the y-axis. This creates subtle overlap of other elements for a nice touch of depth. Note, that I do not break the foundation along the bottom or sides of the asset, as this will create conflicts with layering order.

The natural sequence of creation for me starts with the roof and works down, first establishing the basic structure. I then apply details like windows and doorways. Next, I apply drop shadows under eaves, in recessed areas, and anywhere that feels appropriate based on the light source. Then I add outlining to make the whole thing pop. Rather than use straight black outlines, I prefer subtle outlines that use a slightly darker color than the adjacent pixels. Finally, I flesh out the surrounding property and cast drop shadows on it. The size of the surrounding area is determined from the start based on a 16x16px grid.

Terrain Tiles

Before the city, there was frontier. Another aspect of city builders I find interesting is the prospecting, and razing of the land. Furthermore, I want to include that element in my concept, and provide a proper background around the boundaries of the city. Additionally, roads are necessary infrastructure to connect the city, and provide meaningful structure to the layout. Remember, this is modeled after an American city. Passenger trains are super rare, and god forbid someone walk or cycle to their destination, no matter how close it might be. Also, car pooling is for wussies.

Just covering some basic terrain here, but I can envision many variations for more dynamic environments. For example, mountains and water features could provide interesting challenges to build around. Seasonal changes and weather patterns could alter the appearance of the background, and practicality of building.

Notice there are several features presented in the city that are not broken down in tutorial format. The main principles are redundant, so If you can successfully create all the assets in the first two tutorials, I figure you should be on your way to creating whatever your city needs. Anyway, the additional assets are included in the asset pack linked at the end of the article.

Final Thoughts

After the technical subject of animating human figures in the past couple Pixelblogs, I needed to take a breather with my comfort food, which is low res top-down subjects. Especially architecture is cozy for me. But it’s not all fun and games. I did my research, considering essential features, and utilizing the most appropriate references. As usual, I made everything in context of practical game design, so the assets and concepts can be used to springboard a tangible game dev project. I hope you find the content useful, and enjoy the trip to Pixeltown, USA.

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 City Builder Asset Pack

Source files used in the making of this Pixelblog are available in City Builder 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

Intro

Welcome to my first Pixel Diary. The goal here is to provide a deep dive into my thought process behind the art. In this entry, I dig into the art presented in Pixelcast 47. The fast action of the timelapse is enthralling, but when the dust settles, many are still left wondering how the sausage is actually made. Particularly, on a cognitive level. Well, I’ll attempt to answer that question, as I retrace my thoughts from over 13 hours of pixeling. An attention span is required. Any hardy souls coming with me?

Concept

I came up with a vague plan, but wanted to keep it pretty open to spontaneity along the way. The vision swirling in my head was a zoomed out, top down view of a civilization that appears ancient, yet advanced. So, as I often do, I made some ambiguous doodles that leave much to interpretation. The numbers off to the side are from tallying up the time of the recording sessions. In case there is an issue with the recording, I average 30 minute bursts, so I don’t lose large chunks of footage. Over 13 hours in all!

The key elements I wanted to hit upon was a tower as a focal point, the implication of giants with a head on the tower or other body parts elsewhere, and a grand scale with a sense of depth. Definitely I'm influenced by my recent studies of scripture and ancient civilization. Furthermore, I wanted to make something that would fit into the world I'm developing for Death Vapor, which is about a civilization enveloped in sin and perverse technology. You'll see later in the process that I even reuse some assets from the game.  

Process

First, you'll notice things look a little different than my previous time lapses. Since I recently ditched Adobe products, I'm now maining Aseprite for most of my pixeling needs. I'm using the minimal dark theme by Fe to replicate the feel of workspaces I'm more used to. I know some people adore the default pixel font UI, but something about it throws me off. The palette I'm using is Bright Future.

I start the process with a 256x256px canvas. I didn't have a definite plan for the composition, so I start with a mid-size square canvas, which I can easily edit the size and proportions of as the vision forms. Even if I plan to make a large piece, I like to start on a smaller canvas, so I can establish style elements without getting overwhelmed. Style elements entail the color palette, perspective, and detail level of cluster work. It's good to have a rough idea for the composition from the start, but I usually establish these style elements before I get too involved with the comp. It depends on what you are trying to accomplish, a clear vision for the composition is more critical in something using realistic perspective, and dynamic figures. 

Furthermore, you can see I establish several style elements with the creation of the first building, then I step it up with the tower. At 4:51, after I pretty well developed the tower, I start to visualize the overall composition and surrounding structures with basic line art. At this point, I was thinking to fill the entire scene with buildings on one ground level with the minimal warm color palette. While this would give a lot of city details to look at, I thought the composition would be uninteresting, and too many similar elements would detract from the grandness of the tower. So, from about 5:00 to 6:00 my idea was to fill the bottom corner of the canvas with city and surround it with water. This would give a splash of complementary colors, but it wouldn't achieve the depth I was hoping for. 

6:03: at this moment I had it. Instead of surrounding the city with water, I would make it floating in the sky, and put water elements inside the city. To accommodate the vision, I first expand the comp to a vertical orientation to allow a good view of the sky layers and distant ground beyond. Most importune part of blobbing out the cloud layers and making the sky gradient is the colors. This is where I go off from the indexed palette most, creating more subtle steps in the gradient and cloud layers to achieve desired depth and sense of atmosphere. Generally, the colors become more more blue and desaturated as they recede into the background, while closer layers brighter and shifting towards yellow.  

7:04: After introducing the 45 degree angles to the structures the projection appears oblique, or also referred to as military projection, which meshes with the straight on top down buildings, but not so much with isometric. Hence the revision of the bridge here.  

7:48: My next ah ha moment- The head on the tower is just too bald, let's put a magnificent tree growing from the head, and fill the city with lovely vegetation. I hadn't thought of this in the sketches, as I originally was going for an oppressive vibe with everythign drenched in red light. However, after I introduced the sky background, the mood shifted to something more mysterious and wonderful. The vegetation helps blend together the juxtaposition of the red city on the blue background. I also wanted to elevate the tower for the sake of the composition without having to add to the structure.

I did a bit of off camera work on the tree and vegetation concept to work out the colors. I figured all that color sampling would result in indiscernible noise when sped up for the timelapse. However, I still want to mention it, so you know there is a thought process, and a lot of experimentation going on with color selection. I don't just magically have the final refined palette from the get go. Note, there are several color changes made throughout the entire process. I also made a subtle modification post recording, changing the dark wine color on the building to a more desaturated purple. I think this helped smooth out the color ramp and meshes better with the ambience of the sky background. 

8:41: Small comp adjustment to allow more of the garden area to be shown, and put the tower off center for more interesting overall spacial balance. 

9:23: Second pass at cloud details. This time i add a shade and highlight color to each layer. Colors have slightly less contrast with each layer into the background. I refined the shape and clusters with more precision. Using the circle shaped pencil tool, the circle sizes get smaller with each layer into the background to imply spacial depth. 

10:50: The comps still felt a little off due to the lack of details on the left hand side of the city. I first toy with running a bridge off the canvas, but that felt dull and actually weakened the comp. I settled with a waterfall spilling into oblivion of the depths, and intricate openings and platforms across the side of the city. 

11:21: I then move into a final pass of refinements and details across the entire city. Gateways for the main paths, various pillars and monoliths to fill in empty spaces, more openings, roofing elements, and brick details. 

12:57: The ruined city background I created for Death Vapor is exactly what I wanted for the distant ground layer. So, I straight up imported some sections, changes the colors, and made some minor edits to hide repetition. Ta-da! 

13:03: Final pass on cloud layers, polishing clusters and adding anti-aliasing to soften edges. This is nitty gritty stuff I find hard to put into words. Light source, the implied shape and texture, and a fair degree of subjective style all dictate the nature of the clustering. Just keep watching and you will notice a pattern.   

16:10: A fleet of airships suddenly emerges from the clouds! I wanted to try the idea, but wasn't sure if I'd end up including them, and the recording was getting super long at this point, so I worked out the concept off camera. At least. I show the creation of one ship to give you the gist. They ended up being an important element that ties the whole composition together. 

Conclusion

I love epic concepts like this, and I greatly enjoyed the challenge. Pretty much every piece I make, I have doubts somewhere in the middle of the process. This was no different, and I was especially uncertain about the composition right up to the end. I fiddled with the canvas size and position of the city off camera numerous times, but kept going back to what you see in the video. Through experience, I knew if I just stayed the course, things would eventually fall into place. Channeling a vision can be a wild ride, and sometimes I feel like I'm just along for the ride. I was enlightened by the depth of emotions that developed through the process. What started minimal in execution and breadth of expression, blossomed into something complex and ironic. There is a fearful element to the city and its potential denizens, yet it welcomes with its grandeur and gardens. The calming effect of viewing a sweeping natural vista from elevation is subtly undermined by ruined civilization below. Yeah, I've been in my own head for too long. Let me know you thoughts and observations. Still have questions? Let me know. Leave a comment here, or on Youtube.     

Thank you so much for going on this journey with me. If you are still reading you must be one of few. 

Support

I run a one man show, and content like this takes a great amount of time and effort. If you appreciate my work, please considering supporting me.
Patreon
Donate
Shop

Thank you!
-Raymond Schlitter

intro

After a thorough study of human anatomy using an 8 head model in Pixelblog 49, it’s time to walk the walk. This is not my first rodeo when it comes to animating a walk cycle, but these sprites are significantly larger than my typical work. While the size affords more details, labor increases exponentially as pixel art is scaled up. Size, details, and frame count must be carefully considered in terms of time cost when designing animated characters. This is especially true for game design, where it’s difficult to plan exactly how many unique actions, and subsequent frames are needed to effectively display the action in balance with the gameplay. Cosmetic details that may seem like a cool idea in a single static image can quickly become a pain when animating and expanding on mechanics. Moreover, while my characters are relatively large from what I am used to, I’ve remained conservative with details and overall frame count. Delibrately on the generic side, I present male and female side-view walking models that can be expanded on, and applied to a wide array of projects.

use References

My goal with this animation is to create a fairly realistic casual walk cycle with minimal cartoon embellishments. Therefore, I use real life video references to guide the sequence. If I had a treadmill I might go as far to record my own references. Anyhow, I was able to screen record a few sample references off the web, which I then edited in Photoshop in order to reduce it down to an 8 frame loop.

First, I open the raw video recording in Photoshop, and isolate a section in the timeline to capture a single walk cycle that loops. Then I export that section as a gif.

Next, I open that reference gif, and hand pick the best frames to meet my target of 8 frames. I feel 8 frames strikes a solid balance between economy and fluidity, but of course, you could extract more frames if your ambition is to create hyper smooth motion. In most pixel art game applications, I think anything beyond 8 frames is an aesthetic choice, and not necessary to function, or critical discernment in the eye of the audience.

The raw sliced section at 60fps results in 72 frames. Several frames are identical at such a high frame rate. Nope, not going to need all that.

After reducing to 8 key frames and adjusting the playback duration to maintain a natural speed, the final reference looks like this. The slumped posture and limited gate to the arm swing is not ideal to the character I had in mind, but still provides a good base. By comparing this with other references, and making my own embellishments, I can modify aspects to my own preferences.

Dummy template

To animate most efficiently, I always start my character drawing process with a simple color coded dummy to clearly define all the core parts of the whole. In this case of a full proportioned human, the breakdown includes head, neck, torso, arms, and legs. Of course, you can further granulize, but I feel that greater distinction at this scale begins to impede on the efficiency of animating.

Since I’ve already established the process of defining the form and proportions from the side-view in the previous Pixelblog, I jump right into the animation frames. 8 frames achieves the optimum fluid animation, while the 4 frame version highlights the most important key frames to capturing the essence of the motion, but feels somewhat lacking on it’s own. The 6 frame version strikes a nice middle ground by removing the least compromising frames for more economy, while remaining sufficiently fluid enough to stand on its own.

Observe the frames from left to right,
1. The first frame can be described as the contact point, where the left heel meets the ground, arms and legs are at the extremities of their swing, and the overall height of the figure is at its lowest point.
2. The second frame is the down point, as the left foot comes flat down to the ground and begins to shift back towards center, as the right foot lifts off the ground and begins to swing forward.
3. The third frame is the pass point, where the legs cross one another in the center, and is the point where the figure is tallest.
4. The fourth frame is the swing point, where the right leg makes it most dramatic movement forward, but remains off the ground.

The next four frames are more or less a mirror of the first four frames, with minor adjustment to account for implied perspective. Note, how the swing of the arms relates with the gate of the legs. The movements of appendages on opposite sides of the body track along with shared momentum.

Another important detail is the overall bobbing motion of the figure. Notice the position of the head across the sequence, which create a triangle shaped wave. This produces an appealing sense of energy that feels organic. On the other hand, If the head position across the sequence creates a perfect sine wave, the uniform motion feels a bit unnatural.

All the same principles apply to the female version, but take note of subtle nuances. The bone structure and curvature of the female figure lends itself to more graceful movement arcs. Of course, this is a generality, and every person, no matter the sex, has unique characteristics to his or her manner of locomotion. The most notable difference in my models can be seen in the arm swing. The female takes a fuller swing that moves all the way back past the hips, while the male’s arms have a relatively tighter course of motion. This gives the man an intentionally more stiff, business like character, and the woman is attributed with peppy elegance. Moving the breast down one pixel on the contact frame makes all the difference.

Clothed design

Time to put some clothes on these dummies.

A well fitted suit adds a slight bulk to the base figure. The most challenging detail is the dynamics of the folding lines in the fabric. Folding lines are determined by the implied tension caused by the body pose, and gravity. Make sure these lines have consistent tension anchor points and direction throughout all frames. Save the trouble, and keep the details of folding lines minimal.

Minimal, formfitting attire presents far less difficulty when animating. However, the high heels account for an altered foot shape, and slightly modified stride. Also, the asymmetrical dress with a slit over the left leg must be considered. Simply reflecting the sprite from right to left would be inaccurate. Technically, the breast pocket on the male is also asymmetrical, but far less noticeable.

Final Thoughts

Strolling, ambling, tip-toeing, shuffling, waddling, striding; considering all the numerous ways which we can describe the manner of human locomotion, one could study the subject endlessly. I’m thrilled to add a couple more walk sequences to the portfolio, but I think I would like to move on to some different actions if I continue to expand on this series. As I stated in the last Pixelblog, my goal is to create assets that could be utilized for a beat em’ up concept. That means punching, kicking, and jumping could be on the table. I might need a detour into another subject before I expand this series, but it kind of depends on the demand. Hit that like if you want to see more. Better yet, join my Patreon and download the assets for you own project.

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 Human Walk Cycle Asset Pack

Source files used in the making of this Pixelblog are available in Human Walk Cycle 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

intro

The ability to accurately depict humans is a high effort, high value skill. Although we all inhabit a body, and are capable of instantly recognizing people from the most subtle features, accurately conjuring our likeness on a canvas does not come easy. Even amongst skilled artists, very few can naturally depict the human form without extensive practice, and use of references. At least that’s what I tell myself, as someone who perpetually struggles in the department. I find the main issue is consistency. No matter how strong of a foundation I build, it instantly begins to rust and crumble if I don’t keep regular practice. Well, I’m overdue for a polishing again, and the catalogue could definitely use more content on the topic. If you are new to anatomy, you can stay right here, as we are going to build our way up from basic proportions, before attempting a more expressive pose. Class starts now!

Front View

First, we start with an analysis of human proportions from a frontal view. Going for realism, I’m using the conventional 8 head model, which is based on the average size of adult human bodies. Note, that both male and female use the same 8 head model, however, the head unit is just slightly smaller for the female version, resulting in an overall slightly shorter figure.

Back in Pixelblog 17, I introduced the 6 head model, which results in relatively stocky, doll-like proportions. Although not completely realistic, this shortened model works well to capture all pertinent details within a small sprite.

In order to depict all the basic details of the human form within the 8 head model, the sprites need to be fairly large. My 8 head male is 29x96px, vs 29x78px for the 6 head model. In both examples, sizing down much at all would require more abstraction, and omission of facial features. I suppose that’s why you rarely see realistically proportioned characters in 8-bit games, as devs more often opted for expressive chibi style characters that are all eyes and head, with itty bitty legs. Moreover, the super deformed characters also economize animation. However, smaller is not always easier. With few pixels to work with, a keen sense of abstraction is needed to capture the essence of a thing with clarity. On the other hand, a large canvas permits more details, but requires more labor to flesh out. I lean towards the smaller, abstract side of things, as that’s where the magic of pixel art occurs.

Side View

I find the side view a bit easier than the front, as there is only one arm and leg to deal with. In both versions, I start with the head and work my way down the chart with the aid of references. Of course, I use many references with much of my art, especially anatomy. Sometimes I start with a simple skeletal wireframe to capture the overall form and gesture of the figure, which you can see in practice in Pixelblog 17. However, after developing more competence with the subject I feel comfortable jumping right into solid forms at this scale. If the sprites where any larger, I think I might want to wireframe first.

Before developing details, the goal is to perfect the proportions with a sort of crash test dummy that has color coded body parts. Take it one segment at a time, one body part at time, while making many checks in relation to other body parts. Visualize imaginary lines running through the various parts, and you will notice many consistent spacial relationships. For example, elbows and belly button meeting on same level, wrists meet with the groin.

Once the dummy is complete, you can have fun playing with fashion and hairstyles, while converting the dummy to consistent flesh tones. I stuck with fairly tight, form fitting outfits to not overshadow the fundamental anatomy. Also, loose fitting fabrics, and folding dynamics present a whole new lesson for another blog. For now, you can begin to glean the tendencies of the fabric by observing and attempting to recreate these characters.

Action Pose

Now that we have our 8 head model established from multiple viewpoints, it’s time try out a more expressive pose. Easier said than done. One must consider how perspective, posture, and clothing items can distort proportions. Even with the long build up of establishing proportions, I feel blind without tons of references. Use references! No shame in straight up copying until you develop a more natural sense for things. It’s a staple of my blog to provide valuable pixel art specific references. I’m dazzled to see people grasp the fundamentals of my tutorials while creating a unique interpretation, however, much can be gained from 1 to 1 recreation.

Final Thoughts

This was a good exercise to reestablish anatomy skills with a realistic model, but I have much more ambitious goals. Truth is, I wanted to create tutorials that would be helpful for creating assets for a beat em’ up, but I found it overwhelming to jump right into animating large realistic sprites without laying some ground work first. So, now that we’ve established a good feel for the 8 head model, and have some basic characters designs, I think we’re prime to start tackling animations in a follow up feature. Eventually, we’ll have all the elements of a full blown beat em’ up on our hands. Better stay loose, and keep up the practice, or the rust will set in again.

RESOURCES

Please consider supporting my work by becoming a Patron

Many of my popular assets are 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 Realistic Human Anatomy Asset Pack

Source files used in the making of this Pixelblog are available in Realistic Anatomy 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

Intro

Throughout all of history, man has inevitably engaged in war, over and over again. With little signs the plot will ever change, we find ways to cope with our intrinsic darkness. One silver lining I can find is the inventiveness bore from conflict. While evil in purpose, the drive of battle has resulted in many technological marvels. Like most boys, I found great appeal in machines of warfare. Guns, tanks, jets, and the glory of victory, how could I resist? As an adult, I acknowledge the grim reality behind the tools of war, but I can still admire the ingenuity and design aspects involved. Thankfully, through the magic of video games, we can celebrate weapons of war guilt free. Furthermore, war themed games are disturbingly popular, and come in many genres. When it comes to the aesthetics and logistics of pixel art, my mind goes to the shmup as a natural fit to showcase implements of war in exciting action. However, the following top down assets could just as easily find a home in a strategy, or role playing game. So, strap in for an epic campaign that will provide a plethora of top down military sprites, and a detailed desert city environment.

Fighter Jets

I have fond memories rolling around in the mud and pretending to fight Soviets with plastic guns. It was the cold war era after all. While I would eventually grow out of my days of pretend combat, my interest in the paraphernalia that surrounds it would endure. Particularly, military aircraft and their role in the evolution of aviation perpetually fascinates me. From the fabric covered bi-planes of the early 20th century, to the faster than sound jets of modern day, I find it hard to pick a favorite era.

Ultimately, I decided to focus on 4th gen fighter jets. Popularized through film and video games, this era includes some of the most famous designs. Personally, my love for these birds has mostly been fostered from playing the Ace Combat series over the years. However, we aren’t making a 3D flight sim here.

Sticking with low res, the largest sprite is only 25x36px The angular shapes and sleek lines translate nicely into pixel art with little compromise in accuracy with the irl counterparts. I also considered proportions, and the relative sizes of the sprites are informed by actual specs. All sprites only use 6 to 7 colors. The Thrust animation is only 2 frames playing at 0.05 seconds per frame. The drop shadows are made by copying the sprite, reducing scale by 50% and making it solid color. Surprisingly, even at this reduced size each ship has a distinguished silhouette.

In terms of shmup design, these jets are intended to be the player character and are oriented upwards for the vertical scrolling gameplay. You could flip them so they are pointing downward and use them as enemy units, however, the subtly skewed 3/4 top down projection will look odd when reflected. Modify as needed. Which bird you taking up?

Tanks and Helicopters

Choose your death box.

Formidable in their own right, but mere cannon fodder in the face of a fighter jet, these tanks and choppers are intended to be enemy sprites coming down the screen. Again, you could reflect them to point upward, but they will need to be modified to look right.

The largest helicopter sprite is 29x31px including blades. Each sprite only contains 5 to 6 colors. The blade animation contains 4 frames playing at 0.05 seconds per frame. After making the first blade, duplicate, and rotate in 22.5 degree increments for rough versions of the next 3 frames, then polish. Alternatively, you could make the base frame’s contour a perfect symmetrical circle, and rotate duplicates before squishing y plane down a bit on all frames to suit the 3/4 projection. This economic, yet lively motion allows choppers to fly around in all directions with convincing grace.

If I were making a game, I would take the tanks a step further and make the turret a separate layer with at least 8 directions to swivel. Also, it seems a trope to be able to blow off the turret first, before destroying the disabled tank husk.

Desert City

Top down sand dunes make a pleasing texture, and the vastness of the desert captures an appropriately epic stage for the action.

I’ve constructed a desert city environment using 16x16px tiles and only 13 colors. By layering the building tiles, countless formations of vary height and density can be made, Note, the dark bars on the bottom left are drop shadows to place around the buildings. I was able to construct the example environment with only 3 layers.
1. Buildings_2
2. Buildings_1
3. Sand

If you are new to tiles, start here Pixelblog 20

Final Thoughts

We’ve got ourselves a handful of sprites and a basic environment. It’s a good start to many game ideas, but if I were to make the shmup in my head there’s so much to expand on. I already mentioned how I would like to make the tank turrets swivel. The tanks could also have different directions so they can turn and move in all directions. Another essential component is adding roll animation to the jets so they actually tilt when you move left and right across the screen. And we haven’t even got to projectiles and explosion effects. With that said, we may have to pull for a sequel. In the meantime, please check out Pixelblog 31-32 for more on shmup design, and universal assets that could easily be adapted into the military theme.

RESOURCES

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can access resources to compliment my tutorials. But most importantly, you allow me to continue making new content! 

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

Assets featured in this Pixelblog are available in Military Shmup Asset Pack

Source files used in the making of this Pixelblog are available in Military Shmup 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

Intro

In the beginning, pixel art was a practical choice necessitated by technical limitations. Color count, sprite size, animation frames, and layers were all severely limited, if possible at all. Thus, the aesthetic would be defined by economic characteristics. Nowadays, with relatively unlimited computing power, how could it be that pixel art not only lives on, but thrives? Part of the appeal stems from the economy of production, however, I would argue the limitations create design barriers that can require arduous solutions to overcome. In other words, pixel art is not the easy choice. Therefore, it mostly boils down to an aesthetic choice. Sure, nostalgia plays a role for some, but the perpetual love for pixel art has more to do with its intrinsic properties as a visual medium. At its heart, and what I’ve made core to my philosophy on the medium is- the beauty of pixel art comes from the lack of information. The missing details forces the audience to engage their imagination to fill in the gaps, making the experience more personal, and authentic. It’s the same reason why the movie never lives up to the book. Without engagement, it’s just pixels on a screen, or words on a page, but when the human imagination lights up, perfection!

As one becomes more proficient in pixel art, the tendency is to do too much for the viewer, ever pushing for greater details. Continuous improvement through increasing challenge is vital to any artist’s journey, however, to preserve the interactive magic of pixel art, one must strike a balance between necessary information and implied details. As the level of resolution and detail increases, the agency of the audience decreases. At a certain point, it becomes digital illustration when the pixels become irrelevant, and we are all unmistakably seeing the same image. While I greatly admire digital illustration, it seems a waste to achieve it through a pixel art process. The struggle to keep pixel art looking like pixel art is real.

Once in a while, we all need to get back to basics to restore clarity. To stay true to the medium, I’ve cranked down the res for a fun romp in the blocks. Based on an 8x8px tile map, I present a variety of tiny assets that welcome beginners, and remind the pros the joys of simplicity.

Environment

From here on out, the learning comes through visual exploration, and going through the motions presented in the tutorials. For the last several Pixelblogs I’ve designed my tutorials with minimal text baked in the design. Firstly, the pixel font does not read well in text blocks, but most importantly, I want them to be universal by showing without telling. While here in the blog I supplement the gab to provide greater clarity and insight.

All of my previous tile design content is made with 16x16px tiles. 8x8px tiles always seemed too small for the vision I had in mind, but I never gave it a fair shot. Upon this exercise, I’m surprised at how much can be conveyed in such a small space. I can pretty much translate my 16x16px designs with little compromise. Of course, everything becomes quite chonky, especially if made into a full widescreen mock-up. If I were to create a game in this style I would probably go with a classic 4:3 ratio windowed play area, and build a creative UI around the margins. Perhaps a mock-up is due for a future update.

Similar to some of my previous tile concepts, I’ve implemented a layered approach where drop shadows are applied separately, and several tiles can be combined for variation. In some instances I bake the shadow into the asset where the space within the tile permits. The following is the layer order in the above example.

7. Cliffs 2
6. Shadows 2
5. Cliffs 1
4. Trees & Rocks
3. Shadows 1
2. Grass
1. Dirt

Hero

Again, with character sprites, smaller doesn’t necessarily mean less. While many details must be compromised in contrast to my typical 16x32px sprites, everything is there for basic readability. What’s more, the sense of wonder is peaked by the lack detail. It’s clearly a human figure with shoulder pads and flaming red hair, but who this character really is comes from your imagination. In this sense, I find it more novel and compelling than a hyper realistic 3D model rendered in the most advanced game engine.

Much of the expression comes through in the animation. Furthermore, The efficiency of production permits for greater exploration with relatively little effort. Although it’s easy to make many animation frames, the main drawback is there just isn’t many pixels to show the movement. With the minimum of one pixel of movement per frame, just a few frames encompasses a full stride. Fortunately, it’s all you really need. Shift one or two pixels and boom, a turn of the head, or change of posture.

Enemies

Now for the baddies. Not much to add here in regards to the tiny sprites. For larger characters, both the design and animation can be simplified by breaking it into pieces that can be layered and moved individually. Give it a try!

Final Thoughts

Have you ever felt unsatisfied with the outcome of an artwork, compared to the sketch? Whenever I experience this, it’s usually the fault of overthinking, and overdoing the details. Somewhere, several hours ago I should have put on the brakes, but I just kept massaging the clusters until the magic of the unknown was no more. Whenever I start to veer off the less is more path, of which I believe makes pixel art so endearing, I actually look back at my earlier works to find inspiration. I think, wow, I had the formula figured out and I wasn’t even aware. In my opinion, much of the best art comes from a place of naivety, which intrinsically carries authenticity with it. So how can we maintain that authenticity as our skill grows? Well, it’s a struggle that often gets confounded with comparison. I harken back to the early days, and the simple creations made without any social pressure. To reset my current habits I reconnect to those times with self imposed limitations. For example, keep it tiny.

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can access resources to compliment my tutorials. But most importantly, you allow me to continue making new content! 

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

Assets featured in this Pixelblog are available in Tiny Pixel Asset Pack

Source files used in the making of this PIxelblog are available in Tiny 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

intro

Our story starts in 1991. Out of nowhere, my two older brothers come home with the newly released Super Nintendo. When I first saw the box, my excitement dampened nearly to anger. Like any healthy 8 year old boy, I was ready to move on from the the kiddy Mario brand, to the blood and guts offered by Sega. However, I was quickly convinced they made the right decision when I discovered F-Zero, which was also brought home that day, along with U.N. Squadron, and the pack-in Super Mario World. You’d never believe it, but the console came with 2 controllers and a game. And that was expected back then. Of all that goodness, F-Zero made the biggest impression with its striking mode 7 graphics, and astounding music. Ultimately, this day would go down as one of my best gaming memories.

Jump to 1995. My friends’ interests are moving on to sports and girls, but I’m committed to this gaming stuff. I’m saving my own allowance, so I can get the new Sony Playstation on day 1. The launch would not disappoint. Toshinden was fun, but the pack-in demo disc had me in awe of the potential of the console. Of those demos, Wipeout was most impressive. Again, another anti-gravity racer pushing the envelope on the stage of new tech. When I finally got the full game, I was in ag racing heaven. The music sounded too cool to be coming out of a video game. One of the most remarkable aspects of the game was the graphic design created by the British studio Designers Republic. It was so fresh, and immersed me in the world with no need for in game narrative.

Jump to today. Looking at my occupation and interests, I realize how great the influence of these games has been on me. My love for Wipeout runs especially deep, and I have enjoyed the series over the years. Recently obsessed with the psx era titles, my inspiration has been renewed. As much as I’d love to make an ag racing game, pixel art doesn’t lend itself well to the genre. But that can’t stop me from making a pure art expression for my love of ag racing. Take a lap with me. By the end of the course you’ll have all the tools to create your own ag racing scene with parallax animation.

Hovercrafts

First things first, show me the hovercrafts. Not veering too far from my points of inspiration, these crafts may appear vaguely familiar. It’s fun to think about the manufacturer’s philosophy, performance aspects, and how they might inform the design. Keeping things basic, Delta is the all-rounder. Omni has good acceleration and handling but low top speed, while Mega is the inverse. Well, that’s how I imagine it, but love to see someone come up with more extreme designs.

I break down the main components of the craft in outline form. This can help simplify the design, and get something going fast without worrying about color palette. However, I typically have a palette in mind and jump straight to solid forms, as I find the outlines can complicate the coloring process. I feel I’m in the minority on this, so don’t let me dissuade you from outline sketching if it works for you.

For size reference of each craft, not including thrust trail.
Delta 46x25px
Omni 33x24px
Mega 59x21px

Marble Architecture

Equally important to the hovercrafts, any good ag racing fiction should be rich in world building, largely established by the race-side scenery. Some circuits feature outlandish sci-fi backdrops, while others represent a more believable vision of the future. Much like old school Wipeout, I tend to favor the latter vision with grounded elements that show a world not so distant from our own history. Furthermore, I went with the timeless aesthetic of Greek/Roman marble architecture. Combined with subtle hints of advanced technology, the style continues the spirit of olympic level competition into the future. I suppose you call this aesthetic marble punk. I love the atmosphere of this style and will definitely want to develop the vision more.

Note the building and temple are intended to be on the same plane, however the the darkest color and pink highlights are omitted from the tower to appear more distant.

Building 50x52px
Temple 75x72px
Tower 30x64px

Natural Scenery

Well, we need a base environment to place things. Further driving the retro future Roman theme, I stuck with a simple natural landscape with proper italian cypress trees.

Understanding of atmospheric perspective is crucial to selecting the best colors to achieve depth in your landscapes. If you are not familiar with the concept you might want to take a detour to Pixelblog 11, for a jump start on landscape painting.

The approach for both the clouds and tree is the same. Rough shape, refine shape, shade with rough clustering, refine clusters. Admittingly, that last step is somewhat “draw the rest of the fucking owl”, but there’s no way around it. Get in there!

Small cloud 96x26px
Large cloud 144x37px

Parallax layers

With all assets complete we can create a parallax animation using my perfect loop technique detailed in Pixelblog 23. Understanding of that particular method will help make sense of the following breakdown.

In a nutshell, the parallax scrolling effect is created by making objects that appear closer to the viewer move faster, while the distant objects move slower. In order to do this, I make several layers of various length and drag them across the scene within a set number of frames. To make it loop perfectly the movement rate per frame must evenly divide with the canvas dimension along the axis of movement. Furthermore, the possible smooth movement rates are determined by the canvas. Choose dimensions wisely.

Here’s the breakdown of the above scene.
Canvas - 192x96px
Frames - 192 frames played at 0.05 per frame
Layers - 9 layers of different movement speed.

The following layers are listed from nearest/fastest to most distant/slowest.
1. racetrack foreground - 32 (pixels moved per frame)
2. racetrack - 24
3. Trees - 16
4. ground + buildings - 6
5. highway - 4
6. ground + buildings - 3
7. ground - 2
8. clouds - 1
9. clouds - 0.5 (moves 1px every 2 frames)

Final Thoughts

You’ve reached the finish line. I hope you enjoyed that as much as I did. While this installment doesn’t introduce any concepts I haven’t touched on before, the amalgamation expands on the possibilities with a showcase of earnest art.

As much as I enjoy designing pixel art in the context of practical game application, nothing is quite as satisfying as making unfettered pure art. But I still can’t help fantasying about the possibility of games. I’m not really into the manager genre, but ag racing would be the best theme to adapt, just for all the rad graphic design potential. No matter, useful assets in here for all types of applications.

While pixel art is often thought of as a medium restricted to low budget video games, it has the power to transcend to the sublime just as well as any respected medium. Nearing a decade of pixel art experience, it’s been exciting to see the evolution of the medium and rise in popularity. Now, more than ever, I’m inspired by what I’m seeing in the pixel art community. I can only hope to contribute to the momentum.

RESOURCES

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can access resources to compliment my tutorials. But most importantly, you allow me to continue making new content! 

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

Assets featured in this Pixelblog are available in Anti-Gravity Racers Asset Pack

Source files used in the making of this Pixelblog are available in Anti-Gravity Racers 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