This is the simplest of the menu styles in this tutorial. All the available options are laid out in a grid pattern and the player can navigate through them using the arrow keys, d-pad or left analog stick.
The project has two global variables: MenuOpen, a global Boolean which tells the game if the menu is currently open, and MenuSelection a global number which tells the game which menu option the player is currently highlighting.
By pressing either the spacebar or the gamepad’s Start/Menu button the MenuOpen Boolean is toggled, opening the menu if it’s closed and vice versa. When the MenuOpen Boolean is true, then the menu layer is shown, and the functionality enabled. The opposite is true when MenuOpen is false.
The menu itself is set up on its own layer and consists of four objects. A background sprite (MenuBackground, 1), an anchor object for each option (MenuAnchor, 2), a separate sprite to display each option (OptionDisplay, 3), and the selector sprite (MenuSelect, 4). The anchor objects have an instance variable OptionID which matched the display sprite it’s associated with. The anchors then sit hidden underneath their respective display sprites, and act as a point which the selector sprite can align to. One of the display sprites has got reduced opacity to show this in the example file.
The menu’s functionality can be broken down into three sections – showing the player’s current selection, changing the current selection/navigating the menu and picking an option.
Showing the player’s current selection is done using an every tick event which sets the position of the MenuSelect object based on the global variable MenuSelection and the MenuAnchor’s instance variable OptionID:
Condition
System ▶︎ Every tick
MenuAnchor ▶︎ OptionID = MenuSelection
Action
MenuSelect ▶︎ Set position to MenuAnchor (image point 0)
In order to move the MenuSelect object we need to be able to change the MenuSelection global variable. This is done using the arrow keys, d-pad or left analog stick. Starting with moving the selector in the Right direction:
Condition
Keyboard ▶︎ On right arrow key pressed
OR
Gamepad ▶︎ On D-pad right pressed
Action
System ▶︎ Add 1 to MenuSelection
To do the same using the gamepad’s analog stick, this needs to be configured in a separate event:
Condition
Gamepad ▶︎ Left analog stick X axis > 50
System ▶︎ Trigger once while true
Action
System ▶︎ Add 1 to MenuSelection
For moving left, the events are the same, but the numbers inverted. The up/down directions are slightly different as the difference in ID numbers is 3 as opposed to 1. We’ll use the gamepad analog stick to demonstrate this as the axis condition changes too. To move the selector down:
Condition
Gamepad ▶︎ Left analog stick Y axis > 50
System ▶︎ Trigger once while true
Action
System ▶︎ Add 3 to MenuSelection
You should eventually end up with an event block like this:
This control is all well and good, but it’s currently possible for the player to add to or subtract from the MenuSelection variable indefinitely, which is not helpful for our menu. To avoid this, some limits need to be imposed – this is done simply by telling the game that if MenuSelection reaches a certain value, we reset the value:
The last bit of functionality to create is the ability for the player to pick a menu option when pressing either the A Button or the Z key. This closes the menu and takes the player to a new placeholder layout:
Condition
Keyboard ▶︎ On Z key pressed
OR
Gamepad ▶︎ On A button pressed
Action
System ▶︎ Set MenuOpen to false
System ▶︎ Got to layout “Option” & MenuSelection
To return to the main game layout, the player can either click the number on the screen, hit the backspace key or press the B button on the gamepad.
And that’s everything from the grid-style menu! Next up is the carousel-style menu!