Sprite sheet maker
Pack frames into one sprite sheet with a JSON atlas, or cut an existing sheet back into frames. Works with PNGs and animated GIFs, entirely in your browser.
Loading the sheet in your engine
- Phaser 3:
this.load.atlas('hero', 'spritesheet.png', 'spritesheet.json'), then build an animation from the frame names. - Godot 4: add a
Sprite2D, set Hframes and Vframes to the grid size, and animate theframeproperty, or slice it in the SpriteFrames editor with “Add frames from sprite sheet”. - Unity: set Sprite Mode to Multiple, Filter Mode to Point (no filter), Compression to None, then use the Sprite Editor’s “Grid by cell size”.
- GameMaker: import as a sprite strip; name the file
hero_strip6.pngfor a one-row sheet of six frames and it will split automatically.
Drawing the frames yourself? The PixelMint editor exports a sheet and JSON directly from its timeline.
Frequently asked questions
What is a sprite sheet?
A single image that contains every frame of an animation (or many different sprites) laid out on a grid. Game engines load one texture instead of dozens of files, which is faster, and play the animation by showing one cell at a time.
Which JSON format does it export?
The widely used TexturePacker/Aseprite “hash” layout: a frames object keyed by frame name, each with x, y, w, h and a duration in milliseconds, plus meta with the image size. Phaser loads it directly with load.atlas, and most engines have importers.
Can I turn a GIF into a sprite sheet?
Yes. Drop a GIF into the maker and every frame is decoded (with proper disposal handling) and laid out on the sheet. The frame rate is read from the GIF.
How do I split a sprite sheet into frames?
Switch to “Split a sheet”, load the image, and set the frame width and height (plus padding or margin if the sheet has gaps). The green boxes show exactly what will be cut. Download all frames as a ZIP of PNGs, or as an animated GIF.
Should frames have padding?
Add 1–2 px padding if your engine uses texture filtering or mipmaps, to avoid colours bleeding between neighbouring frames. For pixel art drawn with nearest-neighbour filtering, zero padding is fine.