简介
在现代游戏开发中，用户界面 (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();}}
}
大致效果如下：
社交：
游戏开发QQ群：859055710
