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 our own states.

The following screenshot shows what our title screen should look like by the end of the chapter:

Figure 8.1 – Killer Wave title screen

We will cover the following topics in this chapter:

• Introducing the Canvas and UI
• Applying text and images to our scenes

By the end of this chapter, you will feel more confident about combining Text and Image components together, along with animating the UI.

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 the same cube but with the Button missing. This is because, in the Scene window, the Canvas that holds the UI button is located in its own 2D space. To resolve this issue, we need to zoom out of the Scene view, and we will see where the UI button is located. Additionally, we will see the outline of a large white rectangle that represents the screen ratio.

Note that because we have zoomed out so much, the 3D cube is really small. In the following screenshot, we can't even see the cube, on the left-hand side marked with a circle outline. It's a little complicated to understand at first, but consider it like two projects sharing the same space:

Figure 8.3 – Canvas on the left containing our Button, the right shows its position in the Game window

With that brief example of how the Canvas shares space with the 3D space, let's move on to the next section, where we'll start using the Canvas and add some text and images.

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 steps:

1. Select Main Camera in the Hierarchy window.
2. With Main Camera selected, in the Inspector window, under the Camera component, click on the gray Background field and change its RGBA values to 0,0,0,255, as shown in the following screenshot:

Figure 8.5 – Changing our bootUp scene's background to black

The Game window will now change from gray to black, and then we will remove the BootUp text and replace it with our new 2D text.

3. Select BootUpText from the Hierarchy window and delete it.

We are now going to add the Canvas and 2D text to the scene.

4. In the open space of the Hierarchy window, right-click and select UI | Text, as shown in the following screenshot:

Figure 8.6 – Creating 2D Text in the Unity Editor

Because we have added 2D text, Unity helps us out by automatically adding the Canvas and EventSystem to the scene. The following screenshot shows the bootUp Hierarchy window containing the Canvas game object along with its child, the Text game object:

Figure 8.7 – Our Hierarchy displaying Canvas, Text, and EventSystem

5. Right-click on the Text game object and rename it to presented.

With presented still selected in the Hierarchy window, pay attention to the Inspector window because we need to update its Text component.

6. In the Text field, change the default input from New Text to presented by.

Let's continue modifying the presented game object's Text component settings.

We will change the font from the typical Arial style to something more fitting for our game. In this chapter's project files, there should be a font in the Project window, which is located in Assets/Font/ethnocentric rg it. We can select this font from our presented game object.

7. Click on the small circle that appears to the right of the Font field, and then select ethnocentric rg it from the drop-down list.
8. Change the Font Size field to 0.

At this point, our font will have disappeared from the Scene window. This is because the Rect Tool isn't big enough and we need to resize it. We will do this next.

Information Note

The Rect Tool is an area for the images or text to sit in. Consider it as a similar tool to the Transform component, where we enter the Vector3 values for the Position, Rotation, and Scale of our game's objects, which we have been altering from Chapter 2, Adding and Manipulating Objects, onward.

9. In the Scene window with our presented game object still selected, make sure that the Rect Tool is selected, as shown in the following screenshot:

Figure 8.8 – Rect Tool button location

10. Make sure we are in 2D mode (and Gizmos is turned on to the right of the bar), as we don't need to be concerned about the 3D space while adjusting the 2D text. Either press 2 on the keyboard or click on the following button:

Figure 8.9 – 2D button location

11. Additionally, check whether the Game window ratio is set to 1080 (1920x1080) (this is the screen ratio that we set in Chapter 2, Adding and Manipulating Objects). You can do this using the drop-down list below the Game tab, as shown in the following screenshot:

Figure 8.10 – Changing our Game window aspect to 1080

12. Click and drag the outer edge of the Rect Tool to the far left until it clips to the outer edge, as indicated in the following screenshot:

Figure 8.11 – Click and drag the edge (where the arrow is) of our Rect Tool to the far-left outer edge (* symbol)

13. Once done, drag the right edge of the Rect Tool to the right side of the outer edge.
14. Now, widen the top and the bottom of the Rect Tool edges. This is so that the height is approximately a quarter of the white outer rectangle. We should now see our text reappear, and our Rect Tool proportions should be similar to those in the following screenshot:

