Sprite Sheet Generator

What is Sprite Sheet Generator?

Sprite Sheet Generator combines multiple individual images into a single optimized sprite sheet. Upload your frames or icons, configure layout (grid or packed), and export the combined image with CSS coordinates or JSON metadata.

Grid mode arranges everything in a uniform N-by-M layout, ideal for animation cycles where every frame is the same size. Packed mode runs a bin-packing pass so mixed-size icons fit with minimal wasted space. The metadata file gives each frame a name, x/y position and width/height, ready to drop into Phaser, PixiJS or CSS background-position.

How to use

1. Upload the individual images you want to combine into a sprite sheet.
2. Set layout mode (grid or packed), padding, and output dimensions.
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 packed when icons vary, such as a UI set where some are 16x16 and others 48x48. Packed produces a smaller sheet but the metadata file 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.

Should I choose CSS or JSON metadata?

CSS works directly with background-image and background-position for web icon sets. JSON is what most game engines expect (TexturePacker format), with each frame as an object listing its x, y, width and height. Pick based on your renderer.

Does the output preserve transparency?

Yes. The sheet is exported as PNG with the alpha channel intact, so transparent backgrounds from your source PNGs carry through. 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