unity2022版本实现加减进度条

news2024/10/5 5:31:05

简介

在现代游戏开发中，用户界面 (UI) 扮演着至关重要的角色，它不仅为玩家提供信息，还增强了游戏的可玩性。加减进度条是一种常见的UI元素，它可以用于显示游戏中的进度、倒计时、资源管理和其他关键信息。在这篇博客中，我们将深入探讨游戏开发中加减进度条的实现和使用。

界面节点设置

创建 Canvas 节点容器：首先，建立一个 Canvas 节点容器，命名为 "Bar"。Canvas将作为整个进度条的容器，负责容纳所有相关的元素。
创建背景节点：在 "Bar" Canvas 内创建一个名为 "BgBar" 的节点，用于表示进度条的背景。这个节点将显示进度条的整体背景或底纹。
创建前景颜色节点：接下来，在 "Bar" Canvas 内创建一个名为 "ProBar" 的节点，这将是进度条的前景节点，表示当前的进度。通常，您会根据进度的百分比来动态调整此节点的大小。
创建文本节点：为了在进度条上显示相关文本信息，您可以在 "Bar" Canvas 内创建一个名为 "Txt" 的节点。这个节点可以用于显示进度百分比或其他相关文本内容。
创建加号和减号节点：如果您需要在进度条上添加加号和减号按钮用于调整进度，您可以在 "Bar" Canvas 内分别创建 "加号" 和 "减号" 节点。这些按钮可以与进度条的交互功能相关联。

节点结构示意图

Bar (Canvas节点容器)
  - BgBar (进度条背景节点)
  - ProBar (前景颜色节点)
  - Txt (文字节点)
  - + (加号节点)
  - - (减号节点)

主要思路：

为了实现交互性，我们为加号节点和减号节点添加了点击事件。当用户点击加号节点时，当前进度会增加，同时文本节点内容和前景颜色节点宽度都会相应更新。同样，当用户点击减号节点时，当前进度会减少，文本节点内容和前景颜色节点宽度也会做出相应调整。这些交互功能将帮助用户轻松控制进度条，并提供了一种直观的方式来与游戏或应用互动

完整代码如下

using UnityEngine;
using UnityEngine.UI;
using TMPro;

namespace HHSJ
{
    public class Bar : MonoBehaviour
    {
        [HideInInspector] public float now = 0;  // 当前进度
        [HideInInspector] public float all = 0;  // 总进度

        // 更新显示进度文本
        public void UpdateTxt()
        {
            // 构建显示文本，格式为 "当前进度 / 总进度"
            string txt = now.ToString() + "/" + all.ToString();

            // 查找名为 "Txt" 的子对象，用于显示文本
            Transform txtTransform = UserUtils.FindChild(this.transform, "Txt");

            // 更新 TextMeshProUGUI 组件的文本内容
            txtTransform.GetComponent<TextMeshProUGUI>().text = txt;

            // 获取前景进度条的 RectTransform 组件
            RectTransform proBarTransform = UserUtils.FindChild(this.transform, "ProBar").GetComponent<RectTransform>();

            // 获取背景进度条的 RectTransform 组件
            RectTransform bgBarTransform = UserUtils.FindChild(this.transform, "BgBar").GetComponent<RectTransform>();

            // 计算当前进度百分比，并限制在 0 到 100% 之间
            float bl = (now / all);
            if (bl > 1.0f)
            {
                bl = 1.0f;
            }
            else if (bl < 0.0f)
            {
                bl = 0.0f;
            }

            // 根据百分比调整前景进度条的宽度
            proBarTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, bgBarTransform.rect.width * bl);
        }

        // 增加当前进度
        public void AddNow()
        {
            if (now + 1 <= all)
            {
                now = now + 1;
                this.UpdateTxt();
            }
        }

        // 减少当前进度
        public void SubNow()
        {
            if (now - 1 > 0)
            {
                now = now - 1;
                this.UpdateTxt();
            }
        }

        // 设置当前进度
        public void SetNow(float now)
        {
            this.now = now;
            this.UpdateTxt();
        }

        // 设置总进度
        public void SetAll(float all)
        {
            this.all = all;
            this.UpdateTxt();
        }
    }
}