Chapter 8: Adding Custom Fonts and UI

In this chapter, we are going to take the scenes that we created for our game loop in the previous chapter and move our focus on to text, imagery, and animation through various customizations.

A requirement of the Unity Programmer Exam is not only to be confident with your C# programming skills but also to be familiar with what the Unity Editor offers in terms of its components and tools. Therefore, in this chapter, we will do no programming and, instead, focus on our User Interface (UI), which consists of Image and Text components. It's also worth mentioning that we will make our UI expand and contract with the screen's ratio size, which isn't possible with 3D assets alone (please refer to the previous chapter for more details). We will also import and apply our own custom font while we learn about our Text component. Finally, we will animate the UI with Animator and make use of the Animator Controller, which involves creating...

Core exam skills being covered in this chapter

Programming core interactions:

• Implement and configure game object behavior and physics.

Working in the art pipeline:

• Understand materials, textures, and shaders, and write scripts that interact with Unity's rendering API.
• Understand 2D and 3D animation, and write scripts that interact with Unity's animation API.

Developing application systems:

• Interpret scripts for application interface flow such as menu systems, UI navigation, and application settings.

Technical requirements

The project content for this chapter can be found at https://github.com/PacktPublishing/Unity-Certified-Programmer-Exam-Guide-Second-Edition/tree/main/Chapter_08.

You can download the entirety of each chapter's project files at https://github.com/PacktPublishing/Unity-Certified-Programmer-Exam-Guide-Second-Edition.

All content for this chapter is held in the chapter's unitypackage file, including a Complete folder that contains all of the work that we'll carry out in this chapter.

Check out the following video to see the Code in Action: https://bit.ly/3kqIi8k.

Introducing the Canvas and UI

The purpose of the Canvas is to typically hold images and text in a 2D world. Its primary purpose is to allow the user to interact with things, such as clicking on buttons, pushing volume sliders, and turning knobs, which is more commonly known as the UI.

Unity (quite confusingly) makes it such that the 2D Canvas also shares the same space as it's a 3D world. Therefore, in our scene, we will typically have a large canvas area with the UI; then, further down in the bottom left of the screen, we will have our 3D world.

The following screenshot shows an example of a Unity scene with an implemented Canvas component, along with a cube and a UI button:

Figure 8.2 – Our Button's visibility differs from 2D Canvas Space and 3D World Space 

As you can see in the preceding screenshot, on the right-hand side, we have the Game view showing a 3D cube and UI Button. On the left-hand side, we have the Scene view showing...

Applying text and images to our scenes

In this section, we are going to change the following scenes:

• The gray background
• The white TextMesh (3D text, which doesn't require the Canvas)

We'll replace those scenes with the following:

• A black background
• Custom red Text (2D text, which requires a Canvas)

As mentioned in the introduction, the benefit of doing this is that the text will remain the same size, no matter the ratio or resolution of the screen.

The following screenshot shows the current BootUp scene on the left and what it should look like after making the changes on the right:

Figure 8.4 – We will be improving our BootUp scene's visuals

If you haven't already opened the scene in the Unity Editor, go to the Project window and open the bootUp scene from Assets/Scene.

Let's start by changing the background color from gray to black. If you have forgotten how to do this, follow these...

Summary

This chapter was about taking our game project and polishing its current content with regard to the existing UI. It is also required for your Unity Programmer Exam to understand what tools and components we have to help us create our game with regard to the Working in the art pipeline core exam skill.

We also took our Text and Image components and created one piece of animation from multiple game objects. These animations were called from the Animator Controller state machine.

In your future projects, you will have the option to keep your UI presentable while putting your game loop together.

In the next chapter, we will extend our current UI skills by making our shop scene more flexible with a range of screen ratios. Additionally, we will create a UI to sit at the bottom of our in-game levels.