Sprite Sheet Packer
Upload your PNG frames or drop in a GIF, set the grid, and export a packed sprite sheet with JSON frame data. Completely free, no account needed.
Updated
Example outputs
Four frames, 2 columns, 1 px padding: one sheet plus JSON frame data
How it works
Upload multiple PNG files or a single GIF. The tool reads each file in your browser and lines them up in a frame strip. Frames are packed in the order you add them; remove any you do not need. Nothing is uploaded to any server.
Set the column count, padding (pixels between frames) and frame size (auto-detect or a fixed size). A live preview updates as you change settings. An animated loop preview plays the frames back at your chosen frame rate.
Click Export to download a PNG sprite sheet, a generic JSON frame-atlas file, and a Phaser-compatible JSON. All frame coordinates are computed from your grid settings. Want the frames themselves? Click "Make the frames with AI" to open the AI Animation Generator in Ziztu.
Ideas and uses
| File | Format | Compatible with | Contents |
|---|---|---|---|
| sprite-sheet.png | PNG | All engines | Packed frame grid with transparent background |
| frames.json | JSON (generic) | Unity, Godot, Phaser, GameMaker | Frame name, x, y, w, h, duration for each frame |
| frames-phaser.json | JSON (Phaser 3) | Phaser 3 | Phaser TextureAtlas format with frames array and meta block |
| (animated preview) | Browser canvas | Preview only | Loop playback at set frame rate before download |
What a sprite sheet packer does
A sprite sheet packer solves a common game development problem: you have a folder of individual frame images (walk_0001.png, walk_0002.png and so on) and you need to combine them into a single texture that your game engine can load efficiently.
Loading many small files is slow because each one requires a separate file read and a GPU texture upload. A single sprite sheet loads once, occupies one GPU texture slot and lets the engine batch-render multiple animations in a single draw call. For games with many animated characters, the difference in performance is significant.
This packer assembles your frames into a grid in the order you upload them, generates the frame coordinates, and writes both the PNG and a JSON file that maps each frame name to its position. You drop both files into your project and point your engine at them.
Sprite sheet layout and padding
Two settings control the layout of your sprite sheet: the column count and the padding.
Columns sets how many frames appear in each row. A single-row layout (all frames in one row) is easy to reason about but produces a very wide image. A square-ish grid (for example, 4 columns for a 16-frame animation) is more memory-friendly on GPU hardware, which handles power-of-two textures most efficiently. The packer shows the frame count and the total sheet size as you change the column count.
Padding adds transparent pixels between frames. Add at least 1 to 2 pixels of padding to prevent texture bleeding: at sub-pixel sampling positions (especially on mobile GPUs), the color from the edge of one frame can bleed into the adjacent frame. For pixel art at small sizes even 1 px of padding is usually enough.
The frame size can be set manually or auto-detected from the largest frame in your upload. All frames must be the same size in the output sheet. If a frame is smaller, the packer centers it and pads the difference with transparency.
Checking the animation with the loop preview
Before you export, the animated loop preview plays back your frames at a frame rate you set with the slider. This is the fastest way to catch problems before you import into an engine:
- Frame order: frames are packed in the order you add them. If the animation looks backwards or jumbled, clear the strip and add the files again in the right order.
- Speed: adjust the frame rate until the motion feels right. A walk cycle typically runs at 8 to 12 frames per second; an idle breath cycle is often 4 to 6. The loop preview shows the playback speed you set so you can match it in your engine.
- Gaps: if the animation pops between cycles, check whether you included a transition frame. A walk cycle that loops cleanly usually has the first frame and the last frame match the contact pose.
The loop preview uses the browser canvas and runs locally. It is not a final render and does not affect the exported files.
Frequently asked questions
What is a sprite sheet packer?
A sprite sheet packer takes a set of individual frame images and combines them into a single image file called a sprite sheet or texture atlas, along with a JSON or XML file that records where each frame lives in the sheet. Game engines like Unity, Godot and Phaser use the JSON to load and play back animations without loading each frame separately.
Is this tool completely free?
Yes. The sprite sheet packer runs entirely in your browser using the HTML5 Canvas API. Your files never leave your computer. No account, no signup and no credit card are needed.
What file formats can I upload?
Upload individual PNG files (the standard for game art) or a single animated GIF. GIF frame extraction works in Chrome and Edge via the ImageDecoder API. For other browsers, upload frames as individual PNG files for the best results.
What JSON format does the packer output?
The packer exports two JSON files. The generic format includes each frame's name, x, y, w and h coordinates plus duration. The Phaser 3 format follows the Phaser TextureAtlas structure with a frames array and a meta block, which Phaser can load directly with scene.load.atlas().
How do I use the exported sprite sheet in Phaser 3?
In your Phaser preload function, call scene.load.atlas('myKey', 'sprite-sheet.png', 'frames-phaser.json'). Then create an animation with scene.anims.create({ key: 'walk', frames: scene.anims.generateFrameNames('myKey', { prefix: 'walk_', start: 0, end: 7 }) }). The frame names in the JSON correspond to the filenames of the frames you uploaded.
How do I import the sprite sheet into Unity?
Import the PNG into your Unity project, set the Sprite Mode to Multiple in the Inspector and use the Sprite Editor to define each frame's rect. Use the JSON coordinates (x, y, w, h) as the rect values. Unity also supports Sprite Atlas assets for batching; assign the sliced sprites to an atlas for better draw-call performance.
What is the recommended frame size for a sprite sheet?
Keep frame dimensions at a power of two (16, 32, 64, 128 px and so on) for best GPU compatibility. All frames in a sheet must be the same size. The packer's auto-detect mode measures the largest frame in your set and uses that as the frame size, padding smaller frames with transparency.
Can I make an FNF sprite sheet with this tool?
The sprite sheet packer exports PNG plus JSON. FNF (Friday Night Funkin) Psych Engine needs Sparrow XML, which neither this packer nor the AI sprite sheet maker writes. Export the PNG and the JSON here, then write the XML by hand in any text editor: one SubTexture line per frame, with the x, y, width and height from the JSON.
I have the art. Where do I get more frames?
Click "Make the frames with AI" to open the AI Animation Generator in Ziztu, which makes animation frames with AI and uses credits. Export the frames as PNGs, then pack them here for free.