A top-down game consists of a game with a camera angle that shows players and the areas around them from above.
This unique perspective is common among 2D role playing video games (RPGs), war games, and construction/management simulation games.
This post is an overview of different styles, mechanics, and animations for designing pixel art sprites for a top-down game.
We discuss limitations for sprites at different resolutions and some common strategies and examples of sprites and animations π
Top-down game mechanics
Top-down games usually feature sprite with low resolutions (between 8 and 32 pixels height, usually 8/16/24/32).
A smaller sprite leaves more room for showing the world around the player. This aspect is important in top-down games, where the emphasis is usually directed towards exploration.
Originally top-down movement was completely grid based, meaning that the player could only move one tile at the time in 4 directions (up/down/left/right).
This was the case for the first pokemon games: you were only allowed to move in 4 directions, one tile at the time.
Example gameplay from Pokemon Blue: the player can only move one tile at the time in the 4 directions. All the game is built with a 16x16 tile sheet, the player sprite included.
It is now common to find top-down games with free movement in 8 directions, without constraining the player into a grid.
A game with free movement in 8 directions gives more freedom when designing the character sprite, which is no more required to conform to the same size of the tiles around it.
Top-down game sprite
As an example, let's analyze the main character sprite from Pokemon Diamond/Pearl:
Front-view of the main character sprite of Pokemon Diamond/Pearl
The full sprite resolution is 14x19 pixels. At this low resolution a lot of space is reserved for the head, with a total of 13 pixel height.
The light is coming directly from the top: the top of the hat has a lighter shade of red, while the lower part and the sides are darker.
A similar shadow effect can be seen also on the face (darker shades on the lower part) and on the shirt (darker shades below the head, since the head casts a shadow below it).
With so few pixels, it's common to shade also the outline of the sprite. The top of the hat and the hands have a lighter outline color since they are hit directly by the light. This effect also helps to give more emphasis to certain details in a smaller sprite.
Different examples of character sprites from Pokemon
Since the resolution is small, it is relatively easy to design different variations for a top-down sprite:
For smaller resolutions the proportions of the sprites are similar. The difference is in the details: colors, eyes, outline, clothes, accessories
The total height is the same, but each character has a unique personality.
By giving more emphasis to different details (head, face, eyes, physique, outline, colors, shading) it's possible to design multiple characters within similar constraints.
Top-down and Platformer sprites
The difference between a top-down and a platformer sprite is the direction in which the character is facing.
In a top-down sprite we see more the top of the head of the character. This perspective is emphasized even more by adding lighter shades on the top of the character, and darker shades below the head and near the bottom of the legs and feet.
Another common feature is a less prominent face, with the eyes shifted more toward the bottom of the head to show that the character is facing "forward".
A platformer sprite instead is more front-facing: you can clearly see the face of the character since he is usually facing the camera directly.
There is also a lot more freedom when shading the character, depending on the source of the light.
Note: It's possible to give also a more front-facing view to a top-down character.
A lot depends on the art style of the game and the emphasis that you want to give to the character compared to the environment.
Example of a platformer character sprite, which could also be used for a top-down game
There is more π€©
Timeless coding principles, practices, and tools that make a difference, regardless of your language or framework, delivered in your inbox every week.
Top-down animations
The most basic top-down character animation set consists of 3 animations:
- Walk down (looking at the front of the character)
- Walk up (looking at the back of the character)
- Side walk
Note: One side walking animation is enough, since it can be flipped horizontally for both left and right walking
Walking animation set for a Pokemon sprite, with 3 frames for each animation
For each of these animations, a minium of 3 frames are needed:
- Idle (default position)
- Right leg step, and left leg hidden
- Left leg step, and right leg hidden
Template for a character walking animation. Notice how arms and legs move back and forth to give the impression of a natural walking step
You can make the animation more interesting by adding a bouncing effect to the character, by shifting the whole body up and down at each step
At smaller resolutions (8/16 pixels height) there is not much room for experimenting with different animations. For this reason, it is possible to find pre-made animation sets for all these basic animations.
Example of walking animation from the original Pokemon game character, with and without colors
You can instead play with the details by adding extra effects. Let's discuss some of the most common and effective strategies to give more personality to the movement of your character π
Top-down movement details
In this section we explore some common strategies to make your top-down character movements stand out.
Idle animation
It's always a good idea to design an idle animation for your main player.
An idle animation consists in a subtle movement even when the player is standing still.
A idle animation helps to make the character alive. It conveys the impression that the character is always ready to move.
Hair, accessories, and clothes animations
Making a simple walking animation more interesting requires taking care of many details. In fact, walking is not just about moving one leg in front of the other.
You can experiment with animating also other parts of the body.
You can for example show the hairs flowing and bouncing as the character moves. You can also play with light and shadow by showing reflections moving on the character clothes and accessories.
Shadow
Many details in top-down games aim to give a sense of perspective and depth in a 2D space.
A great way to give more depth to objects and players is shadows:
Notice how the shadows below the player and around objects give a more 3D look to a 2D game
In this image taken from Pokemon you can notice how a rounded shadow is displayed below both the player and his pokemon.
Shadows are also applied to objects all around. These details give the impression of 3D on a 2D canvas. It also makes solid objects clear to understand, giving the player a good sense of the level boundaries.
Furthermore, this sense of depth also makes collisions more predictable and satisfying, since we can clearly tell that an object has a 3D shape, and therefore a collision is bound to happen.
The shadow can also be animated to show the character moving up and down as he walks. This effect gives the impression that the player is actually a solid object instead of an object that slides on the ground.
Particles
A common strategy to make movements more interesting and satisfying is adding particles.
One example is leaving some dirt behind the player as he walks or while landing after a jump. Even better, you could add a different particle effect and color based on the terrain where the player is walking.
There is more π€©
Timeless coding principles, practices, and tools that make a difference, regardless of your language or framework, delivered in your inbox every week.
Other top-down animations
Walking is probably not the only animation your character is going to perform.
Some other examples of top-down animations are:
- Running: Similar to walking, it requires a faster movement and more particles
- Swimming: It's important to consider the water tiles and the interaction of the player with the water. Adding some ripple effect is a must-have for a swimming animation.
- Pick up: Many games feature some way of collecting items and picking up objects. Adding an animation when the character interacts with objects makes the action way more satisfying.
- Jumping: Way less common in top-down games compared with platformers. For a convincing jumping animation you can play with the character's shadow, making it smaller while the characer is in mid-air.
- Riding: A whole new set of animations can also be added as the character interacts with ridable objects (bike, motorbike, cars). The pokemon biking animation is a good example: it achieves a convincing riding movement is 3 simple frames.
Example of bike riding animation from the Pokemon game
The animations required for a sprite depends on the specifics of each game. Some games also require some unique animations for casting spells or special attacks
This is it!
In this post we saw an overview of pixel art sprites and animations for top-down games. We discussed styles and limitations for different resolutions. We then listed some common strategies and examples of animations.
You can use this overview as a reference when designing your own top-down game.
If you are interested in more content about gamed development and pixel art you can subscribe to my newsletter here below π
Thanks for reading