Sprite Sheet Generator

A sprite sheet packs many small images — animation frames, icons, tiles, UI parts — into one texture, so a game or web page loads one file and draws regions of it. This generator packs your images into a single PNG and writes the matching atlas: a JSON file in the TexturePacker JSON Hash or Array format that Phaser and PixiJS load directly, plus CSS classes for web sprites. Packing runs in your browser; your art is not uploaded.

How to use this tool

1. Drop the sprite images; each file name becomes the frame name.
2. Choose Packed for the smallest sheet, Grid for animation frames of equal size, or a strip.
3. Set padding, extrusion, trimming, power-of-two size and the largest sheet you allow.
4. Download the PNG, the JSON atlas and the CSS (or all three as a ZIP).

Formula

Packed: MaxRects with best-short-side-fit — each sprite goes into the free rectangle that leaves the smallest leftover side, the free space is split around it, and several sheet widths are tried to keep the area small. Grid: cell = largest sprite; columns = ⌈√n⌉ unless set.

Each box reserves width + padding and height + padding (plus 2 × extrusion). Trimming cuts fully transparent rows and columns; the JSON keeps sourceSize and spriteSourceSize so engines restore the original frame box. Extrusion copies the edge pixels outward so texture filtering does not pull in neighbouring sprites. Rotation is never used, so every frame has rotated: false.

Example

Two 160 × 100 frames in a grid with 2 px padding give a 322 × 100 sheet: frame 1 at x = 0 and frame 2 at x = 160 + 2 = 162, so its CSS is background-position: -162px 0. With 1 px extrusion each cell becomes 162 × 102 and the sheet 326 × 102; frame 2 starts at 162 + 2 + 1 = 165.