Unity UGUI 实现简单的环形体力条

前言

昨晚给游戏加入了奔跑功能，于是就想着能不能实现一个奔跑时会消耗体力的体力系统，并且使用能够跟随人物的环形体力条来显示当前体力。

效果预览

这里为了方便演示调了参数加速体力消耗和回复速度。

实现步骤

1. 修改角色控制脚本

首先需要定义三个新的变量，分别是加速时的速度、是否正在加速和是否处于疲劳状态。

    public float boostSpeed = 6F; // 加速时的速度
    private bool isBoosting = false;                                  
    private bool isFatigue = false;

然后在 void Update () 中添加按键处理和速度的调整，当检测到长按键盘 LeftShift 键或者手柄 B 键时改变 isBoosting 的值。

float currentSpeed = !isFatigue && isBoosting ? boostSpeed : speed;  

moveInput = new Vector3(input.x * currentSpeed, rigidbody.velocity.y, input.y * currentSpeed);  

// 检查长按Shift键或手柄B键来加速
isBoosting = Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.JoystickButton1);

最后添加两个公共函数方便外部调用。

    public bool GetIsBoosting()
    {
        return isBoosting;
    }

    public void SetIsFatigue(bool fatigue)
    {
        isFatigue = fatigue;
    }

2. 创建体力系统脚本

这个脚本比较简单，这里就不做解释了。

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

public class StaminaSystem : MonoBehaviour
{
    public float maxStamina = 100f;
    public float staminaDrainRate = 5f;
    public float staminaRecoveryRate = 2f;

    private float currentStamina;
    private PlayerMovement movementController; // 移动脚本的引用
    public GameObject StaminaBar;

    void Start()
    {
        currentStamina = maxStamina;
        movementController = GetComponent<PlayerMovement>(); // 获取移动脚本的引用
    }

    void Update()
    {
        if (movementController.GetIsBoosting() && currentStamina > 0)
        {
            currentStamina -= staminaDrainRate * Time.deltaTime;
            if (currentStamina < 0)
            {
                currentStamina = 0;
            }
        }
        else if (!movementController.GetIsBoosting() && currentStamina < maxStamina)
        {
            currentStamina += staminaRecoveryRate * Time.deltaTime;
            if (currentStamina > maxStamina)
            {
                currentStamina = maxStamina;
            }
        }
        movementController.SetIsFatigue(currentStamina==0);
        StaminaBar.SetActive(currentStamina!=maxStamina);
    }

    public float GetCurrentStamina()
    {
        return currentStamina;
    }
    public float GetCurrentStaminaPercentage()
    {
        return currentStamina / maxStamina;
    }
}

3. 创建环形体力条

这里我使用 UGUI 来制作体力环，首先需要绘制体力环的素材，分别是一个底环和一个用于切割的顶环。

将它们以 Sprite 的形式导入 Unity 后，在人物下创建一个 UGUI 画布，选择图像类型。将底环拖入到刚刚创建的 Image 组件的源图像字段上。

然后再在刚刚创建的对象中再创建一个图像，将顶环拖入到这个 Image 组件的源图像字段上，并按下图调整一下参数。

全部设置完成后可以手动顶环的填充总数字段，看看体力环进度条是否有变化。

紧接着我们来编写脚本来实现控制体力环变化。

4. 创建体力条脚本

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

public class ShowStamina : MonoBehaviour
{
    public StaminaSystem staminaObject;//要显示体力的游戏对象
    private Image changeColor;
    private float staminaPercentage;

    private void Start()
    {
        changeColor = this.GetComponent<Image>();
    }

    private void Update()
    {
        staminaPercentage = staminaObject.GetCurrentStaminaPercentage();

        changeColor.fillAmount = staminaPercentage;
        Color color;

        // 根据体力值百分比确定颜色区间
        if (staminaPercentage > 0.66f)
        {
            // 绿色到黄色
            color = Color.Lerp(Color.yellow, Color.green, (staminaPercentage - 0.66f) / 0.34f);
        }
        else if (staminaPercentage > 0.33f)
        {
            // 黄色到红色
            color = Color.Lerp(Color.red, Color.yellow, (staminaPercentage - 0.33f) / 0.34f);
        }
        else
        {
            // 红色
            color = Color.red;
        }

        // 应用颜色到UI元素
        if (changeColor)
        {
            changeColor.color = color;
        }
    }
}

5. 最后一步

将刚刚创建的体力系统脚本挂载在人物身上，并设置 StaminaBar 字段为刚刚创建的 UGUI 画布或者底环。

将刚刚创建的体力环控制脚本挂载在顶环上，并设置 StaminaObject 字段为刚刚创建的体力系统脚本。

柚子/Unity UGUI 实现简单的环形体力条

前言