Physics Editor - Free Online Collision Shape Editor for Phaser, Matter.js & Rapier

Yes - 100% free with no sign-up, no trial, no watermark, and no cap on sprites, shapes or exports. Most desktop collision-shape editors cost $30 to $100 as a one-off or subscription; this tool runs in your browser at no cost, forever.

Yes - this is one. It handles the same core workflow of upload → draw or auto-trace → export vertex data for Phaser, Matter.js, Rapier, Box2D and other 2D engines. If you just need collision shapes for a game jam, a prototype, a school project or a small indie release, a browser-based tool like this typically does everything a paid desktop editor does for the shape-authoring step.

First-class exports for Phaser + Rapier and Phaser + Matter.js. The Raw Vertices export is a plain JSON array of coordinates that plugs into Box2D, Cocos2d-x, Cocos Creator, Godot (as a CollisionPolygon2D points array), LibGDX, PlayCanvas, Defold, or any custom 2D engine.

Three: Phaser + Rapier (polygon type with density, friction and restitution baked in), Phaser + Matter.js (fromVertices body with a fixtures array), and Raw Vertices (plain [x, y] coordinates offset to the sprite's origin/pivot).

It runs a Moore-neighbor boundary trace over the alpha channel of your sprite, then simplifies the resulting polygon with the Ramer-Douglas-Peucker (RDP) algorithm. Two sliders control it: Alpha Threshold (how opaque a pixel must be to count as solid) and Simplify (how aggressively to drop vertices - higher = fewer verts, rougher fit). Works best on sprites with a transparent background.

Yes. Add as many shapes per sprite as you want - useful for characters (head, torso, limbs), vehicles (chassis + wheels), or when you need sensor zones separate from the main hit body. All closed shapes for a sprite export together.

Yes. Tap to place vertices, drag to move them, pinch to zoom, and two-finger pan. The layout adapts to phone screens, and the bottom-panel UI is designed for touch.

No. All image reading, boundary tracing and export generation runs entirely in your browser using the Canvas API. Your sprites never leave your device - good for unreleased game art and NDA projects.

The yellow crosshair marks the sprite's origin (pivot), defaulting to the center. Exported vertex coordinates are offset relative to this origin so shapes align correctly when your engine positions the sprite by its pivot rather than its top-left corner. Most modern 2D engines (Phaser, Godot, Cocos) default to a centered origin.

For clean sprites on transparent backgrounds, auto-trace typically produces polygons within 1–2 pixels of the true silhouette, using 8–40 vertices depending on the Simplify slider. For very complex shapes you can trace once, then fine-tune individual vertices in Edit mode.