mirror of
https://github.com/photonstorm/phaser
synced 2024-12-25 20:43:26 +00:00
472 lines
13 KiB
JavaScript
472 lines
13 KiB
JavaScript
/**
|
|
* @author George https://github.com/georgiee
|
|
* @author Richard Davey <rich@photonstorm.com>
|
|
* @copyright 2016 Photon Storm Ltd.
|
|
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
|
*/
|
|
|
|
/**
|
|
* Draws a P2 Body to a Graphics instance for visual debugging.
|
|
* Needless to say, for every body you enable debug drawing on, you are adding processor and graphical overhead.
|
|
* So use sparingly and rarely (if ever) in production code.
|
|
*
|
|
* Also be aware that the Debug body is only updated when the Sprite it is connected to changes position. If you
|
|
* manipulate the sprite in any other way (such as moving it to another Group or bringToTop, etc) then you will
|
|
* need to manually adjust its BodyDebug as well.
|
|
*
|
|
* @class Phaser.Physics.P2.BodyDebug
|
|
* @constructor
|
|
* @extends Phaser.Group
|
|
* @param {Phaser.Game} game - Game reference to the currently running game.
|
|
* @param {Phaser.Physics.P2.Body} body - The P2 Body to display debug data for.
|
|
* @param {object} settings - Settings object.
|
|
*/
|
|
Phaser.Physics.P2.BodyDebug = function(game, body, settings) {
|
|
|
|
Phaser.Group.call(this, game);
|
|
|
|
/**
|
|
* @property {object} defaultSettings - Default debug settings.
|
|
* @private
|
|
*/
|
|
var defaultSettings = {
|
|
pixelsPerLengthUnit: game.physics.p2.mpx(1),
|
|
debugPolygons: false,
|
|
lineWidth: 1,
|
|
alpha: 0.5
|
|
};
|
|
|
|
this.settings = Phaser.Utils.extend(defaultSettings, settings);
|
|
|
|
/**
|
|
* @property {number} ppu - Pixels per Length Unit.
|
|
*/
|
|
this.ppu = this.settings.pixelsPerLengthUnit;
|
|
this.ppu = -1 * this.ppu;
|
|
|
|
/**
|
|
* @property {Phaser.Physics.P2.Body} body - The P2 Body to display debug data for.
|
|
*/
|
|
this.body = body;
|
|
|
|
/**
|
|
* @property {Phaser.Graphics} canvas - The canvas to render the debug info to.
|
|
*/
|
|
this.canvas = new Phaser.Graphics(game);
|
|
|
|
this.canvas.alpha = this.settings.alpha;
|
|
|
|
this.add(this.canvas);
|
|
|
|
this.draw();
|
|
|
|
this.updateSpriteTransform();
|
|
|
|
};
|
|
|
|
Phaser.Physics.P2.BodyDebug.prototype = Object.create(Phaser.Group.prototype);
|
|
Phaser.Physics.P2.BodyDebug.prototype.constructor = Phaser.Physics.P2.BodyDebug;
|
|
|
|
Phaser.Utils.extend(Phaser.Physics.P2.BodyDebug.prototype, {
|
|
|
|
/**
|
|
* Core update.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#updateSpriteTransform
|
|
*/
|
|
updateSpriteTransform: function() {
|
|
|
|
this.position.x = this.body.position[0] * this.ppu;
|
|
this.position.y = this.body.position[1] * this.ppu;
|
|
this.rotation = this.body.angle;
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws the P2 shapes to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#draw
|
|
*/
|
|
draw: function() {
|
|
|
|
var angle, child, color, i, j, lineColor, lw, obj, offset, sprite, v, verts, vrot, _j, _ref1;
|
|
|
|
obj = this.body;
|
|
sprite = this.canvas;
|
|
sprite.clear();
|
|
color = parseInt(this.randomPastelHex(), 16);
|
|
lineColor = 0xff0000;
|
|
lw = this.lineWidth;
|
|
|
|
if (obj instanceof p2.Body && obj.shapes.length)
|
|
{
|
|
var l = obj.shapes.length;
|
|
|
|
i = 0;
|
|
|
|
while (i !== l)
|
|
{
|
|
child = obj.shapes[i];
|
|
offset = child.position || 0;
|
|
angle = child.angle || 0;
|
|
|
|
if (child instanceof p2.Circle)
|
|
{
|
|
this.drawCircle(sprite, offset[0] * this.ppu, offset[1] * this.ppu, angle, child.radius * this.ppu, color, lw);
|
|
}
|
|
else if (child instanceof p2.Capsule)
|
|
{
|
|
this.drawCapsule(sprite, offset[0] * this.ppu, offset[1] * this.ppu, angle, child.length * this.ppu, child.radius * this.ppu, lineColor, color, lw);
|
|
}
|
|
else if (child instanceof p2.Plane)
|
|
{
|
|
this.drawPlane(sprite, offset[0] * this.ppu, -offset[1] * this.ppu, color, lineColor, lw * 5, lw * 10, lw * 10, this.ppu * 100, angle);
|
|
}
|
|
else if (child instanceof p2.Line)
|
|
{
|
|
this.drawLine(sprite, child.length * this.ppu, lineColor, lw);
|
|
}
|
|
else if (child instanceof p2.Box)
|
|
{
|
|
this.drawRectangle(sprite, offset[0] * this.ppu, offset[1] * this.ppu, angle, child.width * this.ppu, child.height * this.ppu, lineColor, color, lw);
|
|
}
|
|
else if (child instanceof p2.Convex)
|
|
{
|
|
verts = [];
|
|
vrot = p2.vec2.create();
|
|
|
|
for (j = _j = 0, _ref1 = child.vertices.length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; j = 0 <= _ref1 ? ++_j : --_j)
|
|
{
|
|
v = child.vertices[j];
|
|
p2.vec2.rotate(vrot, v, angle);
|
|
verts.push([(vrot[0] + offset[0]) * this.ppu, -(vrot[1] + offset[1]) * this.ppu]);
|
|
}
|
|
|
|
this.drawConvex(sprite, verts, child.triangles, lineColor, color, lw, this.settings.debugPolygons, [offset[0] * this.ppu, -offset[1] * this.ppu]);
|
|
}
|
|
|
|
i++;
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Box to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawRectangle
|
|
* @private
|
|
*/
|
|
drawRectangle: function(g, x, y, angle, w, h, color, fillColor, lineWidth) {
|
|
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0x000000; }
|
|
|
|
g.lineStyle(lineWidth, color, 1);
|
|
g.beginFill(fillColor);
|
|
g.drawRect(x - w / 2, y - h / 2, w, h);
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Circle to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawCircle
|
|
* @private
|
|
*/
|
|
drawCircle: function(g, x, y, angle, radius, color, lineWidth) {
|
|
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0xffffff; }
|
|
g.lineStyle(lineWidth, 0x000000, 1);
|
|
g.beginFill(color, 1.0);
|
|
g.drawCircle(x, y, -radius*2);
|
|
g.endFill();
|
|
g.moveTo(x, y);
|
|
g.lineTo(x + radius * Math.cos(-angle), y + radius * Math.sin(-angle));
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Line to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawLine
|
|
* @private
|
|
*/
|
|
drawLine: function(g, len, color, lineWidth) {
|
|
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0x000000; }
|
|
|
|
g.lineStyle(lineWidth * 5, color, 1);
|
|
g.moveTo(-len / 2, 0);
|
|
g.lineTo(len / 2, 0);
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Convex to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawConvex
|
|
* @private
|
|
*/
|
|
drawConvex: function(g, verts, triangles, color, fillColor, lineWidth, debug, offset) {
|
|
|
|
var colors, i, v, v0, v1, x, x0, x1, y, y0, y1;
|
|
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0x000000; }
|
|
|
|
if (!debug)
|
|
{
|
|
g.lineStyle(lineWidth, color, 1);
|
|
g.beginFill(fillColor);
|
|
i = 0;
|
|
|
|
while (i !== verts.length)
|
|
{
|
|
v = verts[i];
|
|
x = v[0];
|
|
y = v[1];
|
|
|
|
if (i === 0)
|
|
{
|
|
g.moveTo(x, -y);
|
|
}
|
|
else
|
|
{
|
|
g.lineTo(x, -y);
|
|
}
|
|
|
|
i++;
|
|
}
|
|
|
|
g.endFill();
|
|
|
|
if (verts.length > 2)
|
|
{
|
|
g.moveTo(verts[verts.length - 1][0], -verts[verts.length - 1][1]);
|
|
return g.lineTo(verts[0][0], -verts[0][1]);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
colors = [0xff0000, 0x00ff00, 0x0000ff];
|
|
i = 0;
|
|
|
|
while (i !== verts.length + 1)
|
|
{
|
|
v0 = verts[i % verts.length];
|
|
v1 = verts[(i + 1) % verts.length];
|
|
x0 = v0[0];
|
|
y0 = v0[1];
|
|
x1 = v1[0];
|
|
y1 = v1[1];
|
|
g.lineStyle(lineWidth, colors[i % colors.length], 1);
|
|
g.moveTo(x0, -y0);
|
|
g.lineTo(x1, -y1);
|
|
g.drawCircle(x0, -y0, lineWidth * 2);
|
|
i++;
|
|
}
|
|
|
|
g.lineStyle(lineWidth, 0x000000, 1);
|
|
return g.drawCircle(offset[0], offset[1], lineWidth * 2);
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Path to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawPath
|
|
* @private
|
|
*/
|
|
drawPath: function(g, path, color, fillColor, lineWidth) {
|
|
|
|
var area, i, lastx, lasty, p1x, p1y, p2x, p2y, p3x, p3y, v, x, y;
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0x000000; }
|
|
|
|
g.lineStyle(lineWidth, color, 1);
|
|
|
|
if (typeof fillColor === "number")
|
|
{
|
|
g.beginFill(fillColor);
|
|
}
|
|
|
|
lastx = null;
|
|
lasty = null;
|
|
i = 0;
|
|
|
|
while (i < path.length)
|
|
{
|
|
v = path[i];
|
|
x = v[0];
|
|
y = v[1];
|
|
|
|
if (x !== lastx || y !== lasty)
|
|
{
|
|
if (i === 0)
|
|
{
|
|
g.moveTo(x, y);
|
|
}
|
|
else
|
|
{
|
|
p1x = lastx;
|
|
p1y = lasty;
|
|
p2x = x;
|
|
p2y = y;
|
|
p3x = path[(i + 1) % path.length][0];
|
|
p3y = path[(i + 1) % path.length][1];
|
|
area = ((p2x - p1x) * (p3y - p1y)) - ((p3x - p1x) * (p2y - p1y));
|
|
|
|
if (area !== 0)
|
|
{
|
|
g.lineTo(x, y);
|
|
}
|
|
}
|
|
lastx = x;
|
|
lasty = y;
|
|
}
|
|
|
|
i++;
|
|
|
|
}
|
|
|
|
if (typeof fillColor === "number")
|
|
{
|
|
g.endFill();
|
|
}
|
|
|
|
if (path.length > 2 && typeof fillColor === "number")
|
|
{
|
|
g.moveTo(path[path.length - 1][0], path[path.length - 1][1]);
|
|
g.lineTo(path[0][0], path[0][1]);
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Plane to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawPlane
|
|
* @private
|
|
*/
|
|
drawPlane: function(g, x0, x1, color, lineColor, lineWidth, diagMargin, diagSize, maxLength, angle) {
|
|
|
|
var max, xd, yd;
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0xffffff; }
|
|
|
|
g.lineStyle(lineWidth, lineColor, 11);
|
|
g.beginFill(color);
|
|
max = maxLength;
|
|
|
|
g.moveTo(x0, -x1);
|
|
xd = x0 + Math.cos(angle) * this.game.width;
|
|
yd = x1 + Math.sin(angle) * this.game.height;
|
|
g.lineTo(xd, -yd);
|
|
|
|
g.moveTo(x0, -x1);
|
|
xd = x0 + Math.cos(angle) * -this.game.width;
|
|
yd = x1 + Math.sin(angle) * -this.game.height;
|
|
g.lineTo(xd, -yd);
|
|
|
|
},
|
|
|
|
/**
|
|
* Draws a p2.Capsule to the Graphics object.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#drawCapsule
|
|
* @private
|
|
*/
|
|
drawCapsule: function(g, x, y, angle, len, radius, color, fillColor, lineWidth) {
|
|
|
|
if (lineWidth === undefined) { lineWidth = 1; }
|
|
if (color === undefined) { color = 0x000000; }
|
|
|
|
g.lineStyle(lineWidth, color, 1);
|
|
|
|
// Draw circles at ends
|
|
var c = Math.cos(angle);
|
|
var s = Math.sin(angle);
|
|
|
|
g.beginFill(fillColor, 1);
|
|
g.drawCircle(-len/2*c + x, -len/2*s + y, -radius * 2);
|
|
g.drawCircle( len/2*c + x, len/2*s + y, -radius * 2);
|
|
g.endFill();
|
|
|
|
// Draw rectangle
|
|
g.lineStyle(lineWidth, color, 0);
|
|
g.beginFill(fillColor, 1);
|
|
g.moveTo(-len/2*c + radius*s + x, -len/2*s + radius*c + y);
|
|
g.lineTo( len/2*c + radius*s + x, len/2*s + radius*c + y);
|
|
g.lineTo( len/2*c - radius*s + x, len/2*s - radius*c + y);
|
|
g.lineTo(-len/2*c - radius*s + x, -len/2*s - radius*c + y);
|
|
g.endFill();
|
|
|
|
// Draw lines in between
|
|
g.lineStyle(lineWidth, color, 1);
|
|
g.moveTo(-len/2*c + radius*s + x, -len/2*s + radius*c + y);
|
|
g.lineTo( len/2*c + radius*s + x, len/2*s + radius*c + y);
|
|
g.moveTo(-len/2*c - radius*s + x, -len/2*s - radius*c + y);
|
|
g.lineTo( len/2*c - radius*s + x, len/2*s - radius*c + y);
|
|
|
|
},
|
|
|
|
/**
|
|
* Picks a random pastel color.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#randomPastelHex
|
|
* @private
|
|
*/
|
|
randomPastelHex: function() {
|
|
|
|
var blue, green, mix, red;
|
|
mix = [255, 255, 255];
|
|
|
|
red = Math.floor(Math.random() * 256);
|
|
green = Math.floor(Math.random() * 256);
|
|
blue = Math.floor(Math.random() * 256);
|
|
|
|
red = Math.floor((red + 3 * mix[0]) / 4);
|
|
green = Math.floor((green + 3 * mix[1]) / 4);
|
|
blue = Math.floor((blue + 3 * mix[2]) / 4);
|
|
|
|
return this.rgbToHex(red, green, blue);
|
|
|
|
},
|
|
|
|
/**
|
|
* Converts from RGB to Hex.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#rgbToHex
|
|
* @private
|
|
*/
|
|
rgbToHex: function(r, g, b) {
|
|
return this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
|
|
},
|
|
|
|
/**
|
|
* Component to hex conversion.
|
|
*
|
|
* @method Phaser.Physics.P2.BodyDebug#componentToHex
|
|
* @private
|
|
*/
|
|
componentToHex: function(c) {
|
|
|
|
var hex;
|
|
hex = c.toString(16);
|
|
|
|
if (hex.length === 2)
|
|
{
|
|
return hex;
|
|
}
|
|
else
|
|
{
|
|
return hex + '0';
|
|
}
|
|
|
|
}
|
|
|
|
});
|