(Unity) character's blood bar, energy bar UI setting, blood deduction change after injury, etc.

foreword

In various game productions, we often have to come into contact with enemies, and at this time, blood bars and energy have become our necessary attributes. It is also the core of the gameplay.

1. Conduct a preliminary analysis of the needs and understand

The character's blood bar is a concrete object that can change after receiving damage or recovery instructions. The change is nothing more than length, so what we need is a picture UI element that can change in length according to the damage ratio after receiving different damage .

2. Use Unity's built-in UI module to create blood bar elements

(1) Through Unity's built-in modules, we can easily build UI elements on the Hierarchy structure interface , use the backhand button of the mouse to select the UI bar , and the Image inside .

Figure 2.1

(2) After it is created, it will be automatically generated under Canvs , and an EventSystem will be generated (this is enough to know that it is a UI control system, and it will not be used for the time being). Figure 2.2 shows its general property interface .

Figure 2.2 

(3) We insert the white strips prepared in advance into its Source Image (you can also directly adjust the color and length of the default image), and create two, because our blood bar changes generally have a white bottom plate at the back , we put The white baseboard is named HealthPoints , and the picture to be changed is set to red and named healMeter . At the same time, it is recommended to set healMeter as a child object of HealthPoints , so that we can easily find it when there are many  UI elements later .

Figure 2.3

(4) Set the picture type of healthMeter to Filled , and Fill Mehod to choose Horizantal (that is, horizontal, there are many other change modes in it, you can try it yourself), adjust the Fill Amount to control the length of the picture , and we will use it later Control its ratio to achieve blood bar changes .

 Figure 2.4

(5) We adjust the position of the blood bar on the entire camera interface , here I put it in the upper right corner . It is worth noting that it has a standard point , the interface changes, and its position coordinates are changed with reference to the set standard point. We set it in the upper right corner as shown in Figure 2.6.

Figure 2.5

Figure 2.6

 (6) Next, we use scripts to control its changes (here is only a simple demonstration)

The first is to import the Unity UI library

using UnityEngine.UI;

Create the existing blood volume and the maximum blood volume externally, a variable that calls the blood bar

public float healthMeter = 80.0f;
public float HealthPoints = 100.0f;  
public Image healthPoint;

Here I create a Harm function and an Amount function. In Harm, the blood volume is deducted by 5 each time you are injured. The Amount controls the length of the healthMeter to update and change in proportion, and it is completed in the same frame.

The fill Amount that directly calls the healthPoint (inserted picture) in Amount is equal to the existing blood volume divided by the maximum blood volume, that is, their ratio.

public void Harm()
    {
        healthMeter += -5;
        Amount();

        Debug.Log("扣血-5");
    }
public void Amount()
    {
        healthPoint.fillAmount = healthMeter / maxHealthPoints;
    }

Finally, we call the above Harm function  in the statement that needs to deduct blood.

Summarize

Hurry up and try it yourself, the code needs to be typed and understood more.