在本教程中，3D天堂将解释如何在Unity中使用UI工具（UI Toolkit）包并开发用户界面。
内置UI工具包与UI工具包
UI Toolkit作为Unity2020.1或更高版本的内置功能提供，它包括创建Unity编辑器用户界面所需的功能。
要创建运行时用户界面，最好安装最新版本的包，可以使用Unity的包管理器安装最新的。
- 打开包管理器窗口，目标菜单为窗口 → 包管理器。
- 单击 +（添加），选择从Git URL添加包。
- 输入com.unity.ui，单击添加。
使用UI工具创建用户界面
要创建用户界面，需要两个文件：
- UXML文档：这是定义UI结构的地方，它被称为Unity可扩展标记语言。
- Unity样式表 (USS)：这为用户界面提供了视觉效果和行为，这类似于网络CSS，该文件不是强制性的。
具体步骤
1.创建UI UXML文档，通过目标菜单资产 → 创建 → UI 工具包 → UI文档。
2.修改此文件以添加UI元素，可以在Window → UI Toolkit → Samples中找到示例代码。
3.在这里可以看到可用UI元素的UXML文档、USS文件和C#代码。
4.可以编辑uxml文件来添加所需的UI元素。但是，此过程不提供UI设计的视觉反馈，对于可视化UI设计，可以使用UI builder包。
用户界面生成器（UI builder）
UI builder构建器允许可视化地创建和编辑UI文档（uxml和uss文件），可以从中这里参阅文档。
安装包后，可以在Window → UI Toolkit → UI Builder中看到，双击现有的uxml文件进行编辑。
- 样式表：为此UI文档添加新的或现有的uss样式表。
- 层次结构：UI元素的树层次结构。
- 库：UI元素库。
- 视口：将UI元素从库窗口拖放到视口窗口，它会将项目添加到uxml文档中，此窗口为提供了UI的预览。
- 检查：可以在这个窗口中查看和修改UI元素的属性，在Hierarchy或Viewport窗口中选择 UI 元素，以在 Inspector 中查看其属性。
向UI文档添加UI元素
为演示在uxml中添加了一些元素并设计了小型UI。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xmlns="UnityEngine.UIElements" editor-extension-mode="False">
<ui:TextField picking-mode="Ignore" label="Text Field" value="Write something" text="Write something" name="SampleTextField" />
<ui:Button text="Button" display-tooltip-when-elided="true" name="SampleButton" />
<ui:Label text="Label" display-tooltip-when-elided="true" name="MyLabel" />
</ui:UXML>
UI文档准备好了，现在将在Unity场景中加载相同的内容。
运行时在Unity场景中加载UI文档
- 创建面板设置资产文件，目标菜单为资产 → 创建 → UI工具包 → 面板设置资产。
- 将UI文档脚本添加到游戏对象，创建一个空游戏对象并向其添加了UI文档脚本。
- 将面板设置Asset文件和uxml文件添加到UI文档脚本的各自字段中。
- 添加UI Toolkit事件系统组件。
- 添加以下C#脚本。
using UnityEngine;
using UnityEngine.UIElements;
public class UIHandler : MonoBehaviour
{
// provide reference in editor inspector (from step 2)
public UIDocument UIDocument;
Button button;
Label label;
TextField textField;
void Start()
{
var root = UIDocument.rootVisualElement;
// get ui elements by name
textField = root.Q<TextField>("SampleTextField");
button = root.Q<Button>("SampleButton");
label = root.Q<Label>("MyLabel");
// add event handler
button.clickable.clicked += Button_clicked;
}
private void Button_clicked()
{
label.text = textField.text;
}
}最终结果：
加载UI文档编辑器
下面是将uxml文件加载到Unity编辑器窗口的编辑器脚本。
using UnityEditor;
using UnityEngine;
using UnityEditor.UIElements;
using UnityEngine.UIElements;
public class EditorUIDemo : EditorWindow
{
private static string uxmlPath = "Assets/UI/SampleUI.uxml";
private static EditorWindow w;
private static Button button;
private static Label label;
private static TextField textField;
[MenuItem("UIToolkitDemo/EditorUI")]
public static void ShowDefaultWindow()
{
w =GetWindow<EditorUIDemo>("UI Toolkit Demo");
VisualTreeAsset uiAsset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>(uxmlPath);
VisualElement ui = uiAsset.CloneTree();
w.rootVisualElement.Add(ui);
// get ui elements by name
textField = w.rootVisualElement.Q<TextField>("SampleTextField");
button = w.rootVisualElement.Q<Button>("SampleButton");
label = w.rootVisualElement.Q<Label>("MyLabel");
// add event handler
button.clickable.clicked += Button_clicked;
}
private static void Button_clicked()
{
label.text = textField.text;
}
}如果你暂时还不熟悉在Unity中创建编辑器窗口，可以参阅站内文章：
最终结果是这样的：
…
以上是3D天堂关于入门UnityUI工具包开发用户界面的全部内容，如果你有任何反馈，请随时在本页面下方留言。