Faizy

Add buttons outside the game

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.