How to cut and export a sprite sheet

Open the sheet in the sprite-sheet cutter and check the grid over the first sprite, the last sprite in a row and the bottom row. If the boxes drift, fix the frame size and spacing before adjusting where the grid starts.

Use the original sheet at its intended pixel dimensions. A resized preview copied from a website may no longer have evenly sized cells.

Set the grid and check the frames

1. Enter Frame width and Frame height, or review the detected values.
2. Set the number of rows and columns.
3. Enter the gutters under Spacing across and Spacing down.
4. Use Margin left and Margin top for the border before the first frame. Use Offset X and Y if the grid needs an additional shift.
5. Inspect the overlay, then deselect unwanted frames and adjust their order.
6. Use Play or Step to check the animation before exporting.

For a sheet with 32 × 32 cells and a two-pixel gap, enter a frame width of 32 and spacing of 2, not a frame width of 34. The gutter belongs between frames, not inside each exported picture.

Diagnose a misaligned grid

What you see	Check first
Boxes are the wrong size	Frame width and height
The first box fits but later boxes drift	Frame size plus spacing: together they set the step between cells
Every box is shifted by the same amount	Margin and offset
Rows fit but columns do not, or the reverse	The separate horizontal and vertical settings
The last row includes empty or cut-off cells	Row and column counts, then which frames are selected

If the first frame is right and the eighth starts 14 pixels too far across, the seven steps between them are two pixels too large. That can come from the width, the spacing or a combination; it is not proof that spacing alone is wrong.

Treat auto-detection as a starting point

The detector looks for rows and columns with very low alpha, then tries to infer regular content runs and gaps. It can help on a transparent sheet with clear gutters, but it does not know the artist’s intended cell size.

Common cases that need manual settings include:

• Frames that touch, with no transparent gutter between them.
• Sheets with a solid background rather than transparency.
• Sprites that occupy only the middle of a larger cell.
• Irregular atlases with differently sized or rotated entries.

For an irregular atlas, use its supplied metadata or an atlas-aware editor. This cutter uses one regular grid, not a different rectangle for each sprite.

Choose the export for your next step

ZIP of frames packages the selected PNGs and JSON metadata in one download. It is convenient for a game or animation editor that imports separate images. Individual PNGs is available for up to 40 selected frames; browsers can restrict multiple automatic downloads.

Repack across and Repack down place the selected frames into a horizontal or vertical PNG strip with no added gutters. This is useful when an engine or CSS sprite animation expects a regular strip. Cutting and repacking use the decoded source pixels without scaling or smoothing.

Animated GIF makes a playback copy. Use PNG frames or a PNG strip when you need to retain the source alpha values: the current GIF export is not configured to preserve transparent pixels, and GIF cannot represent PNG’s full partial transparency in any case.

If your starting file is already a GIF, GIF frame extraction is the more direct route. Pixel-art conversion is a separate operation that changes resolution or colours; cutting a sheet does not require it.

Check partial frames and timing

A 100 × 32 image can hold three complete 32 × 32 frames with four pixels left over, if there are no margins or gutters. Inspect those pixels: they could be padding or part of content you did not mean to exclude.

Frames extending beyond the sheet are flagged and exported at the declared frame size, with transparent padding outside the source. That keeps their dimensions consistent but does not restore missing artwork. Check the first and last exported frames before importing the whole set.

GIF stores delays in hundredths of a second. With this tool’s equal-delay rounding, a requested 12 fps becomes 12.5 fps. The effective GIF rate is shown beside Frame rate. Actual playback can also depend on the viewer. For timing controlled by your game, import PNG frames and set the timing in the engine.

How positions are calculated

For either axis, the position of frame n, counting from zero, is:

position = margin + offset + n × (frame size + spacing)

With a four-pixel left margin, 32-pixel frames, two-pixel spacing and zero offset, the first four x positions are 4, 38, 72 and 106. There are three internal gaps between four frames; any border after the last frame is a separate matter.

What the JSON coordinates refer to

The JSON uses a TexturePacker-style frame map. A typical untrimmed entry looks like this:

{
  "frames": {
    "hero_00.png": {
      "frame": { "x": 0, "y": 0, "w": 32, "h": 32 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 },
      "sourceSize": { "w": 32, "h": 32 }
    }
  }
}

The exported coordinates describe the original sheet. They are not updated to describe a repacked strip, and the ZIP’s JSON is not an atlas map of its individual PNG files. Use it with the source sheet, or generate matching metadata for your repacked image in the destination workflow. Your loader may also need an image filename or other wrapper fields.

trimmed: false means surrounding transparent space has not been removed. An atlas packer that trims a frame needs to record both its original size and the trimmed image’s position within it. That lets an engine place each animation frame consistently.

The cutter zero-pads exported frame numbers. Keep that naming order when importing, so a plain filename sort does not place frame 10 before frame 2.

Sources and further reading

• W3C — PNG specification, including alpha
• GIF89a specification — Graphic Control Extension and delay time
• Phaser — loader documentation
• PixiJS — spritesheets and frame metadata
• MDN — steps() easing for sprite-strip animation
• MDN — image-rendering for pixelated scaling

Last reviewed 2 October 2026.