Unity UI: Button Navigation (No Mouse)

Intro

In this article, we are going are to cover how to navigate a menu without a mouse and activating different menus.

Button Navigation

On the button element, to see the navigation path in the scene view, you want to make sure the Visualize is turned on.

Unity will automatically create navigation paths between the buttons. You can see the paths in the Scene View using the arrows that appear between the buttons.

Unity Input System will allow to map vertical and horizontal movements between the Button elements and the default settings are the directional keys. The system needs to know where to start.

In the EventSystem, you will need to assign the UI object that will be first selected.

Navigation Options

For each Button, you have several navigation options. This is individual to each button, if you make a change to one it will not occur to all unless it is a prefab.

Explicit Navigation

Explicit Navigation allows you to customize the movement path from each individual UI object in a certain direction. You assign the UI object you want to navigate to when the Up, Down, Left or Right input is used.

Vertical — This navigation will only allow movement between UI objects that are vertically positioned to each other using the vertical inputs.

Horizontal — This navigation will only allow movement between UI objects that are horizontally positioned to each other using the horizontal inputs.

Automatic — Unity creates a navigation paths Vertically and Horizontally.

The Automatic option doesn’t allow for the navigation wrap back around to the beginning or end. If you specify the Navigation, Unity will give you a Warp around option.

In my Menu UI, my buttons are vertical and the Start & Exit button bookend my UI objects.Changing the Navigation to Vertical and using the Wrap Around will allow the user to move from the Start and Exit button.

Switching Between Menus

When the Option Button is selected, the menu will change.

We need a few variables to make this work, so we will create a MenuManager script and attach it to an empty game object. The UnityEngine.UI library will be used.

Two arrays will be create with one holding each menu and the other holding the first selected button on that menu.

Lastly an int that will identify which menu we are going currently on or moving to.

In each of the menu array, we assign the Menu01 to Element 0 and Menu02 to Element 1.

The Start Button will be the first button selected in Menu01, so that gets the Element 0 slot with the Sound Button be the first selected in Menu02, so it gets the Element 01 slot.

In the MenuManager script, lets create a method that will turn off all the menus except for the one you want.

This method (SelectedMenu) will take a int parameter (menuID). Using a foreach loop, we will loop through each GameObject in the menu array and set active to false. This will turn off all of the menu game objects.

After looping through array, we will turn on the menu game object at the menuID parameter index. We do this by setting active to true.

Lastly, we do the same thing with the first selected button by selecting the button in the _firstSelected array at the parameter index.

In the Start, we call the SelectedMenu method we created and pass in the _menuID variable. This will turn on the first menu and button in the arrays since they are both at the Element 0 spot.

Next, we need to get the Button that was selected and from there we can activate the next menu. This will take in a Button parameter.

On the Buttons that change menus you will add a method that we just create to be called when the button is clicked/selected. This will require to add the script that has the method (MenuManager), select the public method you want to call from that script (ActivateMenu) and drag in the Button that was selected.

Back in the method, we check the name of the button that was selected. IF the name of the Button was the “Options_Button” we will set the _menuID to 1 and call a corountine that was a certain amount of time to allow the audio to play, before calling the SelectedMenu method that was created previously with the new _menuID number.

This turns off all menus, expect for the menu02 which is in the element 1 spot of the menu array This will also select the Sound Button, which is the button in the element 1 spot of the first selected array.

ELSE IF the button name was “Back_Button”, it reverts this by changing the _menuID to 0, which activates menu01 and the start button as the first selected.

Conclusion

This system can continue to grow as long as Menu and the Button that will be selected are in the same element spot or index.