Figure 8.12 – Click and drag the top and the bottom of the Rect Tool edges similar to here

Now that we have the Rect Tool spacing set up, we need to set the Anchors so that the text remains the correct size no matter what the screen ratio or resolution is.

In the center of the Canvas screen, we should be able to see four arrows pointing toward each other (the left-hand side of the following screenshot has these four arrows circled in red).

To set the Anchors in the same location as the four blue circles, perform the following steps:

1. One at a time, click and drag each white arrow to where each blue circle is:

Figure 8.13 – Click and drag each white outline arrow out to its far-corner blue circles

Now that our Anchors are roughly sitting on top of the Rect Tool, which is denoted by blue circles, we can make it so that the Position and Anchors are both aligned.

2. To set the Rect Transform into place, enter a value of 0 in the Left, Top, Pos Z, Right, and Bottom positions. The following screenshot (on the left) shows our highlighted values. It's likely that yours won't be the same since we positioned the Rect Tool manually earlier on:

Figure 8.14 – Reset all highlighted Rect Transform values to 0

Now, we can continue with the Text component in the Inspector window in order to set the color and position of the text.

3. To center the presented by text in the Text component, select the two middle buttons in the Alignment section, as shown in the following screenshot:

Figure 8.15 – Update each of the Text component property values

4. Tick the Best Fit box. This will ensure that our text scales to support the screen's ratio dynamically.
5. With the Best Fit box ticked, we will set Min Size to 0 and Max Size to 80.
6. Change the color by clicking on the Color field and choosing red, as shown in the preceding screenshot.

We have now had a full run with the Canvas and Text components, and we have set our own custom 2D text up. Additionally, this text will be able to adjust to the screen ratios compared to the bootUp TextMesh that we had before.

The following screenshot shows our custom text, color, size, and alignment:

Figure 8.16 – Our font is now centered and stylized

As you can imagine, we haven't quite finished yet because we need to have the name or company's name appear underneath the PRESENTED BY text. Thankfully, we only need to repeat about a quarter of the work we've just done. And, as you've probably guessed – yes – we can copy and paste this text.

To set our own name or company name underneath PRESENTED BY, perform the following steps:

1. Select the presented game object from the Hierarchy window.
2. Press Ctrl (command on the Mac) and D to duplicate the game object.
3. Press T to switch to the Move Tool:

Figure 8.17 – Duplicate a second line of text

4. Now click and drag the green y-axis arrow downward (as shown in the preceding screenshot) to roughly sit on the white line where the original PRESENTED BY text's Rect Tool lies.
5. All we need to do next is to click and drag each of the four white arrow outlines of the Anchors downward to fit in our newly created game object, as shown in the following screenshot:

Figure 8.18 – Tidy up the Rect Transform boundaries of our duplicated text

6. If you have moved the Anchors into their correct places, then our Rect Transform positions will be 0. If they aren't 0, click on each field and enter 0.

So, our new text is in place. All we need to do now is to change what has been typed in.

7. We know how to do this: just scroll down to the Text component and enter your name, company name, pet's name, or any name – it doesn't matter for the purpose of this tutorial.
8. Once you have entered your name, don't forget to name the presented(1) game object to something such as yourName.
9. Click on the Game tab window to see how it looks. This is what ours looks like:

Figure 8.19 – Our bootup text is complete

10. Save the scene.

We have covered the fundamentals of a Canvas component and how to apply 2D text. Next, we will be repeating a similar procedure and using the Image component. This is equivalent to the Sprite Renderer that we used for our shop scene buttons in Chapter 5, Creating a Shop Scene for Our Game. However, here, the Image component is for a 2D space.

From this point to the end of the chapter, we will go through a series of subsections in order to polish and animate our scenes. We will cover the following:

• Starting with our title scene, we will improve its visuals by creating and applying Text and Image components.
• We will use a custom font because we can, and it'll make our game look better than the standard fonts that come with Unity. From there, we will be able to further customize the Text component to make our title scene look more suitable for our game.
• We will then take what we have applied to the title scene and copy and paste it into the other scenes. From there, we will change the content of the text and its position slightly.
• Finally, we will set up our Animator and Animator Controller states and animate our UI to introduce each game level.

