Sprite Asset Detector

What It Does

Scans a sprite sheet pixel-by-pixel using a connected-component BFS algorithm to locate all distinct non-background regions. Each detected region gets a labeled bounding box drawn over the original image so you can visually verify the detection. The JSON export follows the standard sprite atlas format compatible with Phaser, PixiJS, and Unity.

How To Use

• Drop a sprite sheet onto the canvas.
• Choose Alpha for transparent PNGs or Color key for solid backgrounds.
• Click the canvas to sample a background color when using color-key mode.
• Set a minimum sprite size to filter out noise.
• Click Detect Sprites to see overlaid bounding boxes.
• Adjust Edge smoothing — downloaded assets will have the background removed with a soft alpha falloff at the border.
• Export the annotated image or the JSON atlas for use in your game engine.

Alpha vs. Color Key

Alpha mode treats any pixel with meaningful opacity as sprite content — the right choice for modern PNG sheets with transparent backgrounds. Color key is for older assets: sheets exported on magenta, green, or whatever solid color the original artist used. Click anywhere on the preview to sample the exact background color, then widen the tolerance slider if anti-aliased edges leave halos. If detection merges two sprites into one box, they're touching — a color-key tolerance that's too generous often causes this.

When You'd Reach for This

The slicer next door handles sheets on a uniform grid. This tool handles the messy ones: sprites of different sizes scattered wherever the artist dropped them. Recovering assets from an old game build, unpacking a sheet that shipped without its atlas file, or auditing a sheet an artist just delivered — the numbered bounding boxes tell you in seconds whether frame 12 is where the metadata says it is. The coordinate table below the grid gives you exact x, y, width, and height for every sprite, ready to paste into engine config.

FAQ

Does my sprite sheet get uploaded?

No. Detection, cropping, and ZIP packing all run in your browser on a canvas. The image never leaves your machine.

Why are tiny specks being detected as sprites?

Stray pixels and dust in the source image form their own connected regions. Raise the Min size slider until they drop out — 4 px catches most noise without eating small sprites.

What does edge smoothing actually do?

It only affects downloads. Border pixels near the background threshold get a soft alpha falloff instead of a hard cut, so extracted sprites don't show jagged fringes when composited on a new background. Set it to 0 for pixel art where you want hard edges.

Which engines read the JSON atlas?

The export uses the frames-hash format that Phaser and PixiJS load directly; Unity and most other engines can import it with a small script since it's plain JSON with x, y, w, h per frame.