New polygon collision object examples and Body scale fixes.

examples/collision/body scale.js

@@ -40,7 +40,7 @@ function update() {
 
 function render() {
 
-    game.debug.renderPolygon(sprite.body.polygons, 'rgb(255,0,0)');
-    game.debug.renderPolygon(sprite2.body.polygons, 'rgb(255,0,0)');
+    game.debug.renderPhysicsBody(sprite.body);
+    game.debug.renderPhysicsBody(sprite2.body);
 
 }

examples/collision/bounding box.js

@@ -17,9 +17,8 @@ function create() {
     sprite1 = game.add.sprite(150, 300, 'atari');
     sprite1.name = 'atari';
 
-    //  This adjusts the collision body size to be 104 x 104.
-    //  See the offset bounding box for another example.
-    sprite1.body.setSize(104, 104, 0, 0);
+    //  Here you can visually see the two bounding boxes the sprites are using for collision.
+
     sprite1.body.immovable = true;
 
     sprite2 = game.add.sprite(700, 320, 'mushroom');
@@ -30,7 +29,6 @@ function create() {
 
 function update() {
 
-    // object1, object2, collideCallback, processCallback, callbackContext
     game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
 
 }
@@ -45,7 +43,7 @@ function render() {
 
     game.debug.renderBodyInfo(sprite1, 32, 32);
 
-    game.debug.renderPolygon(sprite1.body.polygons, 'rgb(255,0,0)');
-    game.debug.renderPolygon(sprite2.body.polygons, 'rgb(255,0,0)');
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
 
 }

examples/collision/circle body.js

@@ -0,0 +1,51 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('wizball', 'assets/sprites/wizball.png');
+    game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+
+}
+
+var sprite1;
+var sprite2;
+
+function create() {
+
+    game.stage.backgroundColor = '#2d2d2d';
+
+    sprite1 = game.add.sprite(130, 250, 'wizball');
+
+    //  Here we've replaced the sprites body with a circle instead of a rectangle
+    //  The value is the radius of the body in pixels
+
+    sprite1.body.setCircle(46);
+    sprite1.body.immovable = true;
+
+    sprite2 = game.add.sprite(700, 210, 'mushroom');
+    sprite2.name = 'mushroom';
+    sprite2.body.velocity.x = -100;
+
+}
+
+function update() {
+
+    game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
+
+}
+
+function collisionHandler (obj1, obj2) {
+
+    game.stage.backgroundColor = '#992d2d';
+
+}
+
+function render() {
+
+    game.debug.renderBodyInfo(sprite2, 32, 32);
+
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
+
+}

examples/collision/circle vs polygon.js

@@ -0,0 +1,65 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('parsec', 'assets/sprites/parsec.png');
+    game.load.image('wizball', 'assets/sprites/wizball.png');
+    game.load.image('spaceman', 'assets/sprites/exocet_spaceman.png');
+
+}
+
+var sprite1;
+var sprite2;
+var sprite3;
+var sprite4;
+
+function create() {
+
+    game.stage.backgroundColor = '#2d2d2d';
+
+    game.physics.gravity.y = 100;
+
+    sprite1 = game.add.sprite(80, 200);
+    sprite1.body.setPolygon(0,0, 60,0, 100,40, 60,80, 0,80);
+    sprite1.body.translate(0, 144);
+    sprite1.body.immovable = true;
+    sprite1.body.allowGravity = false;
+
+    sprite2 = game.add.sprite(450, 300, 'parsec');
+    sprite2.body.setPolygon(56, -1  , 10, -5  , 1, -13  , 0, -34  , 55, -60  , 122, -78  , 165, -80  , 214, -74  , 285, -71  , 296, -44  , 298, -12  , 292, -5  , 168, -3);
+    sprite2.body.translate(0, 80);
+    sprite2.body.immovable = true;
+    sprite2.body.allowGravity = false;
+
+    sprite3 = game.add.sprite(230, 400, 'spaceman');
+    sprite3.body.setPolygon(34, -172  , 75, -172  , 87, -145  , 121, -52  , 105, -16  , 55, -3  , 9, -19  , 1, -57  , 24, -145);
+    sprite3.body.translate(0, 175);
+    sprite3.body.immovable = true;
+    sprite3.body.allowGravity = false;
+
+    sprite4 = game.add.sprite(380, 100, 'wizball');
+    sprite4.body.setCircle(46);
+    sprite4.body.collideWorldBounds = true;
+    sprite4.body.friction = 0;
+    sprite4.body.bounce.setTo(0.9, 0.9);
+    sprite4.body.velocity.setTo(100, 100);
+
+}
+
+function update() {
+
+    game.physics.collideArray(sprite4, [ sprite1, sprite2, sprite3 ]);
+
+}
+
+function render() {
+
+    game.debug.renderBodyInfo(sprite4, 32, 32);
+
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
+    game.debug.renderPhysicsBody(sprite3.body);
+    game.debug.renderPhysicsBody(sprite4.body);
+
+}

examples/collision/group vs group.js

@@ -1,5 +1,5 @@
 
-var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });
 
 function preload() {
 

examples/collision/larger bounding box.js

@@ -19,7 +19,7 @@ function create() {
     sprite1.name = 'atari';
 
     //  In this example the new collision box is much larger than the original sprite
-    sprite1.body.setSize(400, 50, -100, 20);
+    sprite1.body.setRectangle(400, 50, -100, 20);
     sprite1.body.immovable = true;
 
     sprite2 = game.add.sprite(700, 210, 'mushroom');
@@ -30,7 +30,6 @@ function create() {
 
 function update() {
 
-    // object1, object2, collideCallback, processCallback, callbackContext
     game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
 
 }
@@ -45,7 +44,7 @@ function render() {
 
     game.debug.renderBodyInfo(sprite1, 32, 32);
 
-    game.debug.renderPolygon(sprite1.body.polygons, 'rgb(255,0,0)');
-    game.debug.renderPolygon(sprite2.body.polygons, 'rgb(255,0,0)');
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
 
 }

examples/collision/offset bounding box.js

@@ -20,7 +20,7 @@ function create() {
 
     //  This adjusts the collision body size to be a 100x50 box.
     //  50, 25 is the X and Y offset of the newly sized box.
-    sprite1.body.setSize(100, 50, 50, 25);
+    sprite1.body.setRectangle(100, 50, 50, 25);
     sprite1.body.immovable = true;
 
     sprite2 = game.add.sprite(700, 220, 'mushroom');
@@ -31,7 +31,6 @@ function create() {
 
 function update() {
 
-    // object1, object2, collideCallback, processCallback, callbackContext
     game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
 
 }
@@ -46,7 +45,7 @@ function render() {
 
     game.debug.renderBodyInfo(sprite1, 32, 32);
 
-    game.debug.renderPolygon(sprite1.body.polygons, 'rgb(255,0,0)');
-    game.debug.renderPolygon(sprite2.body.polygons, 'rgb(255,0,0)');
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
 
 }

examples/collision/polygon body.js

@@ -0,0 +1,50 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('parsec', 'assets/sprites/parsec.png');
+    game.load.image('spaceman', 'assets/sprites/exocet_spaceman.png');
+
+}
+
+var sprite1;
+var sprite2;
+
+function create() {
+
+    game.stage.backgroundColor = '#2d2d2d';
+
+    //  Here we've replaced the sprites body with a polygon.
+    //  The point data was generated by tracing the PNGs in Physics Editor: http://www.codeandweb.com/physicseditor
+
+    sprite1 = game.add.sprite(550, 250, 'parsec');
+    sprite1.body.setPolygon(56, -1  , 10, -5  , 1, -13  , 0, -34  , 55, -60  , 122, -78  , 165, -80  , 214, -74  , 285, -71  , 296, -44  , 298, -12  , 292, -5  , 168, -3);
+    sprite1.body.translate(0, 80);
+    sprite1.body.velocity.x = -100;
+
+    sprite2 = game.add.sprite(0, 200, 'spaceman');
+    sprite2.body.setPolygon(34, -172  , 75, -172  , 87, -145  , 121, -52  , 105, -16  , 55, -3  , 9, -19  , 1, -57  , 24, -145);
+    sprite2.body.translate(0, 175);
+    sprite2.body.velocity.x = 100;
+
+}
+
+function update() {
+
+    game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
+
+}
+
+function collisionHandler (obj1, obj2) {
+
+    game.stage.backgroundColor = '#992d2d';
+
+}
+
+function render() {
+
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
+
+}

examples/collision/rotated bounding box.js

@@ -0,0 +1,52 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('atari', 'assets/sprites/atari130xe.png');
+    game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+
+}
+
+var sprite1;
+var sprite2;
+
+function create() {
+
+    game.stage.backgroundColor = '#2d2d2d';
+
+    sprite1 = game.add.sprite(130, 200, 'atari');
+    sprite1.name = 'atari';
+
+    //  Here we're rotated both the sprite and the physics body
+
+    sprite1.rotation = 0.6;
+    sprite1.body.polygon.rotate(0.6);
+    sprite1.body.immovable = true;
+
+    sprite2 = game.add.sprite(700, 210, 'mushroom');
+    sprite2.name = 'mushroom';
+    sprite2.body.velocity.x = -100;
+
+}
+
+function update() {
+
+    game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
+
+}
+
+function collisionHandler (obj1, obj2) {
+
+    game.stage.backgroundColor = '#992d2d';
+
+}
+
+function render() {
+
+    game.debug.renderBodyInfo(sprite1, 32, 32);
+
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
+
+}

examples/collision/vertical collision.js

@@ -22,7 +22,7 @@ function create() {
     //  This adjusts the collision body size.
     //  220x10 is the new width/height.
     //  See the offset bounding box for another example.
-    sprite1.body.setSize(220, 10, 0, 0);
+    sprite1.body.setRectangle(220, 10, 0, 0);
 
     sprite2 = game.add.sprite(400, 450, 'mushroom');
     sprite2.name = 'mushroom';
@@ -32,7 +32,6 @@ function create() {
 
 function update() {
 
-    // object1, object2, collideCallback, processCallback, callbackContext
     game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
 
 }
@@ -45,10 +44,7 @@ function collisionHandler (obj1, obj2) {
 
 function render() {
 
-    game.debug.renderSpriteInfo(sprite1, 32, 32);
-    game.debug.renderSpriteCollision(sprite1, 400, 32);
-
-    game.debug.renderSpriteBody(sprite1);
-    game.debug.renderSpriteBody(sprite2);
+    game.debug.renderPhysicsBody(sprite1.body);
+    game.debug.renderPhysicsBody(sprite2.body);
 
 }