Displaying Data with Core UI Elements

A key element that contributes to the entertainment and enjoyment of most games is the quality of the player’s visual experience, and an important part of this is the user interface (UI). UI elements involve ways for the user to interact with the game (such as buttons, cursors, and text boxes), as well as ways for the game to present up-to-date information to the user (such as the time remaining, current health, score, lives left, or location of enemies). This chapter is filled with UI recipes to give you a range of examples and ideas for creating game UIs.

This chapter is all about the Unity UI system. This is based on GameObjects and their components, and the recommended system for runtime player visual UIs. There are other UI systems in Unity (UI Toolkit and IMGUI), but these are mostly used for Unity Editor design-time interfaces.

Every game and interactive multimedia application is different, and so this chapter...

Creating a Font Asset file for use with TextMeshPro

The powerful TextMeshPro system is now core to Unity’s UI system. While the TMP (TextMeshPro) Essentials comes with two fonts (Arial and Liberation Sans), and there are more available in the TMP examples, often you may have an existing font, or perhaps one from a client, that you will wish to use with your Unity project. In this recipe, we’ll go through the steps of creating a Font Asset file, so you can then use whatever fonts you wish in your Unity projects.

Note: ensure you have a license appropriate for any fonts you use.

Getting ready

For this recipe, we have prepared the font that you need in a folder named Fonts in the 01_01 folder. Many thanks to Severin Meyer for making this font freely available at dafont.com.

How to do it...

To create a Font Asset file for use with TextMeshPro, follow these steps:

1. Create a new 2D (Core) project.
2. Import the provided Fonts folder...

Displaying a “Hello World” UI text message

The first traditional problem to be solved with new computing technology is to display the Hello World message, as shown in the following screenshot:

Figure 1.5: Displaying the “Hello World” message

In this recipe, you’ll learn how to create a simple UI text object with this message, in large white text with a selected font, in the center of the screen.

Getting ready

This recipe follows on from the previous recipe, so make a copy of that and work on that copy.

How to do it...

To display a Hello World text message, follow these steps:

1. Open the copy of the project from the previous recipe.
2. In the Hierarchy panel, add a TextMeshPro GameObject to the scene by going to GameObject | UI | Text - TextMeshPro. Name this GameObject Text-hello. A Canvas and EventSystem GameObject will also be automatically added to the scene.

   Alternatively, you can use the Create...

Displaying a digital clock

Whether it is real-world time or an in-game countdown clock, many games are enhanced by some form of clock or timer display. The following screenshot shows the kind of clock we will be creating in this recipe:

Figure 1.8: Displaying a digital clock when the scene is run

The most straightforward type of clock to display is a string composed of integers for hours, minutes, and seconds, which is what we’ll create in this recipe.

Getting ready

For this recipe, we have prepared the font that you will need in a folder named Fonts in the 01_01 folder. If you have not done so already, create a Xolonium-Bold SDF Font Asset file for the imported fonts, as described in the first recipe of this chapter.

How to do it…

To create a digital clock, follow these steps:

1. Create a new Unity 2D project.
2. Import the provided Fonts folder, containing your Xolonium-Bold SDF Font Asset file.
3. Add a Text TMP GameObject...

Displaying a digital countdown timer

As a game mechanic, countdown clocks are a popular feature in many games:

Figure 1.10: Countdown clock

This recipe, which will adapt the digital clock shown in the previous recipe, will show you how to display a digital countdown clock that will count down from a predetermined time to zero.

Getting ready

This recipe adapts to the previous one. So, make a copy of the project for the previous recipe and work on that copy.

For this recipe, we have prepared the CountdownTimer script that you need in a folder named _Scripts inside the 01_03 folder.

How to do it...

To create a digital countdown timer, follow these steps:

1. Import the provided _Scripts folder.
2. In the Inspector panel, remove the scripted component, ClockDigital, from the Text-clock GameObject. You can do this by choosing Remove Component from the 3-dot options menu icon for this component in the Inspector panel.
3. In the Inspector panel...

Creating a message that fades away

Sometimes, we want a message to only be displayed for a certain time, and then fade away and disappear. This recipe will describe the process for displaying a text message and then making it fade away completely after 5 seconds. It could be used for providing instructions or warnings to a player that disappears so as not to take up screen space.

Getting ready

This recipe adapts the previous one (Displaying a digital countdown timer). So, make a copy of the project for that recipe and work on that copy.

How to do it...

To display a text message that fades away, follow these steps:

1. In the Inspector panel, remove the scripted component, DigitalCountdown, from the Text-clock GameObject.
2. Select the Text-clock GameObject in the Hierarchy panel. Then, in the Inspector for the TextMeshPro – Text (UI) component, set its Text Input default text to hello world.
3. Create a C# script class called FadeAway that contains...

Displaying an image

There are many cases where we wish to display an image onscreen, including logos, maps, icons, and splash graphics. In this recipe, we will display an image centered at the top of the screen.

The following screenshot shows Unity displaying an image:

Figure 1.11: Displaying the Unity logo as an image

Getting ready

For this recipe, we have prepared the image that you need in a folder named Images in the 01_06 folder.

How to do it...

To display an image, follow these steps:

1. Create a new Unity 2D project.
2. Set the Game panel to 400 x 300. Do this by displaying the Game panel, and then creating a new Resolution in the Free Aspect drop-down menu at the top of the panel.
3. Click the plus (+) symbol at the bottom of this menu, setting Label to Core UI, Width to 400, and Height to 300. Click OK; the Game panel should be set to this new resolution:

   Figure 1.12: Adding a new screen resolution to the Game panel

   ...

Further reading

The following are some useful resources for learning more about working with core UI elements in Unity:

• The Unity manual provides a very good introduction to UI TextMesh Pro layouts and Rect Transforms:
  • https://docs.unity3d.com/Packages/com.unity.textmeshpro@4.0/manual/index.html
  • https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/class-RectTransform.html
• Here is a comparison of the different Unity UI systems:
  • https://docs.unity3d.com/2023.2/Documentation/Manual/UI-system-compare.html
• In addition, Kodeco’s (formerly Ray Wenderlich) Unity Introduction to TextMeshPro web tutorial also presents a helpful guide to TextMeshPro in Unity:
  • https://www.kodeco.com/22175776-introduction-to-textmesh-pro-in-unity
• To learn more about TextMeshPro, take a look at the following link:
  • https://blogs.unity3d.com/2018/10/16/making-the-most...

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/unitydev