How to add basic world collision with PhaserJS?

Question

I am working on a new game using the PhaserJS library for HTML5 and am at a loss with a problem I've run into. I'm using the P2 physics engine for basic platform physics and I'm unable to get the world bounds collision 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();
};

Right now my understanding is that I need to set the world bounds by calling "game.world.setBounds(width, height)" and then check bounds by calling "player.instance.body.collideWorldBounds = true;", but the player sprite is still going right through the boundaries. Any help is greatly appreciated. Thanks!

EDIT: I'm using PhaserJS 2.0.7.

Answer 1

You might want to update to Phaser 2.1.1, as it looks like they have this issue fixed in there.

You can see that from this example.

Here's the source code for that 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 p2 physics bounds to match the world bounds:

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)