This week I had to rearrange a user interface so that it had a better flow. On that project, we are using Unreal 4’s Widget system. This got me thinking about how the user interface was made and how it could be improved. The Widget system is very much like Blueprints in Unreal but is intended for only visual interfaces, not gameplay, overall it’s a great system. Having to change the flow of the main menu was this weeks task, and it was not easy due to how the menu was originally created, so for creating interfaces with sub-menus in the future, I have designed a system that is much easier to work with by splitting menus into different Widgets and changing how they are treated by the code to be more isolated and individual.
For this system, each interface screen should be a separate Widget and must have a setup function and a cleanup function which contains a call to start the animation for entry/exit plus anything else that needs to be set at the start or end of the interface’s lifetime on the screen as an active widget. Secondly, the Widget needs a variable ID so we know which interface it is, this can be an int, we could also save ints for the ID’s of the next of previous interfaces but this could also be done through the player controller which is probably a better design as it keeps gameplay variables off of the interface however personally I find that Widgets storing values used in themselves to be perfectly safe.
Next, we need a way to navigate between the different interfaces and an int to show selection, this can go in the player controller, the controller also needs a variable for what the current interface is, and an int array of all the interfaces in the system by ID. Then when an accept is registered, we just look at the current ID, check which selection was made, and read from a tree of potential next interfaces, which could be an array of Ints with a switch for different selections, in order to get the next interface’s ID, or if a back input is pressed do the same to see which interface came before, and using the next/previous interface, call first the current interfaces cleanup function and then the new interfaces setup function.
Using this method for organizing interfaces in menus means that if we were to need to change the order or flow of the menu, we only have to change the values in the tree of potential interfaces instead of having to recreate menu flow in the Widgets themselves, hopefully saving us time and effort.