Skip to content

Commit 751af10

Browse files
photonstormphotonstorm
committed
Merge pull request phaserjs#536 from georgiee/debug-draw-p2
Debug draw p2
2 parents 1fe3319 + 569770e commit 751af10

3 files changed

Lines changed: 302 additions & 3 deletions

File tree

‎src/physics/Physics.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,10 +138,12 @@ Phaser.Physics.prototype = {
138138
* @method Phaser.Physics#enable
139139
* @param {object|array} object - The game object to create the physics body on. Can also be an array of objects, a body will be created on every object in the array.
140140
* @param {number} [system=Phaser.Physics.ARCADE] - The physics system that will be used to create the body. Defaults to Arcade Physics.
141+
* @param {boolean} [debug=false] - Enable the debug drawing for this body. Defaults to false.
141142
*/
142-
enable: function (object, system) {
143+
enable: function (object, system, debug) {
143144

144145
if (typeof system === 'undefined') { system = Phaser.Physics.ARCADE; }
146+
if (typeof debug === 'undefined') { debug = false; }
145147

146148
var i = 1;
147149

@@ -172,6 +174,7 @@ Phaser.Physics.prototype = {
172174
else if (system === Phaser.Physics.P2)
173175
{
174176
object[i].body = new Phaser.Physics.P2.Body(this.game, object[i], object[i].x, object[i].y, 1);
177+
object[i].body.debug = debug
175178
object[i].anchor.set(0.5);
176179
}
177180
else if (system === Phaser.Physics.NINJA)

‎src/physics/p2/Body.js‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,13 @@ Phaser.Physics.P2.Body = function (game, sprite, x, y, mass) {
111111
*/
112112
this._groupCallbackContext = [];
113113

114+
115+
116+
/**
117+
* @property {Phaser.Physics.P2.BodyDebug} debugBody - Reference to the debug drawer.
118+
*/
119+
this.debugBody = null
120+
114121
// Set-up the default shape
115122
if (sprite)
116123
{
@@ -682,6 +689,8 @@ Phaser.Physics.P2.Body.prototype = {
682689
this.data.removeShape(shape);
683690
}
684691

692+
this.shapeChanged()
693+
685694
},
686695

687696
/**
@@ -702,6 +711,7 @@ Phaser.Physics.P2.Body.prototype = {
702711
if (typeof rotation === 'undefined') { rotation = 0; }
703712

704713
this.data.addShape(shape, [this.px2pi(offsetX), this.px2pi(offsetY)], rotation);
714+
this.shapeChanged()
705715

706716
return shape;
707717

@@ -886,8 +896,10 @@ Phaser.Physics.P2.Body.prototype = {
886896
// console.log(path[1]);
887897
// console.table(path);
888898

889-
return this.data.fromPolygon(path, options);
899+
result = this.data.fromPolygon(path, options);
900+
this.shapeChanged()
890901

902+
return result
891903
},
892904

893905
/**
@@ -985,6 +997,12 @@ Phaser.Physics.P2.Body.prototype = {
985997
}
986998

987999
},
1000+
1001+
shapeChanged: function(){
1002+
console.log('shapeChanged', this.debugBody)
1003+
//shape has changed, so try to redraw if debug is available
1004+
if(this.debugBody) this.debugBody.draw()
1005+
},
9881006

9891007
/**
9901008
* Reads the shape data from a physics data file stored in the Game.Cache and adds it as a polygon to this Body.
@@ -1052,7 +1070,7 @@ Phaser.Physics.P2.Body.prototype = {
10521070

10531071
// this.data.adjustCenterOfMass();
10541072
this.data.aabbNeedsUpdate = true;
1055-
1073+
this.shapeChanged();
10561074
return true;
10571075
}
10581076

@@ -1545,3 +1563,32 @@ Object.defineProperty(Phaser.Physics.P2.Body.prototype, "y", {
15451563
}
15461564

15471565
});
1566+
1567+
1568+
/**
1569+
* @name Phaser.Physics.P2.Body#debug
1570+
* @property {boolean} debug - Enable or disable debug drawing of this body
1571+
*/
1572+
Object.defineProperty(Phaser.Physics.P2.Body.prototype, "debug", {
1573+
1574+
get: function () {
1575+
1576+
return (!this.debugBody);
1577+
1578+
},
1579+
1580+
set: function (value) {
1581+
1582+
if (value && !this.debugBody)
1583+
{
1584+
//this will be added to the global space
1585+
this.debugBody = new Phaser.Physics.P2.BodyDebug(this.game, this.data)
1586+
}
1587+
else if (!value && this.debugBody)
1588+
{
1589+
//destroy this.debugBody
1590+
}
1591+
1592+
}
1593+
1594+
});

‎src/physics/p2/BodyDebug.js‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
Phaser.Physics.P2.BodyDebug = function(game, body, settings){
2+
Phaser.Group.call(this, game);
3+
4+
defaultSettings = {
5+
pixelsPerLengthUnit: 20,
6+
debugPolygons: false,
7+
lineWidth: 1,
8+
alpha: 0.5
9+
}
10+
this.settings = Phaser.Utils.extend(defaultSettings, settings);
11+
12+
this.ppu = this.settings.pixelsPerLengthUnit;
13+
this.ppu = -1 * this.ppu;
14+
this.body = body;
15+
this.canvas = new Phaser.Graphics(game);
16+
this.canvas.alpha = this.settings.alpha
17+
this.add(this.canvas);
18+
19+
this.draw();
20+
}
21+
22+
Phaser.Physics.P2.BodyDebug.prototype = Object.create(Phaser.Group.prototype)
23+
Phaser.Physics.P2.BodyDebug.prototype.constructor = Phaser.Physics.P2.BodyDebug
24+
25+
Phaser.Utils.extend(Phaser.Physics.P2.BodyDebug.prototype,{
26+
update: function() {
27+
this.updateSpriteTransform()
28+
},
29+
30+
updateSpriteTransform: function() {
31+
this.position.x = this.body.position[0] * this.ppu;
32+
this.position.y = this.body.position[1] * this.ppu;
33+
return this.rotation = this.body.angle;
34+
},
35+
36+
draw: function() {
37+
var angle, child, color, i, j, lineColor, lw, obj, offset, sprite, v, verts, vrot, _i, _j, _ref, _ref1, _results;
38+
obj = this.body;
39+
sprite = this.canvas;
40+
sprite.clear();
41+
color = parseInt(this.randomPastelHex(), 16);
42+
lineColor = 0xff0000;
43+
lw = this.lineWidth;
44+
45+
if (obj instanceof p2.Body && obj.shapes.length) {
46+
var l = obj.shapes.length
47+
48+
49+
i = 0;
50+
while (i !== l) {
51+
child = obj.shapes[i];
52+
offset = obj.shapeOffsets[i];
53+
angle = obj.shapeAngles[i];
54+
offset = offset || zero;
55+
angle = angle || 0;
56+
57+
if (child instanceof p2.Circle) {
58+
this.drawCircle(sprite, offset[0] * this.ppu, -offset[1] * this.ppu, angle, child.radius * this.ppu, color, lw)
59+
60+
} else if (child instanceof p2.Convex) {
61+
verts = [];
62+
vrot = p2.vec2.create();
63+
for (j = _j = 0, _ref1 = child.vertices.length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; j = 0 <= _ref1 ? ++_j : --_j) {
64+
v = child.vertices[j];
65+
p2.vec2.rotate(vrot, v, angle);
66+
verts.push([(vrot[0] + offset[0]) * this.ppu, -(vrot[1] + offset[1]) * this.ppu]);
67+
}
68+
this.drawConvex(sprite, verts, child.triangles, lineColor, color, lw, this.settings.debugPolygons, [offset[0] * this.ppu, -offset[1] * this.ppu]);
69+
70+
} else if (child instanceof p2.Plane) {
71+
this.drawPlane(sprite, offset[0] * this.ppu, -offset[1] * this.ppu, color, lineColor, lw * 5, lw * 10, lw * 10, this.ppu * 100, angle);
72+
73+
} else if (child instanceof p2.Line) {
74+
this.drawLine(sprite, child.length * this.ppu, lineColor, lw);
75+
76+
} else if (child instanceof p2.Rectangle) {
77+
this.drawRectangle(sprite, offset[0] * this.ppu, -offset[1] * this.ppu, angle, child.width * this.ppu, child.height * this.ppu, lineColor, color, lw);
78+
}
79+
80+
i++
81+
}
82+
}
83+
},
84+
85+
drawRectangle: function(g, x, y, angle, w, h, color, fillColor, lineWidth) {
86+
if (typeof lineWidth === 'undefined') { lineWidth = 1; }
87+
if (typeof color === 'undefined') { color = 0x000000; }
88+
89+
g.lineStyle(lineWidth, color, 1);
90+
g.beginFill(fillColor);
91+
g.drawRect(x - w / 2, y - h / 2, w, h);
92+
},
93+
94+
drawCircle: function(g, x, y, angle, radius, color, lineWidth) {
95+
if (typeof lineWidth === 'undefined') { lineWidth = 1; }
96+
if (typeof color === 'undefined') { color = 0xffffff; }
97+
g.lineStyle(lineWidth, 0x000000, 1);
98+
g.beginFill(color, 1.0);
99+
g.drawCircle(x, y, -radius);
100+
g.endFill();
101+
g.moveTo(x, y);
102+
g.lineTo(x + radius * Math.cos(-angle), y + radius * Math.sin(-angle));
103+
},
104+
105+
drawLine: function(g, len, color, lineWidth) {
106+
if (typeof lineWidth === 'undefined') { lineWidth = 1; }
107+
if (typeof color === 'undefined') { color = 0x000000; }
108+
109+
g.lineStyle(lineWidth * 5, color, 1);
110+
g.moveTo(-len / 2, 0);
111+
g.lineTo(len / 2, 0);
112+
},
113+
114+
drawConvex: function(g, verts, triangles, color, fillColor, lineWidth, debug, offset) {
115+
var colors, i, v, v0, v1, x, x0, x1, y, y0, y1;
116+
if (typeof lineWidth === 'undefined') { lineWidth = 1; }
117+
if (typeof color === 'undefined') { color = 0x000000; }
118+
119+
if (!debug) {
120+
g.lineStyle(lineWidth, color, 1);
121+
g.beginFill(fillColor);
122+
i = 0;
123+
while (i !== verts.length) {
124+
v = verts[i];
125+
x = v[0];
126+
y = v[1];
127+
if (i === 0) {
128+
g.moveTo(x, -y);
129+
} else {
130+
g.lineTo(x, -y);
131+
}
132+
i++;
133+
}
134+
g.endFill();
135+
if (verts.length > 2) {
136+
g.moveTo(verts[verts.length - 1][0], -verts[verts.length - 1][1]);
137+
return g.lineTo(verts[0][0], -verts[0][1]);
138+
}
139+
} else {
140+
colors = [0xff0000, 0x00ff00, 0x0000ff];
141+
i = 0;
142+
while (i !== verts.length + 1) {
143+
v0 = verts[i % verts.length];
144+
v1 = verts[(i + 1) % verts.length];
145+
x0 = v0[0];
146+
y0 = v0[1];
147+
x1 = v1[0];
148+
y1 = v1[1];
149+
g.lineStyle(lineWidth, colors[i % colors.length], 1);
150+
g.moveTo(x0, -y0);
151+
g.lineTo(x1, -y1);
152+
g.drawCircle(x0, -y0, lineWidth * 2);
153+
i++;
154+
}
155+
g.lineStyle(lineWidth, 0x000000, 1);
156+
return g.drawCircle(offset[0], offset[1], lineWidth * 2);
157+
}
158+
},
159+
160+
drawPath: function(g, path, color, fillColor, lineWidth) {
161+
var area, i, lastx, lasty, p1x, p1y, p2x, p2y, p3x, p3y, v, x, y;
162+
if (typeof lineWidth === 'undefined') { lineWidth = 1; }
163+
if (typeof color === 'undefined') { color = 0x000000; }
164+
165+
g.lineStyle(lineWidth, color, 1);
166+
if (typeof fillColor === "number") {
167+
g.beginFill(fillColor);
168+
}
169+
lastx = null;
170+
lasty = null;
171+
i = 0;
172+
while (i < path.length) {
173+
v = path[i];
174+
x = v[0];
175+
y = v[1];
176+
if (x !== lastx || y !== lasty) {
177+
if (i === 0) {
178+
g.moveTo(x, y);
179+
} else {
180+
p1x = lastx;
181+
p1y = lasty;
182+
p2x = x;
183+
p2y = y;
184+
p3x = path[(i + 1) % path.length][0];
185+
p3y = path[(i + 1) % path.length][1];
186+
area = ((p2x - p1x) * (p3y - p1y)) - ((p3x - p1x) * (p2y - p1y));
187+
if (area !== 0) {
188+
g.lineTo(x, y);
189+
}
190+
}
191+
lastx = x;
192+
lasty = y;
193+
}
194+
i++;
195+
}
196+
if (typeof fillColor === "number") {
197+
g.endFill();
198+
}
199+
if (path.length > 2 && typeof fillColor === "number") {
200+
g.moveTo(path[path.length - 1][0], path[path.length - 1][1]);
201+
g.lineTo(path[0][0], path[0][1]);
202+
}
203+
},
204+
205+
drawPlane: function(g, x0, x1, color, lineColor, lineWidth, diagMargin, diagSize, maxLength, angle) {
206+
var max, xd, yd;
207+
if (typeof lineWidth === 'undefined') { lineWidth = 1; }
208+
if (typeof color === 'undefined') { color = 0xffffff; }
209+
210+
g.lineStyle(lineWidth, lineColor, 11);
211+
g.beginFill(color);
212+
max = maxLength;
213+
g.moveTo(x0, -x1);
214+
xd = x0 + Math.cos(angle) * this.game.width;
215+
yd = x1 + Math.sin(angle) * this.game.height;
216+
g.lineTo(xd, -yd);
217+
g.moveTo(x0, -x1);
218+
xd = x0 + Math.cos(angle) * -this.game.width;
219+
yd = x1 + Math.sin(angle) * -this.game.height;
220+
g.lineTo(xd, -yd);
221+
},
222+
223+
randomPastelHex: function() {
224+
var blue, green, mix, red;
225+
mix = [255, 255, 255];
226+
red = Math.floor(Math.random() * 256);
227+
green = Math.floor(Math.random() * 256);
228+
blue = Math.floor(Math.random() * 256);
229+
red = Math.floor((red + 3 * mix[0]) / 4);
230+
green = Math.floor((green + 3 * mix[1]) / 4);
231+
blue = Math.floor((blue + 3 * mix[2]) / 4);
232+
return this.rgbToHex(red, green, blue);
233+
},
234+
235+
rgbToHex: function(r, g, b) {
236+
return this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
237+
},
238+
239+
componentToHex: function(c) {
240+
var hex;
241+
hex = c.toString(16);
242+
243+
if (hex.len === 2) {
244+
return hex;
245+
} else {
246+
return hex + '0';
247+
}
248+
}
249+
})

0 commit comments

Comments
 (0)