A sprite sheet is one image holding every frame of an animation, laid out on a grid your engine can slice. Four ideas make it work: the frame, the grid, the atlas, and the timing. This guide covers all four, plus the file format, the sprite sizes that are normal, and free blank templates you can draw on.
What You Are Actually Making
A sprite sheet packs every frame of a 2D animation into one image, with a JSON, XML, or CSS atlas your engine reads to play it back. Build one from loose PNGs, a frame folder, or an animated GIF.
Instead of loading 24 separate files for a walk cycle, your game loads one image and steps through it. That is the whole idea. Every separate image file means a separate draw call, and sheets cut draw calls by 80 to 95% while using 60 to 70% less memory. In a WebGL game that is the gap between 60fps and 45fps.
Sprite sheet, spritesheet, sprite chart: same thing. The words below are the ones that actually matter.
A Frame Is One Drawing
A frame is a single still image: one pose, one moment. Put frames in order, play them fast, and the eye reads motion.
Frames also cover things that never move. A tile, an icon, a UI button. Same sheet, same rules, they just never advance.
How Many Frames You Need
Frame counts stay small in 2D games. More frames buy smoothness, not quality, and every frame is one you draw by hand.
| Animation | Frames | Notes |
|---|---|---|
| Idle | 2 to 4 | Subtle breathing or a blink |
| Walk | 4 to 8 | Four reads fine, eight reads soft |
| Run | 4 to 6 | Fewer frames, higher fps |
| Attack | 3 to 6 | One held frame for anticipation |
| Jump | 2 to 3 | Launch, apex, land |
Loop everything you can. A 4 frame walk cycle on repeat looks smooth at 8 to 12 fps, and nobody counts the frames.
The Grid Is How the Engine Finds Them
Most sheets are a uniform grid. Every cell shares one width and height, frames run left to right and top to bottom, and the engine slices the image by cell size. Frame 0 sits top left. Frame 1 sits next to it. No data file needed.
The common convention for characters is one animation per row: row one is walk-down, row two walk-left, row three walk-right, row four walk-up. Nothing enforces it, but it means you can read the sheet without opening a data file, and most engine tutorials assume it.
Three settings define that grid, and they are the same three every engine asks about later:
- Columns sets frames per row. Six columns across twenty four frames gives a 6x4 grid.
- Force Size locks every cell to identical dimensions when your frames vary in size.
- Padding is the transparent gutter that stops neighboring frames bleeding into each other. See packing and padding.
The editor sizes every cell to your largest sprite, so a mixed batch of PNGs still lands on a clean grid. Drag a sprite inside its cell to place it exactly where you want it.
Turn on Frames in View Options to number every cell. Frame order is the one thing a static sheet cannot tell you, and numbering makes reordering deliberate instead of hopeful.
A full walkthrough of this screen, start to finish, lives in Getting Started.
The Atlas Is the Map
Pack frames tight instead of on a grid and the cells stop being predictable. That is what an atlas fixes: a small text file next to the PNG naming every frame and giving its x, y, width, and height.
{
"frames": {
"walk_00.png": { "frame": { "x": 0, "y": 0, "w": 32, "h": 48 } },
"walk_01.png": { "frame": { "x": 32, "y": 0, "w": 32, "h": 48 } }
}
}
Sprite sheet, texture atlas: same file, different habit. A sheet usually means one animation on a grid. An atlas usually means many unrelated images packed to save space, which is why atlases carry a data file and grids often do not.
Your engine decides which you need:
Godot: slices a grid straight into AnimatedSprite2D. Set Hframes and Vframes and skip the atlas entirely.
Unity: set Sprite Mode to Multiple, slice by grid in the Sprite Editor, then build an Animation Controller.
Phaser: this.load.spritesheet() takes frameWidth and frameHeight for a grid. this.load.atlas() takes the JSON.
GameMaker: imports a strip and asks for the frame count.
Web canvas: drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) and advance the source coordinates each frame.
Export both and decide later. A grid PNG works without the atlas, and the atlas costs a few kilobytes. Shipping both means switching engines never means repacking. See importing sprite sheets into game engines.
The Format Is PNG
There is one right answer here and it is PNG. Two reasons, both of which matter more than file size.
PNG compression is lossless, so a pixel you drew is the pixel that ships. PNG also carries a real alpha channel, so a sprite can sit on any background without a matte colour around it.
JPG fails both. Its compression is lossy and tuned for photographs, so it smears the hard edges pixel art is made of, and it has no transparency at all. A JPG sprite arrives with an opaque rectangle behind it. WebP is lossless-capable and does support alpha, so it works, but engine tooling support is thinner than PNG and the savings on a sprite sheet are small. GIF is worse than both: 256 colours and 1-bit transparency.
For packed atlases the PNG ships alongside a metadata file, which is the JSON, XML, or engine resource covered above. The image is still a PNG.
Timing: Frames per Second
Frames per second sets how fast the loop plays. Divide 1000 by the fps and you get the milliseconds each frame stays on screen.
| fps | Per frame | Reads as |
|---|---|---|
| 8 | 125 ms | Chunky, retro, cheap to draw |
| 12 | 83 ms | The pixel art default |
| 24 | 42 ms | Smooth, and twice the artwork |
An 8 frame walk at 12 fps loops in 0.67 seconds, close to a real stride. A 4 frame idle at 6 fps loops in 0.67 seconds too, and reads as breathing.
Need one beat to hang longer? Hold the frame. Repeat it in the sequence instead of drawing a new one. The wind up before a punch is usually one held frame, not new art.
Set the fps in the preview and scrub the loop before you export. Wrong timing looks like bad art.
Sprite Sizes That Are Normal
Two numbers matter, and beginners usually only think about one: the frame size and the sheet size.
Frame Size
| Size | Typical use |
|---|---|
| 16x16 | Tiles, items, NES era characters |
| 32x32 | The common character size |
| 48x48 or 64x64 | Room for weapons, capes, squash |
| 128x128 and up | Bosses, HD art, hand drawn frames |
Keep the canvas bigger than the character. A 32x32 fighter swinging a sword needs a 48x48 or 64x64 frame so the swing never clips. Draw every frame on that same canvas: shrink one and the origin drifts, which makes the sprite jitter in game.
Pick one base resolution and scale uniformly. Mixing 16x16 characters with 32x32 tiles and 48x48 UI looks broken, and no amount of packing fixes it.
Sheet Size
Stay at 2048x2048 or under and every phone, laptop, and console will load it. Powers of two (256, 512, 1024, 2048) keep older GPUs and mipmaps happy, since a 1000x1000 sheet gets padded to 1024x1024 internally anyway.
Leave 1 to 2 px of padding between frames. Without it you get texture bleeding: slivers of the neighboring frame showing at the edges, worst at non native zoom.
Free Blank Sprite Sheet Templates
If you draw your frames by hand, it helps to start on a grid rather than eyeball the spacing afterwards. Each file below is a transparent PNG with 1px grey guide lines marking every cell. Open it in any art program, draw one pose per cell, delete or hide the guide layer when you are done, and the finished sheet slices cleanly in every engine.
| Template | Size | Good for |
|---|---|---|
| 4x4 grid, 32px cells | 128x128 | Classic character sheet: 4 directions x 4 frames |
| 4x4 grid, 64px cells | 256x256 | Same layout with room for weapons and squash |
| 8x8 grid, 16px cells | 128x128 | Tiles, items, icons, and other small sprites |
| 8x1 strip, 64px cells | 512x64 | A single walk or attack cycle as one row |
The guide lines sit on the cell boundaries, so a 32px template gives you exactly 32x32 of drawable space per cell. Do not draw over the lines and expect them to disappear on export: they are pixels like any other.
Skipping the template entirely is fine. Drop loose frames into the editor and it sizes every cell to your largest sprite and builds the grid for you. The templates exist for the case where you want the grid before you start drawing.
Common Mistakes
Cells sized to the smallest sprite. One frame clips and the whole animation pops. Size cells to the largest frame, always.
Frames drawn on different canvases. The origin moves between frames and the character shivers in place. Same canvas, every frame.
No padding. Free to add, expensive to fix once the sheet is in the engine.
Wasted transparent space. A 4096x4096 PNG full of nothing loads slowly and eats memory your mobile players do not have.
Judging it at 400% zoom. Test at 1x. If the sprite does not read at native size, the frames need work, not the sheet.
Ready to pack your frames?
Drag in your frames, set columns and padding, preview the loop, and export. Free, instant, no signup.
Questions
What is a frame in a sprite sheet? One still image, one cell of the grid. Frames played in order become the animation.
Sprite sheet or spritesheet? Both. One word, two words, same thing, and engines do not care. "Sprite-sheet", "sprite chart", and "sprite strip" all turn up too. It gets miscalled a "sprite spreadsheet", which has nothing to do with spreadsheets.
What file format should a sprite sheet be? PNG. Lossless compression keeps pixel edges hard, and the alpha channel lets the sprite sit on any background. Never JPG: no transparency, and its compression smears exactly the edges you care about.
What is a blank sprite sheet template? An empty image divided into equally sized cells, used as a drawing guide. One pose per cell means the finished sheet slices automatically. Four free templates are linked above.
How do I make my own sprite sheet? Drop your frames into the editor and they are arranged into a grid automatically. Adjust columns, cell size, and padding, preview the animation, then export as PNG, GIF, or an engine-specific format. No account, no install.
What is the difference between a sprite sheet and a texture atlas? A sheet means a grid, usually one animation. An atlas means packed rects plus a JSON or XML file describing them.
What size should a sprite sheet be? Pick a frame size first (16x16, 32x32, 64x64), then keep the whole sheet at 2048x2048 or under.
How many frames does a walk cycle need? Four reads fine. Eight reads smooth. Past twelve is rarely worth the drawing time.
What fps should I use? Start at 12 and adjust while watching the preview. Drop to 8 for retro, push to 24 for fluid.
Do I need the JSON file? Only if your frames are packed rather than gridded. Godot and Unity slice a uniform grid without it.
Screenshots taken in the Spritesheet Generator editor. Frame counts and fps figures come from shipping 2D animations in Godot and Unity.
Try it in the editor
Everything in this guide runs in the browser. No install, no account, and your images never leave your device.