javascript - How to add basic world collision with PhaserJS? - Stack Overflow

admin管理员组

文章数量:1315978

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.

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.

• javascript
• html
• phaser-framework

Share Improve this question Follow edited Jun 13, 2017 at 14:43 hRdCoder asked Sep 20, 2014 at 22:34 hRdCoderhRdCoder 57788 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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);
    }

}

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)

本文标签： javascriptHow to add basic world collision with PhaserJSStack Overflow