Sprite Sheet Generator & Slicer

Prepare PNG frames for your game

A sprite sheet combines animation frames in one image. This tool builds a regular grid from static PNG frames and exports a PNG atlas, JSON coordinates and a ZIP of individual frames. It also slices an existing regular PNG grid. Files stay in your browser.

Build a sheet

1. Select up to 20 static PNG files. The list follows file selection order; use the arrows to arrange the animation.
2. Set the cell width and height. Keep ratio centres each image inside its cell with transparent margins. Stretch can change its proportions.
3. Choose columns. Set rows to 0 for automatic calculation. Outer padding surrounds the atlas; spacing separates cells.
4. Build the atlas, play the preview and download the PNG, JSON and frame ZIP.

Example: an eight-frame walk cycle

Eight 32 × 32 frames, four columns, two rows, 2 pixels of outer padding and 1 pixel of spacing produce a 135 × 69 atlas. The second frame starts at (35, 2); the fifth starts at (2, 35). At 8 FPS a full cycle takes one second. Preview timing depends on the browser timer.

Slice an existing atlas

Choose slice mode and select one PNG. Enter its actual cell dimensions, rows, columns, outer padding and spacing. The calculated grid must match the source exactly; extra pixels are never silently cropped. Specify a frame count to skip empty cells at the end. Extraction proceeds left to right, then top to bottom. Irregular packed layouts, rotated frames and importing an existing JSON atlas are not supported.

Using the JSON coordinates

The frames array supplies frame: {x, y, w, h} for each cell. Coordinates start at the PNG's top-left corner and include outer padding. sourceSize is the exported cell size, not the dimensions of the uploaded file. Because frames are neither trimmed nor rotated, trimmed and rotated are false. meta.fps records the playback rate and duration gives approximate milliseconds. This generic JSON is not guaranteed to import directly into every game engine; your atlas loader may need field mapping.

Pixel-art considerations

Keep smooth scaling off for hard pixel edges. Fractional scaling can make some pixels thicker; prefer integer scale factors when practical. Spacing is transparent: edge pixels are not extruded. Check your game engine's filtering and texture bleeding settings separately.

Limits and common questions

Is transparency preserved?

Yes. PNG alpha and empty cells remain transparent. Browser colour profile conversion may change colours; metadata is not retained.

How many frames can I use?

Up to 20. Each file is limited to 20 MB, combined sources to 100 MB and combined source pixels to 16 million. The atlas must also stay within 16 megapixels and 8192 pixels per side. Processing stops if the PNG frames going into the ZIP exceed 100 MB in total.

Can I use GIF or APNG?

No. Only static PNG is accepted so an animation is never silently flattened into one frame.

Why did exports disappear after changing settings?

Old exports are removed to prevent mixing outdated coordinates with new settings. Rebuild the atlas. Changing FPS also changes the JSON timing.

Related tools

For WebP or JPG sources, prepare PNG files with the Image Converter. For photographs and cover images, use the Image Compressor & Resizer.