Did you find this tool helpful?

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.

Editor Canvas
Drop sprite image hereor click "Load Image" above · PNG, JPG, GIF, WebP
x: 0   y: 0 0 shapes Click to place vertices · Click first vertex to close shape · Drag to move
Shape Type
Click on canvas to place vertices. Click first vertex or press Enter to close.
Shapes 0
No shapes yet. Start drawing!
Export

          
          
        

      


    

  


  
  

    
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

    

      SVG ↔ PNG ConverterConvert vector & raster
      Bitmap Font GeneratorBMFont for PixiJS & Phaser
      Audio Sprite GeneratorCombine game sound effects
      Image ConverterJPG, PNG, WebP, AVIF
    

  











  
  









  

    
More Game Dev Tools

    

            
        
        Texture Packer
      
            
        
        Sprite Sheet / Bitmap Generator
      
            
        
        Audio Sprite Generator
      
            
        
        Bitmap Font Generator
      
          

  
































  

    

      
Share Feedback

      
We read every message ✌️