From 77b86f43e3c3c3207dbf668dda7d6262fa95e597 Mon Sep 17 00:00:00 2001 From: Paul Salaets Date: Sat, 5 Jul 2014 20:58:33 -0400 Subject: [PATCH 1/3] support for debug rendering ninja AABB and circle bodies --- src/physics/ninja/Body.js | 53 +++++++++++++++++++++++++++++++++++++++ src/utils/Debug.js | 9 ++++++- 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/src/physics/ninja/Body.js b/src/physics/ninja/Body.js index ae871140b..e79c6a9ef 100644 --- a/src/physics/ninja/Body.js +++ b/src/physics/ninja/Body.js @@ -546,3 +546,56 @@ Object.defineProperty(Phaser.Physics.Ninja.Body.prototype, "angle", { }); +/** +* Render Sprite's Body. +* +* @method Phaser.Physics.Ninja.Body#render +* @param {object} context - The context to render to. +* @param {Phaser.Physics.Ninja.Body} body - The Body to render. +* @param {string} [color='rgba(0,255,0,0.4)'] - color of the debug shape to be rendered. (format is css color string). +* @param {boolean} [filled=true] - Render the shape as a filled (default, true) or a stroked (false) +*/ +Phaser.Physics.Ninja.Body.render = function(context, body, color, filled) { + color = color || 'rgba(0,255,0,0.4)'; + + if (typeof filled === 'undefined') + { + filled = true; + } + + if (body.aabb) + { + var left = body.x - (body.width / 2) - body.game.camera.x; + var top = body.y - (body.height / 2) - body.game.camera.y; + + if (filled) + { + context.fillStyle = color; + context.fillRect(left, top, body.width, body.height); + } + else + { + context.strokeStyle = color; + context.strokeRect(left, top, body.width, body.height); + } + } + else if (body.circle) + { + var x = body.x - body.game.camera.x; + var y = body.y - body.game.camera.y; + + context.beginPath(); + context.arc(x, y, body.circle.radius, 0, 2 * Math.PI, false); + + if (filled) + { + context.fillStyle = color; + context.fill(); + } + else + { + context.strokeStyle = color; + context.stroke(); + } + } +}; diff --git a/src/utils/Debug.js b/src/utils/Debug.js index 251fb80c8..0120a5e8d 100644 --- a/src/utils/Debug.js +++ b/src/utils/Debug.js @@ -688,7 +688,8 @@ Phaser.Utils.Debug.prototype = { }, /** - * Render a Sprites Physics body if it has one set. Note this only works for Arcade Physics. + * Render a Sprites Physics body if it has one set. Note this only works for Arcade and + * Ninja (AABB, circle only) Physics. * To display a P2 body you should enable debug mode on the body when creating it. * * @method Phaser.Utils.Debug#body @@ -706,6 +707,12 @@ Phaser.Utils.Debug.prototype = { Phaser.Physics.Arcade.Body.render(this.context, sprite.body, color, filled); this.stop(); } + else if (sprite.body.type === Phaser.Physics.NINJA) + { + this.start(); + Phaser.Physics.Ninja.Body.render(this.context, sprite.body, color, filled); + this.stop(); + } } }, From 0c15ef6adc0fe7ee7d7daf0f0ec95758fe1f805a Mon Sep 17 00:00:00 2001 From: Paul Salaets Date: Sat, 5 Jul 2014 21:29:28 -0400 Subject: [PATCH 2/3] move shape specific debug rendering into the shapes --- src/physics/ninja/AABB.js | 27 ++++++++++++++++++++++++++- src/physics/ninja/Body.js | 31 ++----------------------------- src/physics/ninja/Circle.js | 30 +++++++++++++++++++++++++++++- 3 files changed, 57 insertions(+), 31 deletions(-) diff --git a/src/physics/ninja/AABB.js b/src/physics/ninja/AABB.js index 96f88de62..ced686891 100644 --- a/src/physics/ninja/AABB.js +++ b/src/physics/ninja/AABB.js @@ -1003,6 +1003,31 @@ Phaser.Physics.Ninja.AABB.prototype = { destroy: function() { this.body = null; this.system = null; - } + }, + /** + * Render this AABB for debugging purposes. + * + * @method Phaser.Physics.Ninja.AABB#render + * @param {object} context - The context to render to. + * @param {number} xOffset - X offset from AABB's position to render at. + * @param {number} yOffset - Y offset from AABB's position to render at. + * @param {string} color - color of the debug shape to be rendered. (format is css color string). + * @param {boolean} filled - Render the shape as solid (true) or hollow (false). + */ + render: function(context, xOffset, yOffset, color, filled) { + var left = this.pos.x - this.xw - xOffset; + var top = this.pos.y - this.yw - yOffset; + + if (filled) + { + context.fillStyle = color; + context.fillRect(left, top, this.width, this.height); + } + else + { + context.strokeStyle = color; + context.strokeRect(left, top, this.width, this.height); + } + } }; diff --git a/src/physics/ninja/Body.js b/src/physics/ninja/Body.js index e79c6a9ef..a188318f7 100644 --- a/src/physics/ninja/Body.js +++ b/src/physics/ninja/Body.js @@ -565,37 +565,10 @@ Phaser.Physics.Ninja.Body.render = function(context, body, color, filled) { if (body.aabb) { - var left = body.x - (body.width / 2) - body.game.camera.x; - var top = body.y - (body.height / 2) - body.game.camera.y; - - if (filled) - { - context.fillStyle = color; - context.fillRect(left, top, body.width, body.height); - } - else - { - context.strokeStyle = color; - context.strokeRect(left, top, body.width, body.height); - } + body.aabb.render(context, body.game.camera.x, body.game.camera.y, color, filled); } else if (body.circle) { - var x = body.x - body.game.camera.x; - var y = body.y - body.game.camera.y; - - context.beginPath(); - context.arc(x, y, body.circle.radius, 0, 2 * Math.PI, false); - - if (filled) - { - context.fillStyle = color; - context.fill(); - } - else - { - context.strokeStyle = color; - context.stroke(); - } + body.circle.render(context, body.game.camera.x, body.game.camera.y, color, filled); } }; diff --git a/src/physics/ninja/Circle.js b/src/physics/ninja/Circle.js index 494441e3a..61c4dc01d 100644 --- a/src/physics/ninja/Circle.js +++ b/src/physics/ninja/Circle.js @@ -2619,6 +2619,34 @@ Phaser.Physics.Ninja.Circle.prototype = { destroy: function() { this.body = null; this.system = null; - } + }, + /** + * Render this circle for debugging purposes. + * + * @method Phaser.Physics.Ninja.Circle#render + * @param {object} context - The context to render to. + * @param {number} xOffset - X offset from circle's position to render at. + * @param {number} yOffset - Y offset from circle's position to render at. + * @param {string} color - color of the debug shape to be rendered. (format is css color string). + * @param {boolean} filled - Render the shape as solid (true) or hollow (false). + */ + render: function(context, xOffset, yOffset, color, filled) { + var x = this.pos.x - xOffset; + var y = this.pos.y - yOffset; + + context.beginPath(); + context.arc(x, y, this.radius, 0, 2 * Math.PI, false); + + if (filled) + { + context.fillStyle = color; + context.fill(); + } + else + { + context.strokeStyle = color; + context.stroke(); + } + } }; From cbf0a9011a6aa5114a22d5970401a232f689897f Mon Sep 17 00:00:00 2001 From: Paul Salaets Date: Sat, 5 Jul 2014 21:53:32 -0400 Subject: [PATCH 3/3] remove a little duplication --- src/physics/ninja/Body.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/physics/ninja/Body.js b/src/physics/ninja/Body.js index a188318f7..0a412d0e1 100644 --- a/src/physics/ninja/Body.js +++ b/src/physics/ninja/Body.js @@ -563,12 +563,8 @@ Phaser.Physics.Ninja.Body.render = function(context, body, color, filled) { filled = true; } - if (body.aabb) + if (body.aabb || body.circle) { - body.aabb.render(context, body.game.camera.x, body.game.camera.y, color, filled); - } - else if (body.circle) - { - body.circle.render(context, body.game.camera.x, body.game.camera.y, color, filled); + body.shape.render(context, body.game.camera.x, body.game.camera.y, color, filled); } };