phaser/src/utils/Debug.js
photonstorm d8f5832fa2 Completely empty Tilemaps can now be created. This allows for dynamic map generation at runtime.
Loads of updates across most the Tilemap files. Not finished yet, still CSV loading to do and a multi-tileset issue to resolve, but it's a lot more flexible now.
2014-03-03 05:19:46 +00:00

798 lines
29 KiB
JavaScript

/**
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2014 Photon Storm Ltd.
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
/**
* A collection of methods for displaying debug information about game objects.
* If your game is running in WebGL then Debug will create a Sprite that is placed at the top of the Stage display list and bind a canvas texture
* to it, which must be uploaded every frame. Be advised: this is expenive.
* If your game is using a Canvas renderer then the debug information is literally drawn on the top of the active game canvas and no Sprite is used.
*
* @class Phaser.Utils.Debug
* @constructor
* @param {Phaser.Game} game - A reference to the currently running game.
*/
Phaser.Utils.Debug = function (game) {
/**
* @property {Phaser.Game} game - A reference to the currently running Game.
*/
this.game = game;
/**
* @property {PIXI.Sprite} sprite - If debugging in WebGL mode we need this.
*/
this.sprite = null;
/**
* @property {HTMLCanvasElement} canvas - The canvas to which this BitmapData draws.
*/
this.canvas = null;
/**
* @property {PIXI.BaseTexture} baseTexture - Required Pixi var.
*/
this.baseTexture = null;
/**
* @property {PIXI.Texture} texture - Required Pixi var.
*/
this.texture = null;
/**
* @property {Phaser.Frame} textureFrame - Dimensions of the renderable area.
*/
this.textureFrame = null;
/**
* @property {CanvasRenderingContext2D} context - The 2d context of the canvas.
*/
this.context = null;
/**
* @property {string} font - The font that the debug information is rendered in.
* @default '14px Courier'
*/
this.font = '14px Courier';
/**
* @property {number} columnWidth - The spacing between columns.
*/
this.columnWidth = 100;
/**
* @property {number} lineHeight - The line height between the debug text.
*/
this.lineHeight = 16;
/**
* @property {boolean} renderShadow - Should the text be rendered with a slight shadow? Makes it easier to read on different types of background.
*/
this.renderShadow = true;
/**
* @property {Context} currentX - The current X position the debug information will be rendered at.
* @default
*/
this.currentX = 0;
/**
* @property {number} currentY - The current Y position the debug information will be rendered at.
* @default
*/
this.currentY = 0;
/**
* @property {number} currentAlpha - The current alpha the debug information will be rendered at.
* @default
*/
this.currentAlpha = 1;
/**
* @property {boolean} dirty - Does the canvas need re-rendering?
*/
this.dirty = false;
};
Phaser.Utils.Debug.prototype = {
/**
* Internal method that boots the debug displayer.
*
* @method Phaser.Utils.Debug#boot
* @protected
*/
boot: function () {
if (this.game.renderType === Phaser.CANVAS)
{
this.context = this.game.context;
}
else
{
this.canvas = Phaser.Canvas.create(this.game.width, this.game.height, '', true);
this.context = this.canvas.getContext('2d');
this.baseTexture = new PIXI.BaseTexture(this.canvas);
this.texture = new PIXI.Texture(this.baseTexture);
this.textureFrame = new Phaser.Frame(0, 0, 0, this.game.width, this.game.height, 'debug', game.rnd.uuid());
this.sprite = this.game.make.image(0, 0, this.texture, this.textureFrame);
this.game.stage.addChild(this.sprite);
}
},
/**
* Internal method that resets and starts the debug output values.
*
* @method Phaser.Utils.Debug#start
* @protected
* @param {number} [x=0] - The X value the debug info will start from.
* @param {number} [y=0] - The Y value the debug info will start from.
* @param {string} [color='rgb(255,255,255)'] - The color the debug text will drawn in.
* @param {number} [columnWidth=0] - The spacing between columns.
*/
start: function (x, y, color, columnWidth) {
if (typeof x !== 'number') { x = 0; }
if (typeof y !== 'number') { y = 0; }
color = color || 'rgb(255,255,255)';
if (typeof columnWidth === 'undefined') { columnWidth = 0; }
this.currentX = x;
this.currentY = y;
this.currentColor = color;
this.currentAlpha = this.context.globalAlpha;
this.columnWidth = columnWidth;
if (this.sprite && this.dirty)
{
// this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
this.context.save();
this.context.setTransform(1, 0, 0, 1, 0, 0);
this.context.strokeStyle = color;
this.context.fillStyle = color;
this.context.font = this.font;
this.context.globalAlpha = 1;
},
/**
* Internal method that stops the debug output.
*
* @method Phaser.Utils.Debug#stop
* @protected
*/
stop: function () {
this.context.restore();
this.context.globalAlpha = this.currentAlpha;
if (this.sprite)
{
PIXI.updateWebGLTexture(this.baseTexture, this.game.renderer.gl);
}
},
/**
* Internal method that outputs a single line of text.
*
* @method Phaser.Utils.Debug#line
* @protected
* @param {string} text - The line of text to draw.
* @param {number} [x] - The X value the debug info will start from.
* @param {number} [y] - The Y value the debug info will start from.
line: function (text, x, y) {
if (typeof x !== 'undefined') { this.currentX = x; }
if (typeof y !== 'undefined') { this.currentY = y; }
if (this.renderShadow)
{
this.context.fillStyle = 'rgb(0,0,0)';
this.context.fillText(text, this.currentX + 1, this.currentY + 1);
this.context.fillStyle = this.currentColor;
}
this.context.fillText(text, this.currentX, this.currentY);
this.currentY += this.lineHeight;
},
*/
/**
* Internal method that outputs a single line of text split over as many columns as needed, one per parameter.
*
* @method Phaser.Utils.Debug#line
* @protected
* @param {string} text - The text to render. You can have as many columns of text as you want, just pass them as additional parameters.
*/
line: function (text) {
var x = this.currentX;
for (var i = 0; i < arguments.length; i++)
{
if (this.renderShadow)
{
this.context.fillStyle = 'rgb(0,0,0)';
this.context.fillText(arguments[i], x + 1, this.currentY + 1);
this.context.fillStyle = this.currentColor;
}
this.context.fillText(arguments[i], x, this.currentY);
x += this.columnWidth;
}
this.currentY += this.lineHeight;
},
/**
* Render Sound information, including decoded state, duration, volume and more.
*
* @method Phaser.Utils.Debug#soundInfo
* @param {Phaser.Sound} sound - The sound object to debug.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
soundInfo: function (sound, x, y, color) {
this.start(x, y, color);
this.line('Sound: ' + sound.key + ' Locked: ' + sound.game.sound.touchLocked);
this.line('Is Ready?: ' + this.game.cache.isSoundReady(sound.key) + ' Pending Playback: ' + sound.pendingPlayback);
this.line('Decoded: ' + sound.isDecoded + ' Decoding: ' + sound.isDecoding);
this.line('Total Duration: ' + sound.totalDuration + ' Playing: ' + sound.isPlaying);
this.line('Time: ' + sound.currentTime);
this.line('Volume: ' + sound.volume + ' Muted: ' + sound.mute);
this.line('WebAudio: ' + sound.usingWebAudio + ' Audio: ' + sound.usingAudioTag);
if (sound.currentMarker !== '')
{
this.line('Marker: ' + sound.currentMarker + ' Duration: ' + sound.duration);
this.line('Start: ' + sound.markers[sound.currentMarker].start + ' Stop: ' + sound.markers[sound.currentMarker].stop);
this.line('Position: ' + sound.position);
}
this.stop();
},
/**
* Render camera information including dimensions and location.
*
* @method Phaser.Utils.Debug#cameraInfo
* @param {Phaser.Camera} camera - The Phaser.Camera to show the debug information for.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
cameraInfo: function (camera, x, y, color) {
this.start(x, y, color);
this.line('Camera (' + camera.width + ' x ' + camera.height + ')');
this.line('X: ' + camera.x + ' Y: ' + camera.y);
this.line('Bounds x: ' + camera.bounds.x + ' Y: ' + camera.bounds.y + ' w: ' + camera.bounds.width + ' h: ' + camera.bounds.height);
this.line('View x: ' + camera.view.x + ' Y: ' + camera.view.y + ' w: ' + camera.view.width + ' h: ' + camera.view.height);
this.stop();
},
/**
* Renders the Pointer.circle object onto the stage in green if down or red if up along with debug text.
*
* @method Phaser.Utils.Debug#pointer
* @param {Phaser.Pointer} pointer - The Pointer you wish to display.
* @param {boolean} [hideIfUp=false] - Doesn't render the circle if the pointer is up.
* @param {string} [downColor='rgba(0,255,0,0.5)'] - The color the circle is rendered in if down.
* @param {string} [upColor='rgba(255,0,0,0.5)'] - The color the circle is rendered in if up (and hideIfUp is false).
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
pointer: function (pointer, hideIfUp, downColor, upColor, color) {
if (pointer == null)
{
return;
}
if (typeof hideIfUp === 'undefined') { hideIfUp = false; }
downColor = downColor || 'rgba(0,255,0,0.5)';
upColor = upColor || 'rgba(255,0,0,0.5)';
if (hideIfUp === true && pointer.isUp === true)
{
return;
}
this.start(pointer.x, pointer.y - 100, color);
this.context.beginPath();
this.context.arc(pointer.x, pointer.y, pointer.circle.radius, 0, Math.PI * 2);
if (pointer.active)
{
this.context.fillStyle = downColor;
}
else
{
this.context.fillStyle = upColor;
}
this.context.fill();
this.context.closePath();
// Render the points
this.context.beginPath();
this.context.moveTo(pointer.positionDown.x, pointer.positionDown.y);
this.context.lineTo(pointer.position.x, pointer.position.y);
this.context.lineWidth = 2;
this.context.stroke();
this.context.closePath();
// Render the text
// this.start(pointer.x, pointer.y - 100, color);
this.line('ID: ' + pointer.id + " Active: " + pointer.active);
this.line('World X: ' + pointer.worldX + " World Y: " + pointer.worldY);
this.line('Screen X: ' + pointer.x + " Screen Y: " + pointer.y);
this.line('Duration: ' + pointer.duration + " ms");
this.line('is Down: ' + pointer.isDown + " is Up: " + pointer.isUp);
this.stop();
},
/**
* Render Sprite Input Debug information.
*
* @method Phaser.Utils.Debug#spriteInputInfo
* @param {Phaser.Sprite|Phaser.Image} sprite - The sprite to display the input data for.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
spriteInputInfo: function (sprite, x, y, color) {
this.start(x, y, color);
this.line('Sprite Input: (' + sprite.width + ' x ' + sprite.height + ')');
this.line('x: ' + sprite.input.pointerX().toFixed(1) + ' y: ' + sprite.input.pointerY().toFixed(1));
this.line('over: ' + sprite.input.pointerOver() + ' duration: ' + sprite.input.overDuration().toFixed(0));
this.line('down: ' + sprite.input.pointerDown() + ' duration: ' + sprite.input.downDuration().toFixed(0));
this.line('just over: ' + sprite.input.justOver() + ' just out: ' + sprite.input.justOut());
this.stop();
},
/**
* Renders Phaser.Key object information.
*
* @method Phaser.Utils.Debug#key
* @param {Phaser.Key} key - The Key to render the information for.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
key: function (key, x, y, color) {
this.start(x, y, color, 150);
this.line('Key:', key.keyCode, 'isDown:', key.isDown);
this.line('justPressed:', key.justPressed(), 'justReleased:', key.justReleased());
this.line('Time Down:', key.timeDown.toFixed(0), 'duration:', key.duration.toFixed(0));
this.stop();
},
/**
* Render debug information about the Input object.
*
* @method Phaser.Utils.Debug#inputInfo
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
inputInfo: function (x, y, color) {
this.start(x, y, color);
this.line('Input');
this.line('X: ' + this.game.input.x + ' Y: ' + this.game.input.y);
this.line('World X: ' + this.game.input.worldX + ' World Y: ' + this.game.input.worldY);
this.line('Scale X: ' + this.game.input.scale.x.toFixed(1) + ' Scale Y: ' + this.game.input.scale.x.toFixed(1));
this.line('Screen X: ' + this.game.input.activePointer.screenX + ' Screen Y: ' + this.game.input.activePointer.screenY);
this.stop();
},
/**
* Renders the Sprites bounds. Note: This is really expensive as it has to calculate the bounds every time you call it!
*
* @method Phaser.Utils.Debug#spriteBounds
* @param {Phaser.Sprite|Phaser.Image} sprite - The sprite to display the bounds of.
* @param {string} [color] - Color of the debug info to be rendered (format is css color string).
* @param {boolean} [filled=true] - Render the rectangle as a fillRect (default, true) or a strokeRect (false)
*/
spriteBounds: function (sprite, color, filled) {
var bounds = sprite.getBounds();
this.renderRectangle(bounds, color, filled);
},
/**
* Render debug infos (including name, bounds info, position and some other properties) about the Sprite.
*
* @method Phaser.Utils.Debug#spriteInfo
* @param {Phaser.Sprite} sprite - The Sprite to display the information of.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
spriteInfo: function (sprite, x, y, color) {
this.start(x, y, color);
this.line('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') anchor: ' + sprite.anchor.x + ' x ' + sprite.anchor.y);
this.line('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1));
this.line('angle: ' + sprite.angle.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1));
this.line('visible: ' + sprite.visible + ' in camera: ' + sprite.inCamera);
this.stop();
},
/**
* Renders the sprite coordinates in local, positional and world space.
*
* @method Phaser.Utils.Debug#spriteCoords
* @param {Phaser.Sprite|Phaser.Image} sprite - The sprite to display the coordinates for.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
spriteCoords: function (sprite, x, y, color) {
this.start(x, y, color, 100);
if (sprite.name)
{
this.line(sprite.name);
}
this.line('x:', sprite.x.toFixed(2), 'y:', sprite.y.toFixed(2));
this.line('pos x:', sprite.position.x.toFixed(2), 'pos y:', sprite.position.y.toFixed(2));
this.line('world x:', sprite.world.x.toFixed(2), 'world y:', sprite.world.y.toFixed(2));
this.stop();
},
/**
* Renders Line information in the given color.
*
* @method Phaser.Utils.Debug#lineInfo
* @param {Phaser.Line} line - The Line to display the data for.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
lineInfo: function (line, x, y, color) {
this.start(x, y, color, 80);
this.line('start.x:', line.start.x.toFixed(2), 'start.y:', line.start.y.toFixed(2));
this.line('end.x:', line.end.x.toFixed(2), 'end.y:', line.end.y.toFixed(2));
this.line('length:', line.length.toFixed(2), 'angle:', line.angle);
this.stop();
},
/**
* Renders a single pixel at the given size.
*
* @method Phaser.Utils.Debug#pixel
* @param {number} x - X position of the pixel to be rendered.
* @param {number} y - Y position of the pixel to be rendered.
* @param {string} [color] - Color of the pixel (format is css color string).
* @param {number} [size=2] - The 'size' to render the pixel at.
*/
pixel: function (x, y, color, size) {
size = size || 2;
this.start();
this.context.fillStyle = color;
this.context.fillRect(x, y, size, size);
this.stop();
},
/**
* Renders a Phaser geometry object including Rectangle, Circle, Point or Line.
*
* @method Phaser.Utils.Debug#geom
* @param {Phaser.Rectangle|Phaser.Circle|Phaser.Point|Phaser.Line} object - The geometry object to render.
* @param {string} [color] - Color of the debug info to be rendered (format is css color string).
* @param {boolean} [filled=true] - Render the objected as a filled (default, true) or a stroked (false)
*/
geom: function (object, color, filled) {
if (typeof filled === 'undefined') { filled = true; }
color = color || 'rgba(0,255,0,0.3)';
this.start();
this.context.fillStyle = color;
this.context.strokeStyle = color;
if (object instanceof Phaser.Rectangle)
{
if (filled)
{
this.context.fillRect(object.x, object.y, object.width, object.height);
}
else
{
this.context.strokeRect(object.x, object.y, object.width, object.height);
}
}
else if (object instanceof Phaser.Circle)
{
this.context.beginPath();
this.context.arc(object.x, object.y, object.radius, 0, Math.PI * 2, false);
this.context.closePath();
if (filled)
{
this.context.fill();
}
else
{
this.context.stroke();
}
}
else if (object instanceof Phaser.Point)
{
this.context.fillRect(object.x, object.y, 4, 4);
}
else if (object instanceof Phaser.Line)
{
this.context.lineWidth = 1;
this.context.beginPath();
this.context.moveTo(object.start.x + 0.5, object.start.y + 0.5);
this.context.lineTo(object.end.x + 0.5, object.end.y + 0.5);
this.context.closePath();
this.context.stroke();
}
this.stop();
},
/**
* Render a string of text.
*
* @method Phaser.Utils.Debug#text
* @param {string} text - The line of text to draw.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color] - Color of the debug info to be rendered (format is css color string).
* @param {string} [font] - The font of text to draw.
*/
text: function (text, x, y, color, font) {
color = color || 'rgb(255,255,255)';
font = font || '16px Courier';
this.start();
this.context.font = font;
if (this.renderShadow)
{
this.context.fillStyle = 'rgb(0,0,0)';
this.context.fillText(text, x + 1, y + 1);
}
this.context.fillStyle = color;
this.context.fillText(text, x, y);
this.stop();
},
/**
* Render Sprite Body Physics Data as text.
*
* @method Phaser.Utils.Debug#bodyInfo
* @param {Phaser.Sprite} sprite - The sprite to be rendered.
* @param {number} x - X position of the debug info to be rendered.
* @param {number} y - Y position of the debug info to be rendered.
* @param {string} [color='rgb(255,255,255)'] - color of the debug info to be rendered. (format is css color string).
*/
bodyInfo: function (sprite, x, y, color) {
this.start(x, y, color, 210);
this.line('x: ' + sprite.body.x.toFixed(2), 'y: ' + sprite.body.y.toFixed(2), 'width: ' + sprite.width, 'height: ' + sprite.height);
// this.line('speed: ' + sprite.body.speed.toFixed(2), 'angle: ' + sprite.body.angle.toFixed(2), 'linear damping: ' + sprite.body.linearDamping);
// this.line('blocked left: ' + sprite.body.blocked.left, 'right: ' + sprite.body.blocked.right, 'up: ' + sprite.body.blocked.up, 'down: ' + sprite.body.blocked.down);
// this.line('touching left: ' + sprite.body.touching.left, 'right: ' + sprite.body.touching.right, 'up: ' + sprite.body.touching.up, 'down: ' + sprite.body.touching.down);
// this.line('gravity x: ' + sprite.body.gravity.x, 'y: ' + sprite.body.gravity.y, 'world gravity x: ' + this.game.physics.gravity.x, 'y: ' + this.game.physics.gravity.y);
// this.line('acceleration x: ' + sprite.body.acceleration.x.toFixed(2), 'y: ' + sprite.body.acceleration.y.toFixed(2));
// this.line('velocity x: ' + sprite.body.velocity.x.toFixed(2), 'y: ' + sprite.body.velocity.y.toFixed(2), 'deltaX: ' + sprite.body.deltaX().toFixed(2), 'deltaY: ' + sprite.body.deltaY().toFixed(2));
// this.line('bounce x: ' + sprite.body.bounce.x.toFixed(2), 'y: ' + sprite.body.bounce.y.toFixed(2));
this.stop();
},
/**
* Renders the physics body including all shapes.
*
* @method Phaser.Utils.Debug#physicsBody
* @param {Phaser.Physics.Body} body - The Phaser.Physics.Body instance to render all shapes from.
* @param {string} [color='rgb(255,255,255)'] - The color the polygon is stroked in.
*/
physicsBody: function (body, color) {
this.start(0, 0, color);
var shapes = body.data.shapes;
var shapeOffsets = body.data.shapeOffsets;
var shapeAngles = body.data.shapeAngles;
var i = shapes.length;
var x = this.game.math.p2pxi(body.data.position[0]) - this.game.camera.view.x;
var y = this.game.math.p2pxi(body.data.position[1]) - this.game.camera.view.y;
var angle = body.data.angle;
while (i--)
{
if (shapes[i] instanceof p2.Rectangle)
{
this.shapeRectangle(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
else if (shapes[i] instanceof p2.Line)
{
this.shapeLine(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
else if (shapes[i] instanceof p2.Convex)
{
this.shapeConvex(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
else if (shapes[i] instanceof p2.Circle)
{
this.shapeCircle(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
}
this.stop();
},
/**
* Renders a p2.Rectangle shape. Do not call this directly - instead use Debug.physicsBody.
*
* @method Phaser.Utils.Debug#shapeRectangle
* @param {number} x - The x coordinate of the Shape to translate to.
* @param {number} y - The y coordinate of the Shape to translate to.
* @param {number} bodyAngle - The angle of the Body to rotate to.
* @param {p2.Shape} shape - The shape to render.
* @param {array} offset - The shape offset vector.
* @param {number} angle - The shape angle.
*/
shapeRectangle: function (x, y, bodyAngle, shape, offset, angle) {
var w = this.game.math.p2px(shape.width);
var h = this.game.math.p2px(shape.height);
var points = shape.vertices;
this.context.beginPath();
this.context.save();
this.context.translate(x + this.game.math.p2pxi(offset[0]), y + this.game.math.p2pxi(offset[1]));
this.context.rotate(bodyAngle + angle);
this.context.moveTo(this.game.math.p2pxi(points[0][0]), this.game.math.p2pxi(points[0][1]));
for (var i = 1; i < points.length; i++)
{
this.context.lineTo(this.game.math.p2pxi(points[i][0]), this.game.math.p2pxi(points[i][1]));
}
this.context.closePath();
this.context.stroke();
this.context.restore();
},
/**
* Renders a p2.Line shape. Do not call this directly - instead use Debug.physicsBody.
*
* @method Phaser.Utils.Debug#shapeLine
* @param {number} x - The x coordinate of the Shape to translate to.
* @param {number} y - The y coordinate of the Shape to translate to.
* @param {number} bodyAngle - The angle of the Body to rotate to.
* @param {p2.Shape} shape - The shape to render.
* @param {array} offset - The shape offset vector.
* @param {number} angle - The shape angle.
*/
shapeLine: function (x, y, bodyAngle, shape, offset, angle) {
this.context.beginPath();
this.context.save();
this.context.translate(x, y);
this.context.rotate(bodyAngle + angle);
this.context.lineWidth = 0.5;
this.context.moveTo(0, 0);
this.context.lineTo(this.game.math.p2px(shape.length), 0);
this.context.closePath();
this.context.stroke();
this.context.restore();
},
/**
* Renders a convex shape. Do not call this directly - instead use Debug.physicsBody.
*
* @method Phaser.Utils.Debug#shapeConvex
* @param {number} x - The x coordinate of the Shape to translate to.
* @param {number} y - The y coordinate of the Shape to translate to.
* @param {number} bodyAngle - The angle of the Body to rotate to.
* @param {p2.Shape} shape - The shape to render.
* @param {array} offset - The shape offset vector.
* @param {number} angle - The shape angle.
*/
shapeConvex: function (x, y, bodyAngle, shape, offset, angle) {
var points = shape.vertices;
this.context.beginPath();
this.context.save();
this.context.translate(x + this.game.math.p2pxi(offset[0]), y + this.game.math.p2pxi(offset[1]));
this.context.rotate(bodyAngle + angle);
this.context.moveTo(this.game.math.p2pxi(points[0][0]), this.game.math.p2pxi(points[0][1]));
for (var i = 1; i < points.length; i++)
{
this.context.lineTo(this.game.math.p2pxi(points[i][0]), this.game.math.p2pxi(points[i][1]));
}
// this.context.arc(0, 0, this.game.math.p2px(shape.radius) , 0, Math.PI * 2);
this.context.closePath();
this.context.stroke();
this.context.restore();
},
/**
* Renders a p2.Circle shape. Do not call this directly - instead use Debug.physicsBody.
*
* @method Phaser.Utils.Debug#shapeCircle
* @param {number} x - The x coordinate of the Shape to translate to.
* @param {number} y - The y coordinate of the Shape to translate to.
* @param {number} bodyAngle - The angle of the Body to rotate to.
* @param {p2.Shape} shape - The shape to render.
* @param {array} offset - The shape offset vector.
* @param {number} angle - The shape angle.
*/
shapeCircle: function (x, y, bodyAngle, shape, offset, angle) {
this.context.beginPath();
this.context.save();
this.context.translate(x + this.game.math.p2pxi(offset[0]), y + this.game.math.p2pxi(offset[1]));
this.context.arc(0, 0, this.game.math.p2px(shape.radius) , 0, Math.PI * 2);
this.context.closePath();
this.context.stroke();
this.context.restore();
}
};
Phaser.Utils.Debug.prototype.constructor = Phaser.Utils.Debug;