How to Make a Sprite Sheet for Your Game (Step by Step)

If you're building a 2D game, sooner or later you need a sprite sheet - a single image that holds every frame of an animation or every tile in a set, so your engine can load one file and slice it on the fly. This guide explains what a sprite sheet is, why engines want one, and how to make a sprite sheet (with the metadata your engine needs) in a few minutes - free, in your browser.

Make a sprite sheet in the Spearite editor

What is a sprite sheet?

A sprite sheet (or sprite atlas) is one image packed with many smaller images - animation frames, tiles, or icons - arranged in a grid or strip. Instead of loading dozens of separate PNGs, your game loads one texture and draws sub-rectangles of it.

Two reasons every engine prefers this:

• Performance. One texture means fewer draw calls and fewer files to fetch. On the web and on mobile, that's a real frame-rate difference.
• Animation. A row of frames in a known order is trivial to flip through at a set FPS.

The catch: your engine needs to know where each frame lives. That's what the accompanying metadata file (usually JSON) describes - the x/y/width/height of every frame.

Sprite sheet layouts: strip vs. grid vs. packed

Layout	What it is	Best for
Strip	All frames in one horizontal row	Simple looping animations
Grid (uniform)	Fixed-size cells in a grid	Engines that slice by cell size
Grid (packed)	Frames trimmed and packed tight into an atlas	Saving texture space; many odd-sized sprites

A uniform grid is the easiest to consume - every cell is the same size, so the engine just divides. A packed atlas saves memory by trimming transparent padding, but then you must ship metadata so the engine knows each frame's real rectangle.

How to make a sprite sheet, step by step

1. Draw your frames

Open the editor and create your sprite. Use the timeline to add a frame per pose: idle, walk-1, walk-2, walk-3, and so on. Turn on onion skinning to line up motion between frames. (New to this? See frame-by-frame pixel art animation.)

Keep every frame the same canvas size - consistent dimensions are what make a clean sheet.

2. Open the export panel

When the animation reads right in playback, open the Export panel and choose Sprite sheet.

3. Pick a layout

• Choose Strip for a single-row loop.
• Choose Grid (packed) with JSON metadata for engine pipelines (Aseprite-compatible).
• Choose Grid (uniform) if your engine slices by fixed cell size - this exports a PNG only, no sidecar needed.

4. Export the PNG + metadata

For packed layouts, Spearite downloads a single ZIP so the image filename always matches the path inside the metadata:

MyGame_spritesheet.zip
├── MyGame_spritesheet.png
└── MyGame_spritesheet.json   # or .xml

The JSON follows the Aseprite sprite-sheet format - frame rectangles, durations, and frameTags - so anything that reads Aseprite atlases reads this too.

Importing your sprite sheet into a game engine

Unity - Drop the PNG in, set the Texture Type to Sprite (2D and UI) and Sprite Mode to Multiple, then slice in the Sprite Editor (by cell size for a uniform grid, or with a community Aseprite importer for the JSON).

Godot - Use an AnimatedSprite2D with a SpriteFrames resource, or an Aseprite import plugin that reads the JSON frameTags directly into animations.

Phaser / web - this.load.atlas(key, 'sheet.png', 'sheet.json') loads the packed atlas and its JSON in one call, and you reference frames by name.

For a uniform grid, almost every engine has a "slice by cell size" path - just tell it your frame width and height.

Tips for clean sprite sheets

• Lock your frame size early. Resizing the canvas mid-project breaks alignment.
• Keep frame order intentional. The sheet reads left-to-right, top-to-bottom; name your animation states so order is obvious.
• Use packed + JSON for many odd-sized sprites; uniform grid for simple, same-size frames.
• Keep the source. Export a .spearite project file too, so you can re-export the sheet later without rebuilding.

Frequently asked questions

What's the difference between a sprite sheet and a sprite atlas? They're effectively the same thing - one image holding many sprites. "Atlas" is more common when frames are tightly packed at varying sizes; "sheet" often implies a uniform grid.

Do I need the JSON file? For a uniform grid, no - your engine can slice by cell size. For a packed atlas, yes: the JSON tells the engine each frame's exact rectangle.

Is this sprite sheet generator free? Yes. Draw and export sprite sheets in the browser with no signup. Packed layouts download as a ZIP with matching metadata.

What format is the metadata? JSON in the Aseprite sprite-sheet format (or XML), listing frame rects, durations, and tags.

Can I make a tileset this way? Yes - draw each tile as a frame at a fixed size and export as a uniform grid; your engine slices it like any tilemap source.

Build your first sprite sheet

The whole loop - draw frames, preview, export PNG + JSON - takes minutes once you've done it once.

Open the editor and start a sprite sheet

Need art to animate first? Convert a photo or render into a pixel sprite, then bring it onto the timeline.