Unity health bar and "blood loss" buffer effect

 Video tutorial: https://www.bilibili.com/video/BV1WJ411778C/?spm_id_from=333.999.0.0&vd_source=4a4c35da6aef7094d5990c213c39aa09

Materials to be used (GitZip for github is recommended to download): https://github.com/zheyuanzhou/Youtube-Unity-Tutorial/tree/master/EP45_Health%20Bar/Sprites

Results as shown below:

First create a new Canvas in the scene, and name it HeathBar, and create three Images as the sub-objects of the former, named bg (empty blood bar background), Effect (buffer effect when showing "blood drop"), HP (display blood volume). And place the latter under the former one by one in the order described above; as shown in the figure below

 

The levels of the three should be as shown in the figure below (the 3D view is only used for better illustration, the actual project is still 2D):

 

Secondly, assign the corresponding materials to the bg, Effect, and HP Image components under HeathBar and set them as follows:

For the Image component of bg, check Preserve Aspect to use the original length ratio of the image

For the Image components of Effect and HP, you need to set the Image Type to Filled, and then set the Fill Method to Horizontal, and set the Fill Origin to Fill, and finally check the Preserve Aspect

 

Filled in Image Type 

Filled, that is, filling, can be used to present filling animation effects such as skill cooling or blood bars

Fill Method: Set the type of filling; Horizontal set above, that is, horizontal filling

Fill Origin: Set the starting point for filling (when Fill Amount=0, it is at the starting point). There are different options depending on the Fill Method; take Horizontal in Fill Method as an example, Left means from left to right Filling (Fill Amount is 1 by 0), correspondingly, Left means filling from right to left (Fill Amount is 1 by 0))

ps: In this case, Fill Amount=existing blood volume/total blood volume; initially, it is full blood, so the value of Fill Amount should be initialized to 1, and when receiving damage, the existing blood volume will drop As a result of Fill Amout, the blood bar (sub-object HP) decreases from right to left (when Fill Amount=0, it returns to the starting point on the left Left), so Fill Origin should be set to Left

Finally create the script HeathBar.cs and write the code

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UnityEngine.UI;

public class HeathBar : MonoBehaviour
{
    public Image hpImg; 
    public Image hpEffectImg;

    [HideInInspector]public float hp; //现有的血量
    [SerializeField]private float maxHp; //最大血量
    [SerializeField]private float buffSpeed=0.005f; //缓冲程度

    private void Start() {
        hp=maxHp; //初始时，为满血
    }

    private void Update() {
        StartCoroutine(UpdateHp());
    }

    IEnumerator UpdateHp()
    {
        hpImg.fillAmount = hp / maxHp; //使用fillAmount更新Fill Amount的值，
        
        while(hpEffectImg.fillAmount >= hpImg.fillAmount){
            hpEffectImg.fillAmount -= buffSpeed;
            yield return new WaitForSeconds(.5f);
        }

        if(hpEffectImg.fillAmount < hpImg.fillAmount){
            hpEffectImg.fillAmount = hpImg.fillAmount;
        }
    }
}

ImageObject.fillAmount : Realize the dynamic change of the blood bar by changing the value