3-16 Using Image Fill In UI

本章要來換新的血量條跟能量條，首先請大家下載課程提供的資源：
https://drive.google.com/open?id=19sRHGcs9jCtMXKW6HfL-uwhOBMpsCXEa

下載後請將資源拉入Unity中，如下圖有七個圖檔。

將七個圖檔的Texture Type設定為Sprite(2D and UI)。

接下來，將舊的血量條跟能量條都刪掉吧。

在Game Canvas的Inspector視窗中，將Additional Shader Channels改為Nothing。

UI Scale Mode改成Scale With Screen Size。

並將接著出現的Reference Resolution設為1920x1080。

選擇GameObject/UI/Image新增圖片物件。

該Image取名為HUD，Source Image選擇HUD Orbs and Slots，再按下Set Native Size。

然後將HUD拉到螢幕的下方並對齊中央，如下圖。

再來依上面相同的步驟新增Image，取名為Black background left，Source Image選擇Black Orb，再按下Set Native Size。

將Black background left放到透明圓框的下方，當作血量條的底圖，如果大家發現Black background left會蓋住HUD是不對的，請在Hierarchy中將Black background left移動到HUD的上方，黑色底圖就會在HUD下面。

另外一邊也自行複製一個底圖，取名為Black background right。

接著，選取這兩個Image後按右鍵選擇Duplicate。

更名為Health Orb跟Energy Orb。

在Health Orb中設定Source Image為Red Orb，並放到正確的位置。

能量條的部分也請自行調整，使用Green Orb。

於Health Orb的Image Type中選擇Filled。

這時下方會跳出一些選項，大家可以試著調整看看Fill Amount參數。

調整以後，就會發現血量條的圖片出現變化，不過這不是我們要的效果。

Fill Method選擇Vertical，此時再調整Fill Amount後就能發現血量條會上下變化了。

接著我們要修改一點點程式碼。
PlayerHealthBar.cs：

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

namespace RPG.Character{
 [RequireComponent(typeof(Image))]
 public class PlayerHealthBar : MonoBehaviour
 {

  Image healthOrb;
     Player player;

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

     // Update is called once per frame
     void Update()
     {
   healthOrb.fillAmount = player.healthAsPercentage;
     }
 }
}

Energy.cs：

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

namespace RPG.Character{
 public class Energy : MonoBehaviour {

  [SerializeField] Image energyOrb;
  [SerializeField] float maxEnergyPoints = 100f;
  [SerializeField] float regenPointPerSecond = 1f;

  float currentEnergyPoints;

  void Start () {
   currentEnergyPoints = maxEnergyPoints;
  }

  void Update(){
   if (currentEnergyPoints < maxEnergyPoints) {
    AddEnergyPoint ();
    UpdateEnergyBar ();
   }
  }

  private void AddEnergyPoint(){
   // 每秒自動恢復能量，由於Update是每個Frame都會執行，故須使用deltaTime取得Frame的間隔時間
   float pointsToAdd = regenPointPerSecond * Time.deltaTime;
   currentEnergyPoints = Mathf.Clamp (currentEnergyPoints + pointsToAdd, 0, maxEnergyPoints);
  }

  public bool IsEnergyAvailable(float amount){
   return amount <= currentEnergyPoints;
  }

  // 消耗的魔力由SpecialAbilityConfig決定，傳到amount
  public void ConsumeEnergy(float amount){
   float newEnergyPoint = currentEnergyPoints - amount;
   currentEnergyPoints = Mathf.Clamp (newEnergyPoint, 0, maxEnergyPoints);
   UpdateEnergyBar ();
  }

  void UpdateEnergyBar(){
   energyOrb.fillAmount = EnergyAsPersent ();
  }

  float EnergyAsPersent(){
   return currentEnergyPoints / maxEnergyPoints;
  }
 }
}

在Player的Inspector視窗中，可見Energy的Energy Orb要指定新的資源，請選擇Energy Orb。

另外，血量條的部分則是將PlayerHealthBar.cs拉進Red Orb。血量條跟能量條的使用方式有兩種，很不方便對吧？以後重構的時候會再改進。

試著玩看看吧！看起來血量條跟能量條都能正常運作，畫面也好看多了！