Sprite Extractor

Drop files here or click (max 12 MB)

Drop an image above to start extracting sprites.

About Online Sprite Extractor

Need to turn a sprite sheet or static image into individual sprites? This Sprite Extractor automatically detects sprite regions, crops them cleanly (with optional trimming and padding), and exports ready-to-use transparent PNGs. 🚀 Ideal for Scratch projects, 2D game prototypes, classroom activities, and indie games. Works great with pixel art, UI elements, icons and characters.

Why Use This Sprite Extractor?

  • Automatic sprite detection based on transparency and configurable thresholds
  • Clean cropping with optional trimming of transparent borders around each sprite
  • Control padding, alignment (center/bottom) and optional uniform output size
  • Preserves transparency (alpha channel) for PNG exports – ideal for tilemaps and characters
  • Visual gallery of all detected sprites for quick inspection before download
  • Client-side ZIP export using JSZip, keeping your filenames and sprite order stable
  • Scratch-friendly: quickly turn a single sprite sheet into multiple costumes or assets
  • Perfect for reusing assets across engines (Scratch, Godot, Unity 2D, Phaser, etc.)

🛠️ How to Extract Sprites from a Sprite Sheet for sprite-extractor

1

1. Drop your image

Drag & drop a sprite sheet or image into the dropzone, or click to choose a file. For best results, use PNG with transparent background or high contrast between sprites and background.

2

2. Run auto-detection

The tool sends a lightweight representation of your image to a detection endpoint, which computes bounding boxes for each sprite based on transparency and minimum size. The boxes are overlaid on your image so you can quickly see what will be exported.

3

3. Tune extraction options

Adjust padding, transparent background vs solid color, trimming of transparent edges, alignment (center or bottom), and optional uniform output width/height. The tool rebuilds each sprite canvas accordingly.

4

4. Preview sprites

Scroll through the gallery of generated sprites. Each preview is built on the client using an offscreen canvas and can be renamed or discarded depending on the UI options.

5

5. Download PNGs or a ZIP

Export individual PNG sprites or download a single ZIP file containing all current previews. The ZIP is built client-side using JSZip, and filenames follow a sequential pattern like <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, etc.

Technical Specifications

Detection & Bounding Boxes

The detection phase runs on a dedicated backend endpoint and returns clean bounding boxes that the client uses to build final sprites.

AspectBehaviorNotes
Detection endpointPOST /api/sprite-extractor/inspectAccepts a data URL and detection options, returns an array of sprite boxes.
Detection inputstolerance, alphaThreshold, minWidth, minHeightTune these parameters in the UI to ignore tiny noise or capture only meaningful sprites.
Box shapeAxis-aligned rectanglesEach <code>SpriteBox</code> holds <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> in source image coordinates.
Transparency handlingAlpha-awareTransparent pixels contribute to cropping/trim decisions but can be preserved in output.
Error handlingGraceful fallbacksIf detection fails, the tool surfaces a readable error and does not break the UI.

Cropping, Trimming & Alignment

Once boxes are known, all sprite rendering is done in the browser using HTML canvas.

StepImplementationDetails
Initial cropdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Each sprite is first cropped from the original image onto a temporary canvas.
Transparent trimscan alpha channel via getImageDataThe tool scans pixels to compute the minimal non-transparent bounding box when trimming is enabled.
Paddingconfigurable 0–256 pxPadding is applied around the trimmed or cropped sprite to reduce edge artifacts in engines.
Alignmentcenter / bottomSprites can be centered or aligned to the bottom (useful for characters standing on a baseline).
Uniform output sizeoptional spriteWidth / spriteHeightWhen enabled, all sprites are rendered into a fixed-size canvas to standardize animations.
Backgroundtransparent or solid colorEither keep full transparency or fill the canvas with a chosen background RGBA color.

Performance & Limits

Designed for interactive use in the browser.

ParameterTypical BehaviorNotes
Max input size~10 MB imageLarger files may still work but will load/detect more slowly.
Sprite countup to ~400 spritesVery high counts are possible, but preview rendering and ZIP creation will take longer.
Export formatPNG inside a ZIP (Blob)The ZIP is generated entirely client-side using JSZip.
Canvas operationsPer-sprite cropping and drawingRelies on the browser's 2D canvas API; performance scales with resolution and count.

Command Line Alternatives

For massive sprite sheets or automated pipelines, you can combine CLI tools like ImageMagick with scripting.

Linux / 🍎 macOS

Uniform grid cropping with ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Cuts a regular 64×64 grid into individual PNG files.

Zip all sprites

zip sprites.zip sprite_*.png

Package all generated sprites into a single archive.

Windows (PowerShell + ImageMagick)

Grid-based cropping

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Same as above, using the <code>magick</code> CLI on Windows.

Practical Use Cases

2D Game Development

  • Extract character animation frames from a sprite sheet for Godot, Unity 2D, Phaser or Construct.
  • Isolate UI elements (buttons, icons, health bars) from a design mock-up.
  • Break down tilesets into individual tiles for level editors.
// Godot example: load multiple frames\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch & Classroom Projects

  • Turn a single sprite sheet into multiple costumes for a Scratch character.
  • Prepare themed asset packs (animals, planets, icons) for programming workshops.
  • Let students design sprite sheets in a drawing tool and then extract them for Scratch.
// Scratch-style pseudocode for simple animation\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Pixel Art & Asset Libraries

  • Split old pixel art sheets into a searchable library of individual sprites.
  • Extract only the assets you need from large commercial or open-source packs.
  • Normalize padding and alignment across sprites from different sources.

❓ Frequently Asked Questions

❓Is sprite detection fully automatic?

The tool performs automatic detection based on transparency and configurable thresholds (tolerance, alpha threshold, minimal width/height). In many cases it "just works", but for complex sheets you may need to tweak options or run a second pass.

📏Does the extractor change my original image?

No. Your original image stays untouched. The tool only reads it into an in-memory canvas, crops regions into new canvases, and then exports fresh PNG sprites.

🎯Can I control padding and alignment?

Yes. You can configure padding (in pixels), choose between a transparent or solid background, enable trimming of transparent edges, and align sprites either centered or bottom-aligned within the output canvas.

🔒Are my images stored on the server?

The detection step sends your image (as a data URL) to a dedicated endpoint to compute sprite boxes, but sprites themselves are built and zipped in your browser. The service is designed for transient processing, not long-term storage. As always, avoid using third-party tools for assets that must remain strictly private.

🧊Will transparency be preserved in the exported sprites?

Yes. By default the output canvas is left transparent and your sprites retain their alpha channel. You can optionally choose a solid background color if your target engine prefers opaque assets.

Pro Tips

Best Practice

Use a small amount of padding (2–4 px) around each sprite to prevent edge bleeding when scaling or rotating in your engine.

Best Practice

Name sprites consistently (e.g., <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) to simplify animation imports and scripting.

Best Practice

In classroom settings, start with very simple sprite sheets (few big sprites, clear background) so students see immediate results.

Best Practice

Keep the exported ZIP alongside your project's source files so you can easily regenerate or tweak animations later.

Additional Resources

Scratch Wiki – Sprites
Documentation
Godot Docs – 2D Sprite Animation
Documentation
Unity Manual – 2D Sprites
Documentation

Other Tools