How to make a sprite sheet for a 2D game: frame sizes, rows and an AI shortcut

You have a character and no animation. The game is waiting.

A sprite sheet is how 2D games fix that: one image, many poses, cut into frames at runtime. Here is how to lay one out so it works in any engine, and how to get a first version without drawing every frame.

A sprite sheet is a single image that holds every frame of a character's animations. The engine loads one texture and shows a different rectangle of it each frame.

One image is faster to load than fifty. It is also easier to keep consistent, because every pose sits next to its neighbours.

Use one row per animation and one column per frame. Make every cell the same size.

row 0: idle row 1: walk row 2: attack Enter fullscreen mode Exit fullscreen mode Equal cells are what make slicing trivial. In every engine below you give the width and height of one cell and you are done.

Common cell sizes for pixel art are 16x16, 32x32 and 64x64. Pick one for the whole project. Powers of two are not required by modern engines, but they are a safe habit.

Leave a pixel or two of empty space inside each cell. It stops neighbouring frames bleeding into each other when the engine scales the sprite.

These are rules of thumb, not laws. Fewer frames with strong poses beat many frames with weak ones.

Play pixel art at about 8 to 12 frames a second and adjust by feel. A fast attack wants quick frames. An idle wants slow ones.

Most broken animations come from small inconsistencies, not bad art.

Unity. Set the texture type to Sprite (2D and UI), Sprite Mode to Multiple, and open the Sprite Editor. Slice by cell size. For pixel art set Filter Mode to Point (no filter) and compression to None.

Godot. Use an AnimatedSprite2D with a SpriteFrames resource, and add frames from a sprite sheet by giving the number of columns and rows. The Godot guide to 2D sprite animation walks through it. For pixel art set the default texture filter to Nearest.

function preload () { this. load. spritesheet ( ' knight ', ' images/knight.png ', { frameWidth: 32, frameHeight: 32 }); } Enter fullscreen mode Exit fullscreen mode The Phaser loader docs cover the options. Turn on pixelArt: true in the game config to keep edges sharp.

Drawing 20 frames of a new character is slow. For a first version, a placeholder or a game jam, you can have a model draw the sheet.

Ziztu's AI sprite sheet generator uses Seedream 5 Flash. You describe the character, pick the motion, the style and the view, and it draws one wide sheet with the poses in rows, in about half a minute.

The price is about 70 credits a sheet, and the page shows it before you generate.

A prompt that worked as an example on the page: "A small knight in blue armor with a red plume and a round shield." Who, colours, what it holds. Keep it to one character.

Be realistic. It is a starting point, not finished art.

If the frames are uneven, cut them out one by one in an editor, put each on the same size canvas, line up the feet, and then pack them into an even grid. Ziztu also has a free in-browser sprite sheet packer that packs frames you already have into one sheet with a JSON map.

You will spend more time in steps 3 to 6 than on the drawing, and that is normal.

This post was written with AI assistance.