【Unity2D 2022：UI】制作角色血条

一、创建血底UI

1. 创建画布（Canvas）

    ![](https://i-blog.csdnimg.cn/direct/a180551457bd48e4bf69608b82cd1183.png)
   

2. 在画布上添加血底图像（Image）子物体

二、编辑血底UI

1. 将血底图片拖入源图像（Source Image）中

1. 点击设置为图片的原大小（Set Native Size）

1. 调整血底的缩放比例和位置，使其位于画布的左上角

1. 将血底UI的锚点设置到左上角

三、创建角色头像UI

1. 在血底上添加角色头像子物体

四、编辑角色头像UI

1. 将角色头像图片拖入源图像（Source Image）中

1. 点击设置为图片的原大小（Set Native Size）

1. 调整角色头像的缩放比例和位置，使其位于血底的圆圈中心

1. 将角色头像UI的锚点设置在头像的四个角（适应父对象的拉伸缩放）

五、创建血条UI

1. 在血底上添加血条子物体

六、编辑血条UI

1. 将血条图片拖入源图像（Source Image）中

1. 点击设置为图片的原大小（Set Native Size）

1. 调整血条的缩放比例和位置，使其覆盖血底

1. 将血条UI的锚点设置在血条的四个角（适应父对象的拉伸缩放）

1. 在血底上添加遮罩图像（Image）子物体

    遮罩原理：与遮罩重叠的部分显示，不重叠的部分隐藏
   

1. 调整遮罩的缩放比例和位置，使其覆盖血底

1. 将遮罩的锚点设置在遮罩的四个角（适应父对象的拉伸缩放）

1. 为遮罩添加Mask组件

1. 可以取消勾选显示遮罩图形（Show Mask Graphic）

1. 将血条拖拽到遮罩上，作为遮罩的子物体；将遮罩移动到角色头像上方，先渲染血条，再渲染角色头像

1. 再次将血条的锚点设置为遮罩左侧

1. 将遮罩设置为轴心模式

1. 将遮罩的轴心点设置为左侧

七、在角色生命值改变时缩放血条

1. 新建血条脚本

1. 编辑血条脚本

     （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;
    }
}

1. 编写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);
    }
}

1. 编辑角色脚本

    （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);
        }
    }
}

1. 最终效果如下图所示：

    本章完。感谢阅读！