Collision Box Editor
Draw collision rectangles on a sprite and export as JSON.
What it does
Drop a sprite, draw one or more rectangles on top, label each box (e.g. body, hurtbox, attack), and export a JSON ready to load into your engine.
How to use it
1. Upload sprite.
2. Click and drag to draw a box.
3. Name it. Add more boxes.
4. Export JSON — keys are box names, values are { x, y, w, h }.
Pro tip
Author per-frame hitboxes by repeating this for each frame and packing them into a single JSON keyed by frame index.
Open the tool
Find it on the Tools page under its category. Every tool runs in your browser — no upload limits, no credits charged.
Ready to try it?
Open the generator →