Hitbox and Hurtbox Animator for Sprites

Draw collision layers on every sprite frame, preview them with onion skins, edit exact pixel coordinates, and export engine neutral JSON without uploading artwork.

Load the current animation, confirm its frame cuts, then draw the regions that attack, receive damage, block movement, grab, or sense. The filmstrip shows where every layer exists.

Local animation desk. Artwork is not uploaded.
Bring artwork to the light table

Choose one uniform sprite sheet or several ordered PNG and WebP frames. Numbered file names are sorted naturally.

Frame slicing
Motion preview
Animation light table

Load sprite artwork to reveal the frame and start drawing collision layers.

Collision filmstrip
Take the animation plan with you

The JSON stores image names, frame cuts, pivots, and collision geometry. It does not embed the image pixels.

Collision layers describe authored regions only. Test them inside your game because timing, scale, transforms, physics settings, and combat rules remain engine specific.

Zoom 100%
Utilities Studio

Want this utility on your website?

Customize colors and dark mode for WordPress, Notion or your own site.

Go Ahead

Frequently Asked Questions

What is the difference between a hitbox and a hurtbox?

A hitbox usually marks an attacking region, while a hurtbox marks a region that can receive that attack. Pushboxes can keep characters apart, grabboxes can define throw reach, and sensors can represent detection areas. Your engine and game rules decide the final behavior.

Do my sprite files leave the browser?

No. Images are decoded, sliced, drawn, and exported in your browser. The tool stores only editor preferences such as playback speed and onion skin visibility. Save the JSON file yourself if you want to keep the project.

Which coordinate system does the JSON export use?

Every frame uses pixels measured from its top left corner. Rectangle and circle bounds store nonnegative x, y, width, and height values. Each frame also stores its own pivot in the same coordinate system.

Can I edit a sprite sheet and separate frame images?

Yes. Load one PNG or WebP and set its rows and columns for uniform slicing, or select several ordered images and the tool will use one image per frame. File names with numbers are sorted naturally before the sequence is created.

Does the export work directly in every game engine?

The JSON is intentionally engine neutral. It records frame rectangles, pivots, semantic layer names, and primitive shapes without claiming a universal engine mapping. Convert those values in your project while accounting for its origin, scale, and collider conventions.

Bibliographic References

More utilities from Game Development Utilities

Steam Capsule & Art Preview Generator

Crop, preview, and format official Steam store capsules and library assets with live mockup inspection and safe zone verification.

Use Tool

Itch.io Web Game Inspector & Live Resolution Optimizer

Upload HTML5 export files or ZIP archives to test viewports live, fix aspect ratio scrollbars, inspect Godot and Unity WebGL builds, and generate copyable Itch.io dashboard embed settings.

Use Tool

Sprite Sheet Packer and Extractor

Optimize 2D game performance by packing loose animation frames into texture atlases or extracting individual sprites from existing sheets client-side.

Use Tool

Game Audio Loop Point Finder and Metadata Injector

Locate precise audio loop points, snap to zero crossings to eliminate clicks, and export WAV files embedded with LOOPSTART and LOOPEND metadata chunks for game engines.

Use Tool

Game Save File Obfuscator and Editor

Decrypt, inspect, edit JSON payloads, and re-encrypt game save files using Base64, XOR masking, or plain text 100% locally in your browser.

Use Tool

Godot and Unity Localization CSV Sanitizer

Inspect translation CSV or JSON files for empty cells, duplicate keys, and broken rows, then export a clean local copy ready for engine import.

Use Tool

Steam BBCode, Markdown and HTML Converter

Convert between Steam BBCode, Markdown, and HTML in both directions with automatic syntax detection, nested list support, and a live preview.

Use Tool

Retro Sound Effect Generator for Games

Create short retro game sound effects in your browser with instant presets, waveform controls, a live oscilloscope, and one-click WAV export.

Use Tool

Pixel Art Palette Swapper

Reduce sprites and spritesheets to classic console palettes or a custom set of hex colors directly in your browser.

Use Tool

Game UI Accessibility Stress Tester

Inspect a game screenshot locally with color vision simulations, HUD contrast probes, blur, downscale, edge collapse heatmaps, and exportable review findings.

Use Tool

Damage Formula Lab with TTK Charts

Compare safe game damage formulas through live curves, attack and defense heatmaps, rounding breakpoints, criticals, hits to kill, and time to kill.

Use Tool

Game Delta Time and Fixed Timestep Lab

Compare variable and fixed timestep game loops with repeatable frame spikes, simulated motion, catch up steps, and visible time drift.

Use Tool