Sprite Sheet Generator
Pack sprites into a texture atlas with a JSON frame map
About the Sprite Sheet Generator
Every time a web page or game loads a separate image file for each icon, button state or animation frame, the browser or engine sends a separate HTTP request. For a set of thirty sprites, that is thirty requests — thirty round-trips of latency before anything renders. Combining them all into a single sprite sheet (also called a texture atlas) cuts that to one request, and the JSON frame map tells the engine exactly where each sprite lives in the combined image so it can draw only that region when needed.
Web developers use sprite sheets to deliver icon sets or UI elements in one optimized PNG, referencing each icon with a CSS background-position offset. Game developers pack animation frames and tile sets into atlases that the GPU can load as a single texture, dramatically reducing draw calls. The Sprite Sheet Generator packs your individual PNG, JPG or WebP images into rows under a maximum sheet width, with configurable padding between sprites and an optional scale factor. It exports two files at once: the packed PNG atlas, and a JSON frame map that gives each sprite's name, x, y, width and height.
Packing happens with a shelf algorithm: sprites are placed left to right; when the next sprite would exceed the max width, a new row begins below the tallest sprite in the current row. This is not the globally optimal packing algorithm (that would be a bin-packing NP-hard problem), but it is fast, predictable, and works well for sprites of similar heights — the most common real-world case. All processing happens on a canvas in your browser with no upload.
How to Use the Sprite Sheet Generator
- Drop your sprite images onto the upload zone — PNG is recommended to preserve transparency, but JPG and WebP are accepted.
- Set the max sheet width in pixels (e.g. 512 for a 512×N sheet). Sprites wider than this value will still be placed but will extend the sheet beyond the limit.
- Adjust the padding between sprites (a few pixels prevents sprites from bleeding into each other when using linear texture filtering in a game engine).
- Choose a scale factor to uniformly upscale or downscale all sprites — useful for generating @2x or @0.5x variants.
- Click Download PNG to save the packed atlas, and Download JSON to save the frame map with x, y, width, height for every sprite.
Why Use ToolForge’s Sprite Sheet Generator
- Exports both the PNG atlas and the JSON frame map simultaneously — other simple packers give you the image but make you hand-write the coordinates.
- Scale factor lets you generate multiple resolution tiers (@1x, @2x) from the same set of source images without resizing each file manually.
- Checkerboard background in the preview makes transparency visible so you can confirm alpha channels are preserved before downloading.
- No upload: sprites remain on your device, which matters when the assets are unreleased game content or proprietary UI.
Frequently Asked Questions
What format should I use for the JSON in my project?
The exported JSON has a frames object keyed by sprite name (filename without extension), each with x, y, w, h properties, plus a meta object with the full sheet width and height. This structure is similar to what TexturePacker and Phaser expect. For CSS usage, divide x and y by the sheet width and height to get background-position percentages, or use the pixel values directly with background-position in px.
Why is there a gap at the right edge of some rows?
The shelf packer places sprites left to right and wraps to a new row when the next sprite would overflow the max width. If the sprites in a row don't add up to exactly the max width, there is empty space at the right of that row. This is normal and expected — the frame map positions are accurate regardless of the empty space.
Does it support transparency (alpha channel)?
Yes — the sheet canvas uses a transparent background by default, and PNG export preserves the alpha channel. Each sprite's transparency is maintained in the atlas. If you export sprites that have transparent areas as JPG they will be composited on a white background, so always use PNG for transparency-dependent sprites.
Is there a limit on how many sprites I can pack?
There is no hard limit built into the tool. Very large numbers of sprites (hundreds of high-resolution images) may produce a very tall sheet or run slowly due to canvas memory limits. For large atlases, consider reducing the scale or splitting into multiple sheets.
