Unity 2021 Cookbook: Over 140 recipes to take your Unity game development skills to the next level , Fourth Edition

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Responding to User Events for Interactive UIs

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, as well as to 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 as an example of a very different kind of UI, the final recipe will demonstrate how to add sophisticated, real-time communication for the relative positions of objects in the scene to your game (that is, radar!).

The UI can be used for three main purposes:

To display static (unchanging) values, such as the name or logo image of the game, or word labels such as Level and Score, that tell us what the numbers next to them indicate (the recipes for these can be found in Chapter 1, Displaying Data with Core UI Elements).
To display values that change due to our scripts, such as timers, scores, or the distance from our Player character to some other object (an example of this is the radar recipe at the end of this chapter, Displaying a radar to indicate the relative locations of objects).
Interactive UI controls, whose purpose is to allow the player to communicate with the game scripts via their mouse or touchscreen. These are the ones we'll look at in detail in this chapter.

The core concept of working with Unity interactive UI controls is to register an object's public method so that we're informed when a particular event occurs. For example, we can add a UI dropdown to a scene named DropDown1, and then write a MyScript script class containing a NewValueAction() public method to perform an action. However, nothing will happen until we do two things:

We need to add an instance of the script class as a component of a GameObject in the scene (which we'll name go1 for our example – although we can also add the script instance to the UI GameObject itself if we wish to).
In the UI dropdown's properties, we need to register the GameObject's public method of its script component so that it responds to the On Value Changed event messages:

Figure 2.1 – Graphical representation of the UI at design time

The NewValueAction() public method of the MyScript script will typically retrieve the value that's been selected by the user in the dropdown and do something with it – for example, confirm it to the user, change the music volume, or change the game's difficulty. The NewValueAction() method will be invoked (executed) each time the go1 GameObject receives the NewValueAction() message. In the properties of DropDown1, we need to register go1's scripted component – that is, MyScript's NewValueAction() public method – as an event listener for On Value Changed events. We need to do all this at design time (that is, in the Unity Editor before running the scene):

Figure 2.2 – Graphical representation of the runtime of the UI

At runtime (when the scene in the application is running), we must do the following:

If the user changes the value in the drop-down menu of the DropDown1 GameObject (step 1 in the preceding diagram), this will generate an On Value Changed event.
DropDown1 will update its display on the screen to show the user the newly-selected value (step 2a). It will also send messages to all the GameObject components registered as listeners to On Value Changed events (step 2b).
In our example, this will lead to the NewValueAction() method in the go1 GameObject's scripted component being executed (step 3).

Registering public object methods is a very common way to handle events such as user interaction or web communications, which may occur in different orders, may never occur, or may happen several times in a short period. Several software design patterns describe ways to work with these event setups, such as the Observer pattern and the Publisher-Subscriber design pattern.

Core GameObjects, components, and concepts related to interactive Unity UI development include the following:

Visual UI controls: The visible UI controls themselves include Button, Image, Text, and Toggle. These are the UI controls the user sees on the screen and uses their mouse/touchscreen to interact with. These are the GameObjects that maintain a list of object methods that have subscribed to user-interaction events.

Interaction UI controls: These are non-visible components that are added to GameObjects; examples include Input Field and Toggle Group.
Panel: UI objects can be grouped together (logically and physically) with UI Panels. Panels can play several roles, including providing a GameObject parent in the Hierarchy window for a related group of controls. They can provide a visual background image to graphically relate controls on the screen, and they can also have scripted resize and drag interactions added if desired.
Sibling Depth: The bottom-to-top display order (what appears on the top of what) for a UI element is determined initially by its place in the sequence in the Hierarchy window. At design time, this can be manually set by dragging GameObjects into the desired sequence in the Hierarchy window. At runtime, we can send messages to the Rect Transforms of GameObjects to dynamically change their Hierarchy position (and therefore, the display order) as the game or user interaction demands. This is illustrated in the Organizing images inside panels and changing panel depths via buttons recipe.

Often, a UI element exists with most of the components that you may need for something in your game, but you may need to adapt it somehow. An example of this can be seen in the Displaying a countdown timer graphically with a UI Slider recipe, which makes a UI Slider non-interactive, instead of using it to display a red-green progress bar for the status of a countdown timer.

In this chapter, we will cover the following recipes:

Creating UI Buttons to move between scenes
Animating UI Button properties on mouseover
Organizing image panels and changing panel depths via UI Buttons
Displaying the value of an interactive UI Slider
Displaying a countdown timer graphically with a UI Slider
Setting custom mouse cursors for 2D and 3D GameObjects
Setting custom mouse cursors for UI controls
Interactive text entry with Input Field
Toggles and radio buttons via toggle groups
Creating text and image icon UI Drop-down menus
Displaying a radar to indicate the relative locations of objects

How to do it...

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

Create a new Unity 2D project.
Save the current (empty) scene in a new folder called _Scenes, naming the scene page1.
Add a UI Text object positioned at the top center of the scene containing large white text that says Main Menu (page 1).

Add a UI Button to the scene positioned in the middle-center of the screen. In the Hierarchy window, click on the show children triangle to display the Text child of this GameObject button. Select the Text GameObject and, in the Inspector window for the Text property of the Text (Script) component, enter the text goto page 2:

Figure 2.4 – UI Button Text child

Create a second scene, named page2, with UI Text = Instructions (page 2) and a UI Button with the goto page 1 text. You can either repeat the preceding steps or you can duplicate the page1 scene file, naming the duplicate page2, and then edit the UI Text and UI Button Text appropriately.
Add both scenes to the build, which is the set of scenes that will end up in the actual application built by Unity. To add scene1 to the build, open the page1 scene and go to File | Build Settings.... Then, click on the Add Open Scenes button so that the page1 scene becomes the first scene in the list of Scenes in the build. Now open page2 and repeat this process so that both scenes have been added to the build.

We cannot tell Unity to load a scene that has not been added to the list of scenes in the build. This makes sense since when an application is built, we should never try to open a scene that isn't included as part of that application.

Ensure you have the page1 scene open.
Create a C# script class called SceneLoader, in a new folder called _Scripts that contains the following code. Then, add an instance of the SceneLoader as a scripted component to Main Camera:

using UnityEngine; 
using UnityEngine.SceneManagement; 

public class SceneLoader : MonoBehaviour { 
    public void LoadOnClick(int sceneIndex) { 
        SceneManager.LoadScene(sceneIndex); 
    } 
}

Select Button in the Hierarchy window and click on the plus (+) button at the bottom of the Button (Script) component, in the Inspector window, to create a new OnClick event handler for this button (that is, an action to perform when the button is clicked).
Drag Main Camera from the Hierarchy window over the Object slot immediately below the menu that says Runtime Only. This means that when the button receives an OnClick event, we can call a public method from a scripted object inside Main Camera.

Select the LoadOnClick method from the SceneLoader drop-down list (initially showing No Function). Type 1 (the index of the scene we want to be loaded when this button is clicked) in the text box, below the method's drop-down menu. This integer, 1, will be passed to the method when the button receives an OnClick event message, as shown here:

Figure 2.5 – Button (Script) settings

Save the current scene (page1).
Open page2 and follow the same steps to make the page2 button load page1. That is, add an instance of the SceneLoader script class to Main Camera and then add an OnClick event action to the button that calls LoadOnClick and passes an integer of 0 so that page1 is loaded.
Save page2.
When you run the page1 scene, you will be presented with your Main Menu text and a button that, when clicked, makes the game load the page2 scene. On page2, you'll have a button to take you back to page1.

Key benefits

Discover the latest features of Unity 2021 including coverage of AR/VR development

Follow practical recipes for better 2D and 2D character development with Unity GameKits

Learn powerful techniques and expert best practices in building 3D objects, textures, and materials

Description

If you are a Unity developer looking to explore the newest features of Unity 2021 and recipes for advanced challenges, then this fourth edition of Unity Cookbook is here to help you. With this cookbook, you’ll work through a wide variety of recipes that will help you use the essential features of the Unity game engine to their fullest potential. You familiarize yourself with shaders and Shader Graph before exploring animation features to enhance your skills in building games. As you progress, you will gain insights into Unity's latest editor, which will help you in laying out scenes, tweaking existing apps, and building custom tools for augmented reality and virtual reality (AR/VR) experiences. The book will also guide you through many Unity C# gameplay scripting techniques, teaching you how to communicate with database-driven websites and process XML and JSON data files. By the end of this Unity book, you will have gained a comprehensive understanding of Unity game development and built your development skills. The easy-to-follow recipes will earn a permanent place on your bookshelf for reference and help you build better games that stay true to your vision.

Who is this book for?

If you’re a Unity developer looking for better ways to resolve common recurring problems with recipes, then this book is for you. Programmers dipping their toes into multimedia features for the first time will also find this book useful. Before you get started with this Unity engine book, you’ll need a solid understanding of Unity’s functionality and experience with programming in C#.

What you will learn

Discover how to add core game features to your projects with C# scripting

Create powerful and stylish UI with Unity's UI system, including power bars, radars, and button-driven scene changes

Work with essential audio features, including background music and sound effects

Discover Cinemachine in Unity to intelligently control camera movements

Add visual effects such as smoke and explosions by creating and customizing particle systems

Understand how to build your own Shaders with the Shader Graph tool

What do you get with Print?