Unity 血条及“掉血”缓冲效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了Unity 血条及“掉血”缓冲效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

视频教程：https://www.bilibili.com/video/BV1WJ411778C/?spm_id_from=333.999.0.0&vd_source=4a4c35da6aef7094d5990c213c39aa09

使用素材（推荐使用GitZip for github下载）：https://github.com/zheyuanzhou/Youtube-Unity-Tutorial/tree/master/EP45_Health%20Bar/Sprites

效果如下图所示：

Unity 血条及“掉血”缓冲效果

首先在场景中创建一个新的Canvas，并命名为HeathBar，并创建三个Image作为前者的子物体，分别命名为bg（空血条背景），Effect（呈现“掉血”时的缓冲效果），HP（显示血量）。并按前文中描述的顺序依次将后者置于前者下方；如下图所示

Unity 血条及“掉血”缓冲效果

三者的层次应当如下图所示（使用3D视图只是为更好说明，实际项目还是2D）：

Unity 血条及“掉血”缓冲效果

其次分别将相应的素材赋给HeathBar下的bg，Effect，HP的Image组件并对其进行如下设置：

对于bg的Image组件，勾选Preserve Aspect以图片的原始长款比例

Unity 血条及“掉血”缓冲效果

对于Effect和HP的Image组件，需将Image Type设置为Filled，并将随后出现的Fill Method设置为Horizontal，同时将Fill Origin设置为Fill，最后勾选Preserve Aspect

Unity 血条及“掉血”缓冲效果

Image Type中的Filled

Filled，即填充，可用于呈现技能冷却或血条等填充动画效果

Fill Method：设置填充的类型；上文中设置的Horizontal，即水平填充

Fill Origin：设置开始填充的起始点（当Fill Amount=0时，则处于起始点），根据Fill Method的不同，有不同的选项；以Fill Method中的Horizontal为例，Left这表示从左向右填充（Fill Amount由0值1），对应的，Left这表示从右向左填充（Fill Amount由0值1））

ps：在该案例中，Fill Amount=现有的血量/总血量；初始时，为满血，故Fill Amount的值应被初始化为1，当收到伤害时，现有的血量下降导致Fill Amout，血条（子物体HP）从右向左减少（当Fill Amount=0时回到处于左方Left的起始点），故Fill Origin应设置为Left

最后创建脚本HeathBar.cs，并编写代码

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：通过改变的值实现血条的动态变化文章来源地址https://www.toymoban.com/news/detail-431598.html

到了这里，关于Unity 血条及“掉血”缓冲效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！