In this article by Dr. Edward Lavieri, the author of Getting Started with Unity 5, you will learn how to use Unity 5’s new User Interface (UI) system.

(For more resources related to this topic, see here.)

An overview of graphical user interface

Graphical User Interfaces or GUI (pronounced gooey) is a collection of visual components such as text, buttons, and images that facilitates a user’s interaction with software. GUIs are also used to provide feedback to players. In the case of our game, the GUI allows players to interact with our game. Without a GUI, the user would have no visual indication of how to use the game. Imagine software without any on-screen indicators of how to use the software. The following image shows how early user interfaces were anything but intuitive:

We use GUIs all the time and might not pay too close attention to them, unless they are poorly designed. If you’ve ever tried to figure out how to use an app on your Smartphone or could not figure out how to perform a specific action with desktop software, you’ve most likely encountered a poorly designed GUI.

Functions of a GUI

Our goal is to create a GUI for our game that both informs the user and allows for interaction between the game and the user. To that end, GUIs have two primary purposes: feedback and control. Feedback is generated by the game to the user and control is given to the user and managed by user input. Let’s look at each of these more closely.

Feedback

Feedback can come in many forms. The most common forms of game feedback are visual and audio. Visual feedback can be something as simple as a text on a game screen. An example would be a game player’s current score ever-present on the game screen. Games that include dialog systems where the player interacts with non-player characters (NPC) usually have text feedback on the screen that informs what the NPC’s responses are. Visual feedback can also be non-textual, such as smoke, fire, explosions, or other graphic effect.

Audio feedback can be as simple as a click sound when the user clicks or taps on a button or as complex as a radar ping when an enemy submarine is detected on long-distance sonar scans. You can probably think of all the audio feedback your favorite game provides. When you run your cart over a coin, an audio sound effect is played so there is no question that you earned the coin. If you take a moment to consider all of the audio feedback you are exposed to in games, you’ll begin to appreciate the significance of them.

Less typical feedback includes device vibration, which is sometimes used with smartphone applications and console games. Some attractions have taken feedback to another level through seat movement and vibration, dispensing liquid and vapor, and introducing chemicals that provide olfactory input.

Control

Giving players control of the game is the second function of GUIs. There is a wide gambit of types of control. The most simple is using buttons or menus in a game. A game might have a graphical icon of a backpack that, when clicked, gives the user access to the inventory management system of a game.

Control seems like an easy concept and it is. Interestingly, most popular console games lack good GUI interfaces, especially when it comes to control. If you play console games, think about how many times you have to refer to the printed or in-game manual. Do you intuitively know all of the controller key mappings? How do you jump, switch weapons, crotch, throw a grenade, or go into stealth mode? In the defense of the game studios that publish these games, there is a lot of control and it can be difficult to make them intuitive.

By extension, control is often physical in addition to graphical. Physical components of control include keyboards, mice, trackballs, console controllers, microphones, and other devices.

Feedback and control

Feedback and control GUI elements are often paired. When you click or tap a button, it usually has both visual and audio effects as well as executing the user’s action. When you click (control) on a treasure chest, it opens (visual feedback) and you hear the creak of the old wooden hinges (audio feedback). This example shows the power of using adding feedback to control actions.

Game Layers

At a primitive level, there are three layers to every game. The core or base level is the Game Layer. The top layer is the User Layer; this is the actual person playing your game. So, it is the layer in between, the GUI Layer that serves as an intermediary between a game and its player.

It becomes clear that designing and developing intuitive and well-functioning GUIs is important to a game’s functionality, the user experience, and a game’s success.

Unity 5’s UI system

Unity’s UI system has recently been re-engineered and is now more powerful than ever. Perhaps the most important concept to grasp is the Canvas object. All UI elements are contained in a canvas. Project and scenes can have more than one canvas. You can think of a canvas as a container for UI elements.

Canvas

To create a canvas, you simply navigate and select GameObject | UI | Canvas from the drop-down menu. You can see from the GameObject | UI menu pop-up that there are 11 different UI elements.

Alternatively, you can create your first UI element, such as a button and Unity will automatically create a canvas for you and add it to your Hierarchy view. When you create subsequent UI elements, simply highlight the canvas in the Hierarchy view and then navigate to the GameObject | UI menu to select a new UI element.

Here is a brief description of each of the UI elements:

UI element	Description
Panel	A frame object
Button	Standard button that can be clicked
Text	Text with standard text formatting
Image	Images can be simple, sliced, tiled, and filled
Raw Image	Texture file
Slider	Slider with min and max values
Scrollbar	Scrollbar with values between 0 and 1
Toggle	Standard checkbox; can also be grouped
Input Field	Text input field
Canvas	The game object container for UI elements
Event System	Allows us to trigger scripts from UI elements. An Event System is automatically created when you create a canvas.

You can have multiple canvases in your game. As you start building larger games, you’ll likely find a use for more than one canvas.

Render mode

There are a few settings in the Inspector view that you should be aware of regarding your canvas game object. The first setting is the render mode. There are three settings: Screen Space – Overlay, Screen Space – Camera, and World Space:

In this render mode, the canvas is automatically resized when the user changes the size or resolution of the game screen. The second render mode, Screen Space – Camera, has a plane distance property that determines how far the canvas is rendered from the camera. The third render mode is World Space. This mode gives you the most control and can be manipulated much like any other game object.

