About this tool
Game engines and web animations want all the frames of a sprite in one image. Drop in the frames in order (or a single animated GIF) and they are laid out on a grid of equal cells, sized to the largest frame, with optional padding to stop texture bleeding. You get the sheet as a PNG and a JSON file listing every frame's position and size.
Cells are placed left to right, top to bottom, so frame N is at column N mod columns. That matches the default expectations of Unity, Godot, Phaser, and CSS sprite animations.
How to use it
- Drop your PNG, JPG, WebP or GIF files into the box above, or click to browse. Nothing is uploaded.
- Adjust the options if you want; the defaults suit most files.
- Click the button and wait a moment.
- Download the results individually or all at once as a ZIP.
Questions
How are frames ordered?
In the order you add them. Select files sorted by name to keep a numbered sequence in order. For a GIF, frames follow the animation.
Why add padding?
When a sheet is scaled by the GPU, neighboring cells can bleed into each other at the edges. One or two pixels of padding prevents it.
Is it free, are files uploaded, which browsers work: the general questions are answered once for the whole site.