In this section, we'll see how to add keyboard control to our UI. First, we'll see how to bind keys to buttons, and then we'll add a navigation system using keyboard arrows.
The UIKey Binding
component assigns a specific key to the widget it's attached to. We'll use it now to assign the keyboard's Escape key to our menu's Exit
button:
UI Root
| Main
| Buttons
| Exit
GameObject.key
with your keyboard to search for components.Let's see its available parameters.
We've just added the following UIKey Binding component to our Exit
button, as follows:
The newly attached UIKey Binding component has three parameters:
Shift
, Control
, Alt
or None
.PressAndClick
, a selection with Select
, or both with All
.Ok, now, we'll configure it to see how it works.
The UIKey Navigation
component helps us assign objects to select using the keyboard arrows or controller directional-pad. For most widgets, the automatic configuration is enough, but we'll need to use the override parameters in some cases to have the behavior we need.
The nickname input field has neither the UIButton
nor the UIButton Scale
components attached to it. This means that there will be no feedback to show the user it's currently selected with the keyboard navigation, which is a problem. We can correct this right now.
Select UI Root
| Options
| Nickname
| Input
, and then:
UIButton
) to it.UIButton Scale
) to it.UISprite
(middle bar + middle bar).Box Collider
to {0, 0, 0}
.The Nickname
| Input
GameObject should have an Inspector view like this:
Ok. We'll now add the Key Navigation component (UIKey Navigation
) to most of the buttons in the scene. In order to do that, type t:uibutton
in the Hierarchy view's search bar to display only GameObjects with the UIButton
component attached to them:
Ok. With the preceding search filter, select the following GameObjects:
Now, with the preceding selection, follow these steps:
key
with your keyboard to search for components.We've added the UIKey Navigation
component to our selection. Let's see its parameters.
We've just added the following UIKey Navigation component to our objects:
The newly attached UIKey Navigation component has four parameter groups:
None
: The movement is free from this widgetVertical
: From this widget, you can only go up or downHorizontal
: From this widget, you can only move left or rightExplicit
: Only move to widgets specified in the OverrideExplicit
, only widgets specified here can be selected. Otherwise, automatic configuration still works for fields left to None
.Ok. Now, let's configure it to understand and test the above parameters.
First things first: we need to set our Play
button as the default selected object at the start. In order to do this, simply select our UI Root
| Main
| Buttons
| Play
GameObject, and check the Starts Selected option of UIKey Navigation
.
Now, let's try it. Hit Unity's
play button. You'll see that most of them work, but here's our first issue with automatic configuration: the Exit
button cannot be selected. Let's see why and what we can do to fix this.
That's because it is not considered as being below the Play
and Options
buttons. We can use the Override parameters to correct this and force the selection on input:
UI Root
| Main
| Buttons
| Play
and Options
buttons.Exit
button to the Down field of UIKey Navigation
.Exit
button.Play
button in the Up field of UIKey Navigation
.Hit Unity's play button. That's it. The Override parameters are now taken into account and we can select our Exit
button and go back to the Play
button with the arrow keys!
Now, try hitting Enter while the Options
button is selected. When the options page appears, we cannot move from a widget to another anymore. Let's talk about that.
When the Options
button is clicked, nothing is selected on the options page. We can correct this using the Select on Click parameter:
UI Root
| Main
| Buttons
| Options
button.Options
| Language
| List
in the Select on Click field.Hit Unity's play button. Now, when the options page is displayed, our language popup list is selected by default, letting us navigate through options using the arrow keys.
We also need the Play
button to be selected as soon as the Confirm
button is pressed:
Options
| Confirm
button.Main
| Buttons
| Play
in its Select on Click field.That's it. Now, when you select Options
, the language list will be selected automatically. Now, the nickname input field has a small issue upon validation.
If you hit the Enter key while you're typing a new nickname, the input field is no longer selected, and you cannot navigate with the keyboard anymore.
This occurs because, by default, the input field's On Submit event delegate is set to call the UIInput/RemoveFocus method. We'll change this now:
UI Root
| Options
| Nickname
| Input
GameObject.Hit Unity's play button. Great, we can now validate the nickname input field, and the focus is no longer removed from it.
That's it! We've solved all of our major issues with the key navigation for our UI. We can now see how to interact with the volume sliders separately.
Our last issue with key navigation is that our volume sliders aren't accessible with the arrow keys. Let's create a new depth of navigation and achieve the following behavior:
Volume
box.Volume
box.First, we need to make our volume box a button like other options on the page:
UI Root
| Options
| Volume
GameObject.UIButton Scale
) component to it.UIKey Navigation
) component to it.UI Root
| Options
| Volume
| SFX
in the Select on Click field.Ok. Hit Unity's play button. We can now select the volume box with the arrow keys, and if you hit Enter while it's selected, the SFX
slider is automatically selected.
We'll now make sure you can navigate through both sliders and go back to the normal navigation depth when you hit Enter again:
UI Root
| Options
| Volume
| SFX
and Music
GameObjects.SFX
and Music
sliders selected:UIButton Scale
) to themUIKey Navigation
) to themUI Root
| Options
| Volume
in Select on ClickUI Root
| Options
| Confirm
GameObject.UI Root
| Options
| Volume
in the Right field of UIKey Navigation
.That's it! Hit Unity's play button, and you'll see that we can now edit the sliders' values using the right and left arrow keys after the Volume
box has been selected with Enter.
18.191.237.194