Physics Body Editor
Draw precise collision shapes over your sprite images and export JSON for PixiJS, Phaser 3 and Matter.js.
1
Load Sprite
Drop your image onto the canvas or use the Load Image button.
2
Draw Shapes
Click to place polygon vertices. Add circles or rectangles with the shape tabs.
3
Fine-tune
Drag any vertex to reposition. Select & delete individual shapes.
4
Export JSON
Choose your engine (PixiJS, Phaser, Matter.js) and copy or download the JSON.
Drop sprite image hereor click "Load Image" above · PNG, JPG, GIF, WebP
What is a Physics Body Editor?
When building 2D games, every object needs a collision shape — the invisible boundary the physics engine uses to detect collisions. A simple axis-aligned bounding box is fast but inaccurate. A precise polygon that follows the outline of your sprite makes collisions feel natural and fair to players.
This tool lets you trace any sprite by placing polygon vertices directly on top of the image. You can define multiple shapes per sprite to build compound bodies — for example, a character with separate head, body and foot colliders — and export the result as ready-to-use JSON for the most popular web game engines.
Frequently Asked Questions
What is a physics body editor?
A physics body editor lets you define the collision shape (hitbox) of a game sprite. Instead of using a simple rectangle, you draw a precise polygon, circle or box that matches the visible outline of your character or object. The exported JSON is loaded by your game engine to create accurate physics collisions.
Which game engines does the export support?
The export supports PixiJS + Matter.js (compound body vertex arrays), Phaser 3 (physics body polygon config), and a generic normalized format (coordinates between 0 and 1) that maps to any engine.
How do I add a polygon shape?
Select the Polygon tool, then click on the canvas to place vertices one by one. The shape closes when you click on the first vertex again (it turns green when close enough) or press Enter. You can drag any vertex after closing to refine the shape.
Are my images uploaded to a server?
No. Your sprite image is loaded directly in the browser using the FileReader API and drawn onto an HTML5 Canvas. Nothing is uploaded to any server.
Related Tools