Updated p2.js to latest build. Checked tests. Added Debug draw (needs rotation support).

src/gameobjects/Sprite.js

@@ -826,8 +826,12 @@ Object.defineProperty(Phaser.Sprite.prototype, "inputEnabled", {
 });
 
 /**
-* By default Sprites won't add themselves to the physics world. By setting physicsEnabled to true a Physics Body is
-* attached to this Sprite and it will then start to process physics world updates. Access all of its properties via Sprite.body.
+* By default Sprites won't add themselves to the physics world. By setting physicsEnabled to true a Rectangle physics body is
+* attached to this Sprite matching its placement and dimensions, and will then start to process physics world updates.
+* You can access all physics related properties via Sprite.body.
+*
+* Important: Enabling a Sprite for physics will automatically set `Sprite.anchor` to 0.5 s0 the physics body is centered on the Sprite.
+* If you need a different result then adjust or re-create the Body shape offsets manually, and/or reset the anchor after enabling physics.
 *
 * @name Phaser.Sprite#physicsEnabled
 * @property {boolean} physicsEnabled - Set to true to add this Sprite to the physics world. Set to false to destroy the body and remove it from the physics world.
@@ -847,6 +851,7 @@ Object.defineProperty(Phaser.Sprite.prototype, "physicsEnabled", {
             if (this.body === null)
             {
                 this.body = new Phaser.Physics.Body(this);
+                this.anchor.set(0.5);
             }
         }
         else

src/physics/Body.js

@@ -36,7 +36,7 @@ Phaser.Physics.Body = function (sprite) {
     * @property {p2.Body} data - The p2 Body data.
     * @protected
     */
-    this.data = new p2.Body({ position:[this.px2p(sprite.x), this.px2p(sprite.y)], mass: 1 });
+    this.data = new p2.Body({ position:[this.px2p(sprite.position.x), this.px2p(sprite.position.y)], mass: 1 });
 
     /**
     * @property {Phaser.PointProxy} velocity - The velocity of the body. Set velocity.x to a negative value to move to the left, position to the right. velocity.y negative values move up, positive move down.
@@ -425,6 +425,27 @@ Phaser.Physics.Body.prototype = {
         if (typeof offsetY === 'undefined') { offsetY = 0; }
         if (typeof rotation === 'undefined') { rotation = 0; }
 
+        // var px = 0;
+        // var py = 0;
+
+        // if (sprite.anchor.x !== 0)
+        // {
+        //     px = (sprite.width / 2) + (-sprite.width * sprite.anchor.x);
+        // }
+        // else
+        // {
+        //     px = sprite.width / 2;
+        // }
+
+        // if (sprite.anchor.y !== 0)
+        // {
+        //     py = (sprite.height / 2) + (-sprite.height * sprite.anchor.y);
+        // }
+        // else
+        // {
+        //     py = sprite.height / 2;
+        // }
+    
         this.clearShapes();
 
         this.data.addShape(new p2.Rectangle(this.px2p(width), this.px2p(height)), [this.px2p(offsetX), this.px2p(offsetY)], rotation);
@@ -433,7 +454,7 @@ Phaser.Physics.Body.prototype = {
 
     /**
     * Reads a polygon shape path, and assembles convex shapes from that and puts them at proper offset points. The shape must be simple and without holes.
-    * This function expects the x.y values to be given in pixels. If you want to provide them 
+    * This function expects the x.y values to be given in pixels. If you want to provide them at p2 world scales then call Body.data.fromPolygon directly.
     *
     * @method Phaser.Physics.Body#setPolygon
     * @param {object} options - An object containing the build options: 
@@ -483,8 +504,8 @@ Phaser.Physics.Body.prototype = {
         //  Now process them into p2 values
         for (var p = 0; p < path.length; p++)
         {
-            // path[p][0] = this.px2p(path[p][0]);
-            // path[p][1] = this.px2p(path[p][1]);
+            path[p][0] = this.px2p(path[p][0]);
+            path[p][1] = this.px2p(path[p][1]);
         }
 
         // console.log('points');

src/utils/Debug.js

@@ -893,6 +893,46 @@ Phaser.Utils.Debug.prototype = {
 
     },
 
+    /**
+    * @method Phaser.Utils.Debug#renderVertices
+    * @param {array} vertices
+    * @param {string} [color='rgb(255,255,255)'] - The color the polygon is stroked in.
+    */
+    renderShape: function (body, id, color, context) {
+
+        if (this.context === null && context === null)
+        {
+            return;
+        }
+
+        color = color || 'rgb(255,255,255)';
+
+        this.start(0, 0, color);
+
+        var x = body.sprite.x;
+        var y = body.sprite.y;
+
+        var points = body.data.shapes[id].vertices;
+
+        var ox = x + this.game.math.p2px(body.data.shapeOffsets[id][0]);
+        var oy = y + this.game.math.p2px(body.data.shapeOffsets[id][1]);
+
+        this.context.beginPath();
+        this.context.moveTo(ox + this.game.math.p2px(points[0][0]), oy + this.game.math.p2px(points[0][1]));
+
+        for (var i = 1; i < points.length; i++)
+        {
+            this.context.lineTo(ox + this.game.math.p2px(points[i][0]), oy + this.game.math.p2px(points[i][1]));
+        }
+
+        this.context.closePath();
+        this.context.strokeStyle = color;
+        this.context.stroke();
+
+        this.stop();
+
+    },
+
     /**
     * @method Phaser.Utils.Debug#renderPolygon
     * @param {array} polygon