Combine images into a sprite sheet
Frames in a grid with padding, plus a JSON atlas for Phaser, PixiJS or Godot.
Drop an image here, or .
Runs in your browser. Nothing is uploaded.
Sprite Sheet Generator: how to use it
- Select or drop all the frames at once, in order.
- Set the columns, padding, frame size and scaling.
- Download the PNG sheet and the JSON atlas.
Tips
- Name frames with numbers (frame-01, frame-02) so they stay in order.
- Use Pixel art scaling for retro sprites so the edges stay crisp.
Sprite Sheet Generator: what it does and when to use it
The Sprite Sheet Generator packs a set of animation frames or icons into one image: a grid of equal cells with optional padding between them, plus a JSON atlas listing where each frame sits. It is the format game engines and web animations load fastest, one image instead of dozens of files.
Select or drop all the frames at once, in order; name them frame-01, frame-02 and so on to keep the order right. Cells can be the size of the largest frame or a fixed 32, 64, 128 or 256 pixels, with each frame centred in its cell, and Pixel art scaling keeps hard edges for retro sprites. The atlas uses the TexturePacker hash format that Phaser, PixiJS, Cocos and many Godot and Unity importers read.
Frames are packed in a simple grid rather than squeezed together, which wastes a little space but makes the sheet easy to slice by cell size in any engine. Everything is done in your browser. To pull frames out of an existing animated GIF first, use the GIF Frame Extractor; to make a GIF from frames instead, the GIF Maker.
Sprite Sheet Generator: frequently asked questions
How do I make a sprite sheet from PNG frames?
Select all the frames together, in order, and the tool packs them into a grid of equal cells. Download the PNG and the JSON atlas, which lists where each frame is.
Does it work with Phaser, PixiJS and Godot?
The JSON is in the TexturePacker hash format that Phaser's load.atlas and PixiJS read directly. Godot, Unity and GameMaker can slice the sheet by cell size, which the tool shows under the result. Related guide: Sprite sheets and seamless textures for games.
How do I keep pixel art sharp?
Choose Pixel art (no smoothing) under Scaling. Frames are then scaled with hard pixel edges, and the PNG is lossless.
How many frames can a sheet hold?
Up to 400 frames, as long as the whole sheet stays under about 16,000 pixels on a side; smaller frame sizes fit more. Related tool: GIF Frame Extractor.