Gameplay HUD - Player UI and Dialog Box

In the previous chapter, we were introduced to Unity's UI system. With this knowledge, we'll be able to understand and change the player's UI to our advantage, should we need to.

In this chapter, we will use the UI to display information about the player's inventory, about the items held within. In order to do this, we'll learn how to create and use inventory items.

In addition to this, we will learn how to communicate with the player by showing health and dialog boxes.

The following topics will be covered in this chapter:

• • Inventory items
  • Inventory UI
  • Player Health
  • Dialog boxes
  • Transition screens

The inventory

As we all know, the inventory in a game is key to the player experience. This is the reason why we should add it to our games, and both the 2D and 3D Game Kits give us the chance to do so.

We have two main components that we need to learn about in order to make our inventory system work. Let's keep on reading to see what these involve.

In the 2D Game Kit, the inventory system is applied in Ellen's prefab by default, because it already has the Inventory Controller component.
In the 3D Game Kit, things are a little different, so we'll need to add the Inventory Controller ourselves.

We can see the Inventory UI on the top right of the screen, as highlighted in the red box in the following screenshot:

Inventory items

...

Player UI

Now it is time to show the player some information about their character, the state of its life, and some information about the inventory. To do this, we'll look at the KeyCanvas and HealthCanvas GameObjects to understand how they work to show information on the UI canvas.

Inventory UI

We can click on the KeyCanvas GameObject on the scene, but in case we are in a scene where we don't have any, we can just look one up in the folder at Assets | 2D or 3DGameKit | Prefabs | UI Prefabs. The Inventory UI is shown in the scene as follows:

Let's now take a look at the properties of the Key UI component:

The functions are as follows:

Key Icon Prefab

This is the UI icon prefab that will be automatically...

Inventory and gameplay visuals (2D only)

As well as being able to show icons that tell us whether we have certain keys or not, we can also use the Hub Door component to generate a similar feature in the game, but applied differently:

The Hub Door component is designed to change the visual state of a sprite depending on which and how many items we have in our inventory. Let's take the Zone2 example:

The first time we get to the zone, the door state is completely inactive, as we can see in the previous screenshot. After we pick up the key, the visual will change:

The steps are repeated for the second key:

And finally, we pick up the last key, which unlocks the door and triggers a dialog canvas:

As mentioned previously, the script in charge of doing this is the Hub Door component. In order to know how to use it, we first need to know its properties:

Required Inventory...

Dialog boxes

Dialog boxes will be our most common and direct way of communicating with the player. These UI elements provided by the 2D and 3D Game Kit will let us show text dialog, as we can see in the following screenshot:

This is the first example, where the dialog is used to explain the basic controls:

In this case, the character is trying to let us know how to jump down off platforms.

We will notice that both times the dialog box opened, we were in contact with one of the following posts:

We can find this as a prefab, called InfoPost, in the folder at Assets | 2DGameKit | Prefabs | Interactables if we are working on the 2D Game Kit. If we are working on the 3D Game Kit, the prefab will be in the same folder, under the name InfoZone.

In this case, when we enter this invisible zone, he dialog will be shown:

We will find this example in the Level1 scene of the 3D Game Kit...

Transition screens

We're getting on to the last topic of the chapter: the transition screens. We have three of them in the game kit:

• The quick transition screen, which fades in and out, and returns the player to the last checkpoint should they have any lives left:

• This is the loading scene, which is activated whenever we go from one scene to another:

• This is the Game Over scene, which is activated whenever we die and don't have any lives left:

We can look for the ScreenFader prefab in the folder at Assets | 2D or 3DGameKit | Prefabs | Scene Control, and drag and drop it into our scene:

As we can see, the fading duration is half a second. This applies for every screen, no matter the trigger that causes it. Let's now read about every property:

Fader Canvas Group

This has a reference to the fader screen, which is the one we use for going back to checkpoints...

Summary

In this chapter, we have deeply extended our knowledge regarding UI and how it can affect gameplay.

First of all, we went through the inner workings of the inventory system. We know that it needs two objects to work: Inventory Items and Inventory Controller, which trigger events whenever we get certain items.

In addition to this, we learned how to show icons of any items we pick up, alongside icons for player health. This is a great way to communicate with the player, because they have the chance to see how they are doing.

On the topic of communicating with the player, note that we cannot skip the dialog boxes, which will be the main source of interaction with our users. If we need to give them a direct instruction, we can do it mid-game through the InfoPost/InfoZone objects, together with the dialog canvas.

Lastly, we went through the transition screens, covering both...

Further reading

• If you want to learn more about Playable Director, please head to this link: https://docs.unity3d.com/Manual/class-PlayableDirector.html