（本文所需图片在文章上面的资源中，点击“立即下载”。）
本文介绍了如何通过UI工具包（UI Toolkit）来创建一个编辑器UI。
一、创建项目
1. 打开Unity创建一个空项目（任意模板），这里我们以URP 3D为例。
2. 在项目的Assets文件夹中，新建一个文件夹Editor，并在Editor中新建一个文件夹Resources。我们将把脚本放在Assets/Editor中，其他资源文件放在Assets/Editor/Resources中。（关于Unity中的特殊文件夹，请参见这篇文章）
3. 右键点击Editor文件夹，选择Create > UI Toolkit > Editor Window。
4. 将本文资源中几个图标文件下载后存放在Editor/Resources/Icons中。
二、创建项目
接下来我们将创建编辑器窗体并将其添加到Unity的菜单中。
1. 在UI Toolkit Editor Window Creator中，在C#一栏输入QuickTool，并且取消勾选UXML和USS。如下图所示。（当然你也可以不取消勾选这两项，那么将会自动创建UXML和USS文件。不过在这篇文章中，我们将手动创建这两个文件。）
2. 点击“Confirm”保存，以创建Editor窗体。
3. 现在我们将设置窗体的大小以及在菜单中的位置。打开QuickTool.cs文件（以Visual Studio为例），并将其中的MenuItem和ShowExample部分用下面的代码替换。
| public class QuickTool : EditorWindow { [MenuItem("QuickTool/Open _%#T")] public static void ShowWindow() { // Opens the window, otherwise focuses it if it's already open. var window = GetWindow<QuickTool>(); // Adds a title to the window. window.titleContent = new GUIContent("QuickTool"); // Sets a minimum size to the window. window.minSize = new Vector2(280, 50); } } |
说明：代码中MenuItem字符串末尾的_%#T，是为了添加一个打开窗口的快捷键，在Windows中是Ctrl+ Shift + T（在Mac上是Command + Shift + T）
4. 保存代码并返回Unity。这时你将在菜单中看到QuickTool。点击QuickTool > Open，将打开新建的Editor窗口。
三、搭建UI
在UI工具包中，用户界面是由单个的可视化元素组成。多个界面元素设计并组合到UI模板文件中，也是就*.uxml文件中。一个UXML文件存储所有界面元素的结构，样式和布局。这种组合的方式在Unity中被称为可视化树（Visual Tree）。
一个UI界面是由一个或多个Visual Tree组成的。一个界面或Panel中会保存一个对根元素的引用，被称谓rootVisualElement。而通过UI模板文件或C#脚本创建的Visual Tree将被添加到这个根元素下面，这样就可以显示在屏幕上。
每一个EditorWindow都会将所有的UI元素保存在rootVisualElement中。
通过脚本来创建界面元素
在我们进入UXML之前，先来看看如何通过脚本创建界面元素。
在QuickTool.cs文件中，找到QuickTool类，它里面有一个CreateGUI()方法。这个方法就包括了对rootVisualElement的引用，并将一个label显示在窗体中。
当然你也可以在这里添加更多的页面元素。下面的代码将添加一个按钮，并将其大小设置为160x30 px。
| private void CreateGUI() { // Reference to the root of the window. var root = rootVisualElement; // Creates our button and sets its Text property. var myButton = new Button() { text = "My Button" };
|
最低0.47元/天 解锁文章
扫一扫
2983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
