Image Tools

Spritesheet Slicer & Padding Tool

Upload a spritesheet to slice it by rows and columns, add transparent padding to prevent texture bleeding, download individual frames, repack a compact atlas and export JSON atlas coordinates.

How It Works & Methodology

A spritesheet (texture atlas) is a single image holding many animation frames laid out on a grid. This tool slices it by rows, columns, margin and spacing, then lets you add transparent padding around every frame to stop texture bleeding before repacking the frames into a compact atlas.

Frame width = floor((imageWidth - 2*margin - (cols-1)*spacing) / cols) Frame height = floor((imageHeight - 2*margin - (rows-1)*spacing) / rows) Padding expands each frame by its per-side values; the atlas is packed row-major into a roughly square sheet and the JSON metadata records each frame x/y/w/h.
Key Assumptions & Scope:
  • Frames are laid out on a uniform grid of equal cells.
  • Padding is transparent and only affects the repacked atlas, not the original frame crops.
  • Atlas JSON coordinates reference the packed sheet and exclude the transparent padding.

Frequently Asked Questions

What is texture bleeding and how does padding help?

Texture bleeding happens when a GPU samples pixels slightly outside a frame, pulling in neighbouring frames or transparent pixels and producing dark or coloured edges. Adding a few pixels of transparent padding around each frame isolates it and prevents this fringe in game engines.

Can I download a single frame as a PNG?

Yes. After slicing, every frame is listed with its own download button, exporting that frame as a transparent PNG.

What is included in the JSON atlas export?

The exported JSON maps each frame to its x, y, w and h coordinates inside the packed atlas image, ready to feed into Phaser, PixiJS, Unity or a custom renderer.