Sprite Sheet Guide
What a sprite sheet is, how rows, columns, frame size and padding work, and how to export a sheet your game engine can slice correctly.
Quick answer
A sprite sheet packs animation frames into one PNG on a fixed grid. Engines slice it by frame size and order — so your frames must be identical size, evenly spaced, and in animation order before export.
The grid contract
Game engines do not 'see' your animation — they slice the sheet at fixed intervals. A 4×2 sheet of 32×32 frames is a 128×64 PNG, and the engine reads frame N at column N mod 4, row floor(N / 4). Any frame that is 1px off size or position corrupts every frame after it on that row.
- Every frame identical canvas size — pad smaller drawings, never crop.
- Consistent spacing — padding of 0–2px, applied evenly.
- Animation order left-to-right, top-to-bottom (the engine's default reading order).
- One sheet per animation is safest; multi-animation sheets need engine-side metadata.
Sizing math
| Frames | Frame size | Columns | Sheet size |
|---|---|---|---|
| 4 | 16×16 | 4 | 64×16 |
| 8 | 32×32 | 4 | 128×64 |
| 6 | 32×32 | 3 | 96×64 |
| 10 | 16×16 | 5 | 80×32 |
With padding P, sheet width = columns × (frame + P) + P. Keep the math simple: either no padding or 1px, and square frames wherever possible.
Put it to work
GIF or sprite sheet?
| Sprite sheet | GIF | |
|---|---|---|
| Engine use | Yes — the standard | No (browsers only) |
| Timing control | Per-frame, engine-driven | Baked into the file |
| Transparency | Full alpha | 1-bit (edge fringes) |
| Best for | Game characters, tiles | Web previews, docs |
Rule: ship sprite sheets to the game, GIFs to humans. If a GIF preview looks wrong in your engine, trust the sheet — GIF timing and 1-bit transparency behave differently.
Common mistakes
- Frames with different sizes — engines slice a fixed grid, not your intentions.
- Forgetting that empty frames still occupy a slot in the order.
- Exporting GIFs into a game engine and fighting color/thumbnail artifacts.
Related
Sprite Size Chart
Standard sprite sizes by game asset type — characters, NPCs, bosses, pickups and UI icons — for keeping a game on one consistent scale.
OpenGuideHow Pixel Art Animation Works
The mechanics of pixel art animation: frame counts, timing, key poses and in-betweens, and why fewer well-placed frames beat many rough ones.
OpenTutorialMake a sprite sheet
Combine frames into one game-ready PNG with the columns, spacing and scale your importer expects.
Open