Unity 新 UI Toolkit 进度条

如何解决Unity 新 UI Toolkit 进度条

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

我目前的方法是使用 Slider 组件并尝试通过自定义 USS 表设置样式。但是，我注意到新的 UI 系统与旧的系统不同，并且无法指定“叠加”颜色。有关如何处理此问题的任何建议？我看过 UI 工具包示例的屏幕截图，其中示例中包含进度条；但是，当前的示例没有。

解决方法

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

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

---

实现这一目标的最简单方法是拥有一个“背景”和一个“叠加”元素。叠加层将是背景元素的子元素。

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

这在 UI Builder 中是这样的：

ProgressBar.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>

ProgressBar.uss :

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

/* optional */
.progressBar--background {
    border-left-color: rgba(103,10,255);
    border-right-color: rgba(103,255);
    border-top-color: rgba(103,255);
    border-bottom-color: rgba(103,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));

---

小技巧：您可以通过禁用顶部元素的溢出来实现基本屏蔽。

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

现在溢出设置为隐藏：

这可能会激发您在进度条的根元素中做更复杂的事情。

---

There's a thread here 在 UI Toolkit 论坛中讨论多种可用的解决方案。似乎仍然没有普遍同意的方法来实现这一点，但您可能会在那里找到更多有趣的技巧（例如，使用 SVG 资产进行复杂形状的遮罩）。