Sprite sheet generator
Pack animation frames or icons into one sprite sheet. Add images, choose a grid or tight packing, and download the PNG with a texture atlas as JSON (hash or array) or XML.
- Price
- Free, no account
- Runs
- In your browser
- Uploads
- None. Files stay on your device
Add two or more images. Names in the atlas come from the file names; drag frames in the list to reorder them.
How to use it.
Add frames
Select or drop several PNGs. They keep the order you add them; drag a frame to move it, and names come from the file names.
Pick a layout
Grid puts every frame in an equal cell, which suits animations. Packed fits frames of different sizes tightly, which suits icon sets.
Set padding
One or two pixels of padding stops neighbouring frames bleeding in when the sheet is filtered or mipmapped.
Download
The PNG and its atlas. JSON hash and array match the common texture atlas format read by Phaser and PixiJS; the XML is the TextureAtlas format used by Starling and Sparrow.
Make the source image.
Need the frames too? The game asset recipe generates a matching icon set from one style prompt with Z-Image Turbo.
Questions.
How do I make a sprite sheet?
Add your frames above, pick grid or packed layout and padding, and download. You get one PNG with every frame and an atlas file that gives each frame's name, position and size.
What is the XML atlas format?
A TextureAtlas XML file with one SubTexture element per frame, listing its name, x, y, width and height. Starling, Sparrow and several engines and tools read it.
JSON hash or JSON array?
Both hold the same frame data. Hash keys frames by name, array lists them in order. Phaser and PixiJS read either; use array if frame order matters to your code.
Should the sheet be a power of two?
Older GPUs and some engines need power-of-two textures for mipmaps and wrapping. Tick Power of two to round the sheet up to the next one.
Do my images get uploaded?
No. The sheet is drawn on a canvas in your browser, and the PNG and atlas are saved straight to your device.