How to create "deadzones" margins around the world with game.world.setBounds?

[nandobtz]

My goal is to make the player stay centered on the canvas at all times, even when he reaches the boundaries of the world.

This is how it is now:
https://gyazo.com/ea478d70b78201ad51aa6ae09b2649a6

And I've modified the code to be like this:

deadland = game.add.tileSprite(world.x1 - 1200, world.y1 - 1200, world.x2*2, world.y2*2, 'deadland');
    land = game.add.tileSprite(world.x1, world.y1, world.x2, world.y2, 'earth');
    land.fixedToCamera = false;
    land.boundsPadding = 100;

    game.world.setBounds(world.x1 -1200, world.y1 -1200, world.x2*2, world.y2*2);
    game.physics.startSystem(Phaser.Physics.P2JS);
	deadland.alpha = 0.7;
	land.alpha = 1;

But now the player isn't stopping at the 'earth' size bounds. He goes all the way to the 'deadzone':
https://gyazo.com/634d578985d1aef1f6ccb6f51e17f65f


How do I do it so the player won't go beyond the 'earth' bounds? Thanks!

[flow]

I'm not sure if I fully understand the intention of your code example, but you set the bounds to the same size as the deadland tileSprite so I'd expect that the player can really go there.

Maybe you can work something out with:

game.physics.p2.setBounds(...)

game.physics.arcade.setBounds(...)

or

game.camera.bounds

[nandobtz]

35 minutes ago, flow said:

I'm not sure if I fully understand the intention of your code example, but you set the bounds to the same size as the deadland tileSprite so I'd expect that the player can really go there.

My idea is to do like most multiplayer .io games do when the player reaches the boundaries. You can't go to the darker area.
Diep.io, for example: https://gyazo.com/3fca590076b2e2c1de23beab799243d8
Notice that the player always stays centered because of that extra area.

The 'deadland' tileSprite, in my case, would be the darker area. I can do it without this deadland sprite, but the darker area would be a black background instead:
https://gyazo.com/a3a2d1cd249e7a32ad6776306f88f333
The player can go there anyway.
I need it to stop at the game world (lighter area)

 

[flow]

Are you using arcade or P2 physics?
I just played around with game.physics.p2.setBounds(100, 100, 600, 400) on a 800x600 canvas since I'm mostly using P2 and it seems to work well except for the left boundary which reacts super strange.

Maybe game.physics.arcade.setBounds(100, 100, 600, 400) works fine.

[nandobtz]

I've tried with game.physics.p2.setBounds(world.x1, world.y1, world.x2, world.y2); and game.physics.arcade.setBounds(world.x1, world.y1, world.x2, world.y2);
I've tried with number as well. None of them seem to work. Player still goes to the darker area.

[flow]

Are you actually using P2? If so do you set collision groups somewhere because then you might need to do 

game.physics.p2.updateBoundsCollisionGroup();

[nandobtz]

Here's the complete piece of code inside the Create Function:

Game.create = function () {
    this.time.advancedTiming=true;
    Game.playerMap = {};
	deadland = game.add.tileSprite(world.x1 - 1200, world.y1 - 1200, world.x2*2, world.y2*2, 'deadland');
	game.world.sendToBack(deadland);
    land = game.add.tileSprite(world.x1, world.y1, world.x2, world.y2, 'earth');
    land.fixedToCamera = false;
    land.boundsPadding = 100;

    game.world.sendToBack(land);
    //  Enable p2 physics
	game.physics.startSystem(Phaser.Physics.P2JS);
    game.world.setBounds(world.x1 - 1200, world.y1 - 1200, world.x2*2, world.y2*2);
	deadland.alpha = 0.7;
	land.alpha = 1;
	game.physics.p2.setBounds(world.x1, world.y1, world.x2, world.y2);
    game.physics.p2.gravity.y = 0;
    game.physics.p2.gravity.x = 0;
    game.physics.p2.world.defaultContactMaterial.friction = 1;
    game.physics.p2.world.setGlobalStiffness(1e5);
    this.stage.disableVisibilityChange = true;

rest of the code...

 

And here's the game live, if that helps: http://flagz.io

[flow]

Something I just tried in the Phaser Sandbox and it seems to work as intended :-)

