Sprite Sheet Coordinate Generator

A sprite sheet (or texture atlas) packs multiple images into a single file. Instead of loading 50 separate images, you load one and use CSS background-position or canvas drawImage offsets to show specific parts. This reduces HTTP requests, improves load times, and allows the GPU to batch draw calls efficiently — critical for games and interactive UIs with many animated elements.

Padding is the gap between the sheet edge and the first sprite (also called 'margin'). Spacing (also called 'extrude' or 'inner padding') is the gap between adjacent sprites. Spacing prevents texture bleeding — when GPU bilinear filtering samples pixels from a neighboring sprite causing color artifacts at sprite edges. 1-2px spacing is enough for most cases.

Texture bleeding occurs when GPU filtering reads texels (texture pixels) from adjacent sprites. At exact pixel boundaries with bilinear filtering, the GPU averages 2-4 neighboring pixels — including pixels from the wrong sprite. Adding 1-2px spacing (empty pixels between sprites) or 1px extrude (duplicating the sprite edge outward) prevents this sampling from crossing into neighboring sprites.

Set the element's background-image to the sprite sheet URL and background-size to the sheet dimensions. Then use background-position: -Xpx -Ypx to 'shift' the sheet so the desired sprite aligns to the element. Negative values move the sheet left/up, revealing the sprite at position (X, Y). Set the element width/height to the sprite dimensions.

TexturePacker is a popular sprite sheet tool. Its JSON format is widely supported by Phaser, PixiJS, Cocos2d, and other game engines. Each frame entry contains: frame (x, y, w, h — the source rect in the sheet), sourceSize (original image dimensions), rotated, and trimmed flags. Engines load this JSON alongside the sheet image to know where each named frame lives.

Use this.load.spritesheet() in preload to load a uniformly-gridded sheet (all frames same size, optional spacing and margin). Use this.load.atlas() with a JSON file for irregular/packed sheets. Access frames with this.add.sprite(x, y, 'key', frameIndex). Create animations with this.anims.create() specifying frame ranges. Phaser calculates offsets automatically from your config.