Tilemap.createCollisionObjects will parse Tiled data for objectgroups and convert polyline instances into physics objects you can collide with in the world.

After defining tiles that collide on a Tilemap, you need to call Tilemap.generateCollisionData(layer) to populate the physics world with the data required.
Debug.renderPhysicsBody updated to take camera location and body rotation into account.
Body movement functions put back to velocity :)
Updated to latest dev version of pixi and latest p2.js
Updated docs
This commit is contained in:
photonstorm
2014-02-18 03:01:51 +00:00
parent 375e9e379a
commit 5d5c64d22f
201 changed files with 41296 additions and 47048 deletions
+134 -230
View File
@@ -58,6 +58,10 @@
<a href="Phaser.BitmapData.html">BitmapData</a>
</li>
<li>
<a href="Phaser.BitmapFont.html">BitmapFont</a>
</li>
<li>
<a href="Phaser.BitmapText.html">BitmapText</a>
</li>
@@ -90,10 +94,6 @@
<a href="Phaser.Device.html">Device</a>
</li>
<li>
<a href="Phaser.DOMSprite.html">DOMSprite</a>
</li>
<li>
<a href="Phaser.Easing.html">Easing</a>
</li>
@@ -142,6 +142,10 @@
<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
</li>
<li>
<a href="Phaser.Ellipse.html">Ellipse</a>
</li>
<li>
<a href="Phaser.Events.html">Events</a>
</li>
@@ -250,10 +254,6 @@
<a href="Phaser.Physics.Arcade.html">Arcade</a>
</li>
<li>
<a href="Phaser.Physics.Arcade.Body.html">Body</a>
</li>
<li>
<a href="Phaser.Plugin.html">Plugin</a>
</li>
@@ -314,6 +314,10 @@
<a href="Phaser.Sprite.html">Sprite</a>
</li>
<li>
<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
</li>
<li>
<a href="Phaser.Stage.html">Stage</a>
</li>
@@ -412,6 +416,10 @@
<a href="global.html#canUseNewCanvasBlendModes">canUseNewCanvasBlendModes</a>
</li>
<li>
<a href="global.html#getBounds">getBounds</a>
</li>
<li>
<a href="global.html#getNextPowerOfTwo">getNextPowerOfTwo</a>
</li>
@@ -665,65 +673,6 @@ Phaser.Utils.Debug.prototype = {
},
/**
* Renders the corners and point information of the given Sprite.
* @method Phaser.Utils.Debug#renderSpriteCorners
* @param {Phaser.Sprite} sprite - The sprite to be rendered.
* @param {boolean} [showText=false] - If true the x/y coordinates of each point will be rendered.
* @param {boolean} [showBounds=false] - If true the bounds will be rendered over the top of the sprite.
* @param {string} [color='rgb(255,0,255)'] - The color the text is rendered in.
*/
renderSpriteCorners: function (sprite, showText, showBounds, color) {
if (this.context == null)
{
return;
}
showText = showText || false;
showBounds = showBounds || false;
color = color || 'rgb(255,255,255)';
this.start(0, 0, color);
if (showBounds)
{
this.context.beginPath();
this.context.strokeStyle = 'rgba(0, 255, 0, 0.7)';
this.context.strokeRect(sprite.bounds.x, sprite.bounds.y, sprite.bounds.width, sprite.bounds.height);
this.context.closePath();
this.context.stroke();
}
this.context.beginPath();
this.context.moveTo(sprite.topLeft.x, sprite.topLeft.y);
this.context.lineTo(sprite.topRight.x, sprite.topRight.y);
this.context.lineTo(sprite.bottomRight.x, sprite.bottomRight.y);
this.context.lineTo(sprite.bottomLeft.x, sprite.bottomLeft.y);
this.context.closePath();
this.context.strokeStyle = 'rgba(255, 0, 255, 0.7)';
this.context.stroke();
this.renderPoint(sprite.offset);
this.renderPoint(sprite.center);
this.renderPoint(sprite.topLeft);
this.renderPoint(sprite.topRight);
this.renderPoint(sprite.bottomLeft);
this.renderPoint(sprite.bottomRight);
if (showText)
{
this.currentColor = color;
this.line('x: ' + Math.floor(sprite.topLeft.x) + ' y: ' + Math.floor(sprite.topLeft.y), sprite.topLeft.x, sprite.topLeft.y);
this.line('x: ' + Math.floor(sprite.topRight.x) + ' y: ' + Math.floor(sprite.topRight.y), sprite.topRight.x, sprite.topRight.y);
this.line('x: ' + Math.floor(sprite.bottomLeft.x) + ' y: ' + Math.floor(sprite.bottomLeft.y), sprite.bottomLeft.x, sprite.bottomLeft.y);
this.line('x: ' + Math.floor(sprite.bottomRight.x) + ' y: ' + Math.floor(sprite.bottomRight.y), sprite.bottomRight.x, sprite.bottomRight.y);
}
this.stop();
},
/**
* Render Sound information, including decoded state, duration, volume and more.
* @method Phaser.Utils.Debug#renderSoundInfo
@@ -869,32 +818,6 @@ Phaser.Utils.Debug.prototype = {
},
/**
* Render Sprite Body Physics Data as text.
* @method Phaser.Utils.Debug#renderBodyInfo
* @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).
*/
renderBodyInfo: function (sprite, x, y, color) {
color = color || 'rgb(255,255,255)';
this.start(x, y, color, 210);
this.splitline('x: ' + sprite.body.x.toFixed(2), 'y: ' + sprite.body.y.toFixed(2), 'width: ' + sprite.width, 'height: ' + sprite.height);
this.splitline('speed: ' + sprite.body.speed.toFixed(2), 'angle: ' + sprite.body.angle.toFixed(2), 'linear damping: ' + sprite.body.linearDamping);
this.splitline('blocked left: ' + sprite.body.blocked.left, 'right: ' + sprite.body.blocked.right, 'up: ' + sprite.body.blocked.up, 'down: ' + sprite.body.blocked.down);
this.splitline('touching left: ' + sprite.body.touching.left, 'right: ' + sprite.body.touching.right, 'up: ' + sprite.body.touching.up, 'down: ' + sprite.body.touching.down);
this.splitline('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.splitline('acceleration x: ' + sprite.body.acceleration.x.toFixed(2), 'y: ' + sprite.body.acceleration.y.toFixed(2));
this.splitline('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.splitline('bounce x: ' + sprite.body.bounce.x.toFixed(2), 'y: ' + sprite.body.bounce.y.toFixed(2));
this.stop();
},
/**
* Render debug information about the Input object.
* @method Phaser.Utils.Debug#renderInputInfo
@@ -1074,78 +997,6 @@ Phaser.Utils.Debug.prototype = {
},
/**
* Renders just the full Sprite bounds.
* @method Phaser.Utils.Debug#renderSpriteBounds
* @param {Phaser.Sprite} sprite - Description.
* @param {string} [color] - Color of the debug info to be rendered (format is css color string).
* @param {boolean} [fill=false] - If false the bounds outline is rendered, if true the whole rectangle is rendered.
*/
renderSpriteBody: function (sprite, color, fill) {
if (this.context == null)
{
return;
}
color = color || 'rgb(255,0,255)';
if (typeof fill === 'undefined') { fill = false; }
this.start(0, 0, color);
if (fill)
{
this.context.fillStyle = color;
this.context.fillRect(sprite.body.left, sprite.body.top, sprite.body.width, sprite.body.height);
}
else
{
this.context.strokeStyle = color;
this.context.strokeRect(sprite.body.left, sprite.body.top, sprite.body.width, sprite.body.height);
this.context.stroke();
}
this.stop();
},
/**
* Renders just the full Sprite bounds.
* @method Phaser.Utils.Debug#renderSpriteBounds
* @param {Phaser.Sprite} sprite - Description.
* @param {string} [color] - Color of the debug info to be rendered (format is css color string).
* @param {boolean} [fill=false] - If false the bounds outline is rendered, if true the whole rectangle is rendered.
*/
renderSpriteBounds: function (sprite, color, fill) {
if (this.context == null)
{
return;
}
color = color || 'rgb(255,0,255)';
if (typeof fill === 'undefined') { fill = false; }
this.start(0, 0, color);
if (fill)
{
this.context.fillStyle = color;
this.context.fillRect(sprite.bounds.x, sprite.bounds.y, sprite.bounds.width, sprite.bounds.height);
}
else
{
this.context.strokeStyle = color;
this.context.strokeRect(sprite.bounds.x, sprite.bounds.y, sprite.bounds.width, sprite.bounds.height);
this.context.stroke();
}
this.stop();
},
/**
* Renders a single pixel.
* @method Phaser.Utils.Debug#renderPixel
@@ -1278,9 +1129,35 @@ Phaser.Utils.Debug.prototype = {
},
/**
* Render Sprite Body Physics Data as text.
* @method Phaser.Utils.Debug#renderBodyInfo
* @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).
*/
renderBodyInfo: function (sprite, x, y, color) {
color = color || 'rgb(255,255,255)';
this.start(x, y, color, 210);
this.splitline('x: ' + sprite.body.x.toFixed(2), 'y: ' + sprite.body.y.toFixed(2), 'width: ' + sprite.width, 'height: ' + sprite.height);
// this.splitline('speed: ' + sprite.body.speed.toFixed(2), 'angle: ' + sprite.body.angle.toFixed(2), 'linear damping: ' + sprite.body.linearDamping);
// this.splitline('blocked left: ' + sprite.body.blocked.left, 'right: ' + sprite.body.blocked.right, 'up: ' + sprite.body.blocked.up, 'down: ' + sprite.body.blocked.down);
// this.splitline('touching left: ' + sprite.body.touching.left, 'right: ' + sprite.body.touching.right, 'up: ' + sprite.body.touching.up, 'down: ' + sprite.body.touching.down);
// this.splitline('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.splitline('acceleration x: ' + sprite.body.acceleration.x.toFixed(2), 'y: ' + sprite.body.acceleration.y.toFixed(2));
// this.splitline('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.splitline('bounce x: ' + sprite.body.bounce.x.toFixed(2), 'y: ' + sprite.body.bounce.y.toFixed(2));
this.stop();
},
/**
* @method Phaser.Utils.Debug#renderPhysicsBody
* @param {array} body
* @param {Phaser.Body} body - The Phaser.Body instance to render all shapes from.
* @param {string} [color='rgb(255,255,255)'] - The color the polygon is stroked in.
*/
renderPhysicsBody: function (body, color, context) {
@@ -1292,91 +1169,118 @@ Phaser.Utils.Debug.prototype = {
color = color || 'rgb(255,255,255)';
var x = body.x - this.game.camera.x;
var y = body.y - this.game.camera.y;
this.start(0, 0, color);
if (body.type === Phaser.Physics.Arcade.CIRCLE)
var shapes = body.data.shapes;
var shapeOffsets = body.data.shapeOffsets;
var shapeAngles = body.data.shapeAngles;
var i = shapes.length;
var x = this.game.math.p2px(body.data.position[0]) - this.game.camera.view.x;
var y = this.game.math.p2px(body.data.position[1]) - this.game.camera.view.y;
var angle = body.data.angle;
while (i--)
{
this.start(0, 0, color);
this.context.beginPath();
this.context.strokeStyle = color;
this.context.arc(x, y, body.shape.r, 0, Math.PI * 2, false);
this.context.stroke();
this.context.closePath();
// this.context.strokeStyle = 'rgb(0,0,255)';
// this.context.strokeRect(body.left, body.top, body.width, body.height);
this.stop();
}
else
{
var points = body.polygon.points;
this.start(0, 0, color);
this.context.beginPath();
this.context.moveTo(x + points[0].x, y + points[0].y);
for (var i = 1; i &lt; points.length; i++)
if (shapes[i] instanceof p2.Rectangle)
{
this.context.lineTo(x + points[i].x, y + points[i].y);
this.renderShapeRectangle(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
this.context.closePath();
this.context.strokeStyle = color;
this.context.stroke();
this.context.fillStyle = 'rgb(255,0,0)';
this.context.fillRect(x + points[0].x - 2, y + points[0].y - 2, 5, 5);
for (var i = 1; i &lt; points.length; i++)
else if (shapes[i] instanceof p2.Line)
{
this.context.fillStyle = 'rgb(255,' + (i * 40) + ',0)';
this.context.fillRect(x + points[i].x - 2, y + points[i].y - 2, 5, 5);
this.renderShapeLine(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
// else if (shapes[i] instanceof p2.Convex)
else
{
this.renderShapeConvex(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
}
// this.context.strokeStyle = 'rgb(0,255,255)';
// this.context.strokeRect(body.left, body.top, body.width, body.height);
this.stop();
}
this.stop();
},
/**
* @method Phaser.Utils.Debug#renderPolygon
* @param {array} polygon
* @param {string} [color='rgb(255,255,255)'] - The color the polygon is stroked in.
* @method Phaser.Utils.Debug#renderShape
* @param {p2.Shape} shape - The shape to render.
* @param {number} x - The x coordinate of the Body to translate to.
* @param {number} y - The y coordinate of the Body to translate to.
* @param {number} angle - The angle of the Body to rotate to.
*/
renderPolygon: function (polygon, color, context) {
if (this.context === null && context === null)
{
return;
}
color = color || 'rgb(255,255,255)';
var points = polygon.points;
var x = polygon.pos.x;
var y = polygon.pos.y;
this.start(0, 0, color);
renderShapeRectangle: 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.moveTo(x + points[0].x, y + points[0].y);
this.context.save();
this.context.translate(x + this.game.math.p2px(offset[0]), y + this.game.math.p2px(offset[1]));
this.context.rotate(bodyAngle + angle);
this.context.moveTo(this.game.math.p2px(points[0][0]), this.game.math.p2px(points[0][1]));
for (var i = 1; i &lt; points.length; i++)
{
this.context.lineTo(x + points[i].x, y + points[i].y);
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();
},
/**
* @method Phaser.Utils.Debug#renderShape
* @param {number} x - The x coordinate of the Body to translate to.
* @param {number} y - The y coordinate of the Body to translate to.
* @param {p2.Shape} shape - The shape to render.
* @param {number} offset -
* @param {number} angle -
*/
renderShapeLine: 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();
},
/**
* @method Phaser.Utils.Debug#renderShape
* @param {p2.Shape} shape - The shape to render.
* @param {number} x - The x coordinate of the Body to translate to.
* @param {number} y - The y coordinate of the Body to translate to.
* @param {number} angle - The angle of the Body to rotate to.
*/
renderShapeConvex: function (x, y, bodyAngle, shape, offset, angle) {
var points = shape.vertices;
this.context.beginPath();
this.context.save();
this.context.translate(x + this.game.math.p2px(offset[0]), y + this.game.math.p2px(offset[1]));
this.context.rotate(bodyAngle + angle);
this.context.moveTo(this.game.math.p2px(points[0][0]), this.game.math.p2px(points[0][1]));
for (var i = 1; i &lt; points.length; i++)
{
this.context.lineTo(this.game.math.p2px(points[i][0]), this.game.math.p2px(points[i][1]));
}
this.context.closePath();
this.context.stroke();
this.context.restore();
}
@@ -1404,7 +1308,7 @@ Phaser.Utils.Debug.prototype.constructor = Phaser.Utils.Debug;
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
on Sat Feb 08 2014 07:19:40 GMT-0000 (GMT) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
on Tue Feb 18 2014 03:01:17 GMT-0000 (GMT) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>