function preload() {
    game.load.baseURL = 'http://examples.phaser.io/assets/';
    game.load.crossOrigin = 'anonymous';

    game.load.image('phaser', 'sprites/phaser-dude.png');
    game.load.image('deadland', '');
    game.load.image('earth', 'misc/starfield.jpg');
}

var cursors, player, deadland, land;

function create() {
    deadland = game.add.tileSprite(0, 0, 1600, 1200, 'deadland');
    land = game.add.tileSprite(200, 200, 1200, 800, 'earth');
    land.fixedToCamera = false;

    //Enable p2 physics
    game.physics.startSystem(Phaser.Physics.P2JS);
    game.world.setBounds(0, 0, 1600, 1200);
    game.physics.p2.setBounds(200, 200, 1200, 800);
	
    game.physics.p2.gravity.y = 0;
    game.physics.p2.gravity.x = 0;
    
    game.physics.p2.world.defaultContactMaterial.friction = 1;
    game.physics.p2.world.setGlobalStiffness(1e5);
    
    player = game.add.sprite(800, 800, 'phaser');
    //Don't forget to enable physics on the sprite
    game.physics.p2.enable(player);
    
    game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1);
    
    cursors = game.input.keyboard.createCursorKeys();
}

function update() {
    player.body.setZeroVelocity();
    
    if (cursors.left.isDown){
    	player.body.moveLeft(400);
    }
    else if (cursors.right.isDown){
    	player.body.moveRight(400);
    }

    if (cursors.up.isDown){
    	player.body.moveUp(400);
    }
    else if (cursors.down.isDown){
    	player.body.moveDown(400);
    }
}

 

[nandobtz]

Hey Flow, do you happen to have a codepen for your code? I'd like to see it working live. Thanks

[flow]

Here you go (Phaser 2.6.2 without bug):

Strange thing is that there is a bug in 2.10.1 that does not happen when using the Phase Sandbox for testing (https://phaser.io/sandbox/edit/2).

The left bound seems broken in Phaser CE 2.10.1, Sandbox uses 2.6.2 and there it works fine.

[EDIT]

I can confirm that the bug happens first time in Phaser CE 2.7.0: 

 

[nandobtz]

That's exactly what I need (besides the broken left bound). I'm still not sure why I can't implement it into my game. Grr. Frustrating.

Please let me know when you figure the broken left side. Thanks!

[flow]

You will find the nasty bug in your code eventually since we know now that it "should" work ;-)

When it wasn't working for me in the first try I forgot to enable P2 physics on the player sprite ^^.

I created an issue about the presumed Phaser bug: https://github.com/photonstorm/phaser-ce/issues/493 let's see ^^

[nandobtz]

I've been trying for HOURS. It seems that the player isn't responding to the game.physics.p2.setBounds.
I know it's asking a lot but would you be able to look at the code and tell me if you see anything that could be blocking it?
http://flagz.io/__versioncontrol/0.2-fp/js/game.min.js
You'd find it under Game.create = function

You can see this modified version of the game here: http://flagz.io/__versioncontrol/0.2-fp/

game.physics.p2.enable(player) is under Game.Cplayer = function
Should it be under the 'create' function? I've tried it but it didn't work.

[flow]

I'm sorry, I looked over your code a bit, tried some things in-game linke setting the bounds again, update the collision groups etc., but nothing works.

Since you CAN collide with the trees I don't think that there is a general issue with the collisions but for some reason the player just won't collide with the bounds :-(

I wonder if it might be related to the materials but idk.

As a workaround I would suggest this inside you update() loop after controls:

if (player.body.x > world.x2) player.body.x = world.x2;
else if (player.body.x < world.x1) player.body.x = world.x1;

if (player.body.y > world.y2) player.body.y = world.y2;
else if (player.body.y < world.y1) player.body.y = world.y1;

Oh and be aware that depending on how you intended to use world.x1, world.x2, ... the width for the setBounds function will actually be (world.x2-world.x1) ... Since your world.x1 is 0 it currently makes no difference though but if you plan to change it for some reason you might get a bug there.

[nandobtz]

It worked graciously!  Thanks a lot Flow! Much appreciated!