PhysicsEditor is a GUI tool to create collision shapes within seconds! Without specifying any additional options PhysicsEditor already creates very good results, but you also have enough options available to adjust things to your needs.

physics-editor

Now I want to show you how to use PhysicsEditor for P2 Physics and then export data for Cocos Creator.

1. Download PhysicsEditor here: https://www.codeandweb.com/physicseditor/download.

2. Download exporter for P2 here: https://github.com/stephanvermeire/PhysicsEditor-plugin. (Thank you Stephan)

3. Put the exporter in PhysicsEditor’s exporter folder (my path is D:\Program Files\CodeAndWeb\PhysicsEditor\resources\exporters).

4. Make some changes for the exporter:

For exporter.xml

(1) origin

<origin>
<type>fixed</type>
<relX>0.5</relX>
<relY>0.5</relY>
</origin>

(2) global parameter

<global>
<parameter>
<name>ptm_ratio</name>
<displayName>PTM-Ratio</displayName>
<description>PTM ratio of the sprites. Must be multiplied by 2 when working with hd (retina display) sprites</description>
<shortDescription>PTM ratio of the sprites. Must be multiplied by 2 when working with hd (retina display) sprites.</shortDescription>
<type>float</type>
<default>100.0</default>
</parameter>
</global>

For panda-p2.json

(1) Change the file name to cocos-p2.json

(2) Change the content of cocos-p2.json to

{ {% for body in bodies %}
{% if not forloop.first %}, {% endif %}
“{{body.name}}”: {
“mass”: {{body.mass}},
“gravityScale”: {{body.gravityScale}},
“damping”: {{body.damping}},
“angularDamping”: {{body.angularDamping}},
“shapes”: [{% for fixture in body.fixtures %}{% if not forloop.first %} ,{% endif %}
{
“type”: “{{fixture.type}}”, {% if fixture.sensor %}
“sensor”: true, {% endif %}
“collisionGroup”: {{fixture.filter_categoryBits}},
“collisionMask”: {{fixture.filter_maskBits}},
{% if fixture.isCircle %}”radius”: {{fixture.radius}},
“center”: {“x”: {{fixture.center.x}}, “y”: {{fixture.center.y}} }
{% else %}”polygon”: [ {% for point in fixture.hull %} {% if not forloop.first %}, {% endif %} [{{point.x}}/{{global.ptm_ratio}}, {{point.y}}/{{global.ptm_ratio}}] {% endfor %} ]{% endif %}
}{% endfor %}
]
}{% endfor %}
}

5. Open PhysicsEditor, drop your image to it and click shape tracer button(physics-editor-shape-tracer). Adjust the parameters as you wish and click OK button.

physics-editor-1

6. Adjust points manually and make sure the exporter is our cocos-p2, then click publish button.

physics-editor-2

7. The exported data is something like this

physics-editor-export

In my case, I just want the points in the polygon. So I copy the points to my javascript file:

That’s all. Now let’s open our game and test it.

physics-editor-result

Not bad!

The next step, make your own exporter (reference: https://www.codeandweb.com/blog/2012/05/30/customize_physicseditor_exporter) and make a json loader to load all the data exported from PhysicsEditor for your own game engine.

Enjoy it!