Move world position on canvas

[tomfog]

Hi

I have a newbie question that I feel silly asking but I couldn't find an example that demonstrated this yet.

I have set the size of the canvas using the following code:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'new-phaser-game', { preload: preload, create: create, update: update, render: render });

I have added a sprite that sits at the bottom of the screen full width (as expected) using the following:

shapeMenu = game.add.sprite(0, 500, 'shapeMenu');

Now I would like to resize the world so that it sits inside this area with a margin around it (but inside the canvas).

I have done this, but the world is sitting in the top left corner:

game.world.setBounds(0, 0, 400, 400);

Could any one advise on how I move this to the center of the screen (without moving the shapeMenu sprite as well)?

Thanks!

[Fenopiù]

Never working with setBounds yet... but 0, 0 is top left corner, have you tryed game.world.setBounds(10, 10, 400, 400)?

[tomfog]

Hi,

I did try that - but it moved the 'shapeMenu' sprite as well. This really confused me as I thought this element would not be affected as it's outside of the world bounds?

Thanks

[samme]

// Menu must be outside game.world
shapeMenu = game.make.sprite(0, 500, 'shapeMenu');
game.stage.addChild(shapeMenu);

// Depends where you want it …
game.world.setBounds(200, 150, 400, 300);

// Camera bounds follow the world's, so reset them
game.camera.bounds.setTo(0, 0, 800, 600);

 

[tomfog]

Thanks for replying!

If I wanted to add a background image that takes up the full game canvas - at full height and width and sits behind world's custom bounds, would this be possible? And if so - do I need to add the sprite to the stage or the world?

Thanks you

[samme]

I guess it could work either way.

var bg = game.make.image(0, 0, 'bg');

game.stage.addChildAt(bg, 0);

var bg = game.add.image(-200, -150, 'bg');

 

[tomfog]

Thanks for help with this! I'm still struggling to understand how this works. I'm trying to make a demo game where shapes are dynamically dropped into a box inside the game.

All the shapes are placed inside a collision group using p2 physics and are set to collide with the world bounds like this: game.physics.p2.updateBoundsCollisionGroup();

var game = new Phaser.Game(640, 1000, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

game.world.setBounds(160, 0, 322, 594);

game.camera.bounds.setTo(0, 0, 640, 1139);

mainBG = game.add.sprite(0, -3522, 'mainBG'); // this is a tall image, I plan to scroll bg later

I am using the code above and here is a screenshot of how I want it to behave - so that the dynamically created shapes are fixed inside the world bounds (drawn in screenshot with the yellow box):

Currently I can drag and drop the shape outside of the yellow box on the left-hand side - but they are restricted to the right and bottom edges as expected. I'm really not sure what I'm doing wrong?!

Thanks

 

[samme]

I'm afraid I don't know P2 physics at all. It sounds similar to the problem in phaser-ce/issues/409.