Canvas Objects
Our health bar will use something called a Canvas as the main Game Object. What is a Canvas? A Canvas is specific type of Unity Object responsible for rendering user-interface, or “UI” Elements in a Unity Scene. Every UI Element in a Unity scene needs to be the child object of a Canvas object. A scene may have multiple Canvas objects, and if a Canvas does not exist when a new UI Element is created, then one will be created and the new UI Element will be added as a child of that Canvas.
UI Elements
UI Elements are game objects that encapsulate specific, commonly needed user-interface functionality such as buttons, sliders, labels, a scroll bar, or input field. Unity allows developers to build out custom user-interfaces quickly by offering premade UI Elements instead of requiring that the developer create them from scratch.
One thing to note about UI Elements is that they use a Rect Transform instead of a regular Transform component. Rect Transforms are identical to regular Transforms except that in addition to position, rotation, and scale, they also have width and height. Width and Height are used to specify the dimensions of the rectangle.
Building the Health Bar
Right-click anywhere in the Hierarchy view and select UI ➤ Canvas. This creates two objects automatically: a Canvas and an Event System. Rename the Canvas object, “Health Bar Object”. The Event System is a way for the user to interact directly with Objects using the Mouse or other input devices. We don’t need it at the moment, so you can delete it. Select the Health Bar Object and look for the Canvas component. Be sure that Render Mode is set to Screen Space Overlay and check the box that says Pixel Perfect. Setting Render Mode to Screen Space Overlay ensures that Unity renders UI Elements on top of the scene. If the screen is resized, the Canvas containing the UI Elements will automatically resize itself.
Importing Custom Fonts
It’s very likely that you’ll want to use custom fonts in your project. Luckily, it’s very simple to import and use custom fonts in Unity. This project includes a freely available custom font with a retro style called Silkscreen. Silkscreen is a typeface created by Jason Kettle.
Right-click on the Assets folder in the Project view and create a new folder called, “Fonts”.
Adding Hit-Points Text
Right-click on the Background object and select from the menu: UI ➤ Text, to add a Text UI Element as a child of the Background. Rename the object to, “HP Text”. This Text object will show the number of remaining hit-points. On the Rect Transform component of HP Text, set the Width to: 70, and Height to: 16. On the Text component of Text, change the Font Size to 16, and the Color to white. Change the Font to “slkscr”, which is the custom silkscreen font we just imported. Set the Paragraph Horizontal and Vertical Alignment to left and center, respectively
Scripting the Health Bar
The Player class inherits the property: hit Points. Right now, hit Points is just a regular type: integer. We’re going to leverage the power of Scriptable Objects to share hit-points data between the health bar and the player class.
The plan is to create an instance of this Hit Points Scriptable Object and save the asset to the Scriptable Objects folder. We’ll add a Hit Points property to the Player class and create a separate Health Bar script containing a Hit Points property as well. Because both scripts contain a reference to the same Scriptable Object asset: Hit Points, the hit-points data will be shared between both of these scripts automatically.
Import the Inventory Slot Image
Create a new folder under Sprites called, “Inventory”. In the local directory where you downloaded the assets for this chapter, select the sprite sheet called, “InventorySlot.png” from the Sprite sheets folder. Drag it into the Sprites/Inventory folder in the Project view.
Summary
Whew! Well that was quite a lot to take in but think about how much we’ve accomplished. We’ve put Scriptable Objects and prefabs to use, and even learned about the Canvas and UI Elements. This chapter had us writing more C# than ever, and we learned a few tricks to keep our game architecture clean. We have a functioning Inventory and Health Bar, and our game is starting to look like a proper RPG.
