Sprite Sheet Builder

Arrange multiple frame images in order to create one PNG sheet.

How to use

  1. Choose frame images in the desired order.
  2. Set the number of columns per row and the gap between cells.
  3. Press the button to save the PNG sheet.

How cells are laid out

The largest width and height among the selected frames become the common cell size. Smaller frames are centered inside that cell, rows are added as needed from the selected column count, and the requested gap is inserted between cells.

Frame order matters

The builder uses the file order provided by the browser. For production animation, use numbered filenames such as 001, 002, and 003 before selection so the intended playback order is obvious and reproducible.

Align pivots before rebuilding a sheet

If animation frames have different transparent margins, centering them in equal cells does not guarantee a stable character origin. Align pivots first, preview the animation, and rebuild the sheet only after the frame origin is consistent.

Supported formats

Supports PNG, JPG, and WebP images readable by your browser.

Limitations

Cell size is based on the largest selected width and height. Smaller images are centered in each cell.

FAQ

How is frame order determined?

The browser-provided file order is used. Prefix filenames with numbers when exact order matters.

Related tools