Sprite Sheet Editor

A sprite sheet is one image holding every frame of an animation, or every tile of a set, at known positions. Engines like it because loading one texture and drawing regions out of it costs far less than loading forty small files. Each separate texture means another file read, another GPU upload, and another break in the draw call batch. Pack the same forty frames into a single sheet and the renderer keeps one texture bound while it walks the frames, which is the difference between a smooth 60 frames per second and a stutter every time an effect spawns.

The second reason is bookkeeping. Forty loose files invite forty chances to misname something, and a walk cycle with frame 03 and frame 3 in the same folder will load in an order nobody intended. A sheet fixes frame order in the pixels themselves. Cell four is cell four on every machine, in every engine, forever.

There are two ways to arrange frames and the choice depends on who reads the result. A uniform grid puts every frame in an identical cell, so an engine only needs the cell width, the cell height, and a frame index to find any frame. Unity slicing by cell size, Godot AnimatedSprite2D, and CSS background-position all expect this. It wastes some space when frames differ in size, since the cell has to fit the largest one.

A packed layout drops the uniform cell and fits frames wherever they go, recording each rectangle in a data file. Nothing is wasted, but the engine now needs that data file to make sense of the image. Atlas loaders in Phaser, PixiJS, and Starling work this way.

Layers exist here for the same reason they exist in a paint program: to keep things that will end up in one image separate while you are still deciding. A character body on one layer, a weapon on another, hit sparks on a third. Toggle a layer off and the canvas shows you what the sheet looks like without it, and toggle it back on when you are done judging.

Cell size is the one number that touches everything else. Set it to the size the art was actually drawn at and every row lines up, the frame index maths in your engine stays trivial, and nothing is rounded. Set it a pixel or two large and every row below the first is offset by a growing amount, which is the single most common reason a sheet slices wrong on import.

Sheet dimensions matter less than they used to, but not zero. Old mobile hardware and some WebGL contexts cap a texture at 2048 or 4096 pixels on a side, and a sheet past the cap will not upload at all on those devices. Rounding the sheet up to a power of two also used to be mandatory and is now merely occasionally useful, mostly for mipmapping and for a few older engines.