Sorted out Body gravity settings and updated the example.

This commit is contained in:
photonstorm 2014-03-11 16:26:03 +00:00
parent 6bddf1a914
commit e9ae465272
8 changed files with 44 additions and 289 deletions

View file

@ -149,6 +149,7 @@ New features:
* Tweens are now bound to their own TweenManager, not always the global game one. So you can create your own managers now (for you clark :) * Tweens are now bound to their own TweenManager, not always the global game one. So you can create your own managers now (for you clark :)
* ScaleManager.fullScreenTarget allows you to change the DOM element that the fullscreen API is called on (feature request #526) * ScaleManager.fullScreenTarget allows you to change the DOM element that the fullscreen API is called on (feature request #526)
* Merged Georges p2 BodyDebug and reformatted for jshint pass. Looks awesome :) * Merged Georges p2 BodyDebug and reformatted for jshint pass. Looks awesome :)
* ArcadePhysics.Body has a new gravityScale property, which is a modifier multiplied against the world gravity value on a Body.
Updates: Updates:

View file

@ -1,5 +1,5 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create }); var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, render: render });
function preload() { function preload() {
@ -10,6 +10,7 @@ function preload() {
var sprite1; var sprite1;
var sprite2; var sprite2;
var sprite3; var sprite3;
var sprite4;
function create() { function create() {
@ -19,33 +20,40 @@ function create() {
game.physics.arcade.gravity.y = 100; game.physics.arcade.gravity.y = 100;
// Sprite 1 will use the World (global) gravity // Sprite 1 will use the World (global) gravity
sprite1 = game.add.sprite(300, 32, 'ilkke'); sprite1 = game.add.sprite(100, 96, 'ilkke');
// Sprite 2 is set to ignore the global gravity and use its own value // Sprite 2 is set to ignore the global gravity and use its own value
sprite2 = game.add.sprite(400, 32, 'ilkke'); sprite2 = game.add.sprite(300, 96, 'ilkke');
// Sprite 3 will use both the world gravity and its own gravityScale modifier
sprite3 = game.add.sprite(500, 96, 'ilkke');
// Sprite 3 will use both the global gravity and its own value // Sprite 4 will ignore all gravity
sprite3 = game.add.sprite(500, 32, 'ilkke'); sprite4 = game.add.sprite(700, 96, 'ilkke');
// We obviously need to enable physics on those sprites
game.physics.enable([sprite1,sprite2,sprite3], Phaser.Physics.ARCADE);
// Enable physics on those sprites
game.physics.enable( [ sprite1, sprite2, sprite3, sprite4 ], Phaser.Physics.ARCADE);
sprite1.body.collideWorldBounds = true; sprite1.body.collideWorldBounds = true;
sprite1.body.bounce.y = 0.8; sprite1.body.bounce.y = 0.8;
sprite2.body.collideWorldBounds = true; sprite2.body.collideWorldBounds = true;
sprite2.body.bounce.y = 0.8; sprite2.body.bounce.y = 0.8;
sprite2.body.allowGravity = false; sprite2.body.gravity.y = 200;
sprite3.body.gravityScale.y = 10;
sprite3.body.collideWorldBounds = true; sprite3.body.collideWorldBounds = true;
sprite3.body.bounce.y = 0.8; sprite3.body.bounce.y = 0.8;
sprite3.body.gravityScale.y = 10; sprite3.body.gravityScale.y = 3;
sprite4.body.allowGravity = false;
}
function render() {
game.debug.text('world gravity', sprite1.x - 32, 64);
game.debug.text('local gravity', sprite2.x - 32, 64);
game.debug.text('gravityScale', sprite3.x - 32, 64);
game.debug.text('no gravity', sprite4.x - 32, 64);
} }

View file

@ -1,92 +0,0 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('ship', 'assets/sprites/xenon2_ship.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
}
var ship;
var total;
var aliens;
function create() {
game.world.setBounds(0,0,2000, 2000);
aliens = [];
for (var i = 0; i < 1000; i++)
{
var s = game.add.sprite(game.world.randomX, game.world.randomY, 'baddie');
s.name = 'alien' + s;
game.physics.enable(s, Phaser.Physics.ARCADE);
s.body.collideWorldBounds = true;
s.body.bounce.setTo(1, 1);
s.body.velocity.setTo(10 + Math.random() * 10, 10 + Math.random() * 10);
aliens.push(s);
}
ship = game.add.sprite(400, 400, 'ship');
game.physics.enable(ship, Phaser.Physics.ARCADE);
ship.body.collideWorldBounds = true;
ship.body.bounce.setTo(0.5, 0.5);
}
function update() {
for (var i = 0; i < aliens.length; i++)
{
aliens[i].alpha = 0.3;
}
total = game.physics.arcade.quadTree.retrieve(ship);
// Get the ships top-most ID. If the length of that ID is 1 then we can ignore every other result,
// it's simply not colliding with anything :)
for (var i = 0; i < total.length; i++)
{
total[i].sprite.alpha = 1;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
ship.body.velocity.x -= 2;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
ship.body.velocity.x += 2;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
{
ship.body.velocity.y -= 2;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
{
ship.body.velocity.y += 2;
}
}
function render() {
for (var i = 0; i < aliens.length; i++)
{
// game.debug.geom(aliens[i].bounds);
}
game.debug.text(total.length, 32, 32);
game.debug.QuadTree(game.physics.arcade.quadTree);
// game.debug.geom(ship);
game.debug.text('Index: ' + ship.body.quadTreeIndex, 32, 80);
for (var i = 0; i < ship.body.quadTreeIDs.length; i++)
{
game.debug.text('ID: ' + ship.body.quadTreeIDs[i], 32, 100 + (i * 20));
}
}

View file

@ -38,10 +38,6 @@ var Phaser = Phaser || {
SPRITEBATCH: 17, SPRITEBATCH: 17,
RETROFONT: 18, RETROFONT: 18,
// DYNAMIC: 1,
// STATIC: 2,
// KINEMATIC: 4,
// The various blend modes supported by pixi / phaser // The various blend modes supported by pixi / phaser
blendModes: { blendModes: {
NORMAL:0, NORMAL:0,

View file

@ -599,6 +599,8 @@ Phaser.Game.prototype = {
this.time.update(time); this.time.update(time);
this.debug.preUpdate();
this.render(); this.render();
}, },

View file

@ -124,13 +124,13 @@ Phaser.Physics.Arcade.Body = function (sprite) {
this.drag = new Phaser.Point(); this.drag = new Phaser.Point();
/** /**
* @property {boolean} allowGravity - Allow this Body to be influenced by world gravity? * @property {boolean} allowGravity - Allow this Body to be influenced by gravity? Either world or local.
* @default * @default
*/ */
this.allowGravity = true; this.allowGravity = true;
/** /**
* @property {Phaser.Point} gravity - A local gravity applied to this Body. If set this over-rides any world gravity. * @property {Phaser.Point} gravity - A local gravity applied to this Body. If non-zero this over rides any world gravity, unless Body.allowGravity is set to false.
*/ */
this.gravity = new Phaser.Point(0, 0); this.gravity = new Phaser.Point(0, 0);

View file

@ -245,6 +245,8 @@ Phaser.Physics.Arcade.prototype = {
body.rotation += (body.angularVelocity * this.game.time.physicsElapsed); body.rotation += (body.angularVelocity * this.game.time.physicsElapsed);
// Apply gravity using the p2 style gravityScale // Apply gravity using the p2 style gravityScale
if (body.allowGravity)
{
if (body.gravity.x !== 0) if (body.gravity.x !== 0)
{ {
body.velocity.x += body.gravity.x * this.game.time.physicsElapsed; body.velocity.x += body.gravity.x * this.game.time.physicsElapsed;
@ -262,6 +264,7 @@ Phaser.Physics.Arcade.prototype = {
{ {
body.velocity.y += this.gravity.y * this.game.time.physicsElapsed * body.gravityScale.y; body.velocity.y += this.gravity.y * this.game.time.physicsElapsed * body.gravityScale.y;
} }
}
// Apply velocity // Apply velocity
body.velocity.x = this.computeVelocity(body.velocity.x, body.acceleration.x, body.drag.x, body.maxVelocity.x); body.velocity.x = this.computeVelocity(body.velocity.x, body.acceleration.x, body.drag.x, body.maxVelocity.x);

View file

@ -658,169 +658,6 @@ Phaser.Utils.Debug.prototype = {
// this.line('bounce x: ' + sprite.body.bounce.x.toFixed(2), 'y: ' + sprite.body.bounce.y.toFixed(2)); // this.line('bounce x: ' + sprite.body.bounce.x.toFixed(2), 'y: ' + sprite.body.bounce.y.toFixed(2));
this.stop(); 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();
} }
}; };