Let's continue with polishing our title scene.

Improving our title scene

In this section, we will repeat the procedure that we already learned in the previous section without going into too much depth, as we already know how to create a Canvas, add custom text, and perform duplicating. In this section, we will also make use of Unity's Image component.

The following screenshot shows the transformation we will be undergoing, starting with our current title scene on the left and using the same techniques we applied in the previous section, along with adding Image components, to create the red stripe on the right:

Figure 8.20 – Old Title screen on the left; what we will be replacing it with on the right

As mentioned earlier, we won't be going into all of the details; however, if you do struggle at any point, then please refer back to the previous section to guide you through what you should already know. Let's get started:

1. Let's begin by loading up our title scene from the Project window, which is located in Assets/Scene.
2. Change the Camera component's Background color from gray to black with the alpha value set to 255.
3. Delete the TitleText game object from the Hierarchy window.
4. Create just a Canvas game object in the Hierarchy window. Use the following screenshot as a reference:

Figure 8.21 – Creating a Canvas

We are now going to create an empty game object. Inside this game object, we are going to store our Text and Image components:

1. Create an empty game object by right-clicking in the lower open space of the Hierarchy window, and then select Create Empty from the drop-down list.
2. The new empty game object will default to the name of GameObject.
3. Right-click on this game object and select Rename from the drop-down list. Rename the game object to Title.
4. Move the Title game object into the Canvas game object so that the former becomes a child.

Typically, when a new game object is created, it will automatically be given a Transform component that holds the game object's Position, Rotation, and Scale for a 3D space. In this section, our focus is on 2D space, so we need to change this game object from a Transform component into a Rect Transform component.

To change the Title game object from Transform to Rect Transform, follow these steps:

1. With the Title game object selected in the Hierarchy window, click on the Add Component button in the Inspector window.
2. A drop-down list will appear. Type rect transform into the drop-down list search bar until it is possible to select it from the list, as shown in the following screenshot:

Figure 8.22 – Select the Rect Transform from the dropdown

We are now going to set our Title game object's Anchor sizes. This is so any game objects that become a child to it will be restricted within the Title game object's Anchors.

I have set my Title game object's Rect Transform component to the following settings:

Figure 8.23 – Update the Anchors Min and Max values

As you can see, in the previous screenshot, the Anchors for the Title game object are centered in the canvas's white box outline. Also, note that the Rect Transform component's Left, Top, Pos Z, Right, and Bottom positions are all set to the value of 0.

The next step will be to add a red transparent stripe within the Title game object. To add an Image component, follow these instructions:

1. Create a new game object in the Hierarchy window.
2. Name the game object mainCol.
3. Drag the mainCol game object on top of the Title game object to make mainCol a child of Title. Refer to the following screenshot for reference:

Figure 8.24 – Canvas child objects order from the Hierarchy window

4. With our mainCol game object still selected, we want its Anchors to be at their maximum size, which, in this case, is the same size as the Title game object as it is the parent of our mainCol game object. The following screenshot is a reference to our mainCol Rect Transform properties:

Figure 8.25 – mainCol Anchors set to full size

5. With the mainCol game object still selected, select the Add Component button in the Inspector window and begin to type Image into the drop-down list until it appears. When it does appear, select it. Use the following screenshot as a reference:

Figure 8.26 – Add the Image component from the dropdown

We have now added an Image component to our mainCol image.

6. Next, we will adjust the Image component's R, G, B, and A values. To do that, click on the Image component's Color field (denoted by 1) and set its RGBA values (denoted by 2) in accordance with the following screenshot. From there, you will see our mainCol image react to the color change (denoted by 3):

Figure 8.27 – Update the Image component's Color setting to the displayed values

Further Information

With the Image component, if we added a sprite to the parameter instead of just changing the color alone, we would also have the ability to alter its Image Type. One of the types that can be used is called Filled. This can give you the impression that the sprite is filling up, which would be useful for a loading bar or a time limit that is counting down.

