Hitbox & Collision Box Editor
Free hitbox editor. Draw hurtboxes, hitboxes and collision boxes on each frame of a sprite sheet, copy them forward, and export JSON or Godot data.
Drop a sprite or sprite sheet
How to use the Hitbox & Collision Box Editor
- Drop a sprite or sprite sheet and set its columns and rows.
- Drag on empty space to draw a box; pick its layer, such as hurtbox or hitbox.
- Step through the frames with the arrow keys and use Copy to next to carry boxes forward.
- Export JSON, or Godot JSON with boxes centered on the sprite.
Using it in your game
Read the boxes per frame at runtime and move your collision shapes to match: in Godot, set each CollisionShape2D’s position and size on frame change.
Frequently asked questions
What is the difference between a hitbox and a hurtbox?
A hitbox is the area that deals damage, like a sword swing on the active frames of an attack. A hurtbox is the area that can be hit, usually the body. Most action and fighting games check one against the other every frame.
How do I draw boxes for a whole animation?
Draw the boxes on the first frame, then press Copy to next: the boxes are copied onto the next frame and the editor moves there, so you only nudge what changed. Arrow keys step through frames.
What does the JSON contain?
The frame size and sheet grid, the layer names, and for every frame a list of boxes with their layer and x, y, width and height in pixels from the frame’s top-left corner.
What is different in the Godot export?
Boxes are grouped by layer and given as a centre position and size relative to the middle of the frame, which is what a CollisionShape2D with a RectangleShape2D under a centred Sprite2D expects.
Create game assets with AI
Generate original art, audio, and 3D models in seconds.