SPRITE SHEET GUIDE

How to choose sprite-sheet cell size and spacing

A sprite sheet looks simple because it stores many frames in one image, but automated slicing depends on a strict layout rule. The most important distinction is between the visible drawing size and the cell size reserved for a frame. Once that contract is stable, slicing, previewing, and rebuilding the sheet become much easier to reproduce.

A cell is the common space reserved for a frame

A jump or attack frame may be wider than an idle frame. If every cell is resized to fit only its visible pixels, the sheet stops behaving like a regular grid. A more stable approach is to choose a common cell large enough for the biggest frame and place smaller frames inside that space while preserving their intended origin.

Rows, columns, and image dimensions must agree

A 1024×512 sheet split into 8 columns and 4 rows yields 128×128 cells. If the width is 1025 instead, even slicing creates a remainder and can shift a boundary. A quick first diagnostic is to divide the full width by the column count and the full height by the row count and confirm that both results are integers.

Keep spacing and padding regular

Some pipelines place one or two transparent pixels between cells to reduce texture bleeding. If spacing exists, a slicer that knows only the visible cell dimensions cannot cut the sheet correctly. Define outer padding and inter-cell spacing as explicit values and apply the same rule to every row and column.

Centering a smaller frame is not the same as aligning its pivot

Putting a small image in the visual center of a larger cell makes the grid look tidy, but it can move the feet or weapon origin. Layout alignment and gameplay pivot alignment are separate concerns. The common cell should solve packing; the pivot should solve coordinate stability.

Use file names to preserve sequence

For animation sheets, encode order directly in names such as attack_001 through attack_008. Fixed-width numbering stays readable and predictable across tools and operating systems.

Animation sheets and packed atlases solve different problems

Animation sheets prioritize frame order and repeatable cell rules. UI atlases often prioritize packing efficiency and may use irregular rectangles. A dense atlas packer can be appropriate for the latter, while a regular grid is easier to inspect and reconstruct for animation.

Recommended workflow

1. Check full dimensions and expected rows and columns.
2. Identify outer padding and spacing between cells.
3. Use Sprite Sheet Slicer and inspect the first and last boundaries.
4. For animation, validate pivots with Pivot Aligner and playback with Animation Preview.
5. Rebuild with Sprite Sheet Builder only after the rule is confirmed.

Slicing-error checklist

• Do width and height divide evenly by the grid?
• Is there hidden spacing between cells?
• Do the first and last frame boundaries match the same rule?
• Does file order match playback order?
• Is the intended pivot preserved inside the common cell?