Chapter 5. User Interfaces in Unity

To provide the level of polish necessary for commercial applications, Unity offers a variety of user interface systems to the game programmer. Understanding what each of these systems is designed to do, what each is good at, and how to combine them, will enable the programmer to build retail class menus, navigation buttons, and more.

In this chapter, we will investigate, analyze, and understand these systems. We will then apply this knowledge and build an extensible pop-up system using Prefabs for commonly used scenarios in our game. We will finish by integrating these into mission one with an eye on future missions and future extensibility. In this chapter, we will cover the following topics:

• Getting familiar with the Unity UI classes

• Developing the pop-up system

• Exploring the GUIText component

• Exploring the GUITexture component

• Exploring the TextMesh component

• Creating clickable text elements

• UnityScript and the GUI Button object

• Building the main menu pop up...

Getting familiar with Unity UI classes

We will cover the following Unity UI systems:

• GUIText: This component displays a 2D font in screen space. It is well suited for the in-game HUD text that stays relatively stationary on the screen. It is displayed in screen-relative coordinates.

• GUITexture: This component displays a 2D image in screen space. It is well suited for the background and border graphics for in-game HUD elements. Just as the preceding component, this component is also displayed in screen-relative coordinates.

• TextMesh: This component generates a 3D mesh for a given string and displays it in the game world in 3D coordinates. This mesh can be positioned and oriented for in-game-specific purposes. This makes it suitable for displaying the text on the screen at a size that is invariant to the screen resolution.

• GUIButton: The Unity Engine offers a script-only API for generating user interface buttons. These are suitable for 2D elements that need to be animated in screen space and for...

Developing the pop-up system

As a case study, we will apply our knowledge of the systems described earlier as we build the following Prefabs. The pop-up system will consist of a window that can display text and graphics. An instance of a pop up can have a number of buttons, each of which will interact with the game in an easy-to-program way. We will integrate them into our existing mission one to achieve a higher level of polish, and these will form the new active user interface, which the user will use to communicate with the game, and with which the game will communicate with the user.

• popupMenu: This pop-up Prefab will provide the usability for an in-game menu system. It will have clickable buttons for the user to interact with.

• popupInfo: This class will present information about the game to the user, with a single button to interact with.

Exploring the GUIText component

The easiest way to display text on screen in a camera-relative way is through the GUIText component. To use this component, you need to add an instance of this component to an existing game object in your scene, and set the text field to the string you want to display.

Please keep in mind that the way in which the transform component of the GUIText GameObject is processed for GUIText is different for other GameObjects with the same component, which we will discuss later.

Interpreting the members on GUIText

A (0.5, 0.5, 0.0f) position corresponds to the center of the screen. For this component to work as designed, the object needs to be placed here in the world. The x and y components of the (x, y, z) vector on the transform range from 0.0f to 1.0f each.

Tip

Do not place GUIText on a moving object. If the transform moves, the meaning of the text position will change, and the text will likely go some place you don't want it to! If you want to track a moving object...

Exploring the GUITexture component

As we can now display 2D text, let's discuss how we can add visually appealing graphics to our interfaces; the GUITexture component does precisely this. You can see the GUITexture component as follows:

The Texture field is a reference to a 2D graphic element. This could be a .png, .jpg, or .bmp file that you created in the Paint program on your computer. Each file type has its benefits and drawbacks depending on how much compression you need in your file. Dragging-and-dropping it into the Project tab will import the image, after which you can set the reference.

The Color field lets the user select a specific tint for the GUITexture. This is a convenient way to fine-tune the appearance of the texture without having to edit it in your external Paint program.

The Pixel Inset field works in a way similar to the Pixel Offset field. The X and Y fields correspond to the screen space coordinates of the upper-left corner of the texture. The Width and Height fields...

Exploring the TextMesh component

The TextMesh user interface component operates differently than the previous two components. It actually generates a polygonal mesh based on the text rather than display a 2D font or 2D texture. It then places the mesh at the location and orientation specified in the GameObject's transform. This means that we can place this mesh directly in the game world!

Ideal use of TextMesh

One of the useful applications of TextMesh is that it can be placed in the world at its transform position. This makes it adept at labeling objects that move around the world. This can be done by parenting the TextMesh component to the GameObject, with a slight vertical offset in the TextMesh transform.

Creating clickable text elements

