使用UI Toolkit和Scriptable Object开发Unity编辑器插件

冀苍鸾

配置文件，是每个游戏必不可缺的东西。可以用JSON，YAML等文件表达，但修改它们需要修改文本文件，并不友好。因此，我们可以使用Scriptable Object制作结构化的不可变的游戏配置文件，和Unity编辑器集成在一起，所见即所得的操纵数据。
虽然Scriptable Object也是通过Yaml序列化到硬盘的，但通过Unity独有的流程，可以直接在Scriptable Object中储存其他文件的引用。
使用新的编辑器框架——UI Toolket（UI Elements），我们可以以前端的方式快速编写美观的编辑器插件了，不需要其他插件的支持。我们可以为一种类型的Scriptable Object指定一个编辑器，只需要选中那个文件，就可以使用对应的编辑器进行编辑。
创建基本数据的Scriptable Object

这步声明数据的储存格式，只需要新建一个类，继承自ScriptableObject即可。再给这个类加上Attribute，例如[CreateAssetMenu(menuName = "游戏物品/创建物体")]，就可以在右键菜单中方便的创建了。
创建对应的编辑器

我们想给这个数据一个独特的编辑器，而不是仅仅只是通过Unity查看数据本身，因此需要创建一个UI Toolkit编辑器。
右键，Asset/UI Toolkit/Editor Window，自动创建三个文件。因为我们需要的是编辑器，而不是编辑器窗口，因此将[YourEditorFileName].cs的基类修改为Editor。并加上Attribute：[CustomEditor(typeof(YourScriptableObjectTyle))]。
基本结构如下：

2. [CustomEditor(typeof(ItemTile))]
3. public class ItemEditor : Editor
4. {
5.     ItemTile self;
6.     VisualElement root;
8.     public void OnEnable()
9.     {
10.             // Each editor window contains a root VisualElement object
11.             root = new VisualElement();
12.             self = (ItemTile)target;
14.             // Import UXML
15.             var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/AssetEdior/ItemEditor.uxml");
16.             VisualElement labelFromUXML = visualTree.Instantiate();
17.             root.Add(labelFromUXML);
19.             // A stylesheet can be added to a VisualElement.
20.             // The style will be applied to the VisualElement and all of its children.
21.             var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/AssetEdior/ItemEditor.uss");
22.             root.styleSheets.Add(styleSheet);
23.   
24.     }
26.     public override VisualElement CreateInspectorGUI()
27.     {
28.         return root;
29.     }
30. }

复制代码

在OnEnable中，加载样式文件、UXML文件，在CreateInspectorGUI中，可以对按钮、字段等控件添加侦听事件。通过target字段，获取ScriptableObject实例。
获取控件并设置事件

如同HTML的Query，通过root.Q<Toggle>("NAME")查找对应名称的控件，并可以修改值，样式等。

1. root.Q<Toggle>("NAME").RegisterValueChangedCallback(cb =>
2.         {
3.             MYDATA.SOME_VALUE = cb.newValue;
4.             EditorUtility.SetDirty(MYDATA);
5.         });

复制代码

如上，当控件值改变时，便会触发这个事件。记得将这个物体设为脏物体，暗示编辑器要保存。
控件样式

通过UI Builder可以轻松查看控件的样式，可视化的编辑面板。总体来说和HTML、CSS十分相像。
这两天写的简单Tile编辑面板如下，最新版本的UI Toolkit似乎不能显示中文，比较头疼。是个bug。