⚡ Sprite Analyzer | Sorceress Wiki | Sorceress

Open Sprite Analyzer

Sprite Analyzer is a Sorceress tool for turning sprite-sheet artwork into organized, game-ready animation assets. It helps you inspect sheets, select frames, preview movement, define gameplay-aware animation sections, align frames, add combat hitboxes, export cleaned-up files, and save reusable Sprite Sets.

What it does

Sprite Analyzer helps you take one or more sprite-sheet images and prepare them for use in a game:

Upload one or multiple image sprite sheets.
Automatically detect the sprite grid and the range of used frames.
Manually override columns and rows when detection needs correction.
Select, range-select, paint-select, and clear animation frames.
Preview animations at a chosen FPS.
Define animation sections: Start, Middle, End, and named Custom sections.
Toggle section playback options: loop, ping-pong, and reverse.
Align frames using an auto-center tool, a center guide, or 1-pixel nudges.
Draw one damage-dealing combat hitbox per frame.
Test configured sheets in the Playground tab.
Export repacked sprite sheets, individual frame PNGs, JSON setup data, combat hitbox data, and an integration prompt for an AI coding agent.
Save and reload groups of configured sheets as Sprite Sets.
Copy frame, animation, and combat setup from a saved Sprite Set onto another open sheet.

Logged-out visitors may see a demo sheet. Uploading your own files, saving Sprite Sets, and exporting configured assets require signing in and access to the Pro toolset.

Workspace overview

Sprite Analyzer is organized into three main areas:

Left panel: upload files, switch between open sheets, rename sheets, save or load Sprite Sets, copy settings from saved sets, and manage animation sections.
Center workspace: switch between the Animation, Combat, and Playground tabs.
Right panel: preview animations, change playback settings, align frames, inspect combat hitboxes, and export assets.

On mobile, use the toolbar buttons to open the Files panel or the Animation & Export panel.

The left and right side panels are resizable on desktop. Sprite Analyzer remembers panel widths between sessions in the same browser.

Uploading sprite sheets

Open Sprite Analyzer.
Sign in if prompted.
Use Upload or Drop in the left panel.
Select one or more image files, or drag image files into the upload area.
Sprite Analyzer loads each image, detects the grid, and selects the detected used frames.

Only image files are accepted. Multiple sheets can be open at once, and each sheet keeps its own configuration, including grid settings, selected frames, FPS, animation sections, frame offsets, hitboxes, and export size.

Managing open sheets

In the Files tab:

Click a sheet to open it.
Double-click a sheet name to rename it. The display/export name uses your custom name when set; clearing the custom name returns to the original filename.
Click × to remove a sheet from the workspace.
Click Clear to remove all loaded sheets.
Use Ctrl-click or Command-click to multi-select sheets. Some edits, such as FPS and Start/End values, apply to all selected sheets.
Click All in the file list to select every loaded sheet.
Click Deselect to clear a multi-selection.
Use the copy button beside a sheet to copy setup from a saved Sprite Set.

Detecting and adjusting the grid

When a sheet is loaded, Sprite Analyzer attempts to detect:

Columns and rows.
Frame width and height.
Transparent margins or spacing where possible.
The last used frame.

To run detection again, click Auto-Detect in the Animation tab toolbar.

Manual grid override

If detection is wrong:

Enter the correct col and row values in the toolbar.
If you want the same column and row count applied to every uploaded sheet, enable All.
Click OK.

Manual grid mode divides the full image evenly into the chosen column and row count. It resets margins and spacing to zero and selects all frames in the new grid.

Manual grid values are limited to a maximum of 256 columns by 256 rows to avoid accidentally creating an extremely large grid.

Selecting animation frames

In the Animation tab, the main canvas shows the sheet with frame numbers and selection overlays.

Selection controls:

Click a frame to add or remove it.
Shift-click to add a range from the last clicked frame.
Drag across frames to paint-select or paint-remove a range.
Double-click the sheet to toggle between all frames selected and no frames selected.
Click All in the toolbar to select every frame.
Click Clear selected to clear the current frame selection.

Selected frames are highlighted in green. The toolbar shows the current frame size and the selected/total frame count.

Zooming and panning the sheet

Use the mouse wheel over the sheet to zoom toward the cursor.
Use the zoom buttons to zoom in, zoom out, fit, fit width, or view at 1:1.
Middle-mouse drag pans the sheet.

Animation preview

The right panel shows an animation preview for the current selected frames.

Controls include:

FPS: playback speed in frames per second. The input is intended for values from 1 to 60.
Start: first frame in a contiguous selection range.
End: last frame in a contiguous selection range.
Play/Pause: starts or stops playback.
Preview size buttons: shrink or enlarge the preview area.
Mouse wheel over preview: zoom the preview.
Middle mouse or Alt + left drag over preview: pan the preview.
Reset zoom: appears when the preview is zoomed and returns zoom/pan to normal.
HD/Fast: HD renders a higher-quality preview; Fast uses a lower-resolution preview for smoother playback with large frames or many frames.
Playground: opens the Playground tab when at least one configured sheet has selected frames.

