Sprite Sheet Generator

A sprite sheet puts many small images into one file and records where each one sits. A game engine loads one texture instead of hundreds and swaps frames by moving a rectangle. A web page loads one request for all its icons and shows each one with CSS background-position. The picture is only half of it: the map of rectangles is what the engine or the stylesheet actually reads.

If a frame rectangle is one pixel off, every frame shows a thin line of its neighbour, and scaling the sprite in the engine makes it worse. This page never scales a sprite to make it fit. Each is drawn at its own pixel size, the map is written from the same placements, and spacing keeps a clear gap so texture filtering does not blend edges together.

Compact packs sprites into shelves, tallest first, for the smallest sheet; the sheet order changes but the map keeps every name. Grid gives equal cells the size of the largest sprite in your order, which is what Phaser load.spritesheet expects with frameWidth and frameHeight; smaller sprites are centred in their cell. Row and column keep your order in a single strip, handy for CSS hover pairs.

The JSON files follow the TexturePacker layout: a frame rect, sourceSize, and a meta block with the sheet size. Hash keys frames by file name and is the form PixiJS reads; Phaser reads both hash and array, where array lists frames in order. Grid sheets also carry the cell size in meta.grid. CSS gives one .sprite rule and one class per sprite with its width, height and background-position. Every JSON map is parsed back and compared before it is downloaded.