Sprite Sheet Generator
Combine animation frames or separate images into one sprite sheet. Choose a grid, a strip or tight packing, set padding and trimming, preview the animation, and export the PNG with JSON or CSS coordinates for your game or website.
Last updated:
Frames
Grid uses equal cells (the largest frame). Packed places frames tightly to save space.
How to use the Sprite Sheet Generator
- Add your frames: drop several images or an animated GIF into the box, or choose them from your device. Files are sorted by name; GIFs are split into frames automatically.
- Check the order in the frame strip. Drag frames or use the arrow buttons to reorder, and remove frames you do not need.
- Choose a layout: Grid for equal cells, Packed for the smallest sheet, or a strip for simple CSS animations. Set padding, margin, scale and trimming.
- Preview the animation and adjust the speed. It is drawn from the sheet with the exported coordinates, so what you see is what your code gets.
- Download the PNG and the JSON or CSS file, or everything at once as a ZIP.
What the exported coordinates mean
Each frame in the JSON file has the same fields used by TexturePacker, Phaser and PixiJS:
| Field | Meaning |
|---|---|
frame | x, y, width and height of the frame's pixels inside the sheet |
trimmed | true when transparent borders were removed |
spriteSourceSize | where the trimmed pixels sit inside the original frame (x, y offset) |
sourceSize | the original (untrimmed) frame width and height |
duration | frame time in milliseconds at the preview speed (1000 ÷ fps) |
meta.size | width and height of the whole sheet image |
Example for Phaser 3: this.load.atlas('hop', 'hop.png', 'hop.json'), then create an animation from the frame names. In PixiJS, load the JSON with Assets.load('hop.json') and use sheet.animations.hop with an AnimatedSprite.
Grid math
In a grid sheet with cell width w, cell height h, padding p and margin m, frame number i (starting at 0) in a sheet with c columns sits at:
x = m + (i mod c) × (w + p) and y = m + floor(i ÷ c) × (h + p).
The sheet size is 2m + c × w + (c − 1) × p wide and 2m + rows × h + (rows − 1) × p high. For example, 8 frames of 64 × 64 in 4 columns with 2 px padding make a 262 × 130 px sheet.
Tips for game-ready sheets
- Keep frames the same size for simple engines and CSS animations; use Packed + Trim when you have many different sprites.
- Use pixel-art scaling when enlarging small sprites, so edges stay sharp.
- Power-of-two sizes (256, 512, 1024…) are still required by some older engines and mobile GPUs for mipmapping.
- Stay under 4096 × 4096 px for wide compatibility; this tool allows up to 16384 px per side.
Need the frames first? Split an animation with the GIF Frame Extractor or draw your own sprites with the Pixel Art Maker.
Frequently asked questions
What is a sprite sheet?
A sprite sheet is a single image that contains many smaller images, usually the frames of an animation or a set of icons. Games and websites load one file instead of dozens and show each frame by drawing only its rectangle, which is faster and avoids flicker.
Which JSON format should I use?
JSON (hash) is the TexturePacker-style format that Phaser (load.atlas) and PixiJS (Spritesheet) read directly; frames are keyed by name and an animations list is included. JSON (array) has the same data as a list in sheet order, which some engines and custom loaders prefer.
What is the difference between Grid and Packed?
Grid puts every frame in an equal cell the size of the largest frame, so frame positions are easy to calculate (column × cell width). Packed uses a MaxRects algorithm to place frames of different sizes as tightly as possible, which gives a smaller image but needs the JSON data to find each frame.
Why add padding between frames?
When a game scales or filters the sheet, pixels from neighboring frames can bleed into each other and show as thin lines. One or two pixels of padding prevents that. For pixel-perfect CSS sprites you can set padding to 0.
What does Trim transparent edges do?
It cuts away fully transparent borders around each frame before packing, which can make the sheet much smaller. The original frame size and the offset of the trimmed area are saved as sourceSize and spriteSourceSize in the JSON, so engines can still position the frame correctly.
How do I animate the sprite sheet with CSS?
Choose the CSS format, keep trimming off so all frames are the same size, and give an element both the sheet class and the class ending in -anim (for example class="hop hop-anim"). The generated keyframes jump to each frame's background position in order using step-end timing at the speed set in the preview.
Are my images uploaded?
No. Images are decoded, packed and exported entirely in your browser. Only the optional ZIP download loads a small open-source library (JSZip) from a public CDN.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.