Jump to content

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


nandobtz
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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: 

 

Link to comment
Share on other sites

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. :(

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...