set the newly selected button to a green tint set the current selected button to a white tint Let's do that by creating two new class property called buttons and selectedButtonIndex:Ĭonst currentButton = this.buttons Now that we have 3 buttons, we can keep track of where a selection cursor should go by storing the buttons in an Array and keeping track of which index is currently selected. (creditsButton.x, creditsButton.y, 'Credits') (settingsButton.x, settingsButton.y, 'Settings')Ĭonst creditsButton = (settingsButton.x, settingsButton.y + settingsButton.displayHeight + 10, 'glass-panel') (playButton.x, playButton.y, 'Play')Ĭonst settingsButton = (playButton.x, playButton.y + playButton.displayHeight + 10, 'glass-panel') We'll create 3 buttons in a vertical layout for Play, Settings, and Credits.Įach button will consist of an Image with a Text object layered on top of it.Ĭonst playButton = (width * 0.5, height * 0.6, 'glass-panel') Lastly, the confirmSelection() method is called when the space key is pressed for taking an action associated with the selected button. This is where our logic for moving to the next button will go. Notice that we use selectNextButton() in the update() method when up or down is pressed. The 3 other methods will handle selecting the appropriate menu items. The create() method is where we will create the menu buttons. They will be used to move our selection up and down as well as confirm the selection. We create a cursors class property to store an instance of CursorKeys for simple access to the up, down, and space keys. ( 'cursor-hand', 'assets/cursor_hand.png')Ĭonst upJustPressed = ( !)Ĭonst downJustPressed = ( !)Ĭonst spaceJustPressed = ( !) ( 'glass-panel', 'assets/glassPanel.png') Import Phaser from 'phaser' export default class MainMenuScene extends Phaser.Scene
0 Comments
Leave a Reply. |