Add buttons outside the game

[Faizy]

Hey,

 

let´s say I created

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

 

Now I want buttons, which are next to the stage. They dont influence anything on the field. However, they should "talk"(e.g. do x when button is pressed) to the game objects. How could I realise this?

 

Basically I´m looking for the best way to add things outside the "true" stage, which still can interact with the game, but are not on the true "stage"

 

Thanks

[rich]

DOM buttons?

[Faizy]

No, phaser.js buttons, like the following one:

buttonSpawnPlayerTower = game.add.button(550, 0, 'buttonSpawnPlayerTower', drawGrid, this, null, null, null);

 

[rich]

Phaser buttons cannot be outside of the Phaser.Stage. It depends what sort of game you're building as how to approach this. Fundamentally though, you need to expose some common functions, and just have the buttons call them. Or maybe use Signals / Events? Really depends what you're trying to do.

[Faizy]

Thanks rich.

 

Wel,; I´ll ask another question, assuming the following:

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

Is it possible to ONLY use 700px instead of 800px width? I would use the 100px to place my buttons there. Is there a way to say phaser that the game, where everything happens, is only 700px width?

[MikeW]

Yes I have a Phaser area 600x800 but I move the physics engine 

Look for a demo that has something like this 

        function createPreviewBounds(x, y, w, h) {
            var sim = game.physics.p2;
            var mask = sim.boundsCollisionGroup.mask;
            customBounds.left = new p2.Body({ mass: 0, position: [ sim.pxmi(x), sim.pxmi(y) ], angle: 1.5707963267948966 });
            customBounds.left.addShape(new p2.Plane());
            customBounds.right = new p2.Body({ mass: 0, position: [ sim.pxmi(x + w), sim.pxmi(y) ], angle: -1.5707963267948966 });
            customBounds.right.addShape(new p2.Plane());
            customBounds.top = new p2.Body({ mass: 0, position: [ sim.pxmi(x), sim.pxmi(y) ], angle: -3.141592653589793 });
            customBounds.top.addShape(new p2.Plane());
            customBounds.bottom = new p2.Body({ mass: 0, position: [ sim.pxmi(x), sim.pxmi(y + h) ] });
            customBounds.bottom.addShape(new p2.Plane());
            sim.world.addBody(customBounds.left);
            sim.world.addBody(customBounds.right);
            sim.world.addBody(customBounds.top);
            sim.world.addBody(customBounds.bottom);
        }

 

            bounds = new Phaser.Rectangle(0, 0, 100, 800);
            customBounds = { left: null, right: null, top: null, bottom: null };
            createPreviewBounds(bounds.x, bounds.y, bounds.width, bounds.height);

 

I do a scoreboard in the top 100 pixels now that means i have a displayed area with negative coords 

 

game.add.sprite(205,-55,'heart')

 

I got it working - and kind of understand it