I recommend experimenting with different render modes so you know which one you like best and when to use each one.

Creating a GUI

Creating a GUI in Unity is a relatively easy task. We first create a canvas, or have Unity create it for us when we create our first UI element. Next, we simply add the desired UI elements to our canvas. Once all the necessary elements are in our canvas, you can arrange and format them.

It is often best to switch to 2D mode in the Scene view when placing the UI elements on the canvas. This simply makes the task a bit easier.

If you have used earlier versions of Unity, you’ll note that several things have changed regarding creating and referencing GUI elements. For example, you’ll need to include the using UnityEngine.UI; statement before referencing UI components. Also, instead of referencing GUI text as public GUIText waterHeld; you now use public Text waterHeld;.

Heads-up displays

A game’s heads-up display (HUD) is graphical and textual information available to the user at all times. No action should be required of the user other than to look at a specific region of the screen to read the displays. For example, if you are playing car-racing game, you might have an odometer, speedometer, compass, fuel tank level, air pressure, and other visual indicators always on the screen.

Creating a HUD

Here are the basic steps to create a HUD:

1. Open the game project and load the scene.
2. Navigate and select the GameObject | UI | Text option from the drop-down menu. This will result in a Canvas game object being added to the Hierarchy view, along with a text child item.
3. Select the child item in the Hierarchy view. Then, in the Inspector view, change the text to what you want displayed on the screen.
4. In the Inspector view, you can change the font size.
5. If necessary, you can change the Horizontal Overflow option from Wrap to Overflow:

   

6. Zoom out in the Scene view until you can see the GUI Canvas. Use the transform tools to place your new GUI element in the top-left corner of the screen.
   

   Depending on how you are viewing the scene in the Scene view, you might need to use the hand tool to rotate the scene. So, if your GUI text appears backwards, just rotate the scene until it is correct.

   

7. Repeat steps 2 through 5 until you’ve created all the HUD elements you need for your game.

Mini-maps

Miniature-maps or mini-maps provide game players with a small visual aid that helps them maintain perspective and direction in a game. These mini-maps can be used for many different purposes, depending on the game. Some examples include the ability to view a mini-map that overlooks an enemy encampment; a zoomed out view of the game map with friendly and enemy force indicators; and a mini-map that has the overall tunnel map while the main game screen views the current section of tunnel.

Creating a Mini-Map

Here are the steps used to create a mini-map for our game:

1. Navigate and select GameObject | Camera from the top menu.
2. In the Hierarchy view, change the name from Camera to Mini-Map.
3. With the mini-map camera selected, go to the Inspector view and click on the Layer button, then Add Layer in the pop-up menu.
4. In the next available User Layer, add the name Mini-Map:

   

5. Select the Mini-Map option in the Hierarchy view, and then select Layer | Mini-Map. Now the new mini-map camera is assigned to the Mini-Map layer:

   

6. Next, we’ll ensure the main camera is not rendering the Mini-Map camera. Select the Main Camera option in the Hierarchy view.
7. In the Inspector view, select Culling Mask, and then deselect Mini-Map from the pop-up menu:

   

8. Now we are ready to finish the configuration of our mini-map camera. Select the Mini-Map in the Hierarchy view.
9. Using the transform tools in the Scene view, adjust the camera object so that it shows the area of the game environment you want visible via the mini-map.
10. In the Inspector view, under Camera, make the settings match the following values:
    

    Setting	Value
    Clear Flags	Depth only
    Culling Mask	Everything
    Projection	Orthographic
    Size	25
    Clipping Planes	Near 0.3; Far 1000
    Viewpoint Rect	X 0.75; Y 0.75; W 1; H 1
    Depth	1
    Rendering Path	User Player Settings
    Target Texture	None
    Occlusion Culling	Selected
    HDR	Not Selected

11. With the Mini-Map camera still selected, right-click on each of the Flare Layer, GUI Layer, and Audio Listener components in the Inspector view and select Remove Component.
12. Save your scene and your project.
13. You are ready to test your mini-map.

Mini-maps can be very powerful game components. There are a couple of things to keep in mind if you are going to use mini-maps in your games:

• Make sure the mini-map size does not obstruct too much of the game environment. There is nothing worse than getting shot by an enemy that you could not see because a mini-map was in the way.
• The mini-map should have a purpose—we do not include them in games because they are cool. They take up screen real estate and should only be used if needed, such as helping the player make informed decisions. In our game, the player is able to keep an eye on Colt’s farm animals while he is out gathering water and corn.
• Items should be clearly visible on the mini-map. Many games use red dots for enemies, yellow for neutral forces, and blue for friendlies. This type of color-coding provides users with a lot of information at a very quick glance.
• Ideally, the user should have the flexibility to move the mini-map to a corner of their choosing and toggle it on and off. In our game, we placed the mini-map in the top-right corner of the game screen so that the HUD objects would not be in the way.

Summary

In this article, you learned about the UI system in Unity 5. You gained an appreciation for the importance of GUIs in games we create.

Resources for Article:

---

Further resources on this subject:

• Bringing Your Game to Life with AI and Animations [article]
• Looking Back, Looking Forward [article]
• Introducing the Building Blocks for Unity Scripts [article]

---