Home › How to make a sprite sheet

How to make a sprite sheet

A sprite sheet is a single image holding every frame of an animation side by side. This guide covers what it is for, how to build one — and how to hand it to a game engine so the engine finds the frames by itself.

What is a sprite sheet?

Picture a character walking: eight images that, played in sequence, make a walk cycle. You could save eight PNG files. Or you could put all eight into one image, in a single row. That is a sprite sheet.

The reason is technical. A game engine uploads images to graphics memory, and drawing cut-outs from one large image is considerably faster than switching between eight files. With one character nobody notices. With fifty characters of eight frames each on a weak device, they do.

There is a practical reason too: a sheet is one file. It can be moved, versioned and handed over without individual frames going missing.

Decide two things first

The frame size. Every frame in a sheet should be the same size — the engine slices the sheet on a regular grid. Common sizes are 16 × 16, 32 × 32 or 64 × 64 pixels. Choose one that fits the character including its widest movement; if the arm leaves the frame mid-swing, the frame was cut too small.

The anchor. Paint the character in the same place in every frame, typically with its feet on the same ground line. Otherwise it will jitter up and down in the game even though every drawing is clean. This is by far the most common beginner mistake.

Step by step

The steps are the same in any editor; the menu names here are KistePix's.

1. Create the canvas

Set the canvas to the size of a single frame, say 32 × 32 — not to the size of the whole sheet. The sheet only comes into being at export time.

2. Paint the first frame

Paint the resting pose. Keep outline, flat colour and shading on separate layers, and you can recolour later without redrawing the outline. The transparency checkerboard shows you what actually stays empty — those empty pixels are what will cut the character out against the game's background.

3. Add the other frames

Each frame is one phase of the movement. The trick is not to redraw every picture: take the previous frame as your base and change only what moves. A walk cycle gets by on four to eight frames; a blink needs two.

4. Set the timing

Each frame gets its own duration in milliseconds. 100 ms is about ten frames a second — a good starting point for pixel art. Uneven durations are not just allowed, they are usually what makes an animation feel alive: a punch may wind up slowly and land in a flash.

5. Export

File › Export as sprite sheet. KistePix lays every frame out in one horizontal row as a PNG and writes a .json file of the same name next to it, recording where each frame sits in the sheet and how long it should be shown.

Two options are worth a thought. The scale factor draws each pixel as a block of several — handy if the sheet doubles as a preview image, but for an engine you normally export at factor 1 and scale in the game. And transparent background should almost always be ticked: without it your character gets a white rectangle underneath.

Into the game engine

The JSON file is why you never have to measure the sheet by hand. It follows the Aseprite schema, which most engines and importers understand — every field is described on the Aseprite JSON format explained, with examples for Godot, Unity, Phaser and GameMaker.

Common pitfalls

• The character jitters. The anchor was not held — see above.
• White fringes around the sprite. Transparent background was off at export, or the engine is smoothing.
• Neighbouring frames bleed in at the edges. This happens with scaled sheets when the engine samples past the cell boundary. Fix: export at factor 1 and scale in-game.
• The animation runs too fast. Some engines ignore the durations in the JSON and use a fixed frame rate. Then set the speed in that engine's animation player.