首页 > Unity3D频道 > 【Unity3D研究院之游戏开发】 > Unity3D研究院之UIToolkit运行时初探
2022
01-09

Unity3D研究院之UIToolkit运行时初探

UIToolkit使用了uxml来描述界面的布局，使用uss来制作不同样式，参考了web开发的xml和css方案。Unity2021已经将UIToolkit内置在引擎中，具有和UGUI同等地位。

比如要画一个按钮，对应的uxml

1
2
3
4
5
 
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <Button text="UXML Button" name="the-uxml-button" />
</UXML>
 

按钮的样式uss如下

1
2
3
4
5
 
.some-styled-button {
    -unity-font-style: bold;
}
 

在C#代码可以将名字和样式名绑定在一起添加点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
// Action to perform when button is pressed.
// Toggles the text on all buttons in 'container'.
Action action = () =>
{
    container.Query<Button>().ForEach((button) =>
    {
        button.text = button.text.EndsWith("Button") ? "Button (Clicked)" : "Button";
    });
};
 
// Get a reference to the Button from UXML and assign it its action.
var uxmlButton = container.Q<Button>("the-uxml-button");
uxmlButton.RegisterCallback<MouseUpEvent>((evt) => action());
 
// Create a new Button with an action and give it a style class.
var csharpButton = new Button(action) { text = "C# Button" };
csharpButton.AddToClassList("some-styled-button");
container.Add(csharpButton);
 

UIToolkit同时支持Editor和Runtime两种解决方案，之前的OnGUI已经完全被废弃。就目前的技术来看在编辑模式下UIToolkit可以完全代替之前的面板制作。如下图所示，官方提供了丰富的案例Editor模式下很容易制作。

Unity3D研究院之UIToolkit运行时初探 - 雨松MOMO程序研究院 - 1uxml如果都得用手写那显然太麻烦了，所以unity制作了一个可视化编辑工具uibuilder。所以UIToolkit和uibuilder都需要通过PackageManger安装（unity2021以后的版本已经内置在引擎中）

今天的主角并非Editor模式，而是Runtime运行时。如下图所示，我们制作一个简单的界面。包括图片和文字，uitoolkit已经内置了Text Mesh Pro支持图文混排。

Unity3D研究院之UIToolkit运行时初探 - 雨松MOMO程序研究院 - 2如下图所示绑定UIDocument随后将uxmal拖上去就可以了，下面还可以设置Sort Order

Unity3D研究院之UIToolkit运行时初探 - 雨松MOMO程序研究院 - 3
如果使用UGUI，每个图集是一个DrawCall，每个字体占一个DrawCall，如下图所示，这里占用了3个DrawCall。

Unity3D研究院之UIToolkit运行时初探 - 雨松MOMO程序研究院 - 4
同样的界面用uitoolkit在制作一遍，能看出它们会合并成1个Drawcall性能显然比UGUI要好。为什么UIToolkit能合并Drawcall呢?请大家看又下角红框中，如果图集数量在8个以内，字体数量在1个以内UIToolkit可以将所有界面都合并成1个DrawCall，相反在UGUI中就会占9个Drawcall了，如果界面多了出现叠层Drawcall会更多。

Unity3D研究院之UIToolkit运行时初探 - 雨松MOMO程序研究院 - 5
UIToolkit是支持UGUI的Atlas图集的，但其实它支持的是Texture，即使把Sprite都打在一个图集中也不定能能合并DrawCall，它支持Sprite的Tight模式，增加顶点数减少填充率。只要按照绘制的顺序它会将前8个Texture合并成一个DrawCall，或者有N个Image只要它们用的都是这8个图中的任意，这些也会合并成一个 DrawCall。

就目前的情况来说UIToolkit是不可能代替UGUI的，比如UI粒子叠层、美术的K帧动画、3D透视界面、复杂的层次结构界面，这些都不适合。但是有些界面，比如头顶血条+文字、弹窗、对性能要求较高的一部分界面可以考虑使用UIToolkit，几乎都能合并成一个DrawCall。目前官方也表示UIToolkit和UGUI可以混合使用。

我目前对UIToolkit也比较感兴趣，欢迎有志同道合的朋友一起讨论。

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《Unity3D研究院之UIToolkit运行时初探》有 6 条评论

  1. 没底小帆船 说：
    2023 年 1 月 12 日下午 3:17

    runtime使用限制太多了 就目前来说不适合做runtime使用 ，Editor倒是很适合，混着用其实对项目开发维护很不友好；另外uibuilder跟AS设计界面很像

    回复
  2. Walker 说：
    2022 年 11 月 6 日上午 10:35

    简单看了下，它的图文混排连对齐都做不到，同一行里，图盖到了前方文字的右下角。。。而且好像不支持控制图的尺寸、偏移等。
    想问下对它进行拓展方便吗？可否出篇介绍文章

    回复
  3. jiading2008 说：
    2022 年 8 月 28 日下午 2:42

    想起了adobe的FLEX

    回复
  4. 林下夕阳 说：
    2022 年 4 月 11 日下午 8:55

    大大你好，请问用uitoolkit制作的ui能复用到editor模式下的scene界面中吗

    回复

留下一个回复

你的email不会被公开。