Flyout menus using phaser

[ssharp_admin]

Anyone try this...

 

I wanted to have a menu shoot out after a button press not sure how to go about this. 

 

My first guess would be to draw the full menu and then have it scroll on to the screen though I am not sure how to hide part of it. 

 

Let me know if you have any ideas?

[phaserdragoon]

Build your menu and set its initial position off screen. Then add the callback function to the button press event where you can use tweens to show the menu.

 

Here's an example, assuming you've already built the menu.

// ... other code ..create : function () {   // ... other code ...    this.game.add.button(100, 100, 'button', this.showMenu, this, 1, 0, 1, 0);   // ... other code ...},showMenu : function () {    // assuming we have already created a menu called MyMenu    this.game.add.tween(this.MyMenu).to({x:this.game.world.centerX, y:this.game.world.centerY}, 2000, Phaser.Easing.Linear.None, true);   // this will make the menu slide from whatever position it's at onto the center of the screen.},// ... more code ...

[ssharp_admin]

Thanks for the reply!!!

 

now when you say create the menu, I want the flyout to have its own buttons and text and move as one unit. Is that a sprite grouping? I ask because my menu will not be a single image but buttons with their own methods and such. Just looking for some clarification before I get started. 

 

Sharp

[phaserdragoon]

Yes, the menu will be a grouping of various elements. You can use the Phaser.Group class to group the elements, but you can also use Phaser.Sprite and its addChild method to contain each element. So maybe the parent sprite will be the background image. Then call its addChild method to add each button and texts, those elements will be positioned relative to the background so when you move the menu around you just alter the background's position.

[rajeev90km]

Add a phaser group, add images, buttons and other menu components to it using 'add' and position this group outside the viewport (hidden). Once the button is clicked, bring the group into view using a tween. 

create : function () {   this.menuGroup = this.game.add.group();   this.menuGroup.y = -500; // Keep menuGroup out of view   this.menuImage = this.game.add.sprite(0,0,'menuImage');   this.menuButton1 = this.game.add.button(100,100,'menuButton1',this.startGame,this,0,0,1);   // add menu components to the group   this.menuGroup.add(this.menuImage);    this.menuGroup.add(this.menuButton1);   this.game.add.button(100, 100, 'button', this.showMenu, this, 1, 0, 1, 0);},showMenu : function () {    // brings menuGroup into view    this.game.add.tween(this.menuGroup).to({y:0}, 2000, Phaser.Easing.Back.Out, true);},

[ssharp_admin]

Hi Guys 

 

Debugging in HTML5 is much tougher than traditional programming.

 

I tried out the code and it is not working for me. In looking at the console window everything seems to be fine with no errors but the showMenu is not firing at all. I did notice some differences between my code and what was posted. I do not have commas following the closing brace for the functions. also the order of the keyword function and the function name is different. The issue was using the this object on the callback function. I am not sure why removing it allowed it to work.

function create () {            var background = game.add.sprite(0,0, 'bg_image');            basicMenu = game.add.group();            var button1 = game.add.sprite(game.world.centerX,100, 'button');            button1.scale.setTo(.5,.5);            var button2 = game.add.sprite(game.world.centerX,210,'button');            button2.scale.setTo(.5,.5);            var button3 = game.add.sprite(game.world.centerX,320,'button');            button3.scale.setTo(.5,.5);            basicMenu.add(button1);            basicMenu.add(button2);            basicMenu.add(button3);            basicMenu.y = -500;            this.menuButton1 = this.game.add.button(100,100,'button',showMenu,this,0,0,1);            // basicMenu.add(button1);            // basicMenu.add(button2);            // basicMenu.add(button3);        }        function showMenu () {            // brings menuGroup into view            game.add.tween(basicMenu).to({y:0}, 2000, Phaser.Easing.Back.Out, true);        }

after that removal i got the jist. Now what I wanna try to have the tween fire if the mouse pointer gets close to the edge of the game world, is there an eventhandler to accomplish that?

[lewster32]

This is due to the fact that the method you've used to structure your code differs from the above example, which is based on using states in a certain way. The error is basically telling you that the object 'undefined' that you gave to the tween has no y property (which is obvious, undefined won't have any properties). Without seeing your code I can't be sure how you'd go about fixing it, but I'm 99.99% certain it's a scope problem, with the menu you've created not being accessible in the tween's scope.

[ssharp_admin]

Thanks lewster

 

I was building my code up from the helloworld.html. What is the advantage of using states the tutoiral doesnt seem to use them?

 

Also any comments on having the mouse position calling the tween when it approaches the boarder of the game world?

[phaserdragoon]

Hi ssharp_admin,

 

Separating the game into states make things easier to manage. Especially with larger more complex games. You could have a state to boot up, preload assets, main menu, game, end screen, etc. 

 

If you want to continue working with the helloworld.html example. Try the following:

function create () {           // we need to define the variables on the game object to be able to refer back to it.            game.background = game.add.sprite(0,0, 'bg_image');            game.basicMenu = game.add.group();            var button1 = game.add.sprite(game.world.centerX,100, 'button');            button1.scale.setTo(.5,.5);            var button2 = game.add.sprite(game.world.centerX,210,'button');            button2.scale.setTo(.5,.5);            var button3 = game.add.sprite(game.world.centerX,320,'button');            button3.scale.setTo(.5,.5);            game.basicMenu.add(button1);            game.basicMenu.add(button2);            game.basicMenu.add(button3);            game.basicMenu.y = -500;            // we call the showMenu function which we created as a function of game. The parameter after the callback is the callback context, in this case 'game' is the context            game.menuButton1 = game.add.button(100,100,'button',game.showMenu,game,0,0,1);             // basicMenu.add(button1);            // basicMenu.add(button2);            // basicMenu.add(button3);        }         // define showMenu as a function of the game object.        game.showMenu = function () {            // brings menuGroup into view            game.add.tween(game.basicMenu).to({y:0}, 2000, Phaser.Easing.Back.Out, true);        }