unity2022版本 实现加减进度条

简介

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

界面节点设置

1. 创建 Canvas 节点容器：首先，建立一个 Canvas 节点容器，命名为 "Bar"。Canvas将作为整个进度条的容器，负责容纳所有相关的元素。

2. 创建背景节点：在 "Bar" Canvas 内创建一个名为 "BgBar" 的节点，用于表示进度条的背景。这个节点将显示进度条的整体背景或底纹。

3. 创建前景颜色节点：接下来，在 "Bar" Canvas 内创建一个名为 "ProBar" 的节点，这将是进度条的前景节点，表示当前的进度。通常，您会根据进度的百分比来动态调整此节点的大小。

4. 创建文本节点：为了在进度条上显示相关文本信息，您可以在 "Bar" Canvas 内创建一个名为 "Txt" 的节点。这个节点可以用于显示进度百分比或其他相关文本内容。

5. 创建加号和减号节点：如果您需要在进度条上添加加号和减号按钮用于调整进度，您可以在 "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().text = txt;

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

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

            // 计算当前进度百分比，并限制在 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();
        }
    }
}

 大致效果如下：

社交：

游戏开发QQ群：859055710