How to Slice a Sprite Sheet Into Frames

You’ve got a sprite sheet — one PNG with a grid of animation frames — and the engine you’re using wants individual files. Simple enough: divide by 64, export 32 images. Except every frame comes out one pixel off, with a sliver of the neighbouring frame along one edge.

The maths was right. The sheet just wasn’t laid out the way you assumed.

What’s actually in a sprite sheet

A sprite sheet has three separate spacing values, and people routinely conflate two of them.

The frame size is the cell dimensions — 64 × 64, say.

The margin is the space between the outer edge of the image and the first cell. Some exporters add one, some don’t.

The padding (or spacing) is the gap between adjacent cells. It exists for a good reason: when a GPU samples a texture at a non-integer scale, it can pick up colour from the neighbouring pixel, and a transparent gutter prevents that bleeding.

Get any of the three wrong and every frame after the first is misaligned, with the error accumulating across the sheet. That’s why the last frame is usually visibly worse than the first.

Why people get stuck here

• Assuming zero margin and zero padding. The most common default assumption and frequently wrong.
• Irregular grids. Hand-drawn sheets where frames aren’t evenly spaced defeat any fixed-grid slice.
• Trailing empty cells. A sheet sized to a power of two often has blank cells at the end that shouldn’t be exported.
• Naming conventions. Engines expect frame_001.png or 0.png or something else entirely, and renaming forty files by hand is its own chore.

What good slicing looks like

Margin and padding as separate settings

They’re different values and they’re often different numbers. A tool that offers one combined “spacing” field will be wrong on half the sheets you meet.

Empty cells detected and excluded

A sheet with 35 frames in a 6 × 6 grid has one empty cell. Exporting it produces a blank frame that shows up as a flicker in the animation.

Numbering the engine expects

Zero-padded sequential numbering is the safe default, because it sorts correctly in every file manager and most engines. Check what yours wants before exporting.

Common mistakes to avoid

• Slicing at the wrong frame size because the sheet’s dimensions divide neatly by a number that isn’t the frame size.
• Removing padding from exported frames when the target atlas builder expects to add its own.
• Exporting frames from a JPEG sprite sheet — compression artefacts in the transparent gutter become visible edges.
• Ignoring the pivot or origin point, which many engines need per frame for correct positioning.
• Slicing a sheet that was already scaled from its original size, which puts frame boundaries on fractional pixels.

How to do it with Sprite Sheet Slicer

The Sprite Sheet Slicer reads the sheet in your browser and previews each frame before export.

1. Add the sheet and enter the frame size.
2. Set the margin and the padding separately — check the sheet’s edges to see whether either exists.
3. Look at the preview for the last frame, not the first. Alignment errors accumulate.
4. Let empty cells be excluded automatically.
5. Choose the numbering your engine expects, then export.

Other browser-only image utilities are in the tools directory.

Frequently asked questions

Why are my frames misaligned by a pixel?

Because the sheet has a margin, padding, or both, and the slice assumed neither. Check the very first frame’s top-left corner against the image edge — any gap there is a margin.

Should I keep padding in the exported frames?

No. Padding belongs in the packed sheet, where it prevents texture bleeding. Individual frames should be tight to the sprite, and the atlas builder will add gutters when it repacks.

Can frames be detected automatically?

Grouping connected non-transparent regions works well for clearly separated sprites and poorly for a character whose limbs don’t touch the body — those come out as separate frames. A fixed grid is more reliable when the sheet has one.

Final thought

Check the last frame first. If frame one looks perfect and frame thirty-two is a pixel out, your frame size is right and your padding is wrong.

Try the free Sprite Sheet Slicer