If you would like to know more about the Image component and its other uses, view the documentation at https://docs.unity3d.com/2017.3/Documentation/Manual/script-Image.html.

Next, we will add a strip to the top of the image we've just made with another game object containing an Image component. To do that, we will repeat our earlier methodology but with a tighter, thinner strip. Follow these steps:

1. With mainCol still selected, press Ctrl (command on the Mac) and D on our keyboard to duplicate the game object.
2. Rename the new game object trim00.
3. Change the trim00 game object's Rect Transform to the following properties. The left-hand side of the screenshot shows the top of the main red strip with our trim00 game object at the top:

Figure 8.28 – trim00 Anchors Min and Max values

For our trim set, we don't need to change the color as it duplicates from the mainCol game object. We now need to repeat this process for the bottom part of the mainCol image.

Here are the steps that we need to accomplish to copy another trim game object:

1. Duplicate the trim00 game object and rename it to trim01.
2. Set the trim01 game object's Rect Transform settings to the same settings shown in the following screenshot:

Figure 8.29 – trim01 Anchors Min and Max values

Now it's time to enter our main title text, KILLER WAVE, by following these instructions:

1. Create another empty game object in the Hierarchy window.
2. Give the new empty game object the name TitleText.
3. In the Hierarchy window, drag the TitleText game object inside the Title game object. This is so that TitleText becomes a child of Title.
4. With TitleText still selected, click on Add Component in the Inspector window and select Rect Transform from the drop-down list as before.
5. Set the TitleText Rect Transform settings to the following values:

Figure 8.30 – TitleText Anchors Min and Max values

This will fill our TitleText Rect Transform settings to the same size as the parent game object (Title).

The final steps for our TitleText game object are to give it a Text component and set its values in the Inspector window:

