Sprite Sheet Splitter

What It Does

Scans the uploaded image for distinct non-background regions using a connected-component flood-fill algorithm. Each isolated region is treated as one sprite and cropped into its own PNG. It supports two modes: alpha transparency (pixels with alpha < threshold are background) and color key (pixels within a color distance of the chosen background color are background).

How It Works

The tool reads every pixel via the Canvas API. For each unvisited foreground pixel it performs a 4-directional BFS to find all connected pixels, records the bounding box, then skips boxes smaller than the minimum size. The padding value expands each bounding box outward before cropping. Nothing leaves your browser.

How To Use

• Drop or browse a sprite sheet image.
• Choose Alpha transparency for sheets with transparent backgrounds (PNG).
• Choose Color key for solid background colors (e.g. magenta #FF00FF) and set tolerance.
• Click the image preview to sample a background color automatically.
• Adjust padding and minimum size, then click Detect Sprites.
• Download individual sprites or all at once.

When You'd Reach For This

The classic case: you've got a character sheet from an asset pack or an old game and your engine wants one file per frame. Cutting sprites out by hand in an image editor is tedious and error-prone — one crop off by a pixel and the animation jitters. It's also handy for pulling individual icons out of a UI atlas, splitting a downloaded emoji or icon strip into separate files, and rescuing assets from retro-style sheets where everything sits on a magenta or lime-green background. Because detection follows the actual pixels instead of a fixed grid, it works even when sprites are different sizes or unevenly spaced.

Frequently Asked Questions

It found way too many sprites. What now?

Usually that means one visual sprite is made of disconnected parts — a character and its detached shadow count as two regions. Raise the min asset size to drop stray specks, or increase padding so nearby fragments merge into one crop. In color-key mode, bumping the tolerance also helps when anti-aliased edges are being read as foreground.

Which detection mode should I pick?

If your sheet is a PNG with a transparent background, use alpha — it's the most reliable. Color key is for sheets with a solid background fill. Don't guess the hex value: switch to color-key mode and click the background in the preview to sample it directly.

Why does the output look grid-checkered?

That checkerboard is just the preview showing transparency. The downloaded PNGs have a real transparent background, ready to drop into an engine or editor.

Is my sprite sheet uploaded anywhere?

No. The pixel scanning, cropping, and PNG encoding all run in your browser tab. Unreleased game art never touches a server.