Pixel Rumble

Pixel art editor & sprite sheet tools

Stage 04 · pack the cartridge

Sprite sheet packer

Drop in your sprites and get one tightly packed sheet plus the atlas data your game engine needs: TexturePacker-style JSON for Phaser and PixiJS, or CSS sprite classes.

Drop your sprites

Any number of PNG, GIF or WebP images. File names become the frame names.

Layout

Packing

Atlas data

Packing a sprite sheet

Games draw faster from one big texture than from many small ones, and a single file is easier to ship. Add your sprites, choose a layout, and download the sheet together with its atlas: the file that tells the engine where each sprite sits.

  • Tight uses the MaxRects method: each sprite goes into the lowest free spot where it fits best, so mixed sizes interlock with little wasted space. With max width on Auto, several widths are tried and the smallest sheet wins.
  • Rows sorts sprites by height and fills shelves left to right. It wastes a little more space but keeps the layout easy to read by eye.
  • Grid gives every sprite a cell the size of the largest one, centred in it. Use it for animation frames that engines load as a fixed-size sheet.

Padding leaves empty pixels between sprites and border around the edge of the sheet. Frame names come from the file names, made unique if two match. The JSON hash maps each name to its rectangle; the array lists the same entries in packing order. The CSS output gives one class per sprite with its size and background position, for icons and UI on websites.

Questions

Which engines can read the JSON?

The JSON follows the layout TexturePacker calls JSON (Hash) and JSON (Array), which Phaser loads with load.atlas and PixiJS reads as a spritesheet. Many other engines and libraries accept the same format; check your engine's documentation for which of the two it expects.

Should I add padding?

If the sheet will be scaled, rotated or drawn at non-whole positions, yes: 1 or 2 pixels of padding stops colour from a neighbouring sprite bleeding into the edges. For pixel-perfect 2D games drawn at whole-number scales, 0 is fine.

What does trimming change?

Trimming cuts away fully transparent rows and columns around each sprite before packing, so the sheet is smaller. The JSON records the original size and where the trimmed part sat in it (sourceSize and spriteSourceSize), so engines that support trimmed frames still draw the sprite in the right place.

Is there a size limit?

Sheets up to 8192 pixels on a side are allowed, which most browsers can create and save. Many older devices and some engines prefer 2048 or 4096 at most, so set a maximum width if your target needs it.