一、創建血底UI

1. 創建畫布（Canvas）

????????

2.? 在畫布上添加血底圖像（Image）子物體

二、編輯血底UI

1. 將血底圖片拖入源圖像（Source Image）中

2.? 點擊設置為圖片的原大小（Set Native Size）

?3. 調整血底的縮放比例和位置，使其位于畫布的左上角

4. 將血底UI的錨點設置到左上角

?

三、創建角色頭像UI

1.? 在血底上添加角色頭像子物體

四、編輯角色頭像UI

1. 將角色頭像圖片拖入源圖像（Source Image）中

2.? 點擊設置為圖片的原大小（Set Native Size）

?3. 調整角色頭像的縮放比例和位置，使其位于血底的圓圈中心

4. 將角色頭像UI的錨點設置在頭像的四個角（適應父對象的拉伸縮放）

五、創建血條UI

1.?在血底上添加血條子物體

六、編輯血條UI?

?1. 將血條圖片拖入源圖像（Source Image）中

2.? 點擊設置為圖片的原大小（Set Native Size）

?3. 調整血條的縮放比例和位置，使其覆蓋血底

4. 將血條UI的錨點設置在血條的四個角（適應父對象的拉伸縮放）

5.?在血底上添加遮罩圖像（Image）子物體

? ? ? ? 遮罩原理：與遮罩重疊的部分顯示，不重疊的部分隱藏

6.?調整遮罩的縮放比例和位置，使其覆蓋血底

7. 將遮罩的錨點設置在遮罩的四個角（適應父對象的拉伸縮放）?

8. 為遮罩添加Mask組件

9. 可以取消勾選顯示遮罩圖形（Show Mask Graphic）

10. 將血條拖拽到遮罩上，作為遮罩的子物體；將遮罩移動到角色頭像上方，先渲染血條，再渲染角色頭像

11. 再次將血條的錨點設置為遮罩左側

12. 將遮罩設置為軸心模式

13. 將遮罩的軸心點設置為左側

七、在角色生命值改變時縮放血條

1. 新建血條腳本

2. 編輯血條腳本

? ? ? ? ?（1）使用UnityEngine的UI命名空間

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 使用Unity的UI庫
using UnityEngine.UI;

? ? ? ? （2）創建遮罩對象，獲取遮罩的初始長度

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 調用Unity的UI庫
using UnityEngine.UI;public class HealthBar : MonoBehaviour
{// 創建遮罩對象public Image mask;// 獲取遮罩的初始長度private float originalSize;void Start(){// 遮罩初始長度為初始時遮罩當前長度originalSize = mask.rectTransform.rect.width;}
}

? ? ? ? （3）使用單例模式，初始化instance為當前血底游戲對象

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 調用Unity的UI庫
using UnityEngine.UI;public class HealthBar : MonoBehaviour
{// 創建遮罩對象public Image mask;// 獲取遮罩的初始長度private float originalSize;// 使用單例模式，創建血條對象public static HealthBar instance {get; private set; }// Awake()方法優先于Start()方法執行private void Awake(){// 將instance實例化為當前的血底游戲對象instance = this;}void Start(){// 遮罩初始長度為初始時遮罩當前長度originalSize = mask.rectTransform.rect.width;}
}

4. 編寫changeLength()方法，用來改變血條長度

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 調用Unity的UI庫
using UnityEngine.UI;public class HealthBar : MonoBehaviour
{// 創建遮罩對象public Image mask;// 獲取遮罩的初始長度private float originalSize;// 使用單例模式，創建血條對象public static HealthBar instance {get; private set; }// Awake()方法優先于Start()方法執行private void Awake(){// 將instance實例化為當前的血底游戲對象instance = this;}void Start(){// 遮罩初始長度為初始時遮罩當前長度originalSize = mask.rectTransform.rect.width;}// 改變遮罩長度public void changeLength(float value){// 將遮罩長度設置為水平方向的初始長度*百分比mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, originalSize*value);}
}

3. 編輯角色腳本

? ? ? ? （1）刪除控制臺的Debug語句，調用changeLength()方法，改變血條長度

using Cinemachine.Utility;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using Unity.Mathematics;
using UnityEditor.Rendering;
using UnityEngine;public class Ruby : MonoBehaviour 
{// Ruby改變生命值public void changeHealthPoint(int value) {healthPoint = Mathf.Clamp(healthPoint+value, 0, maxHealthPoint);// 調用changeLength()方法，改變血條長度HealthBar.instance.changeLength((float)healthPoint/maxHealthPoint);if(healthPoint <= 0) {Destroy(gameObject);}}
}

4. 最終效果如下圖所示：

? ? ? ? 本章完。感謝閱讀！?