UI and Navigation
- Abbie Hipwell
- May 5, 2022
- 2 min read
Updated: Jun 15, 2022
I began focusing on implementing Harrison's UI into the game and making it easy to navigate with both keyboard and controller, I found while doing this that Unreal's widgets are very hard to use with a controller - there is no simple way to make this work so I had to find a way to make it work with a controller. I searched through countless tutorials on this, and the only way I could find to do this was using a very complicated method.
The code works by taking the axis which the analog stick is being moved in, it then takes how much it is being moved by each time, and whether it is being moved up or down. This allows the player to scroll through the menu.
The index is set based off how much the analog stick is being moved by, this is then used to determine which item is being hovered over.

The index is then taken and the colour of each item is changed when it is being hovered over, changing the colour of the text on a button is made hard as there is no node to do this; there is a node which allows you to multiply the colour, however this means that you cannot change it properly - especially if the original colour of the text is darker.

This method is not the most optimised way, however it works and can always be re-worked later on; in each of the 'hover' functions, the boolean is taken into select colour, if 'hover' is true then this will change the colour of the text.
For example, if the Resume button is being hovered over, Resume? will be set to True, this means that the colour of the text will be changed to white.

The controller will now work with the UI navigation, as shown below. I have also changed the cursor depending on if it is hovering over an item.
I was able to apply this code to the other widgets I had created, including the main menu and the win screens.

This is how the code will look on the finalised menus ...

Comments