Unity新UI工具包进度条

Question

我最近一直在使用新的 Unity UI 工具包 (Unity 2021.1)，但注意到 UI 生成器不包含进度栏的定义。这似乎是游戏的标准部分（健康统计等），令我震惊的是，我既意识到没有内置组件，又找不到关于它的指南。我确信我一定是在错误的地方寻找，并希望有人能指出我正确的方向。

我当前的方法是使用 Slider 组件并尝试通过自定义 USS 工作表进行样式设置。然而，我注意到新的 UI 系统与旧的不同，并且无法指定“覆盖”颜色。关于如何处理这个问题有什么建议吗？我看过 UI Toolkit 示例的屏幕截图，其中示例中包含进度条；然而，当前的样本没有这个。

Answer 1

编辑：最新版本的 Unity 最终包含了一个运行时 ProgressBar。请参阅@tenuki 答案。

UI Toolkit 将在 Unity 2021.2 中包含更多内置控件（届时将包含在 Unity“核心”中）。

同时，您最好不要使用 Slider 组件，因为它不对应于“进度条”用例。

实现此目的的最简单方法是使用“背景”和“叠加”元素。覆盖层将是背景元素的子元素。

然后，您可以以百分比为单位设置 Overlay 元素的宽度。

这在 UI Builder 中是这样的：

进度条.uxml：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<Style src="ProgressBar.uss" />
<ui:VisualElement name="Background" class="progressBar--background" style="flex-grow: 1;">
    <ui:VisualElement name="Overlay" class="progressBar--overlay" style="width: 50%; height: 100%;" />
</ui:VisualElement>
</ui:UXML>

进度条.uss：

.progressBar--overlay {
    background-color: rgba(243, 19, 77, 255);
}

/* optional */
.progressBar--background {
    border-left-color: rgba(103, 10, 10, 255);
    border-right-color: rgba(103, 10, 10, 255);
    border-top-color: rgba(103, 10, 10, 255);
    border-bottom-color: rgba(103, 10, 10, 255);
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    border-top-left-radius: 20px;
}

最后，在代码中，您可以设置覆盖元素的宽度：

VisualElement progressBarOverlayElement = somePartOfYourUIHierarchy.Q("Overlay");
progressBarOverlayElement.style.width = new StyleLength(Length.Percent(30));

一点提示：您可以通过禁用顶部元素上的溢出来实现基本屏蔽。

这是进度条的背景元素，启用了溢出：

现在将溢出设置为隐藏：

这可能会激发您在进度条的根元素内执行更复杂的操作。

UI Toolkit 论坛中有一个帖子讨论了多种可用的解决方案。似乎仍然没有达成一致的方法来实现这一点，但您可能会在那里找到更多有趣的技巧（例如，使用 SVG 资源进行复杂形状的遮罩）。