1 血條素材處理
分割處理：對上一章畫出來的血條圖片做分割處理
- 整理素材格式：
- Sprite Mode選擇Multiple：因爲一張圖片包含多個素材。
- Pixels Per Unit單位像素爲16：與之前遊戲的素材統一。
- Filter Mode選擇爲像素：因爲素材是像素類型的。
- 分割素材：點擊上圖裏面的Sprite Editor，選擇自動切割素材，再通過拖動切割選區來調整，最後記得Apply。
- 效果
2 UI顯示血條
效果：在敵人的頭頂上顯示血條。
UI顯示血條：
- 在敵人下面新建一個Canvas畫布。
- 設置Canvas的參數。
- 位置X Y Z全部設置爲0：爲了讓Canvas中心位置在Crab（敵人）上，方便後面拖動血條到敵人的頭上。
- Render Mode設置爲World Space：選爲World Space可以不用對應屏幕，會被作爲一個3D物體來處理。（最後會補充RenderMode三種模式的介紹）
- Event Camera添加爲主攝像機Main Camera。
- Sorting Layer選擇到Player：渲染層級和遊戲角色在同一層。
- 在Canvas下新建兩個Image，分別改名叫WhiteHp、RedHp，用來放兩個血條圖片。
- 給WhiteHp和RedHp添加上之前切割好的圖片，設置好參數。
- Image Type設置爲Filled：因爲希望通過Fill Amount來控制血條佔百分比，以此來控制血條變動顯示。
- Fill Method設置爲Horizontal：百分比控制方向是縱向的。
- 拖動血條到敵人的頭上，並重疊WhiteHp和RedHp，RedHp在WhiteHp的上面。
3 代碼控制血條
給在Crab下面新建的Canvas畫布添加一個script腳本。
代碼思路：通過控制紅色血條的Fill Amount控制血條佔百分比，來修改血條在UI上的顯示。
HP代碼：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class HpController : MonoBehaviour {
private Image hpImage;
private float hpMax=100f;//最大血量
void Start () {
hpImage = GameObject.Find("RedHp").GetComponent<Image>();//獲取ui對於的text
}
public void HpChange(float newHp)
{
hpImage.fillAmount = newHp / hpMax;
}
}
然後在敵人受傷時調用HpController裏面的HpChange函數就行了。
4 效果
5 補充Canvas中Render Mode的三種模式介紹
三種模式：Screen Space-Overlay、Screen Space-Camera和World Space。
- Screen Space-Overlay：Canvas作爲2D圖像，永遠處於屏幕的最前方，即使沒有相機也能夠看到內容。如果畫布發生大小改變，也能夠自動改變尺寸來匹配屏幕。
- Screen Space-Camera：可以指定攝像機，和Screen Space-Overlay類似，但是有物體比Canvas更加接近攝像機時會顯示在前面，反之則會被Canvas遮擋。
- World Space：可以指定攝像機，把Canvas視爲一個3D物體來處理，可以設置位置和大小。