I’ve added a third ‘menu’ style to this tutorial, which may be more suited to an inventory list, but it can be applied to menus too!
In the list menu, an array holds the text for each menu option and the correct text is shown based on the instance variables stored in a set of text objects. A selector arrow shows the player which option they’ve currently selected and the option itself is tracked using a global variable.
The events in this project are largely similar to the previous menus, but this project utilises functions to tidy things up a bit! There are also a few extra global variables in this project. SelectorPos tells the selector object which text object to align with, while the Booleans ScrollUp and ScrollDown are used in the scrolling mechanism. Finally, there’s ArrayLoaded to check whether or not a project file has been loaded into the game.
When starting the main layout, the project checks to see whether ArrayLoaded is true. If it’s not, the MenuList project file has not been loaded into the game yet. The array needs the option data to be able to display the text correctly so on the start of the layout an AJAX request is made.
When the request is completed, the project file is loaded into the array, sets the ArrayLoaded Boolean to true and the hidden menu layer is updated to include the new data. This ensures that when the player opens the menu for the first time, they see the correct options!
If starting the layout and the ArrayLoaded is true, then the UpdateVisuals function is called, to make sure the menu has been reset for when the user next loads it.
As before, pressing the space bar or gamepad Start/Menu button toggles the MenuOpen Boolean which determines whether the menu functionality is active. However, to ensure that the menu is correctly reset when closing it and not selecting an option, when the Spacebar/Start button is pressed and MenuOpen is true, we reset the SelectorPos and MenuSelection variables to 0 and call the UpdateVisuals function.
Talking of the menu functionality, it is broadly the same, but now it’s all stored in functions which are called each time one of the directional inputs is used. This removes the every tick events present in the previous projects which, while not necessarily important in this tiny project, can be quite useful in terms of performance in larger ones.
So, the directional control events now look like this:
But what happens in those functions?
Starting with the simpler of the two functions UpdateVisuals. This is the function that replaces the every tick events mentioned earlier.
So, every time this function is called, the text in the text objects is set according to the object’s OptionText instance variable and the MenuOptionList array.
The function then checks the MenuAnchor objects’ OptionID instance variables and makes sure that the selector arrow lines with the correct one according to the current value for the global variable SelectorPos.
The second function ScrollMenu handles all the events needed to make the scrolling menu function correctly. The Direction parameter is set according to which directional input is used, and then dictates which set of events are used:
This function controls several aspects of the scroll mechanism. For instance if the selector should be moving – if the menu is scrolling down, we don’t need to keep adding to the SelectorPos number, it’d break things a bit! We also need to ensure that when the MenuSelection values hit a certain point that the text in the text objects is updating accordingly.
The project still needs some limits added to make sure the MenuSelection values can’t increase or decrease indefinitely and the events to control this are in the Variable Limits group. This is also where the conditions for the ScrollUp and ScrollDown Booleans are set:
As in the previous examples, selecting an option is done using the Z key or A button which then takes the player to the associated dummy layout. Then in order to return to the main layout, the B button or Backspace key is used. When the player returns the main layout, the On Start of Layout event to reset the menu should be triggered, and they can start again!
And that’s all the menus in this tutorial. Hope you found them useful!