Unity笔记 实现血条缓冲

       游戏中如果只设置红色会显得很生硬。 一般来说游戏中的血条不仅有红色的血条，还有一段缓冲血条用于显示血量的变化。

 1.制作血条

步骤一

        用ps或者其他画图软件绘制血条的三层，分别为空血条（灰）、缓冲血条（白）、血条（红）。

      

制作好之后将图片拖入Unity资源视图（Project）。

步骤二

        选择图片，在检查视图（Inspector）中将图片的TextureType属性改成Sprite（2D and UI）。

 

步骤三

        创建UI组件Image改变到合适的尺寸复制三份，上面要装载三种血条，分别命名为Empty、Delay、Hp（这里随便，看得懂就行）。将上一步得到的资源对应放到image组件的源图片（SourceImage）中。

步骤四

选择image组件中的图片类型（ImageType）选择填充（filled），填充方法（FillMethod）选择水平（Horizontal）

 Fill Origin是填充起始位置，左边或者右边（一般选左边）。Fill Amount为填充比例，拖动这个数值可以改变填充的比例达到显示血量改变的效果

 步骤五

        最后还要将Canvas中的渲染模式（RenderMode）改成世界空间（WorldSpace），否则血条只能在UI面板上出现不会跟着怪物移动。

 

 

2.制作缓冲效果

         通过上面的过程我们知道血条的显示只跟Fill Amount的大小有关，而FillAmount又和血量一一对应即FillAmount = 血量/总血量。所以我们需要记录四个变量，当前血量，缓冲血量，当前血条（A.FillAmount）和缓冲血条（B.FillAmount），后两者分别由前两者通过上面的公式决定。

        新建脚本HealthBar挂载到绑定的怪物身上，将上面命名的Hp和Delay拖到脚本的对应位置

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

float maxHp = 100;
float currentHp;//当前血量
float delayHp;//缓冲血量

public Image currentHpImage;//当前血条
public Image delayHpImage;//缓冲血条

float delayTime;//缓冲时间

float atk;
Coroutine updateHealth;

void Start()
    {    //初始化血条
        currentHp = maxHp;
        delayHp = maxHp;
        currentHpImage.fillAmount = currentHp / maxHp;
        delayHpImage.fillAmount = delayHp / maxHp;
        currentHp = Mathf.Clamp(currentHp, 0f, maxHp);//设置血量的范围在(0, maxHp);
    }

private void OnTriggerEnter(Collider other)
    {
        delayHp = currentHp;//更新缓冲血量
        currentHp -= atk;//怪物受到伤害，更新当前血量
        SetHealth();//执行血条变化
    }

我们实际的血条变化是通过协程函数实现的，这里为了保证同一时间只有一个协程函数在运行，我们使用SetHealth（），代码如下

void SetHealth()
    {
        if (updateHealth != null)
        {
            StopCoroutine(updateHealth);
        }
        updateHealth = StartCoroutine(UpdateEffectImage());
    }

意思就是当我调用SetHealth时如果存在协程，那么就停止它，开始新的协程。

        接下来时UpdateEffectImage()的代码

IEnumerator UpdateEffectImage()
    {
        currentHpImage.fillAmount = currentHp / maxHp;
        float lenth = (delayHp - currentHp) / maxHp;
        while ((delayHpImage.fillAmount-currentHpImage.fillAmount) > 0)
        {
            delayHpImage.fillAmount -= 0.01f * lenth / delayTime;
            yield return new WaitForSeconds(0.01f);
        }
    }

 首先记录本次的缓冲长度 = 缓冲血条 - 当前血条，然后每0.01s更新缓冲血条，我们要在缓冲时间内完成缓冲（即缓冲血条和当前血条重合），那么每次更新需要跟新多少长度，这是一个很简单的路程问题正如代码里所示。

        完成以上代码，我们就可以看到每当怪物受到攻击时，红色血条瞬间减少同时白色血条连续的变化到红色血条实现缓冲效果。