Introduction
I have created a new Asset for Unity, it is a bar indicator for the Canvas. This asset will serve to show values in relation to a minimum and maximum value, for example you can make a health bar, strength bar and magic bar, a progress bar, etc. I have added several parameters and features so that you can customize it, in this article we will see the contents of the package and an example of how to make a health bar indicator in Unity.
Download this asset – Lineal indicator bar for Unity
Below you can download the Unity package to import in your project, the package contains the Assets from the indicator bar. Figure 1 shows the files the package has when imported.
In the following video I explain how to use this health bar for Unity
Content of the package
In the “Indicators” scene, the indicator bar is already assembled with an example of how to use it. In figure 2.a we see the hierarchy of the scene, the prefab of the indicator bar (third element in figure 1) must be added as a child of a Canvas object, otherwise it cannot be displayed on screen.
The size of the indicator bar can be adjusted by selecting the GameObject that is highlighted in figure 2.a and modifying the “Width” and “Height” values in the inspector (figure 2.b). The scale does not need to be changed.
In Figure 3 you can see the indicator bar, when you enter the game mode and press the keys A and D, you should see how the bar decreases and increases its value respectively.
Customization parameters
In the inspector of the indicator bar prefab you can see some parameters to customize its behavior. All these values can be configured through Script, that we will see in the example below. For now we will see what purpose each of the parameters has.
The “Orientation” parameter determines whether the indicator bar will be filled horizontally or vertically. The Boolean variable “reverse” allows you to reverse the filling direction, left to right or right to left if the orientation is horizontal and bottom to top or top to bottom if the orientation is vertical.
The “FillColor” is the fill color of the indicator bar and is the only color that will be shown, unless the “Use Two Colors” box is checked, if that box is checked, the bar will show the “FillColor” when it is at maximum and the “EmptyColor” when it is at minimum, interpolating the color for all values in between.
The values “minValue” and “maxValue” determine the range of values indicated by the bar, this will depend on what we are going to use it for.
The “ValueIndicator” object is the reference of the fill image, you don’t need to modify it, but in case you are interested, the “LinearIndicator” script, taking into account the value it has to display and the percentage that it represents according to the minimum and maximum values, will scale the “ValueIndicator” object between 0 and 1 for X if the orientation is horizontal and for Y if the orientation is vertical.
How to make a health bar at Unity
To make a life bar using this asset, you have to understand how to use it through code. The visual part is configured from the inspector, there we can modify colors, sizes and so on, but to use this indicator bar we will need a Control Script.
Assuming that you have a script that controls the player’s health, i.e. when he is hurt his life decreases, when he is healed his life increases, let’s see how to use this asset to indicate the level of health.
Step 1: Customize the appearance of the health bar
In this first step what we do is work on the visual part, that is to say being in Unity we give the size to the life bar, the position, the colors, we can change the background color, etc.
Step 2: Declaration of the indicator object to use as a health bar
Within the Script where we are going to use the indicator bar as a life bar, the first thing we need is to define a public reference for the object “LinearIndicator”, this is done in line 9 of figure 5. In case you need more than one indicator bar, for example to make a health bar and a shield bar, you must define two of these references.
By defining the reference as public we can see it in the inspector and manually assign in that space, the GameObject of the indicator bar (in our case the one highlighted in figure 2.a), as we see in the field appears the script reference “LinearIndicator”.
Step 3: Initial configuration of the health bar.
The “LinearIndicator” script has several fields and public functions defined for code-based configuration. In figure 7 we see several instructions to configure the indicator bar.
The ” SetupIndicator ” function for example (line 17 in figure 7) allows you to set the range of values of the indicator bar, for example if the player’s health is between 0 and 500, those should be the values that are passed as a parameter, that way when the player has his life in 500, the bar will be 100% full.
In line 18 we see how to change the orientation of the indicator bar, in the next line how to change the variable “reverse” that modified the filling direction.
Line 20 is not a setup instruction but the instruction to use the indicator bar, this we see in the next step.
Step 4: Using the health bar.
To write a value in the life bar we use the reference we define and call the function “SetValue”, passing as a parameter the value we want to indicate. We can see examples of this in line 20 of Figure 7 and lines 32 and 40 of Figure 8.
This function can be called when an event occurs that changes the value, for example when the player receives damage, at that time we refresh the value of the indicator bar. The value can also be constantly updated. Depending on how our game works.
