What is Sprite Sheet Generator?

Sprite Sheet Generator combines multiple individual images into a single optimized sprite sheet. Upload your frames or icons — or drop an animated GIF and every frame is pulled in automatically — pick a layout (grid, horizontal strip, vertical strip, or packed), choose a transparent or solid background, and export the combined image with JSON, JSON Array, XML TextureAtlas, or CSS position data.

Grid mode arranges everything in a uniform N-by-M layout, ideal for animation cycles where every frame is the same size. Horizontal and vertical strips line frames up in a single row or column — the standard layout for simple 2D engine animations. Packed mode runs a bin-packing pass so mixed-size icons fit with minimal wasted space. Drop in an animated GIF and each frame is decoded into the sheet, so there's no need to export the frames first. Output keeps a transparent background by default, or you can pick a solid colour as a chroma-key fill. The metadata comes in four formats — JSON hash, JSON Array, XML TextureAtlas, and CSS — so it drops straight into Phaser, PixiJS, Unity, Godot or a CSS background-position. An animation preview lets you scrub frames at 1 to 60 FPS so timing is right before you download. Step through frames one at a time to catch any misaligned sprite, trim the transparent border off every frame so the sheet stays compact, and download the sequence as an animated GIF to share the result without a game engine.

How to use

1. Upload the individual images you want to combine into a sprite sheet.
2. Pick a layout (grid, horizontal, vertical, or packed), adjust padding, and set the background to transparent or a solid colour.
3. Download the sprite sheet image along with CSS or JSON position data.

When to use

• Packing a character walk cycle or explosion animation into one image for a game engine.
• Combining a UI icon set into a single asset so the page makes one HTTP request instead of forty.
• Preparing tilemap sprites with consistent padding so neighbouring tiles don't bleed.

Result

A game developer uploads 16 character animation frames (64×64 each). The tool arranges them in a 4×4 grid, producing a 256×256 sprite sheet with JSON frame coordinates for the game engine.

FAQ

When should I use packed layout instead of grid?

Use grid when all frames are the same size, like a 32x32 character animation. Use horizontal or vertical strip for a single-row or single-column sequence — the simplest layout most game engines load. Use packed when icons vary, such as a UI set where some are 16x16 and others 48x48; it produces the smallest sheet but the metadata is harder to read by hand.

What's the padding setting for?

Padding adds transparent pixels around each frame. Without it, a renderer that uses linear filtering can bleed colours from neighbouring frames into the edges of the one it's drawing. 1 or 2 pixels of padding is enough to stop this artifact.

Which metadata format should I export?

JSON (hash) is the TexturePacker format most engines load, with each frame keyed by name. JSON Array stores frames as an ordered list, which Phaser 3 and some pipelines prefer. XML is the Starling/Sparrow TextureAtlas that Unity, Godot and Friday Night Funkin use. CSS gives you background-position classes for web icon sets. Pick the one your renderer expects.

Does the output preserve transparency?

Yes by default. The sheet is exported as PNG with the alpha channel intact, so transparent backgrounds from your source PNGs carry through. If you need an opaque sheet, pick a solid background colour next to the layout controls — useful for chroma keying or for engines that ignore alpha. Avoid JPG sources if transparency matters, since JPG flattens alpha to white before you even upload.

How many frames can I pack into one sheet?

Practically, mobile GPUs cap individual textures around 2048 or 4096 pixels per side, so a 4096x4096 sheet at 64x64 per frame holds 4096 frames. For animation use, splitting into two 2048x2048 sheets is safer for older devices.

Related Tools