1. With the TitleText game object still selected in the Hierarchy window, click on the Add Component button and select the Text component (type in text if it isn't there) from the drop-down list as before.
2. In the Text field of the Text component, enter killer wave.
3. Click on the small circle to the right of the Font field (the remote button), and select the font that we chose in our bootUp scene (ethnocentric rg it).
4. Set the Alignment buttons to center and middle.
5. Tick Best Fit. This will leave it up to Unity to try and fit the text depending on the ratio it is in.
6. Set Max Size to 140. This will give us a fairly large title.
7. Select a bright red color in the Color field.

Our title is set. The last thing we need to do in this scene is to set a message at the bottom of the screen to prompt the player to start the game.

Similar to what we did in the bootUp scene, we can duplicate our TitleText game object. However, this time, we are going to move the duplicated game object outside of the Rect Transform restrictions of its parent. The final text we will display will be a message to prompt the player to tap on the screen or shoot to begin playing the game.

To enter the SHOOT TO START text, follow these instructions:

1. Select the TitleText game object in the Hierarchy window.
2. Press Ctrl (command on the Mac) and D to duplicate it.
3. Rename the duplicated game object shootToStart.
4. With shootToStart still selected, change its Text component's Text field from Killer Wave to SHOOT TO START in the Inspector window.
5. Set Max Size to 50.

As mentioned earlier, we are going to move the Text selection from its current area to outside its parent.

6. Hold Ctrl (command on the Mac) and click on any of its white arrows. Then, pull the Rect Tool downward so that it is completely outside its parent Rect Tool, as highlighted in the following screenshot:

Figure 8.31 – Move the shootToStart Anchors into the highlighted positions

Zero out the Left, Top, Pos Z, Right, and Bottom Rect Transform properties. This will move our SHOOT TO START text down and into the location where the white arrows are. The following screenshot shows the placement of the text along with its Rect Transform property values:

Figure 8.32 – shootToStart Anchors Min and Max values

We don't need to change any of the functionality of the scene as we have already set this up.

7. Save the scene.

The following screenshot shows what our title scene now looks like:

Figure 8.33 – Killer Wave title screen

So far, we have gone further with our text by duplicating it, altering it, and moving it outside of its parent Rect Tool game object. We have also introduced images and used them in a similar way to our 2D text.

We will now continue and work on the next scene: gameOver.

Duplicating our game objects

In this section, we will improve the gameOver scene from its gray background and blocky white text and replace it with the same images and text from the title scene. However, this time, we won't be repeating the same steps from the previous sections to recreate the same outcome.

We will copy, paste, and tweak the game objects to save time and effort rather than repeat what we have already achieved with the title scene.

As an overview, here is what our gameOver UI game objects will contain and do:

• Canvas: This is the parent of all of the UI game objects.
• GameOverTitle: This holds all of the individual game objects relating to the Text and Image components.
• mainCol: The main red stripe in the center (holds the Image component).
• trim00: The red line at the top (holds the Image component).
• trim01: The red line at the bottom (holds the Image component).
• GameOverText: The main GAME OVER text (holds the Text component).

Thankfully, we don't really need to worry too much about what their roles are because we have already established this in the previous section. To duplicate our game objects and move them from the title scene to gameOver, perform these steps:

1. While still in our title scene, hold Ctrl (command on the Mac) on the keyboard and select Main Camera and Canvas.
2. Both our objects will be highlighted. Right-click on either one of them and select Copy from the drop-down list.
3. Open the gameOver scene.
4. In the Hierarchy window, select and delete Main Camera and GameOverText. We will replace these with our copied game objects.
5. Right-click in an open space of the Hierarchy window and select Paste.
6. Click on the arrow next to the Canvas game object in the Hierarchy window. Right-click on the Title game object and then click on Rename from the drop-down list.
7. Rename the game object to GameOverTitle.
8. Click on the arrow next to GameOverTitle and rename the TitleText game object to GameOverText.
9. Select the shootToStart game object and press Delete on your keyboard.

To confirm what we have done so far, the following screenshot shows the Hierarchy window for the gameOver scene:

Figure 8.34 – The Hierarchy window with its ordered game objects

10. With GameOverText still selected, change its Text field in the Text component of the Inspector window from killer wave to game over.
11. Save the scene.

This is what our gameOver scene should look like:

Figure 8.35 – The Game Over screen

In this section, we discovered that we can simply copy and paste game objects from one scene to another as long as we work within the same Unity project. This saves time and effort and keeps our game looking uniform in accordance with the rest of the scenes.

In the next section, we will learn how to animate our UI game objects.

Preparing to animate UI game objects

In this section, we will use a number of techniques that we have already covered, so we won't be going into the same level of detail. Once we have duplicated and changed the game objects, we will also be adding animation elements to make our 2D visuals less static.

We will be using a similar methodology to the gameOver scene by copying our previous scene's Canvas with its child game objects (not the Main Camera game object). The most suitable scene for this would be the gameOver scene as it has the basic elements we need. This only requires a couple of amendments before moving on to the animation phase.

To set up the level1 scene, perform the following steps:

1. Make sure our gameOver scene is still open in the Unity Editor. This is because we are going to copy some game objects over into the level1 scene.
2. In the Hierarchy window, right-click on the Canvas game object and click on Copy from the drop-down list.
3. Open the level1 scene from the Project window.
4. Right-click in the Hierarchy window and select Paste. We should now have the game over Canvas in our level1 scene.
5. Next, we will rename two game objects to suit our level1 scene.
6. Expand the Canvas game object in the Hierarchy window and select the GameOverTitle game object. Right-click on it and select Rename from the drop-down list.
7. Rename the game object to LevelTitle.
8. Expand the LevelTitle game object in the Hierarchy window.
9. Select GameOverText in the Hierarchy window and rename it to Level.

That's all that we need to do to our Canvas game object in the Hierarchy window. We can now move on to changing the main text itself from GAME OVER to LEVEL 1.

With the Level game object still selected, remove Game Over from the Text component's Text field and replace it with LEVEL 1, as shown in the following screenshot:

Figure 8.36 – Level 1 text typed out

We are now ready to start animating the UI 2D text and its image. All the game objects that we will be animating sit within the LevelTitle game object.

To set up our animation, we need to do the following:

1. While you are still in the level1 scene, select LevelTitle under the Canvas game object in the Hierarchy window.
2. In the Inspector window of LevelTitle, click on the Add Component button at the bottom.
3. Type in Animator until you see the word Animator appear, and then select it.

Our LevelTitle game object now has an Animator component. We now need to give it an Animator Controller to manage when to animate the contents of the LevelTitle game object. To do that, follow these steps:

1. In the Project window, navigate to Assets/Animator.
2. Right-click in an open space of the Project window and select Create from the drop-down list, followed by Animator Controller.
3. Change the name of the new Animator Controller from New Animator Controller to LevelTitle.

We now need to attach the new LevelTitle Animator Controller to our Animator component.

4. Back in the Hierarchy window, reselect the LevelTitle game object, and click on the small round circle (which is referred to as a remote, denoted by an arrow in the following screenshot) next to the Animator component's Controller field. Select the newly created LevelTitle game object from the drop-down list.

The following screenshot shows the LevelTitle game object with the LevelTitle controller selected:

Figure 8.37 – LevelTitle game object with an Animator component and a LevelTitle Animator Controller

Next, we need to create an animation so that we can add it to the Animator Controller:

1. In the Project window, in the Assets/Animator location, right-click in an open space. Select Create | Animation.
2. Rename the New Animation game object clip to levelTitle_A.

Let's now open the Animator Controller and add the levelTitle_A clip to it.

3. At the top of the Unity Editor, click on Window followed by Animator.

This will open the Animator window.

4. Select the LevelTitle game object in the Hierarchy window. The content for the Animator will appear with its three states (Any State, Entry, and Exit).

The following screenshot shows the Animator window with its three default states and also a reference to the location of the Animator Controller that is selected:

Figure 8.38 – Animator window with the name of the location of the Animator Controller file

Before we drop the animation clip in, it will benefit us to have a small time delay before the clip is played; otherwise, the animation might play too soon. In order to fix this, we can make an empty state that has a time limit. We can set this idle state to play at any speed or point we want before we play the intended animation clip (levelTitle_A).

To create an idle state and hook it up to the intended animation clip, follow these steps:

1. Right-click in an empty part of the Animator window and select Create State | Empty. The following screenshot shows the drop-down list we should expect:

Figure 8.39 – Creating an empty state

2. Select New State and, in the Inspector window, change the New State name to Idle. Then, press Enter on your keyboard.
3. Now we can drag levelTitle_A from the Project window to the Animator window.
4. We now need to join the transition from our Idle game state to the levelTitle_A state.
5. Right-click on the Idle state and select Make Transition from the drop-down list.
6. Select levelTitle_A to make a connection between the two states.

The following screenshot indicates what our states should look like now:

Figure 8.40 – Our animation states transitioning from Entry > Idle > levelTitle_A

It will not be necessary to use the Animator window after the animation is complete, and we may need to tweak the delay. However, for this, we will need to use the Animation window, so it's ideal to have this at the bottom of the screen. To do that, perform these steps:

1. In the Project window, click on the Add Tab button from the drop-down list.
2. Click on Animation.

The following screenshot is in accordance with the preceding numbered bullets:

Figure 8.41 – Displaying the Animation window

In this section, we have brought in the GAME OVER UI art and replaced the text from its Text component; we also brought over its sprites (banner and trim) and Image component to give us a representation of which level we are on. We then prepared the game objects to be animated with the Animator Controller and its states, followed by creating a blank Animation clip.

We can now start animating the entrance and exit for our LEVEL 1 UI art in the next section.

Animating our UI level title

We are going to animate two game objects: the level title and the main strip bar in the level1 scene. In the previous section, we set up the Animation window at the bottom of the Unity Editor. The following screenshot shows our current setup for the placement of the windows, which may be helpful for reference purposes:

Figure 8.42 – Recommended Unity Editor window layouts

With regard to the animation itself, we will be animating the following:

• The level text that moves on to the screen.
• The main center strip will glow red.
• The text that will exit the screen.

The following screenshots show this:

Figure 8.43 – UI animation sequence for level 1

So, the four main elements to animate are the Level game object, which contains the 2D Text component. The other three to be animated will be the mainCol, trim00, and trim01 game objects that contain the Image component's color values. Let's start by animating the Level game object first.

Animating the 2D text component

In this section, we are going to animate the text from the left to the center. It will pause so the player has a chance to read it. Then, it will move out of the screen:

1. In the Hierarchy window, click on the arrow next to the Canvas game object to expand its content if it isn't expanded already.
2. Click on the arrow next to the LevelTitle to do the same.
3. Select the Level game object.
4. In the Animation window, click on the record button, as shown in the following screenshot:

Figure 8.44 – Record button for animation

With our animation track line scrubbed (note that scrub is an animation term for dragging our timeline indicator) all the way back to 0:00, which is its default, let's move our Level game object from the center of the Canvas to the left in the Scene view by doing the following.

5. With the Level game object still selected in the Hierarchy window, type the following values into the Inspector window's Rect Transform (Left: -2000 and Right: 2000) property fields to move our 2D LEVEL 1 text out of the Canvas view, as shown in the following screenshot:

Figure 8.45 – Position the Level game object Rect Transform property values

Now that our LEVEL 1 2D text is pushed out of the way, we can scrub the animation line forward.

6. Click and drag within the timeline digits, as shown in the following screenshot:

Figure 8.46 – Adjusting the display of the timeline

7. In the Animation window, drag the white vertical line from 0:00 to 0:34.
8. In the Inspector window, change the Level game object's Rect Transform Left and Right properties to 0.

The fields will turn red to show the change has been recorded. The animation timeline in the Animation window will gain keyframes from the movement of the 2D text.

The following screenshot shows the changes made to the timeline:

Figure 8.47 – Animation timeline with its recorded area

We obviously want the LEVEL 1 text to stay where it is for a few seconds before it leaves the screen again. To make the text pause in the center before moving, follow these steps:

1. In the Animation window, move the white line from 0:34 to 1:25.
2. Click on the Add keyframe button.

The following screenshot shows the timeline is at 1:25, with new keyframes added while the record button is clicked on:

Figure 8.48 – Adding a keyframe button

3. For our next keyframe point, drag the white line to 1:50.

Now we have come to the stage where we want to move the UI text from its center position to out of view of the camera.

4. Select the Level game object.
5. In the Inspector window, change the Rect Transform properties to the following:
   • Left: 2000
   • Right: -2000

This will push the LEVEL 1 text out of the camera view, as shown in the following screenshot:

Figure 8.49 – Level game object Rect Transform recorded property values

6. Move your mouse cursor down to the timeline Animation window. Then, click and press F on your keyboard. This will show all of the keyframes for the total animation we have just done.
7. Click on the record button in the Animation window timeline to stop recording, and scrub backward and forward to see our 2D text animate in, pause, and then move out of the screen.

We have made a start by animating the Level 1 text within the Canvas with Unity's Animation system.

Our UI text starts on the far left (out of view of the camera), animates into the center, pauses, and then animates out of view.

Now we can continue to animate the UI and move our focus from positioning to changing our UI's color (R, G, B, A) to a glowing red in the next section. This will show that our animation isn't just applied to one component but is shared through a series of components. We will animate the Image component next.

Animating the Image component's center strip

The second part of the animation phase is to have the center strip for the level title glow red and then disappear. To do this, all animation for the mainCol, trim00, and trim01 game objects will be manipulated in the Inspector window through their Image component's Color settings.

Let's start animating the Image components for all three game objects:

1. In the Hierarchy window, hold Ctrl (command on the Mac) on the keyboard and select mainCol, trim00, and trim01. These are the game objects we will be animating.
2. In the Animation window, move the line bar all the way back to 0:00.
3. Click on the record button in the Animation window.
4. With all three game objects still selected, click on the Color field and set the R, G, B, and A values to R: 255, G: 0, B: 0, and A: 0. Refer to the following screenshot:

Figure 8.50 – Update the Image component Color values while recording

Our Animation window will update to indicate that the three changes have been made. In the following screenshot, we can see the properties have been changed for the mainCol, trim00, and trim01 Image component's alpha color properties (note that alpha is the A from R, G, B, and A). The Alpha setting will alter the transparency of the image:

Figure 8.51 – Image component keyframes in the Animation window

In basic terms, the three game objects are invisible at the start of the animation in the Scene window. Next, we need to make the images come out of the transparency phase and glow red. To do that, we now need to move our timeline indicator over to 0:55 and perform the following steps:

1. With the three game objects still selected, change the Color values on their Image components to R: 255, G: 0, B: 0, and A: 120, as shown in the following screenshot:

Figure 8.52 – Update the Image component color values for our three selected game objects

Our three game objects have now become visible again in the Scene view. The final part of the animation is to make the three game objects turn invisible again. Instead of going back into the Color value settings, we can simply copy and paste the keys we created in the timeline at 0:00. To copy our keyframes, do the following:

1. With our three game objects and the record button still selected in the Animation window, move the timeline indicator back to 0:00.
2. Select all three Image.Color.a changes in the Animation window, as shown in the following screenshot:

Figure 8.53 – Select the three keyframes in the Animation window

3. Press Ctrl (Command on the Mac) and C on your keyboard to copy the keyframes.
4. Click on the record button in the Animation window to stop recording the animation.
5. Scrub to 1:50 and press Ctrl (Command on the Mac) and V on your keyboard to paste.
6. Move your mouse cursor to the Animation window. Click and press F on the keyboard to get a full view of the timeline. Move the cursor back and forth to see the level text animating into the scene and the center strip glowing red.

When our Level 1 scene starts, we will see the title and the red bar before the animation, which we don't want. Therefore, we need to set the Level 1 text and red bar to the same values as the first frame of our animation:

1. Select the mainCol game object and set the Image component's alpha to 0.
2. Set the trim00 Image component's alpha to 0.
3. Set the trim01 Image component's alpha to 0.
4. Set the Rect Transform Left property's value to -2000 and the Right property's value to 2000.

The following screenshot shows the default position and alpha settings of the previous steps:

Figure 8.54 – Default position and color of our level title UI

5. Save the scene.

Let's remind ourselves briefly of what we have covered so far before we move on to the final section. We took our mainCol, trim00, and trim01 game objects and changed their Image component's Color alpha values over a series of keyframes using the animation timeline.

Let's now move on to the next section where we will copy our art, text, and, in some cases, animation into other scenes. From there, we will tailor the components to each scene.

Copying and pasting art, text, and animation into other scenes 

Finally, we can copy all of the hard work of our level1 scene (including its animation) and paste it into the level2 and level3 scenes and amend each level number. To do that, follow these steps:

1. In the Hierarchy window, select Canvas and press Ctrl (Command on the Mac) and C on your keyboard.
2. In the Project window, load up level2 in Assets/Scene.
3. Click in an open space of the Hierarchy window and press Ctrl (Command on the Mac) and V on your keyboard to paste the level1 scene's Canvas game object and all of its content.
4. Select the Level game object in the Hierarchy window (within Canvas and LevelTitle).
5. Change the Text component's Text field from Level 1 to Level 2.
6. Save the scene.
7. Repeat the process for the level3 scene.

Figure 8.55 – Duplicate and edit the level title number

Well done! Another big chapter has been conquered. We have started to make our game shine with some sweet art that we made ourselves. Let's recap what we have achieved.

We took some plain gray scenes and made them more presentable and fit with our sci-fi game. This was all thanks to the Unity Editor, as we were able to achieve this with no scripting. The main components we covered were as follows:

• Text: We imported a custom font and tweaked it within the component itself.
• Image: With any sprites, we set our colors to create a series of red stripes with transparency.
• Animator Controller: Held states for when the Image and Text components were to be animated.
• Animation: Each keyframe for a mixture of components was set in a single timeline animation.

Finally, we didn't need to repeat the process followed for the UI we created at the beginning of the chapter by adding the UI's text, images, animation all over again. We took the majority of these game objects and components from one scene (killer wave title screen) and pasted the game objects to the existing scenes (level title and game over) to act as a template for the game's theme. Once these components were in place, we simply modified the text field (changing the text from killer wave to level 1 and so on).

This makes working with Unity fast and user-friendly. We didn't need to start over again each time for a new UI scene from scratch. With our UI visually improved, you should hopefully start to feel like our project is turning more into a polished-looking prototype.

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.