Indicator Bar for Unity — Example: Health Bar

Introduction

I have cre­at­ed a new Asset for Uni­ty, it is a bar indi­ca­tor for the Can­vas. This asset will serve to show val­ues in rela­tion to a min­i­mum and max­i­mum val­ue, for exam­ple you can make a health bar, strength bar and mag­ic bar, a progress bar, etc. I have added sev­er­al para­me­ters and fea­tures so that you can cus­tomize it, in this arti­cle we will see the con­tents of the pack­age and an exam­ple of how to make a health bar indi­ca­tor in Unity.

Download this asset — Lineal indicator bar for Unity

Below you can down­load the Uni­ty pack­age con­tain­ing the Assets from the indi­ca­tor bar. Fig­ure 1 shows the files the pack­age has when imported.

Content of the package

In the "Indi­ca­tors" scene, the indi­ca­tor bar is already assem­bled with an exam­ple of how to use it. In fig­ure 2.a we see the hier­ar­chy of the scene, the pre­fab of the indi­ca­tor bar (third ele­ment in fig­ure 1) must be added as a child of a Can­vas object, oth­er­wise it can­not be dis­played on screen.

The size of the indi­ca­tor bar can be adjust­ed by select­ing the GameOb­ject that is high­light­ed in fig­ure 2.a and mod­i­fy­ing the "Width" and "Height" val­ues in the inspec­tor (fig­ure 2.b). The scale does not need to be changed.

In Fig­ure 3 you can see the indi­ca­tor bar, when you enter the game mode and press the keys A and D, you should see how the bar decreas­es and increas­es its val­ue respectively.

Customization parameters

In the inspec­tor of the indi­ca­tor bar pre­fab you can see some para­me­ters to cus­tomize its behav­ior. All these val­ues can be con­fig­ured through Script, that we will see in the exam­ple below. For now we will see what pur­pose each of the para­me­ters has.

The "Ori­en­ta­tion" para­me­ter deter­mines whether the indi­ca­tor bar will be filled hor­i­zon­tal­ly or ver­ti­cal­ly. The Boolean vari­able "reverse" allows you to reverse the fill­ing direc­tion, left to right or right to left if the ori­en­ta­tion is hor­i­zon­tal and bot­tom to top or top to bot­tom if the ori­en­ta­tion is vertical.

The "Fill­Col­or" is the fill col­or of the indi­ca­tor bar and is the only col­or that will be shown, unless the "Use Two Col­ors" box is checked, if that box is checked, the bar will show the "Fill­Col­or" when it is at max­i­mum and the "Emp­ty­Col­or" when it is at min­i­mum, inter­po­lat­ing the col­or for all val­ues in between.

The val­ues "min­Val­ue" and "max­Val­ue" deter­mine the range of val­ues indi­cat­ed by the bar, this will depend on what we are going to use it for.

The "Val­ueIndi­ca­tor" object is the ref­er­ence of the fill image, you don't need to mod­i­fy it, but in case you are inter­est­ed, the "Lin­earIndi­ca­tor" script, tak­ing into account the val­ue it has to dis­play and the per­cent­age that it rep­re­sents accord­ing to the min­i­mum and max­i­mum val­ues, will scale the "Val­ueIndi­ca­tor" object between 0 and 1 for X if the ori­en­ta­tion is hor­i­zon­tal and for Y if the ori­en­ta­tion is vertical.

How to make a health bar at Unity

To make a life bar using this asset, you have to under­stand how to use it through code. The visu­al part is con­fig­ured from the inspec­tor, there we can mod­i­fy col­ors, sizes and so on, but to use this indi­ca­tor bar we will need a Con­trol Script.

Assum­ing that you have a script that con­trols the player's health, i.e. when he is hurt his life decreas­es, when he is healed his life increas­es, let's see how to use this asset to indi­cate the lev­el of health.

Step 1: Customize the appearance of the health bar

In this first step what we do is work on the visu­al part, that is to say being in Uni­ty we give the size to the life bar, the posi­tion, the col­ors, we can change the back­ground col­or, etc.

Step 2: Declaration of the indicator object to use as a health bar

With­in the Script where we are going to use the indi­ca­tor bar as a life bar, the first thing we need is to define a pub­lic ref­er­ence for the object "Lin­earIndi­ca­tor", this is done in line 9 of fig­ure 5. In case you need more than one indi­ca­tor bar, for exam­ple to make a health bar and a shield bar, you must define two of these references.

By defin­ing the ref­er­ence as pub­lic we can see it in the inspec­tor and man­u­al­ly assign in that space, the GameOb­ject of the indi­ca­tor bar (in our case the one high­light­ed in fig­ure 2.a), as we see in the field appears the script ref­er­ence "Lin­earIndi­ca­tor".

Step 3: Initial configuration of the health bar.

The "Lin­earIndi­ca­tor" script has sev­er­al fields and pub­lic func­tions defined for code-based con­fig­u­ra­tion. In fig­ure 7 we see sev­er­al instruc­tions to con­fig­ure the indi­ca­tor bar.

The " SetupIndi­ca­tor " func­tion for exam­ple (line 17 in fig­ure 7) allows you to set the range of val­ues of the indi­ca­tor bar, for exam­ple if the player's health is between 0 and 500, those should be the val­ues that are passed as a para­me­ter, that way when the play­er has his life in 500, the bar will be 100% full.

In line 18 we see how to change the ori­en­ta­tion of the indi­ca­tor bar, in the next line how to change the vari­able "reverse" that mod­i­fied the fill­ing direction.

Line 20 is not a set­up instruc­tion but the instruc­tion to use the indi­ca­tor bar, this we see in the next step.

Step 4: Using the health bar.

To write a val­ue in the life bar we use the ref­er­ence we define and call the func­tion "Set­Val­ue", pass­ing as a para­me­ter the val­ue we want to indi­cate. We can see exam­ples of this in line 20 of Fig­ure 7 and lines 32 and 40 of Fig­ure 8.

This func­tion can be called when an event occurs that changes the val­ue, for exam­ple when the play­er receives dam­age, at that time we refresh the val­ue of the indi­ca­tor bar. The val­ue can also be con­stant­ly updat­ed. Depend­ing on how our game works.