All content in this course uses:

Display character health on the UI

In this tutorial, you’ll create a script to adjust the health display bar based on the player character’s health.

By the end of the tutorial, you’ll be able to do the following:

Make your script accessible without a reference using a static class member.

Now you’ve made your health display, you can use it to display information for the player. In this tutorial, you’ll create a new script to adjust the health display bar based on the player character’s health.

: For the purposes of this tutorial, we chose to use the

 asset set, and the images used in instructions will reflect this. If you chose another asset set, the file names will be the same, but in your corresponding theme folder.

Overview

Now that you’ve created your UI, it’s time to make the size of the health bar change based on the player character’s health.

To create a script that updates the health display, follow these instructions:

Unity Inspector showing a GameObject named “UIDocument”. Components displayed: Transform; UI Document with Panel Settings set to “PanelSettings” and Source Asset set to “GameUI” Sort Order 0; and a UI Handler (Script) field referencing “UIHandler.

Create a script to update the health display

 script so that a variable controls the health percentage displayed, follow these instructions:

 Go to the namespaces at the top of the script and add the following line of code:

This namespace provides access to the UI Toolkit system.

 function, and declare a public float variable called 

: This is a temporary variable for testing the script before you write a function that uses the correct health value in the 

 function, add an instruction to get the 

 Add a second instruction under the line you just added to get the root element of the 

 element) and call a function named “Q” on it:

. You can use this function to find a particular VisualElement in the 

 pane that matches certain search parameters – in this case the parameter you want to match is the element name.

) is a generic function, because you can use it to query lots of different types. The specific type you are looking for is provided inside the angle brackets – in this case, it’s an element named “HealthBar”.

 Add a final instruction to resize the health bar based on the 

 contains all the VisualElement properties that you can set with UI Builder, and it is the 

 that you are resizing with this instruction.

 (one of the various size types available for the property).

 property directly, the UI Toolkit system will interpret it as a pixel size rather than a percentage.

 function (you won't be using it) and save your script changes.

 Return to the Unity Editor and enter Play mode to test your changes.

, so the bar should fill 50% of the frame (0.5 * 100 = 50).

In-game close-up of the HUD: Ruby character portrait with a partially filled blue bar over a gold/brown frame, Ruby character nearby with damage zone and collectibles.

 Exit Play mode when you’ve finished testing.

The bar doesn’t react to changes in the character’s health yet – you’ll implement that next.

Implement basic health display functionality

Throughout this course, you’ll find a few challenges where you’re encouraged to try writing the code on your own. But don’t worry – if you want to make sure you did it correctly, you can review the script later in the step.

Now that you’ve checked the basic functionality of your 

 script, you need to write a function that dynamically displays the player character’s current health.

Use the following guidance to help you as you write your new function:

This variable is a member of the UIHandler class – you’ll use it to store the reference to 

and access that reference within the script.

 function, update the second instruction that gets the 

Remove the next instruction that defines the HealthBar width. And below the 

 function, create a new public function called “SetHealthValue” that sets the 

This function needs to take a float value between 

 function, add an instruction that passes a parameter of 

When you’ve revised the script yourself, review the completed example below:

Challenge: Write a function to change character health UI

So far in this course, you’ve created variables in scripts to store data for each individual instance of a GameObject. For example, in the 

 script. Instead, you could create a public variable to contain that health increase value and use it as the parameter. Each collectible would then have its own copy of that variable – allowing different collectibles to give different amounts of health.

However, when you set a variable or a function as a 

 instead, it’ll belong to the class itself, not to any particular instance. This means all instances share the same memory space for that variable. So, if you made the health increase variable static, changing its value on one collectible would also change it for all others in the game.

Static members are useful when you only need one shared version of something in your game. They can be accessed directly using the class name, rather than through an instance reference. In fact, you’ve already used static members in this course! Here are some examples:

 class. You’ve accessed this variable by using its name, rather than the following two instructions you’d need if it wasn’t declared as a static member:

 class. Just as the example before, you don’t need to retrieve the function to print a message to the 

What are static class members?

The reason we introduced the concept of static class members is because now you’re going to set your 

 class to be static and be used without a reference. To revise your 

Some parts of this line of code should be familiar to you, but some information is new:

 so you can access it from any script in your project by writing 

script itself can change the value of the instance property.

This function is called as soon as the GameObject the script is attached to is created. 

 GameObject, which will be created when the game launches.

 function, add an instruction to store the keyword “this” in your static property:

The instruction stores the special C# keyword 

keyword is a reference to the current instance of the 

 If you have little or no programming experience, or if some of these explanations still feel unclear, the 

 will guide you step-by-step through the fundamentals.

How have you changed the script functionality?

Now, when the game starts, Unity calls the 

 script stores itself in the static member property instance. You can call 

 in any other script, which will return the 

 script because there is only one GameObject with the 

 GameObject). Static members of a class are shared across all instances of that script; if you change the health increase value for one collectible GameObject, that change will be applied to every collectible in the game.

 pattern, a specific design approach for situations when you will only need one instance of a class. This pattern is perfect for situations like the 

, which is a single class to control everything related to the UI heads-up display in your game.

 Revise your script to make it accessible without a reference

 script so that the health values that it contains are reflected on the UI display.

To update the script, follow these instructions:

 Delete the instruction that displays the health values in the 

 Add the following instruction in the place of the one you deleted:

Before you read on, take a moment to review this code – what do you already understand?

This instruction passes the ratio of the 

 are integers, and in C# the division of two integers can only return another integer (whole number). For example, 2 / 4 would give 0, because the fractional remainder gets ignored. A whole number value will not work for your percentage calculation in 

 is C# syntax that makes the compiler treat 

 as a floating point value, which resolves the division problem. When at least one value in the division calculation is a float (floating point), the calculation returns a float value. In the example, 2 / 4.0 would give 0.5.

 Return to the Unity Editor and test your game.

The health bar on the heads-up display will now increase and decrease as the player character’s health changes!

Update the PlayerController script

If you want to further develop your skills, explore new concepts, or improve your project, check out some of the optional activities below. Each one is tagged as either Easy, Medium, or Difficult, so you can choose the level of challenge.

These activities are entirely optional, so if you’re not interested, no problem – just skip this step. We do recommend attempting at least one of them in order to get the most out of this learning experience. Good luck!

Easy: Adjust the positioning for optimal player experience

Now that the HUD is fully-functioning, take some time to test its positioning. If you can ask someone else to test your game-in-progress and get their feedback, even better! You might find that you want to move the display to the upper-right corner instead, or that the general position is good, but tweaking it a little more makes a positive difference.

More things to try 

Take a moment to check that your scripts are correct before continuing.

: If you completed any extension work in your script beyond exposing the variable that controls movement speed, this will not be reflected in the reference script below.

Check your scripts

So far in this unit, you’ve created a display to help the player track the 

’s health, which will be very helpful to guide the player while completing their challenging adventure. In the next tutorial, you’ll learn how to add another UI element to add another functional element to your game – a dialogue screen.

Unity Version 6.3