Debug rendering of physics bodies.

Author: photonstorm

examples/wip/p27.js

@@ -23,28 +23,29 @@ function create() {
 
 	box.physicsEnabled = true;
 
-	// box.body.rotateLeft(10);
+	box.body.rotateLeft(20);
 
 	//	95x95
 	// box.body.setRectangle(64, 64);
 
 	// box.body.setRectangle(64, 64, 95/2,95/2);
 
 	//	Works
-	// box.body.setPolygon({}, [	[-1, 1], [-1, 0], [1, 0], [1, 1], [0.5, 0.5]	]);
+	box.body.clearShapes();
+	// box.body.addPolygon({}, [	[-1, 1], [-1, 0], [1, 0], [1, 1], [0.5, 0.5]	]);
 
 	//	Works
 	// box.body.setPolygon({}, [-1, 1], [-1, 0], [1, 0], [1, 1], [0.5, 0.5]);
 
 	//	Works
-	// box.body.setPolygon({}, -100, 100, -100, 0, 100, 0, 100, 100, 50, 50);
+	box.body.addPolygon({}, -100, 100, -100, 0, 100, 0, 100, 100, 50, 50);
 
 	//	Works
 	// box.body.setPolygon({}, -1, 1, -1, 0, 1, 0, 1, 1, 0.5, 0.5);
 
-	box.body.setZeroDamping();
+	// box.body.setZeroDamping();
 
-	game.input.onDown.addOnce(startTiming, this);
+	// game.input.onDown.addOnce(startTiming, this);
 
 }
 
@@ -71,7 +72,7 @@ function update() {
 	}
 	else
 	{
-		box.body.setZeroVelocity();
+		// box.body.setZeroVelocity();
 	}
 
 }
@@ -80,7 +81,7 @@ function render() {
 
 	game.debug.renderShape(box.body, 0);
 
-	// game.debug.renderText('x: ' + box.body.velocity.x, 32, 32);
+	// game.debug.renderText(box.body., 32, 32);
 	// game.debug.renderText('y: ' + box.body.velocity.y, 32, 64);
 
 }

src/utils/Debug.js

@@ -894,8 +894,8 @@ Phaser.Utils.Debug.prototype = {
     },
 
     /**
-    * @method Phaser.Utils.Debug#renderVertices
-    * @param {array} vertices
+    * @method Phaser.Utils.Debug#renderShape
+    * @param {array} body
     * @param {string} [color='rgb(255,255,255)'] - The color the polygon is stroked in.
     */
     renderShape: function (body, id, color, context) {
@@ -912,22 +912,44 @@ Phaser.Utils.Debug.prototype = {
         var x = body.sprite.x;
         var y = body.sprite.y;
 
+        var shape = body.data.shapes[id];
+        var w = this.game.math.p2px(shape.width);
+        var h = this.game.math.p2px(shape.height);
         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]);
 
+      // function drawbox(){
+      //   ctx.beginPath();
+      //   var x = boxBody.position[0],
+      //       y = boxBody.position[1];
+      //   ctx.save();
+      //   ctx.translate(x, y);        // Translate to the center of the box
+      //   ctx.rotate(boxBody.angle);  // Rotate to the box body frame
+      //   ctx.rect(-boxShape.width/2, -boxShape.height/2, boxShape.width, boxShape.height);
+      //   ctx.stroke();
+      //   ctx.restore();
+      // }
+
         this.context.beginPath();
-        this.context.moveTo(ox + this.game.math.p2px(points[0][0]), oy + this.game.math.p2px(points[0][1]));
+        this.context.save();
+        this.context.translate(this.game.math.p2px(body.data.position[0]), this.game.math.p2px(body.data.position[1]));
+        this.context.rotate(body.data.angle);
+
+        // this.context.strokeStyle = color;
+        // this.context.strokeRect(-w / 2, -h / 2, w, h);
+
+        this.context.moveTo(this.game.math.p2px(points[0][0]), 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.lineTo(this.game.math.p2px(points[i][0]), this.game.math.p2px(points[i][1]));
         }
 
         this.context.closePath();
-        this.context.strokeStyle = color;
         this.context.stroke();
+        this.context.restore();
 
         this.stop();