Skip to content

How to load PhysicEditor Shapes into your project

Olivier Biot edited this page May 19, 2015 · 14 revisions

First create your physics data, publish it You should have a file looking like this one for example :

{ 
		
	"hotdog": [
			
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   6, 30  ,  11, 23  ,  100, 0  ,  104, 10  ,  92, 53  ,  57, 63  ,  32, 63  ,  8, 49  ]
			}  ,
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   123, 24  ,  113, 39  ,  92, 53  ,  104, 10  ,  121, 15  ]
			}  
	]
	
	, 
	"icecream": [
		
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   68, 30  ,  53, 28  ,  65, 14  ]
			}  ,
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   122, 14  ,  101, 36  ,  94, 36  ,  112, 9  ,  123, 5  ]
			}  ,
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   23, 33  ,  53, 28  ,  68, 30  ,  93, 72  ,  67, 84  ,  44, 84  ,  13, 69  ,  4, 45  ]
			}  ,
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   93, 72  ,  94, 36  ,  101, 36  ,  104, 59  ]
			}  ,
			{
				"density": 2, "friction": 0, "bounce": 0, 
				"filter": { "categoryBits": 1, "maskBits": 65535 },
				"shape": [   94, 36  ,  93, 72  ,  68, 30  ]
			}  
	]
}

Note that as of melonJS 2.1.x, only the shape properties are being used by the engine, the other density and filter values are therefore ignored.

Now it's time to add the resulting JSON file to your resources list, I will call this one shapesdef in this examples, as it includes multiple shape definitions.

{name: "shapesdef", type:"json", src: "data/json/shapesdef.json"}

and finally it's time to use it to define the collision shape of your entity, and this is easy done by calling the me.body.addShapesFromJSON() function from your constructor :

myEntity = me.Entity.extend({
    /**
     * constructor
     */
    init: function (x, y, settings) {
        
        // ensure we do not create a default shape
        // (as we manually add it later)
        settings.shapes = [];

        // call the super constructor
        this._super(me.Entity, 'init', [x, y, settings]);

        // add the "hotdog" shape to the entity body
        this.body.addShapesFromJSON(me.loader.getJSON("shapesdef"), "hotdog");

        // add the hotdog sprite
        this.renderable = new me.Sprite(0, 0, {image: me.loader.getImage("hotdog")});
    }
});

and that's it !

Clone this wiki locally