🎞️ Image Toolbox

Sprite Sheet Animator

Split sprite sheets, remove solid-color backgrounds, preview frame animations, drag frames to fix alignment, reorder frames, and export your animation assets directly in the browser.

🔒 Local Processing ✂️ Auto & Manual Split 🧲 Drag to Align 🧩 Frame Reorder

👁️ Animation Preview

Drag Frame
🧲 Drag current frame here to align. Offset X/Y will update automatically.
ms/frame 12.5 FPS

Frames (0)

↕ Drag frames to reorder
⋮⋮
Frame
1
⋮⋮
Frame
2
⋮⋮
Frame
3
⋮⋮
Frame
4

Export Options

Transparent PNG supported

Export JSON

Save frame order, offsets, duration, split mode, and background removal settings.

Export PNG Sequence

Export each corrected frame as a transparent PNG and download as a ZIP file.

Export Sprite Sheet

Rebuild a corrected sprite sheet based on the current frame order and offsets.

Export GIF Preview

Export an animated GIF using the current frame order, offsets, and frame duration.

Practical guidance

Sprite sheets are efficient for game animation, but they are only useful when frames are split correctly and aligned consistently. This tool is built around the animation preview first: split the sheet, remove a solid background, reorder frames, adjust offsets, and export corrected animation assets.

How to Use

  1. Upload a sprite sheet image such as PNG, WebP, or JPG.
  2. Use Auto Grid for regular rows and columns, or Manual Slice for irregular layouts.
  3. Enable solid-color background removal if the sheet uses green, blue, white, or another flat color.
  4. Preview the animation, drag frames to align them, and export the results.

Features

  • Auto grid splitting by rows and columns.
  • Manual slice lines for irregular AI-generated sheets.
  • Solid-color background removal with color picking and tolerance.
  • Animation preview with center and ground reference lines.
  • Frame ordering, offset correction, PNG sequence, sprite sheet, JSON, and GIF export.

Use Cases

  • Fixing jitter in character idle, walk, attack, and effect animations.
  • Turning green-screen sprite sheets into transparent frame exports.
  • Checking AI-generated sprite animation before importing into a game engine.
  • Preparing UI effects, item animations, and pixel art loops.

Privacy and local processing

The sprite sheet is processed in your browser with Canvas APIs. Splitting, background removal, frame offsets, preview playback, and export are performed in the current page, and the working data is cleared when you leave or refresh unless you download the output.

Related tools and guides

PNG PixelCut out UI assets and sprites. Sprite sheet guideLearn the basics of sprite sheets. Fix jitter guideUnderstand frame alignment.

Additional FAQ

Is this AI background removal?

No. It removes selected solid colors using Canvas pixel processing, which works well for green-screen or flat-color sprite backgrounds.

Can I export a GIF?

Yes. The GIF preview export uses the current frame order, offsets, and frame duration. GIF transparency is limited by the GIF format.

Can I fix frames that jump around?

Yes. Select a frame and adjust Offset X/Y numerically or drag it inside the preview area.

How to Use the Sprite Sheet Animator

  1. Upload a PNG, WebP, or JPG sprite sheet.
  2. Remove a solid-color background, such as green, blue, white, or any selected color.
  3. Choose Auto Grid for regular sprite sheets or Manual Slice for irregular AI-generated layouts.
  4. Preview the animation and adjust frame duration, loop, and playback order.
  5. Drag the current frame inside the preview to fix alignment. Offset X/Y updates automatically.
  6. Drag frame thumbnails to reorder the animation sequence.
  7. Export JSON, PNG sequence, or a corrected sprite sheet.

Features

  • Automatic grid split with rows and columns.
  • Manual horizontal and vertical slice lines for irregular sprite sheets.
  • Solid-color background removal for transparent animation frames.
  • Large animation preview with center crosshair and ground baseline.
  • Drag-to-align preview for quick frame offset correction.
  • Frame thumbnail drag-and-drop reordering.
  • Browser-based export for JSON, PNG sequence, and corrected sprite sheet.

Use Cases

  • Preview game character walk, idle, attack, or UI effects.
  • Fix jitter caused by AI-generated animation frames.
  • Convert green-screen sprite sheets into transparent PNG frames.
  • Prepare 2D animation assets for mobile games, web games, or UI effects.
  • Reorder frames and export a cleaner sprite sheet for development.

FAQ

Does this tool upload my images?

No. The interface is designed for browser-side processing. Your sprite sheet should be handled locally in your browser.

Can I use it with AI-generated sprite sheets?

Yes. Manual Slice mode is designed for irregular layouts where AI-generated frames are not perfectly aligned.

Can I drag frames to fix jitter?

Yes. Select a frame, then drag it in the animation preview. The Offset X and Offset Y values should update in real time after JavaScript integration.

Can I export transparent frames?

Yes. If background removal is enabled, exported PNG frames can keep transparency.