Jump to content

Move world position on canvas


Recommended Posts


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)?


Link to comment
Share on other sites

// Menu must be outside game.world
shapeMenu = game.make.sprite(0, 500, '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);


Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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 :)


Link to comment
Share on other sites


  • Recently Browsing   0 members

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