本文章用於記錄Unity的學習過程，如有疑問，歡迎交流。

1.血條的顯示
在Unity場景中建立空物體，然後新建兩個Image（圖片），當然只用一個也行，一個作為填充來顯示血量，一個作為血條的外框。

然後在Unit上新增Slider元件
並將Transition和Navigation均設為None

將Fill(血條背景)拖拽到 Fill Rect

之後應該這樣

之後就可以通過下方的Value 來控制填充的顯示


可以將Fill設定為紅色

也可適當新增UI

可以通過設定Slider 的最大值和最小值(一般都是0)，來直接以整數來顯示血條，可以避免區間在0-1是以小數比例來顯示血條，

避免了不必要的麻煩和計算

選中Whole Number後，可以將Value限制為整數

2.指令碼
要實現血條，從面向物件角度來說只至少需要兩個指令碼，控制血條顯示的指令碼和單位的血量等基本資訊的類
新建指令碼HealthBar

血條指令碼的作用僅僅是顯示和更新血量

public class HealthBar : MonoBehaviour
{
    public Slider slider;			
    public void SetMaxHeath(int health)		//設定最大血量
    {
        slider.maxValue = health;
        slider.value = health;
    }
    public void SetHealth(int health)		//重新整理血量
    {
        slider.value = health;
    }
}
 

然後是單位指令碼Unit(類)

目前該單位只包含血量相關資訊

public class Unit : MonoBehaviour
{
    public int maxHealth = 100;		//最大血量
    public int currentHealth;		//當前血量

    public HealthBar healthBar;		//宣告一個HealthBar類
    
    private void Start()
    {
        currentHealth = maxHealth;	//初始化血量
        healthBar.SetMaxHeath(maxHealth);	//重新整理血量顯示
    }
    private void Update()
    {
        if (Input.GetKey(KeyCode.Space))	
        {
            TakeDamage(20);
        }
    }
    private void TakeDamage(int damage)		//受傷方法
    {
        if (currentHealth >= damage && currentHealth > 0)
        {
            currentHealth -= damage;
        }
        healthBar.SetHealth(currentHealth);	//重新整理血量顯示
    }
}
 

然後將對應的血條搭載到Unit上

執行後每按一次空格血量便會減少20

3.血條顏色漸變
若想實現血量充足時為綠色，中等為黃色，少量為紅色

可以使用 Gradient 類，該類能夠動態控制顏色
在HealthBar指令碼中宣告一個Gradient

//public class HealthBar : MonoBehaviour
//{
   // public Slider slider;
    public Gradient gradient;

    //public void SetMaxHeath(int health)
    //{
        //slider.maxValue = health;
        //slider.value = health;
    //}
    //public void SetHealth(int health)
    //{
        //slider.value = health;
    //}
//}

這樣便能修改顏色漸變

注意：宣告該類僅僅是有一個能夠輸入的資料，改變顏色還需要相應的方法

點選Gradient開啟

這裡存在Blend和Fixed兩種模式


根據喜好選擇即可，這樣設定後血條就會呈現以上漸變效果
然後是程式碼

//public class HealthBar : MonoBehaviour
//{
    //public Slider slider;
    public Gradient gradient;		//宣告Gradient，在Inspector面板可對其賦值
    public Image fill;			   //宣告填充圖形，用於修改所需的填充顏色

    //public void SetMaxHeath(int health)
    //{
        //slider.maxValue = health;
        //slider.value = health;

        fill.color = gradient.Evaluate(1f);		//填充顏色為1f，就是滿血
    //}

    //public void SetHealth(int health)
    //{
        //slider.value = health;

        fill.color = gradient.Evaluate(slider.normalizedValue);//填充顏色為slider的值對映到0-1，就是當前血量百分比
    //}
//}

注意：

gradient.Evaluate(float value)會根據給定的值，來計算對應的顏色

後面value的值限制在 0 — 1 之間，其實就是根據輸入來百分比計算對應顏色

例如剩餘50滴血，總血量100，這裡value就應該為 50/100 為0.5，會返回剩餘百分之50血量時 gradient 中對應的顏色

4.血條的顯示方式
新建一個方塊視為一個單位

4.1顯示在HUD上
無需多餘修改，在Canvas移動位置即可

4.2.顯示在單位上，可以在頭上也可以在腳下
將 HealthBar 所在的畫布（Canvas）的渲染模式修改為World Space

這樣畫布就會成為可移動的物體

同時適當修改Canvas大小

然後將Canvas拖拽到Unit下成為子物體

然後需要讓血條始終面向攝像機

建立指令碼BillBoard

搭載到Canvas上

public class BillBoard : MonoBehaviour
{
    public Transform cam;	//需要朝向的攝像機

    void LateUpdate()
    {
        transform.LookAt(transform.position + cam.forward);
    }
}

這裡採用 LateUpdate() ，若為其它Update()，會在相機運動時同時計算血條位置，會發生抖動

應在計算完攝像機位置之後再計算血條位置