Custom World Bounds Issue (with example code & demo)

[tomfog]

Hi,

I am trying to modify the 'Pick Up Object' phaser example: https://phaser.io/examples/v2/p2-physics/pick-up-object

How it should work is that when a user  clicks on one of the shapes at the bottom of the screen it should generate a new shape inside the yellow containing block. I want the shapes to restricted inside the yellow box so that they cannot pass outside.

Here is my demo version: http://towerofconfidence.stage.pixeledeggs.com/test/index4.html

I have tried the following code - but I am not sure what is going wrong with the boundaries - any help/suggestions would be much appreciated!

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

// set the world bounds to match the yellow container
game.world.setBounds(167, 0, 306, 500);

// center camera
game.camera.bounds.setTo(0, 0, 640, 1139);
                
// load the background - this is larger than the screen
var mainBG = game.add.sprite(0, -3622, 'mainBG');

// add shapes/buttons to the shapeMenu
button1 = game.add.button(80, 760, 'button1', actionOnClickButton, this, 2, 1, 0);
button2 = game.add.button(254, 800, 'button2', actionOnClickButton, this, 2, 1, 0);
button3 = game.add.button(486, 770, 'button3', actionOnClickButton, this, 2, 1, 0);

Then the logic for placing the shapes follows the 'Pick Up Object' example - using PS physics ands boundsCollisionGroup...

Thanks!