Why is one of my frames stretched or squashed on the sheet?

The first frame you add sets the cell size, and every other frame is scaled to fit that exact cell. Export all frames at identical dimensions, padding smaller poses with transparency to a common canvas rather than trimming, so nothing gets distorted.

How does auto-packing decide the grid?

With columns left at 0 it aims for a roughly square sheet using ceil(√N) columns, so 12 frames become a 4×3 grid. Set an explicit column count (up to 32) for a single-row strip or a layout your engine expects.

In what order are the frames placed?

In the order you add them, left to right then top to bottom. Index 0 is top-left; frame i sits at column i mod columns, row floor(i / columns), so knowing the column count tells your engine exactly how to walk the sheet.

Does the output keep transparency?

Yes, it exports a PNG, so transparent backgrounds are preserved, which sprites almost always need. The sheet size is simply columns times frame width by rows times frame height, with no trimming or auto-crop.

How do I split a sheet back into frames?

Use the Sprite Analyzer tool, which slices a packed sheet into individual numbered frames, the reverse of this tool.

Sprite Generator

Generate sprite sheets for games.

Frames are placed on a grid sheet (resized to the first frame's size).

Add framesColumns

Add frame images to build a sprite sheet.

Processed in your browser — never uploaded, discarded after download.

What is Sprite Generator?

Sprite Generator is a free tool that packs multiple frame images into a single sprite sheet PNG — the format game engines load most efficiently. Add your frames in order, choose a column count or let it auto-pack into a roughly square grid, and download the combined sheet, all in your browser.

Key features

Packs frames left-to-right, top-to-bottom into one PNG
First frame sets the cell size for the whole grid
Auto-pack into a near-square grid or set exact columns
Keeps frames in the order you add them
Single PNG output ready for Unity or any game engine

How to make a sprite sheet

A sprite sheet packs many animation frames into one image on a regular grid. Game engines prefer this because loading and binding a single texture, then drawing sub-rectangles of it, is far cheaper than juggling dozens of separate files — it cuts draw calls and avoids gaps between frames. This tool takes your frames and lays them out into that one PNG.

Using it

Add frames in order. The sequence you add them in is the sequence they're placed — left to right, then top to bottom. The first frame sets the cell size for the whole sheet; every other frame is drawn into a cell of that exact size.
Set columns, or leave it on auto. Auto (0) packs the frames into a roughly square grid — for N frames it uses ceil(√N) columns, so 12 frames become a 4×3 sheet. Set an explicit column count (up to 32) when you want a single-row strip or a layout your engine expects, like 8 columns per row.
Generate and download. You get one spritesheet.png with all frames tiled in order.

Keep every frame the same size

This is the one rule that matters. Because the first frame defines the cell, frames that are a different size get scaled to fit that cell — a taller frame is squashed, a smaller one stretched. Engines also assume a uniform cell size to compute each frame's rectangle by index, so mismatched frames throw the whole animation off. Export your frames at identical dimensions before packing. If a character's pose is smaller in some frames, pad each one to the same canvas size (with transparency) rather than trimming to the artwork.

Reading frames back in the engine

Frames are indexed in the order they're laid out: index 0 is top-left, then across each row. In code, a frame at index i sits at column i % columns, row floor(i / columns), so its pixel position is (col × frameWidth, row × frameHeight). Because you chose the column count, you know exactly how the engine should walk the grid.

Things worth knowing

Output is a PNG, so transparency is preserved — essential for sprites, which almost always need a see-through background.
Packing is a local canvas operation; none of your source frames are uploaded.
The tool doesn't trim or auto-crop; the sheet dimensions are simply columns × frameWidth by rows × frameHeight.
Some engines and GPUs sample textures fastest when the sheet's dimensions are powers of two (256, 512, 1024…). If yours is one of them, size your frames so the finished columns × frameWidth and rows × frameHeight land on those numbers — e.g. eight 64 px frames per row makes a 512 px-wide sheet.
To go the other way — slice a packed sheet back into numbered frames — use the Sprite Analyzer tool.

Frequently asked questions

Why is one of my frames stretched or squashed on the sheet?: The first frame you add sets the cell size, and every other frame is scaled to fit that exact cell. Export all frames at identical dimensions, padding smaller poses with transparency to a common canvas rather than trimming, so nothing gets distorted.
How does auto-packing decide the grid?: With columns left at 0 it aims for a roughly square sheet using ceil(√N) columns, so 12 frames become a 4×3 grid. Set an explicit column count (up to 32) for a single-row strip or a layout your engine expects.
In what order are the frames placed?: In the order you add them, left to right then top to bottom. Index 0 is top-left; frame i sits at column i mod columns, row floor(i / columns), so knowing the column count tells your engine exactly how to walk the sheet.
Does the output keep transparency?: Yes, it exports a PNG, so transparent backgrounds are preserved, which sprites almost always need. The sheet size is simply columns times frame width by rows times frame height, with no trimming or auto-crop.
How do I split a sheet back into frames?: Use the Sprite Analyzer tool, which slices a packed sheet into individual numbered frames, the reverse of this tool.

Privacy

Packing the frames into a sprite sheet is a local canvas operation; none of your source images are uploaded.