Sprite Sheet Packer
Pack multiple PNG images tightly into a single texture atlas with a JSON file of frame coordinates. Supports trimming transparent edges, padding and power-of-two sizes.
Packing settings
How to use
When it helps
Loading dozens of small images separately in a game increases draw calls and slows loading. Combining them into one texture atlas saves both memory and performance.
This tool places images on shelves sorted by height and tries several widths to find the layout with the smallest total area. Trimming transparent edges packs them even tighter, and the original size and trim offset are kept in the JSON so your engine can draw each frame in its original place.
The JSON uses the widely supported hash format, with frame, spriteSourceSize and sourceSize for each name inside frames. Web engines such as Phaser and PixiJS, or your own loader, can read it directly.
FAQ
Which engines can read the JSON?
It is the hash format where the frames object holds coordinates for each image name. Engines that read this format, such as Phaser and PixiJS, can use it directly, and others can read it with a short conversion script.
Does it rotate images to pack tighter?
No. Rotation is handled differently in each engine and easily causes problems, so it is not used. The rotated value is always false.
When should I turn on power-of-two?
Older devices and some compressed texture formats need sizes like 256, 512 or 1024. Most modern engines do not, but turn it on if you are unsure.
What about images wider than the max width?
If a single image is wider than the max width, the atlas grows to fit it. Very large atlases may not load on some devices, so 4096 or below is recommended.
Why add padding?
It stops colors from neighboring images bleeding in when textures are scaled or filtered. Even for pixel art, 1 to 2px is recommended.