How to add a basic global clash with PhaserJS?

Question

I am working on a new game using the PhaserJS library for HTML5, and I am at a loss for the problem I am facing. I use the P2 physics engine for the underlying physics of the platform, and I cannot get the collision of the boundaries of the world to work. Here is my code:

Game.js

function create() { game.world.setBounds(0, 0, 800, 300); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.restitution = 0.8; player.create(game); player.instance.body.collideWorldBounds = true; } 

Player.js

 Player.prototype.create = function(game) { this.instance = game.add.sprite(100, 100, 'player'); game.physics.p2.enable(this.instance, Phaser.Physics.P2JS); this.cursors = game.input.keyboard.createCursorKeys(); }; 

Currently, I understand that I need to set the boundaries of the world by calling "game.world.setBounds (width, height)" and then check the boundaries by calling "player.instance.body.collideWorldBounds = true;" but the game sprite is all still walking right across the borders. Any help is appreciated. Thanks!

EDIT: I am using PhaserJS 2.0.7.

Answer 1

You might want to upgrade to Phaser 2.1.1 , as it seems that this problem has been fixed there.

You can see that from this example .

Here is the source code for this example:

 var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.image('stars', 'assets/misc/starfield.jpg'); game.load.spritesheet('ship', 'assets/sprites/humstar.png', 32, 32); } var ship; var starfield; var cursors; function create() { starfield = game.add.tileSprite(0, 0, 800, 600, 'stars'); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.restitution = 0.8; ship = game.add.sprite(200, 200, 'ship'); ship.scale.set(2); ship.smoothed = false; ship.animations.add('fly', [0,1,2,3,4,5], 10, true); ship.play('fly'); // Create our physics body. A circle assigned the playerCollisionGroup game.physics.p2.enable(ship); ship.body.setCircle(28); // This boolean controls if the player should collide with the world bounds or not ship.body.collideWorldBounds = true; cursors = game.input.keyboard.createCursorKeys(); } function update() { ship.body.setZeroVelocity(); if (cursors.left.isDown) { ship.body.moveLeft(200); } else if (cursors.right.isDown) { ship.body.moveRight(200); } if (cursors.up.isDown) { ship.body.moveUp(200); } else if (cursors.down.isDown) { ship.body.moveDown(200); } } 

Answer 2

In my game, I had to call p2.setBoundsToWorld to update the boundaries of p2 physics to fit the boundaries of the world:

 function create() { game.world.setBounds(0, 0, 800, 300); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setBoundsToWorld(true, true, true, true, false); 

The signature is as follows:

 setBoundsToWorld: function (left, right, top, bottom, setCollisionGroup)