A minimal template for 2D side-scroller sprites
I am in a search for a good base specification for creating sprites for a 2D side scroller. What’s a minimal scope that can still keep a good look and feel? One of the best places to look for a solution is the games done for the NES and SNES. The hardware of those consoles had plenty of limitations on the size of the images they could draw, so the game designers at that time needed to make good use of the available resources.
What I’m looking for is the sweet spot of a low pixel count used smartly to convey information. Which resolution should I use for my tiles and characters? What is the best size to draw then? The bigger the dimensions, the more details the character will have, but at the same time the more work it will be to draw it. But before we take a look at how those games used to draw their characters, let’s review what sprites and tile-maps are.
Sprites and tile-maps
In video games, a sprite is a 2D object—a game item or character—that can be independently moved around the screen. Sprites can be animated by changing its image over time, so that a character can look like it’s walking, jumping, fighting, and others. The game screen is the result of composing multiple sprites and backgrounds according to the current state of the game.
The graphics used on sprites are packed side by side in one big image. It’s done that way because it provides better performance when loading and rendering the game assets. Those images are often called tile-maps, slices of it are used to render the sprites and the backgrounds of a game.
While sprites are small objects that can be freely positioned on the screen, backgrounds on 2D games are often one big texture created by composing several slices from tile-maps. Today the size of those tiles is very flexible, but that was not always the case. On consoles like the NES and the SNES all the tiles on a tile-map needed to be one fixed size, common sizes were 8-by-8, 16-by-16, and 32-by-32 pixels.
Tile-maps aren’t limited anymore to small single sized tiles. Still, the concept of a fixed size module is a mighty one. Modules structure the creative process and allow pieces to be easily swapped; this helps to test variations, to update selected modules with new designs, and others.
Back to the side-scrolling character, if our objective is a good balance between the number of pixels and the perceived detail, what can be a good pixel size for it? Let’s take a look at some examples. For illustration purposes, I slowed down the animations so that each frame can be better understood.
First, we have two Mario games from the NES console, Super Mario and Super Mario 3. Because of how the NES hardware works, the palettes it uses to paint the sprites have very few colors. Each of those sprites is drawn using only three colors, four if you count transparency (To better understand how colors worked on consoles like the NES and the SNES, take a look at “Graphics & Palettes” video from Retro Game Mechanics Explained).
The characters range from a max of 16-by-16 pixels on the small Mario to a max 16-by-32 to the Super Mario (The tail of raccoon Mario makes him up to 23-by-29 pixels). It’s interesting that the walking animation for the small Mario has only two frames, and the animation for the Super Mario has three frames. In both cases, Mario always put the same leg forward, but on the game the sprite is so small and the animation so fast that there’s an illusion that Mario is alternating his legs as he moves. Our brains fill up the missing pieces of the animation, the same way it fills up the low resolution of the sprites.
On the SNES game “Super Mario World” we see the same overall size for the sprites, and also the same number of frames for the animations. The difference is the number of colors used to draw the images.
Mario uses a 13 color palette (14 if you count transparency). By comparing the NES and SNES sprites we can see how much the extra colors change the feeling of the image, and also how much more complexity they add to the drawing process.
Next, we have “Zelda: a link to the past”, this game is not a side-scroller but a top-down game, still their sprite make an excellent addition to our comparison. Regarding pixel size and the number of colors, there’s not much difference to the Super Mario World sprites, the change here is that Link walking animation is done with eight frames instead of the two/three frames on the Mario games.
To close up, we have the character from “Castlevania: Dracula X”. This game has the biggest character in our comparison, topping up at 26-by-45 pixels. Its color palette is the same size as the two previous SNES games, and its animation cycle has eight frames. Those numbers do give a different feel to the character, but also considerably raises the complexity of its execution.
With the focus on finding a minimal template, one that gives the best relation between effort and results, it’s hard to not see Super Mario 3 as one of the top contenders. We have a nice module of 16-by-16 pixels painted with only three colors. Those are used in three main animation frames—two for when the character is walking and one when it’s jumping. Those are excellent parameters for quickly prototyping new games and testing new mechanics while still looking great.