2-2 Player Health Bar UI

首先下載課程提供的Health Bar Package v.1.unitypackage。
https://drive.google.com/open?id=1iQnybVslktyLu3oQrv_rFPzFshExYVMP

然後依照下列操作引入相關資源：

 成功引入後，便能在Camera & UI的資料夾底下看見下列四個檔案，包含一個prefab物件，兩個血條圖樣的psd，還有一個控制血量的script。

大家可以看見這個血條的圖檔是綠色跟紅色各一半，我們在遊戲中會控制這個圖檔僅顯示一半，滿血的時候顯示綠色那一半。角色開始損血時，會將顯示的部分慢慢往紅色端移動，最終角色沒有血量即顯示紅色那一半。

但此時，console應該會提示你程式有Bug，Bug發生的原因是找不到Player物件，我們的確直到目前還沒有新增Player。我們首先新增一個C# script名叫Player。

我們會在這個Player程式中定義人物目前血量、人物滿血量及人物血量的比例。

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

public class Player : MonoBehaviour {

 [SerializeField] float maxHealthPoints = 100f;

 float currentHealthPoint = 100f;

 public float healthAsPercentage{
  get{ return currentHealthPoint / maxHealthPoints; }
 }
}

定義好之後，我們將Player程式拖曳到我們的Player prefab中。然後，將Game Canvas的prefab物件拖曳到場景中。

 在Unity中，Game UI會顯示特別大的模樣，所以請自己調整視窗直到看到UI的模樣。實際開始跑遊戲場景後，就會對應到正常的位置了。

接下來，我們點擊Health Bar，來調整一下Raw Image的UV Rect屬性，UV是一個材質的屬性，大家可以調整看看各個不同屬性後，Health Bar會發生什麼事。不過，我就只示範調整x value，調整到-1以後會發現血條是滿綠色的。

再來調整到-0.5會發現血條變成滿紅色的。

所以說，在-1~-0.5之間的範圍，可以控制這個血條的進度模樣。

再來看看程式碼如何操作血條進度，註解也都寫在程式碼上面嘍！

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

[RequireComponent(typeof(RawImage))]
public class PlayerHealthBar : MonoBehaviour
{

    RawImage healthBarRawImage;
    Player player;

    // Use this for initialization
    void Start()
    {
        player = FindObjectOfType();
        healthBarRawImage = GetComponent();
    }

    // Update is called once per frame
    void Update()
    {
        //x值的範圍落在-1~-0.5之間，-1滿血，-0.5沒血
        //假設角色為半血，healthAsPercentage為0.5，除以2=0.25，-0.25-0.5=-0.75
        //便能控制血條的模樣為一半血量的樣子，以此類推
        float xValue = -(player.healthAsPercentage / 2f) - 0.5f;
        healthBarRawImage.uvRect = new Rect(xValue, 0f, 0.5f, 1f);
    }
}

運行遊戲以後，就會看見血條了。