序言

写本系列的原因是在做游戏框架对象池可视化的时候想快捷方便的创建出编辑器UI，故学习下UI Toolkit，顺手记录下自己的反向学习过程（只关心用，最快速度无门槛上手）。

从Unity2021.3开始，UIToolkit就已经内置，既可以制作Editor的扩展，也可以制作runtime（游戏运行时）界面UI 我的使用场景是第一种，后一种可以去看Unity中文课堂上的讲解，链接 。

创建UIToolKit Editor源文件

由于内置了UIToolkit，这里直接create创建选Ediotr Window即可。

接下来会弹出个界面设置名字。

查了查相关资料，简单介绍下这三个文件：

• UXML（即 Unity 可扩展标记语言）文件用于定义用户界面结构，它受到 HTML 和 XML 等标记语言的启发，他的作用可以简单理解为对UI元素进行布局设置，和网站、APP开发里的xml很像（看到就会想起了大学Android和JavaEE写xml的时候）。

这是UXML的样例（老标记性语言了），不过在Unity里我们是通过可视化交互的方式创建窗口，简单的使用不需要去写这些代码，会自动生成。

• USS，这玩意和网页开发里CSS的作用差不多，也是个标记性语言，用来定义样式信息，例如用于绘制UI的尺寸，字体和颜色。和UXML一样，直接在面板上设置就行，不用关心咋写。

• C# 通过C#脚本生成窗口，导入UXML，USS，以及UI事件，和游戏UI差不多。

预览生成的窗口

MenuItem特性决定了窗口在哪（就是Ediotr扩展里面常用的），默认在UItoolkit下，点开就行了。

这里有个BUG，有时候点窗口不显示，切换下layout就行了，老毛病了。

可视化创建自己的Ediotr UI

我最后想做的UI其实挺简单，大概是这种效果：

先看看自带的示例，输出了三行helloworld，第一行和第三行是由C#添加的，第二行是通过UXML可视化拖拽编辑生成的，理解起来不困难。

       
    public void CreateGUI()
    {
        //获取当前窗口的根UI元素容器
        VisualElement root = rootVisualElement;

        // 添加个Text
        VisualElement label = new Label("Hello World! From C#");
        root.Add(label);

        // 导入UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/JKFrame/Editor/Windows/EventSystem/EventSystemViewer.uxml");
        //把读出来的visualTree实例化
        VisualElement labelFromUXML = visualTree.Instantiate();
        //添加到UI根元素容器下
        root.Add(labelFromUXML);

        // 导入USS样式，绑定到Text上添加到Root上
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/JKFrame/Editor/Windows/EventSystem/EventSystemViewer.uss");
        VisualElement labelWithStyle = new Label("Hello World! With Style");
        labelWithStyle.styleSheets.Add(styleSheet);
        root.Add(labelWithStyle);
    }

方便起见直接对UXML做可视化编辑UI，双击UXMl文件打开UI Builder窗口，它是我们进行视觉化UI创作的工作区。

拖拽library下的元素到窗口中调整位置和对其方式即可。

使用默认的USS。

    public void CreateGUI()
    {
        //获取当前窗口的根UI元素容器
        VisualElement root = rootVisualElement;

        // 导入UXML，把读出来的visualTree实例化
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/JKFrame/Editor/Windows/EventSystem/EventSystemViewer.uxml");
        VisualElement elementUXML = visualTree.Instantiate();

        // 导入USS样式，绑定到实例化对象上,添加到UI根元素容器下
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/JKFrame/Editor/Windows/EventSystem/EventSystemViewer.uss");
        elementUXML.styleSheets.Add(styleSheet);
        root.Add(elementUXML);

    }

UItookit功能很强大，我仅仅是用了最简单的方法，从没用过UItookit到学习创建自己想要的Ediotr窗口整个流程大概1~2个小时，最终效果：

关于具体的Editor窗口逻辑会放在游戏框架2.0部分，等更新了连接贴过来，可以看看运行的效果。