The preview displays the current frame number and selected frame count. If the current frame has an alignment offset, the offset is shown beside the frame readout.

Aligning animation frames

Sprite sheets sometimes jitter because the character is not positioned consistently from frame to frame. Sprite Analyzer provides alignment tools directly on the animation preview.

Center guide

Click the crosshair button in the preview to show or hide a center guide. This is useful for checking whether a character stays visually centered through an animation.

Auto-center frames

Auto-center aligns the selected frames relative to the first selected frame.

Axis modes:

Both axes: align horizontally and vertically.
Horizontal: align left/right only.
Vertical: align up/down only.

To use auto-center:

Select the frames you want to align.
Choose an axis mode.
Click the target/auto-center button.
Click it again to turn auto-centering off and clear the auto-center offsets.

Auto-centering aligns horizontal position by image content and vertical position by the bottom of the visible character, which helps keep feet grounded.

Manual nudging

Use the directional pad in the lower-left of the preview to adjust the current frame:

Nudge up, down, left, or right by 1 pixel.
Use the center reset button to recenter the current frame.
Use the reset-all button near the auto-center tools to clear every frame offset.

Offsets are applied when exporting sprite sheets and individual frame PNGs.

Animation sections

Animation sections tag frame groups for animation playback and gameplay integration. Sections can overlap.

Available section roles:

Start: a beginning phase, usually played once.
Middle: a main or held phase. Middle loops by default when first assigned.
End: an ending phase, usually played once.
Custom: a named and optionally described gameplay section, such as “kick,” “windup,” or “landing.”

Creating sections

Select one or more frames in the Animation tab.
Right-click the selected frames.
Choose Set as Start, Set as Middle, Set as End, or Set as Custom….
For a custom section, enter a name and optional description.

Start, Middle, and End are unique per sheet. Assigning one again replaces the existing section for that role. Custom sections are unlimited.

Section playback toggles

Each section has its own playback toggles:

Loop: repeat the section.
Ping-pong: play forward and then backward for a back-and-forth loop.
Reverse: play the section frames backward.

You can set toggles from the right-click menu after assigning the selected frames to a section, or from the Sections list at the bottom of the left panel.

Managing sections

In the left panel’s Sections area:

Click a section row to preview it.
Toggle L, PP, or R for loop, ping-pong, and reverse.
Edit a custom section’s name and description inline.
Remove a section with ×.
Copy section JSON with JSON.
Download section JSON with the download button.

Frames that belong to sections are marked on the sheet with colored borders and labels. Overlapping sections stack their labels.

The right-click menu also includes options to play the selected section, clear the matching section, or clear all sections.

Combat hitboxes

The Combat tab lets you define attack hitboxes: rectangles showing where the character deals damage on a frame.

Important behavior:

Each frame can have one hitbox.
Drawing a new hitbox on a frame replaces that frame’s previous hitbox.
Hitboxes are stored in frame-pixel space so they line up with exported frames.
If animation sections exist, the Combat tab shows the union of all section frames.
If no sections exist, the Combat tab shows the current selected frames.
Section labels appear on frames in the Combat grid.

Drawing and editing a hitbox

Select frames in the Animation tab, or define animation sections first.
Open the Combat tab.
Drag on a frame to draw a red hitbox.
Click a frame to select it.
Drag the hitbox to move it.
Drag the bottom-right handle to resize it.

Combat grid controls:

Mouse wheel zooms toward the cursor.
Middle-mouse drag pans.
The percentage readout shows the current zoom level.
The reset button resets zoom and pan.
Delete or Backspace removes the selected frame’s hitbox, unless you are typing in a field.
Clear all removes every hitbox from every frame after confirmation. This cannot be undone.

Hitbox inspector settings

When a hitbox is selected, the right panel shows its properties.

Position & size

X: left position in frame pixels.
Y: top position in frame pixels.
W: width in pixels.
H: height in pixels.

Optional parameters

These are extra values for your game engine. Leave them unchanged if you do not need them.

Type: a text label for the hit. Suggested presets include punch, kick, slash, projectile, and special.
Damage: numeric damage value.
Knockback X/Y: horizontal and vertical knockback values.

Copying and deleting hitboxes

The inspector includes:

Copy to all frames: copies the current hitbox to every selected frame.
Copy to all frames after: copies the current hitbox to the current selected frame and every selected frame after it.
Delete hitbox: removes the selected hitbox.

Playground tab

The Playground tab opens an interactive preview using configured sheets that have selected frames. It is useful for quickly checking how animations feel in a simple movement-oriented test space.

If no configured sheets are available, select frames on at least one sheet first.

You can open Playground from the center tab strip or from the right panel’s Animation Preview area. The Playground includes a close control that returns you to the Animation tab.

Exporting

Exports are available in the right panel’s Download section. You must be signed in with Pro access.

Before exporting, you can rename the current sheet in the text field. This name is used for export-friendly filenames.

Frame size on download

The Frame size box controls exported frame dimensions:

By default, frames export at native size.
Enter a new width or height to resize on download.
Use the link button to lock or unlock aspect ratio.
Click reset to return to native size.

When resizing is used, exported setup data is updated to match the new frame width and height. Combat hitboxes are scaled into the exported frame size.

