Keyboard keys

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.

UIKey binding

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:

  1. Select our UI Root | Main | Buttons | Exit GameObject.
  2. Click the Add Component button in the Inspector view.
  3. Type key with your keyboard to search for components.
  4. Select Key Binding and hit Enter or click on it with your mouse.

Let's see its available parameters.

Parameters

We've just added the following UIKey Binding component to our Exit button, as follows:

Parameters

The newly attached UIKey Binding component has three parameters:

  • Key Code: Which key would you like to bind to an action?
  • Modifier: If you want a two-button combination. Select on the four available modifiers: Shift, Control, Alt or None.
  • Action: Which action should we bind to this key? You can simulate a button click with PressAndClick, a selection with Select, or both with All.

Ok, now, we'll configure it to see how it works.

Configuration

Simply set the Key Code field to Escape. Now, hit Unity's play button. When you hit the Escape key of our keyboard, it reacts as if the Exit button was pressed!

We can now move on to see how to add keyboard and controller navigation to the UI.

UIKey navigation

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:

  1. Add the Button component (UIButton) to it.
  2. Add the Button Scale component (UIButton Scale) to it.
  3. Center Pivot of UISprite (middle bar + middle bar).
  4. Reset Center of Box Collider to {0, 0, 0}.

The Nickname | Input GameObject should have an Inspector view like this:

UIKey navigation

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:

UIKey navigation

Ok. With the preceding search filter, select the following GameObjects:

UIKey navigation

Now, with the preceding selection, follow these steps:

  1. Click the Add Component button in the Inspector view.
  2. Type key with your keyboard to search for components.
  3. Select Key Navigation and hit Enter or click on it with your mouse.

We've added the UIKey Navigation component to our selection. Let's see its parameters.

Parameters

We've just added the following UIKey Navigation component to our objects:

Parameters

The newly attached UIKey Navigation component has four parameter groups:

  1. Starts Selected: Is this widget selected by default at the start?
  2. Select on Click: Which widget should be selected when this widget is clicked on — or the Enter key/confirm button has been pressed? This option can be used to select a specific widget when a new page is displayed.
  3. Constraint: Use this to limit the navigation movement from this widget:
    • None: The movement is free from this widget
    • Vertical: From this widget, you can only go up or down
    • Horizontal: From this widget, you can only move left or right
    • Explicit: Only move to widgets specified in the Override
  4. Override: Use the Left, Right, Up, and Down fields to force the input to select the specified objects. If the Constraint parameter is set to Explicit, 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.

Configuration

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.

The Exit button

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:

  1. Select both our UI Root | Main | Buttons | Play and Options buttons.
  2. Drag our Exit button to the Down field of UIKey Navigation.
  3. Now, select our Exit button.
  4. Drag our 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.

The Options button

When the Options button is clicked, nothing is selected on the options page. We can correct this using the Select on Click parameter:

  1. Select our UI Root | Main | Buttons | Options button.
  2. Drag 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:

  1. Select our Options | Confirm button.
  2. Drag 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.

The nickname input field

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:

  1. Select our UI Root | Options | Nickname | Input GameObject.
  2. Click on the button (1) of the Notify field of On Submit, as shown in the following screenshot:
    The nickname input field

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.

The volume sliders

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:

  1. The arrow keys let us select the Volume box.
  2. If the user hits Enter, they enter the Volume box.
  3. From now on, the user can move the sliders' values with the left or right keys.
  4. By hitting Enter again, they validate their changes.

First, we need to make our volume box a button like other options on the page:

  1. Select our UI Root | Options | Volume GameObject.
  2. Add the Button Scale (UIButton Scale) component to it.
  3. Add a Key Navigation (UIKey Navigation) component to it.
  4. Drag 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:

  1. Select both the UI Root | Options | Volume | SFX and Music GameObjects.
  2. With both SFX and Music sliders selected:
    • Add the Button Scale component (UIButton Scale) to them
    • Add a Key Navigation component (UIKey Navigation) to them
    • Change their Constraint parameter to Vertical
    • Drag UI Root | Options | Volume in Select on Click
  3. Select our UI Root | Options | Confirm GameObject.
  4. Drag 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.

Mouse and keyboard behavior

The UIKey navigation works with the keyboard or gamepad, but it also works along with the mouse.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.237.194