Almost all the recipes in this chapter involve different interactive UI controls. Although there are different kinds of interactive UI controls, the basic way to work with them, and have scripted actions respond to user actions, is all based on the same idea: events triggering the execution of object method functions.

Then, for fun, and an example of a very different kind of UI, the final recipe demonstrates how to add to your game a sophisticated real-time communication of the relative positions of objects in the scene (that is, a radar!).

The UI can be used for three main purposes:

1. To display static (unchanging) values, such as the name or logo image of the game, or word labels such as Level...

As well as scenes where the player plays the game, most games will have menu screens, which display to the user messages about instructions, high scores, the level they have reached so far, and so on. Unity provides UI Buttons to offer users a simple way to indicate their choices.

In this recipe, we'll create a very simple game consisting of two screens, each with a button to load the other one, as illustrated in the screenshot:

To create a button-navigable multi-scene game, follow these steps:

1. Create a new Unity 2D project.
2. Save the current (empty) scene, in a new folder, _Scenes, naming the scene page1.
3. Add a UI Text object positioned at the top center of...

At the end of the previous recipe, we illustrated two ways to visually communicate buttons to users. The Animation of button properties can be a highly effective, and visually interesting, way to reinforce to the user that the item their mouse is currently over is a clickable, active button. One common animation effect is for a button to get larger when the mouse is over it, and then it shrinks back to its original size when the mouse pointer is moved away. Animation effects are achieved by choosing the Animation option for the Transition property of a Button GameObject, and by creating an animation controller with triggers for the Normal, Highlighted, Pressed, and Disabled states.

UI Panels are provided by Unity to allow UI controls to be grouped and moved together, and also to visually group elements with an Image background (if desired). The sibling depth is what determines which UI elements will appear above or below others. We can see the sibling depth explicitly in the Hierarchy, since the top-to-bottom sequence of UI GameObjects in the Hierarchy sets the sibling depth. So, the first item has a depth of 1, the second has a depth of 2, and so on. The UI GameObjects with larger sibling depths (further down the Hierarchy and so drawn later) appear above the UI GameObjects with lower sibling depths.

In this recipe, we'll create three UI Panels, each showing a different playing card image. We'll also add four triangle arrangement buttons to change the display order (move to bottom,...

This recipe illustrates how to create an interactive UI Slider, and execute a C# method each time the user changes the UI Slider value:

To create a UI Slider and display its value on the screen, follow these steps:

1. Create a new 2D project.

2. Add a UI Text GameObject to the scene with a Font size of 30 and placeholder text, such as slider value here (this text will be replaced with the slider value when the scene starts). Set Horizontal- and Vertical- Overflow to Overflow.
3. In the Hierarchy add a UI Slider GameObject to the scene – choose menu: GameObject | UI | Slider.
4. In the Inspector, modify the settings for the position of the UI Slider GameObject...

There are many cases where we wish to inform the player of the proportion of time remaining, or at the completion of some value at a point in time, for example, a loading progress bar, the time or health remaining compared to the starting maximum, or how much the player has filled up their water bottle from the fountain of youth. In this recipe, we'll illustrate how to remove the interactive "handle" of a UI Slider, and change the size and color of its components to provide us with an easy-to-use, general purpose progress/proportion bar. In this recipe, we'll use our modified UI Slider to graphically present to the user how much time remains for a countdown timer:

Cursor icons are often used to indicate the nature of the interaction that can be done with the mouse. Zooming, for instance, might be illustrated by a magnifying glass; shooting, on the other hand, is usually represented by a stylized target. In this recipe, we will learn how to implement custom mouse cursor icons to better illustrate your gameplay – or just to escape the Windows, macOS, and Linux default UI:

For this recipe, we have prepared the folders that you'll need in the 02_06 folder.

The previous recipe demonstrated how to change the mouse pointer for 2D and 3D GameObjects receiving OnMouseEnter and OnMouseExit events. Unity UI controls do not receive OnMouseEnter and OnMouseExit events. Instead, UI controls can be made to respond to PointerEnter and PointerExit events if we add a special Event Trigger component to the UI GameObject. In this recipe, we'll change the mouse pointer to a custom magnifying glass cursor when it moves over a UI Button GameObject:

For this recipe, we'll use the same asset files as for the previous recipe, and its CustomCursorPointer C# script class, all of which can be found in the 02_07 folder.

While often we just wish to display non-interactive text messages to the user, there are times (such as name entry for high scores) where we want the user to be able to enter text or numbers into our game. Unity provides the UI Input Field component for this purpose. In this recipe, we'll create an Input Field that prompts the user to enter their name:

Having interactive text on the screen isn't of much use unless we can retrieve the text entered to use in our game logic, and we may need to know each time the user changes the text content and act accordingly. This recipe adds an event-handler C# script that detects each time the user has completed editing the text, and updates an extra message on screen confirming the newly-entered content.

Users make choices, and often, these choices have one of two options (for example, sound on or off), or sometimes one of several possibilities (for example, difficulty level as easy/medium/hard). Unity UI Toggles allows users to turn options on and off; and when combined with Toggle Groups, they restrict choices to one of the group of items. In this recipe, we'll first explore the basic Toggle, and a script to respond to a change in values. Then, we'll extend the example to illustrate Toggle Groups, and styling these with round images to make them look more like traditional radio buttons.

The screenshot shows how the button's status changes are logged in the Console panel when the scene is running:

In the previous recipe, we created radio-style buttons with a Toggle Group, to present the user with a choice of one of many options. Another way to offer a range of choices is with a drop-down menu. Unity provides the UI Dropdown control for such menus. In this recipe, we'll offer the user a drop-down choice for the suit of a deck of cards (hearts, clubs, diamonds, or spades).

Note, the UI Dropdown created by default includes a scrollable area, in case there isn't space for all the options. We'll learn how to remove the GameObjects and components, to reduce complexity when such a feature is not required.

Then we'll learn how to add icon images with each menu option, as shown in the screenshot:

A radar displays the locations of other objects relative to the player, usually based on a circular display, where the center represents the player, and each graphical blip indicates how far away and what relative direction objects are to the player. Sophisticated radar displays will display different categories of objects with different colored or shaped blip icons.

In the screenshot, we can see two red square blips, indicating the relative position of the two red cube GameObjects tagged Cube near the player, and a yellow circle blip indicating the relative position of the yellow sphere GameObject tagged Sphere. The green circle radar background image gives the impression of an aircraft control tower radar or something similar: