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 Assets 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