?視頻教程：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

效果如下圖所示：

首先在場(chǎng)景中創(chuàng)建一個(gè)新的Canvas，并命名為HeathBar，并創(chuàng)建三個(gè)Image作為前者的子物體，分別命名為bg（空血條背景），Effect（呈現(xiàn)“掉血”時(shí)的緩沖效果），HP（顯示血量）?。并按前文中描述的順序依次將后者置于前者下方；如下圖所示

?

三者的層次應(yīng)當(dāng)如下圖所示（使用3D視圖只是為更好說(shuō)明，實(shí)際項(xiàng)目還是2D）：

?

其次分別將相應(yīng)的素材賦給HeathBar下的bg，Effect，HP的Image組件并對(duì)其進(jìn)行如下設(shè)置：

對(duì)于bg的Image組件，勾選Preserve Aspect以圖片的原始長(zhǎng)款比例

對(duì)于Effect和HP的Image組件，需將Image Type設(shè)置為Filled，并將隨后出現(xiàn)的Fill Method設(shè)置為Horizontal，同時(shí)將Fill Origin設(shè)置為Fill，最后勾選Preserve Aspect

?

Image Type中的Filled?

Filled，即填充，可用于呈現(xiàn)技能冷卻或血條等填充動(dòng)畫效果

Fill Method：設(shè)置填充的類型；上文中設(shè)置的Horizontal，即水平填充

Fill Origin：設(shè)置開始填充的起始點(diǎn)（當(dāng)Fill Amount=0時(shí)，則處于起始點(diǎn)），根據(jù)Fill Method的不同，有不同的選項(xiàng)；以Fill Method中的Horizontal為例，Left這表示從左向右填充（Fill Amount由0值1），對(duì)應(yīng)的，Left這表示從右向左填充（Fill Amount由0值1））

ps：在該案例中，F(xiàn)ill Amount=現(xiàn)有的血量/總血量；初始時(shí)，為滿血，故Fill Amount的值應(yīng)被初始化為1，當(dāng)收到傷害時(shí)，現(xiàn)有的血量下降導(dǎo)致Fill Amout，血條（子物體HP）從右向左減少（當(dāng)Fill Amount=0時(shí)回到處于左方Left的起始點(diǎn)），故Fill Origin應(yīng)設(shè)置為L(zhǎng)eft

最后創(chuàng)建腳本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; //現(xiàn)有的血量
    [SerializeField]private float maxHp; //最大血量
    [SerializeField]private float buffSpeed=0.005f; //緩沖程度

    private void Start() {
        hp=maxHp; //初始時(shí)，為滿血
    }

    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：通過(guò)改變的值實(shí)現(xiàn)血條的動(dòng)態(tài)變化?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-431598.html

到了這里，關(guān)于Unity 血條及“掉血”緩沖效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！