【Unity】玩家血条控制方案

Unity中Image组件

Image

链接: 传送门（Image组件Unity官方文档）

Image组件是一个UI组件在Unity中是一个非常常用的组件，包括咱们平常玩游戏的的背包，血条，游戏菜单，如果是基于Unity游戏引擎开发的都必须用到这个组件，这个组件最基础的用法就是显示一个图片在UI界面上，这是这个组件的基本结构：

Source Image ：这个的功能就是存放图片，如果你拖放了一张图片上去那么在Game和Scene窗口中你都可以看到这个图片
Color：这个就是为你的图片调颜色
Material材质，这个就是为你的图片增加预设好的材质如果学习过Unity3D的朋友应该知道这是什么

剩下功能我就不一一介绍了给大家介绍一下比较基本的部分

Filled模式

在Unity中Image有许多的Type模式可供你选择，选择方式如上图所示
ImageType --> Filled

Filled模式主要用来制作进度条，血条，加载条等动态变化的UI界面，是一个非常常用的模式

在第二行的Fill Method中就如字面意思说所意味这填充方法，
包括但不限于横向填充，纵向填充，旋转填充等等（此篇文章用于解释横向填充）

这个填充主要看个人需要，如果你做的血条是那种星露谷的纵向血条那么我推荐你选择Vertical，如果你想做那种旋转式血条我推荐你选择360的模式

制作教程

编辑器操作

接下来正式开始教程，我想要实现的效果类似于当血条减少后会有一个缓冲条，那么我们就要设置两个条外加一个背景图片

步骤一：创建组件

1.在UI界面下创建一个Canvas
-----------创建方法：鼠标右键 UI-> Canvas

2.在Canvas下创建子物体 PlayerUI
-----------创建方法：鼠标右键Create Empty

3.在PlayerUI下创建子物体 HealthyBar
-----------创建方法：鼠标右键Create Empty

4.在HealthyBar下创建子物体Bg，Effect，HP（名字可以自己取）
-----------创建方法：鼠标右键UI->Image (三次)
就像这样

小心得：这里我创建了一个场景单独存放UI方便后期一起管理，这是一个很好的开发方式建议大家也都采用这种开发方式很整洁美观自己代码敲起来也爽

步骤二： 设置组件

在三个图片组件上设置你所想要的图片这里，并且设置你所需要的属性，这里我直接给出我的方案：
Bg：BackGround，血条的背景图片，他是静态不变的我就给他设置成了Simple

Effect：这个是跟随血条移动的缓冲条实现类似血条缓冲的效果是动态的，我便给他设置成了适合的Filled

HP：这个就是血条了效果是动态的，我便给他设置成了适合的Filled

到此我们就创建好了所有的组件设置了，接下来就让我进入代码阶段把。

代码

首先我们要实现这个功能那我们就要在脚本上拿到关于这个的Image组件，接下来我需要的是那么显而易见我们的第一步就是拿到组件：

	[Header("图片组件")]
    [SerializeField] [Tooltip("背景")] private Image bg;
    [SerializeField] [Tooltip("Effect")] private Image effect;
    [SerializeField] [Tooltip("HP")] private Image hp;
    
    [Header("属性")]
    [SerializeField] [Tooltip("缓冲效果程度")] private float buff;
    [SerializeField] [Tooltip("玩家当前血量")] public float currentHp;
    [SerializeField] [Tooltip("最大血量")] public float maxHp;

接下来我们返回Unity
先把这个脚本挂在HealthyBar上
再为这些组件赋值（直接拖拽就行）

那么接下来我们就在Update里面实时监控血条的变化，一旦我们的CurrentHP有所变化就立刻马上做出变化
UI更新协程
UpdateUI():

设置实际血条(hp)的填充量为当前血量比例

如果特效血条(effect)比实际血条多，则缓慢减少特效血条(缓冲效果)

如果特效血条比实际血条少，则直接对齐(快速恢复情况)

-------------这里如果不了解协程的话最好先去了解一下协程----------------

	private void Start()
    {
        currentHp = maxHp;
    }
    private void Update()
    {
        StartCoroutine(UpdatePlayerHealthyUI());
    }
    
    private IEnumerator UpdatePlayerHealthyUI()
    {
        hp.fillAmount = currentHp / maxHp;
        while (effect.fillAmount > hp.fillAmount)
        {
            effect.fillAmount -= buff;
            yield return new WaitForSeconds(0.5f); // 等待0.5秒
        }
        if (effect.fillAmount < hp.fillAmount)
        {
            effect.fillAmount = hp.fillAmount;
        }
    }

接下来就是直接减少或者增加这个组件的currentHp这个看自己项目的具体情况

我给出的方案是使用事件呼叫的方式，一旦呼叫这个事件那么直接减少血量并播放动画

	private void OnEnable()
    {
        EventHandler.AddHealthyUI += OnHealthyUIAdd;
        EventHandler.DeleteHealthyUI += OnHealthyUIDelete;
    }
    private void OnDisable()
    {
        EventHandler.AddHealthyUI -= OnHealthyUIAdd;
        EventHandler.DeleteHealthyUI -= OnHealthyUIDelete;
    }

    private void OnHealthyUIAdd(float addHealthyValue)
    {
        
        currentHp += addHealthyValue;
        if (currentHp > maxHp) currentHp = maxHp;
    }
    private void OnHealthyUIDelete(float deleteHealthyValue)
    {
        currentHp -= deleteHealthyValue;
    }

这里我在网上学习了一种EventHandler来管理所有事件的变成模式推荐大家学习

using System;
using UnityEngine;

public class EventHandler
{
    public static event Action<float> AddHealthyUI;
    public static void CallAddHealthyUI(float attack_healthy)
    {
        AddHealthyUI?.Invoke(attack_healthy);
    }
    public static event Action<float> DeleteHealthyUI;
    public static void CallDeleteHealthyUI(float beattack_healthy)
    {
        DeleteHealthyUI?.Invoke(beattack_healthy);
    }
}

结束

效果展示

感谢大家看我的文章，希望大家多多支持我！！！