All content in this course uses:

Create a script that resizes a health bar UI element from a variable and expose it via a static class member.

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.

Resize a UI element based using a variable.

, but you might find it useful if you want to learn about creating UI to display information using UI Toolkit. For further guidance on creating UI with this system, refer to the 

: For the purposes of this tutorial, we chose to use the Ruby’s Adventure asset set, and the file paths 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.

Follow these instructions to create a script that updates the health display:

 folder, create a new C# script, and name it “UIHandler”.

 window and drag and release the script over the 

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 instruction to the bottom of the list:

This namespace provides access to the UI Toolkit system.

 function. Declare a public float variable called CurrentHealth and set it to 0.5:

 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 to get the root of the UI Hierarchy (currently the  HealthBarBackground VisualElement) and call a function named “Q” on it:

The root of the UI Hierarchy is accessed through 

As you’ve encountered previously, the VisualElement is accessed using the dot operator.

 function is short for Query. You can use this function to find a particular VisualElement in the 

 window that matches multiple search parameters — in this case you are using the element name. 

Query is a generic function, because you can use it to query lots of different types. The specific type you are looking for is provided in angle brackets — in this case, it’s a VisualElement named “HealthBar”. 

, which you’ve used previously, is also a generic function: you can use it to get any kind of component, but you need to specify which one you need when you use the function.

  Add a final instruction to resize the health bar based on CurrentHealth variable value:

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

 contains all the VisualElement properties that you can set with UI Builder, and it is the width 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 as we won't be using it, and save your script changes. 

  Return to the Unity Editor and enter Play mode to test your changes. You set your temporary health variable to 0.5f, so the bar should fill 50% of the frame (0.5 * 100 = 50) .

  Exit Play mode when you have finished testing.

Implement basic health display functionality

Now that you’ve checked the basic functionality of your 

 script, you need to write a function to display the player character’s current health level.

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

At the top of the UIHandler class, remove the temporary 

 variable. Declare a new private variable of the VisualElement type called “m_Healthbar”. This variable is a member of the UIHandler class — you’ll use it to store the reference to HealthBar and access that reference within the script outside of the Start function. 

 function, update the instruction that gets the HealthBar reference to set the new 

 function, add a new public function called “SetHealthValue” for the instruction that sets the HealthBar element’s width. This function needs to take a float value between 0 and 1 as a parameter.

 function, add an instruction that passes a parameter of 1.0f to 

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

Challenge: Write a function to change character health

So far in this course, you’ve declared variables in scripts to contain references. For example, at the moment your HealthCollectible script passes 1 as a parameter to the 

 script. However, you can create a public variable to contain the health increase value and reference that variable as the parameter instead. There would be a copy of that public variable for every instance of the health collectible object, because each collectible can provide a different health increase for the player.

However, if you make a variable or a function a 

 of its class, it will always access the same space in the computer’s memory rather than each instance of the member having an individual space. If you made a static variable to control the collectible’s health increase, then changing it on one collectible instance would change the increase for every collectible in your game. 

Static members can be very useful when there’s only one version of something in your game. You can also access static members using their class name rather than a reference. 

You’ve actually already used class names to access static members in this course.

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

 class. You don’t need to get a reference to Debug to print a message to the 

 window, you can just call the Log function directly using its class name.

What are static class members?

 script so that it can be accessed without a reference, follow these instructions:

  At the top of the UIHandler class, declare a new static property:

Some of this declaration should be familiar to you, but some information is new:

 property is public and static. You can write UIHandler.instance in any script within your Unity project and it will call the get property. 

 property is private; you should only be able to change the instance property within the UIHandler script.

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

 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 

in the instance property; the keyword is a reference to the current instance of the UIHandler class executing the 

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 UIHandler.instance in any other script, which will return the UIHandler class to the script making the call.

 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 changed the health increase value for one collectible GameObject, that change would 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 UIHandler, 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 

 window by calling Debug.Log — you won’t need this any more.

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

This instruction passes the ratio of the currentHealth value over the maxHealth value to the 

Both currentHealth and maxHealth 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 

The (float) keyword that precedes maxValue is C# syntax that makes the compiler treat maxHealth 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

course, 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

In this unit, you created a display to help the player track their character’s health, which will be very helpful because you’re going to add more challenges for them to encounter. So far there are only static hazards in your game, but in the next unit you’ll add enemies and a way for the player character to stop those attacks. 

Unity バージョン 2022.3