Sprites for platformers

A platformer sees everything from the side, so one camera facing right is often all you need. The engine flips the sprite when the character turns round.

A goblin walking, rendered by Pixor
A bat flying, rendered by Pixor
A coin spinning, rendered by Pixor
Viewside
Size48 px characters, 16 or 32 px tiles
Sides1 (East, flipped for West)
Platformer character, side on: the sheet this sample project renders

Sample project

Platformer character, side on: the .pixor project and its library model (CC0). The sheet on the left is what it renders.

What a platformer needs

A platformer needs a hero with a lot of motion: idle, walk, run, jump, fall, attack, hit and death. Enemies need fewer, usually a walk or fly and a death. Then come pickups, hazards, doors, levers and scenery for the background.

Because the player watches the hero all the time, its animation matters more than in most genres. A clean run and a readable jump do a lot of work.

The camera

Use a side view: the camera looks straight at the character with no pitch. Floors are lines, walls are lines, and jumps read clearly.

Most platformers need only one side. Render the character facing right (East) and let the engine flip it for left. If a character is not symmetrical and the flip looks wrong, add a West camera too.

At 48 px a character has room for a readable face, hands and a weapon. Smaller sizes work if you want more of the level on screen. Sprite sizes goes through the trade-offs.

Scale and pivot

Keep one pixels-per-metre scale for the whole project, so a bat is smaller than a skeleton because it is smaller, and a coin keeps its size next to both. Put the pivot at the feet. Pixor fixes the pivot to one pixel, so the feet stay on the floor in every frame and the character does not slide or bob on its own when the engine places it.

For a jump, decide whether the animation moves the character up or the game does. In most platformers the game moves the sprite and the animation only shows the pose, so render it in place.

Animation

For humanoid skeletons, Pixor’s motion library has idle, walk, run, jump, attack, hit and death, which covers a full platformer hero. For props, spin works for coins and gems, bob for floating pickups, swing for hanging things and pulse for things that glow. Keep frame counts modest: a six- to eight-frame run is smooth at 48 px. More on animation.

Palette

Platformers often use a darker, quieter palette for the background and brighter colours for the hero, enemies and pickups, so the things you interact with stand out. Selective outlines on characters help with that too. Pixor has seven palettes built in and reads Lospec .hex and GIMP .gpl files. See palette ramps.

Free library assets that fit

Setting it up in Pixor

  1. Import your model, or open the platformer sample.
  2. In the Scene step, click the camera “South” in the Outliner. Its “Game” setting sets it up for a kind of game in one click; choose a platformer.
  3. Set its Turn so the camera sees the character’s right side (East), then check View, Pitch, Width and Height. That one camera is all the sheet needs.
  4. In the Action step, pick the animations, such as idle and walk.
  5. In the Style step, pick the look.
  6. Export writes the sheet. See exports for the formats, and Godot or Unity for bringing it into an engine.

Questions

Why only one side?

In a side-view game a character faces left or right. Render it facing right (East) and let the engine mirror it for left. That halves the sheet and keeps both directions identical.

When should I render West as well?

If the character is not symmetrical, such as a sword always held in the right hand, mirroring swaps the hand. Add a West camera if that matters to you.

How big should a platformer character be?

48 px gives room for readable faces and limbs on a 16 or 32 px tile grid. Smaller games use 32 px or less; it depends on how much of the level you want on screen.

Read next

Try it on your own model, free in your browser, or get the full version.

Try in browser Get Pixor