---
title: "Sprite Sheet Packer with JSON Atlas | Pixel Rumble"
description: "Pack sprites into one sheet with MaxRects, rows or a grid, and get a JSON atlas for Phaser and PixiJS or CSS sprites. Padding, trim and power-of-two sizes."
url: https://pixelrumble.buzz/sprite-sheet-packer/
---

**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.

## 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.