To process whether any of the preceding elements have been clicked or not by the mouse pointer, we have to manually program the handling of this event. Luckily for us, since these components are attached to a GameObject (which inherits from MonoBehavior), we can use mouse events that MonoBehavior provides.

Detecting mouse clicks

Whenever the mouse pointer is clicked while the pointer is over the top of a GameObject, the OnMouseDown callback is invoked. With this, we can trap these button clicks and respond accordingly:

void OnMouseDown() { // insert code here } 

Detecting mouse over

A second callback method is called whenever the mouse pointer moves onto a GameObject. This function is a convenient way to handle the highlighting of the GUI elements when they are selected or browsed:

void OnMouseOver() { // insert code here } 

Detecting leaving mouse over

A final callback method is called whenever the mouse leaves from over the top of a GameObject. This is the complement...

Exploring UnityScript and the GUIButton object

The Unity Editor is laid out with an internal GUI-specification language called UnityGUI. This API is only accessible to Unity game programmers from within C# (and JavaScript) code, unlike the previous GUI elements that can be placed and adjusted within the editor itself at design time. We can use this to place buttons, textures, pop-up windows, tooltips, and many other UI primitives. The difference in use from the previous examples is that the elements are instanced and placed entirely from the script rather than at design time in the editor. For our dialog pop-up Prefabs, we will explore the GUI.Button class.

Using UnityGUI

To use the UnityGUI functionality, we must invoke the commands from within a special callback, OnGUI(). As this function is not created by default when you create a new C# script in Unity, you need to add it yourself. The Unity Engine will invoke this method automatically when GUI elements are to be redrawn; so, we put our...

Building the main menu pop up

Let's put all of this together and build a functional and extensible pop up for the main menu.

This pop up will display the name of the game on the title screen and present the user with three working buttons. From this, we will be able to make a pop-up Prefab that can be used for other UI. Perform the following steps to create a main menu pop up:

1. To start, let's create the base of the panel. Create a plane that will be the base of the pop up. Set its position to 0, 0, 8.6 and its X rotation to -90.

2. Scale the panel to 1.54, 1, 1 so that it is a bit wider than it is tall.

3. On the MeshRenderer, we associate a new material called popupMaterial. This material has a white-colored component and a texture that is opaque gray with round edges with full alpha. Applying this material makes the plane appear rounded at the corners.

4. Let's rename the plane to popup_MainMenu to reflect its actual role.

5. The main menu pop up will have four child objects: a text field for the pop-up...

Testing our work

Let's trace through how the pop-up system works. When the main scene first loads, the popup_MainMenu Prefab renders in front of the camera. It does this because it is parented to the main camera's transform as a child object. This means that no matter what position and orientation the camera has, the pop up will move relative to this and always be on the screen, effectively in screen coordinates. This is a common trick in game programming used to achieve quasi-2D screen space results with 3D objects.

When the New button is clicked, the popupButtonScript iterates over the action array, and based on the enumeration for the action, it dispatches an appropriate command. For now, we set the GameState to loading level1 and let the gameManager script handle the loading of the new scene file. We then call SelfDestruct to delete the MainMenu object from the world (we won't need it anymore as we are in-game).

When the Info button is clicked, the popupButtonScript iterates over the action...

Future extensions

Now that we have a nice generic menu system, we could apply this to a number of situations:

• We can redesign our flag info pop up using a model similar to the popup_Info panel from the main menu. This would give each of them a Return button and a polished and consistent visual presentation.

• We can create a pause menu for the game. From this, the user can check statistics, restart the level, or quit to the main menu.

• We can use this system for NPC dialogs and interactions with the user. NPC dialogs are the conversation pop-up windows that will appear when the player interacts with NPCs. The user will interact with the NPC by selecting options from these pop-up windows.

Summary

We overviewed a wide variety of 2D and 3D user interface components that Unity provides. After some analysis, we determined the best scenarios to use each one of them. Finally, we applied our knowledge and built a pop-up system using programming techniques from previous chapters to build a generic, interactive, and responsive menu system. We built a couple of Prefabs and redesigned the frontend of the game using this new system to prove the efficiency of the technology. This adds a level of polish to our game.

In the next chapter, we will continue to add polish and interactivity as we program non-player characters for our game. By populating the game world with other characters and objects, it will add more depth to the game world that makes the experience more engaging, which will promote further learning by the user.