Download sprite sheets

The Download sprite sheets menu offers:

Current sprite sheet: exports the current sheet’s selected/tagged frames as a repacked PNG plus JSON, and a combat hitbox JSON when hitboxes exist.
All sprite sheets: exports all configured sheets as separate PNG and JSON files, including combat hitbox files when present.
Everything (.zip): exports all configured sheets in one ZIP, including all PNGs, a combined manifest, combat hitbox files when present, and an integration guide.

When exporting a repacked sprite sheet, Sprite Analyzer includes the union of:

Selected frames.
Frames used by animation sections.
Frames with combat hitboxes.

This prevents tagged or hitbox-bearing frames from being accidentally dropped, even if they are not currently selected.

Download frames

The Download frames menu offers:

Current sprite frames: downloads the current sheet’s selected frames as individual PNGs in a ZIP.
All sheets’ frames: downloads every configured sheet’s selected frames as individual PNGs in one ZIP.

Frame offsets and download resizing are applied to individual frame exports.

Exported setup data and agent prompt

Sprite sheet exports include setup data describing the sheet layout, selected frames, animation sections, playback settings, and combat hitbox references when applicable.

Use Copy agent prompt to copy a ready-to-paste integration brief for an AI coding agent. The prompt explains how to slice exported sheets, play animation sections, and apply combat hitboxes.

Saving and loading Sprite Sets

A Sprite Set saves your current collection of sheets and their configurations, including:

Sheet names and custom export names.
Grid settings.
Selected frames.
FPS and preview settings.
Frame offsets.
Animation sections.
Combat hitboxes.
Export resize settings.

Save a Sprite Set

Load and configure one or more sheets.
Click Save Sprite Set in the left panel.
Enter a name if this is a new set.
Wait for the save progress to complete.

After a set is saved, the button changes to save updates to that named set.

Load a Sprite Set

Open the Sprite Sets tab in the left panel.
Click a saved set.
Sprite Analyzer loads the set and restores its sheets and configuration.

Delete a Sprite Set

In the Sprite Sets tab, use the trash button on a saved set to delete it.

Copying settings from another Sprite Set

You can copy frame, animation, alignment, and combat setup from a saved Sprite Set onto an open sheet.

In the open file list, click the copy button beside the target sheet.
Choose a saved Sprite Set.
Choose a configured sheet inside that set.
Sprite Analyzer applies the saved setup to the target sheet.

Copied settings can include grid setup, selected frames, FPS, frame offsets, animation sections, export resize settings, and combat hitboxes.

If the source and target use different column counts, Sprite Analyzer can reshuffle the target sheet to match the source column count so frame-based settings line up. The target keeps its own image, but the layout may be repacked to match the copied frame order.

Tips and troubleshooting

Auto-detect picked the wrong grid

Use the manual col and row fields, then click OK. Manual grid mode divides the whole image evenly and clears detected margins and spacing.

My animation includes the wrong frames

Check the green selected frames. Use click, drag, Shift-click, All, and Clear selected to rebuild the selection. If you use sections or hitboxes, remember those frames are also included when repacking sprite-sheet exports.

The animation jitters

Use the center guide, auto-center tools, and manual nudge controls in the preview. Exported sprite sheets and frame ZIPs include those offsets.

Playback is slow

Switch the preview from HD to Fast. This only affects preview quality, not the exported files.

I do not see frames in the Combat tab

Select frames in the Animation tab or define animation sections first. If sections exist, Combat shows the union of section frames rather than only the current selection.

My hitbox disappeared when I drew again

Each frame supports one hitbox. Drawing a new hitbox on a frame replaces that frame’s existing hitbox.

I accidentally clicked Clear all hitboxes

The tool asks for confirmation before clearing all hitboxes. Once confirmed, the action cannot be undone.

Export did not include combat data

Combat hitbox files are only exported for sheets that have at least one hitbox. Add hitboxes in the Combat tab before exporting.

I cannot upload or export

Sign in and ensure you have Pro access. Logged-out users may see a demo, but cannot upload their own sheets or export configured assets.

A saved sheet does not load

If a saved image fails to load, reload the page and try opening the Sprite Set again. If the issue persists, re-upload the sheet and save the Sprite Set again.

FAQ

Does Sprite Analyzer edit the original image file?

No. The loaded sheet remains the source. Exports generate new files based on the current configuration.

Can sections overlap?

Yes. Start, Middle, End, and custom sections can share frames. Custom sections are useful for gameplay-specific labels.

Can a frame have multiple hitboxes?

The current Combat editor supports one hitbox per frame.

Are hitboxes for taking damage or dealing damage?

They represent where the character deals damage.

Can I export only individual frames?

Yes. Use Download frames to export the current sheet’s selected frames or all configured sheets’ selected frames as PNGs in a ZIP.

Can I work with multiple sprite sheets at once?

Yes. Upload multiple images, switch between them in the left panel, multi-select sheets for some shared edits, and export all configured sheets together.

What should I give to an AI coding agent?

Use Everything (.zip) for the most complete export, then use Copy agent prompt to provide the agent with integration instructions.