Interface Brilliance: Designing User-Friendly UI

Everything that is shown on the screen and transmitted through the speakers of a computer is a form of communication. In previous chapters, we used 3D models to let the user know that they are in a base in the middle of the mountains, and we reinforced that idea with the appropriate sound and music. But for our game, we need to communicate other information, such as the amount of life the player has left and the current score, and sometimes, it is difficult to express these things using the in-game graphics (there are some successful cases that manage to do this, such as Dead Space, but let’s keep things simple).

In order to transmit this information, we need to add another layer of graphics on top of our scene, which is usually called the User Interface (UI). This will contain different visual elements, such as text fields, bars, and buttons, to prepare the user to make an informed decision, based on things such as fleeing...

Understanding the Canvas and RectTransform

We are only going to focus on the in-game UI to communicate different information to the player using the Unity GUI system (or uGUI). At the time of writing, a new GUI system called UI Toolkit has been released. Even though we will introduce UI Toolkit, remember that uGUI isn’t going anywhere anytime soon. It’s crucial to grasp both to be versatile in your UI design approach. We will explore UI Toolkit in the next chapter.

If you are going to work with Unity UI, you first need to understand its two main concepts—the Canvas and RectTransform. The Canvas is the master object that will contain and render our UI, and RectTransform is the feature in charge of positioning and adapting each UI element on our screen.

In this section, we will be:

• Creating a UI with the Canvas
• Positioning elements with RectTransform

Let’s start by using the Canvas component to create our UI.

Creating...

Canvas object types

So far, we have used the simplest Canvas object type—a white box—but there are plenty of other object types we can use, such as images, buttons, and text. All of them use RectTransform to define their display area, but each one has its own concepts and configurations to understand.

In this section, we will explore the following Canvas object concepts:

• Integrating assets for the UI
• Creating UI controls

Let’s first start exploring how we can integrate images and fonts to use in our Canvas so that we can integrate them in our UI, using the Images and Text UI object types.

Integrating assets for the UI

Before making our UI use nice graphics assets, we need to integrate them properly into Unity to use them in our UI. In the following screenshot, you will find the UI design we propose for our game:

Figure 15.7: UI design

On top of that, we will add a Pause menu, which will be activated when the user...

Creating a responsive UI

Nowadays, it is almost impossible to design a UI in a single resolution, and our target audience display devices can vary a lot. A PC has a variety of different kinds of monitors with different resolutions (such as 1080p and 4K) and aspect ratios (such as 16:9, 16:10, and ultra-wide), and the same goes for mobile devices. We need to prepare our UI to adapt to the most common displays, and Unity UI has the tools needed to do so.

In this section, we will explore the following UI responsiveness concepts:

• Adapting object positions
• Adapting object sizes

We are going to explore how the UI elements can adapt their position and size to different screen sizes using the advanced features of the Canvas and RectTransform components, such as Anchors and Scalers.

Adapting object positions

To ensure our UI adjusts correctly across different devices, let’s focus on adapting object positions using anchors.

Right now, if we play...

Scripting the UI

We previously created a UI layout with elements such as bars, text, and buttons, but so far, they are static. We need to make them adapt to the game’s actual state. In this section, we are going to discuss the following UI scripting concepts:

• Showing information in the UI
• Programming the Pause menu

We will start by seeing how to display and update dynamic information in our UI, using scripts that modify the text and images that are displayed with Canvas elements. After that, we will create the pause functionality, which will be used throughout the UI. Developing the pause functionality is more than just adding a feature; it’s about enhancing user control and game interaction, a key aspect of the UX.

Armed with this understanding, you’re set to bring your game’s UI to an interactive level. It’s time to make your UI not just a visual element but also an integral part of your game’s storytelling...

Summary

In this chapter, we introduced the basics of the UI, understanding the Canvas and RectTransform components to locate objects onscreen and create a UI layout. We also covered different kinds of UI elements, mainly Image and Text, to give life to our UI layout and make it appealing to the user. Finally, we discussed how to adapt UI objects to different resolutions and aspect ratios to make our UI adapt to different screen sizes, even though we cannot predict the exact monitor our user will play the game on. All of this allows us to create any UI we will need in our game using the Canvas.

In the next chapter, we will explore how to create UIs using UI Toolkit instead, another Unity system to create UIs, and compare both the Canvas and UI Toolkit to see when to use which.

Learn more on Discord

Read this book alongside other users, Unity game development experts, and the author himself. Ask questions, provide solutions to other readers, chat with the author via Ask...