1. UIToolkit运行时――下一代UI系统
UIToolkit的前身是UIElement,发布于Unity 2018。起初它用于开发Editor编辑面板中的UI,自Unity 2019、Unity 2020起正式支持运行时UI并且更名为UIToolkit,它以Package包的形式存在。自Unity 2021.2起,UIToolkit被官方内置在Unity中和UGUI的地位一致,UIToolkit作为下一代UI系统,设计之初目标就很明确,就是替换掉现有的UGUI系统。
现有的UGUI系统从2014年自Unity 4.6开始至今服务于太多项目,从我的角度来看UGUI使用上并没有太大问题,最大的问题就是效率低。我用UGUI也开发了好几款项目了,每个项目开发阶段都被吐槽UI打开慢、卡顿等等,导致我们不得不花很多时间去优化UI系统。
可循环滑动列表、图文混排、合理的UI划分还有资源按需加载基本上每个项目都要做一遍,尤其是滑动列表只要Item数量超过50个必卡无疑,导致每个项目每家公司都要自己做一遍,然而UIToolkit官方就内置了循环列表的功能。UGUI为什么效率低呢?就拿滑动列表来说吧,超出显示区域以外的面也需要合并Mesh,VBO数据也需要给GPU传,这样元素多提交GPU的数据量就大,还有就是它基于GameObject的方式,导致必然需要加载大量没用的数据,参与序列化的脚本数据有用没用都需要加载,导致几乎没有任何缓存命中率可言。
GameObject的方式致使UI效率低,Unity开发的DOTS就是为了解决GameObject的问题,对DOTS感兴趣的朋友欢迎看我之前的课程《DOTS深度研究之原理分析篇》和《DOTS深度研究之应用实践篇》。UGUI还有那几个LayoutGroup、ContentSizefitter组件元素只要多一点就容易卡顿。UIToolkit继承了UGUI做得好的地方,比如Mesh合并就被保留下来,而且内置的ListView和ScrollView自带了无限循环列表的功能,并不会将所有看不见的元素都进行合并与提交GPU。它并没有采用GameObject的方式,参考了Web技术的XML和CSS方案,只保存变化的数据。
期初在UGUI诞生前甚至在NGUI诞生前Unity自己是有一套UI系统的,称之为IMGUI。它的运行原理更恐怖,每帧无论UI是否变化都需要将VB/IB传入GPU中,每个UI元素都要每帧设置渲染状态,DrawCall无疑就会非常恐怖。它在编辑模式下和运行时都同时支持,由于编辑模式下对性能并没有要求,而且编辑面板也不会制作特别复杂的功能,所以IMGUI被广泛应用于拓展编辑器的开发。而运行时的OnGUI几乎没有项目使用,由于使用不便利(没有编辑器),效率低(DrawCall高)的原因,所以后来在AssetStore中诞生了NGUI这样的第三方UI系统。随后在Unity 4.6中Unity官方也开发出UGUI。UIToolkit的诞生是有时代意义的,同时兼顾了编辑模式与运行模式的布局便利性与性能,保证同一套代码资源可以快速移植。UIToolkit目前处于高速发展中,论坛中开发者讨论的非常激烈,版本迭代的速度也非常快,通过UIToolkit被内置在引擎中足以见得官方对UIToolkit的使用决心。
很多朋友看到XML和CSS就联想到UIToolkit使用了上世纪90年代的老技术,还和WPF和WinForm作比较。就我看来XML和CSS只是界面的描述信息,就算是UGUI用的也是YAML来保存的界面描述信息,真正核心的技术应该是如何渲染与优化才对,如下图所示,UIToolkit中不同图集、不同文字、图文混排和不同深度只需要1次DrawCall就可以画完。
UIToolkit在GPU保存了一份当前UI渲染的VB/IB,当渲染的UI发生变化时它会以最小的代价来更新这份VB/IB,它不会更新全部的VB/IB,只更新变化的部分保证CPU和GPU每帧都能高度运转。为了一次DrawCall能画完,它还实现了一套大而全的Ubershader,同时支持8个图集和1个字体,只要界面满足以上条件就可以一次DrawCall画完,如果对UI原理感兴趣的朋友在文章的后面有详细的介绍。
而且UIToolkit使用的UXML只记录了变化的数据,比如大部分图片在UI中可能永远都不会设置颜色、旋转或缩放。UIToolkit提供了默认参数,只要不修改它,UXML中就不会包含额外数据。反观UGUI它无论如何都需要把颜色、旋转和缩放一类的数据序列化在脚本中,一个复杂的界面可能有500多个元素,然而大量的内存都被白白浪费了,毫无缓存命中率可言,从这一点来看UIToolkit也要比UGUI先进。
1.1 致敬
首先来致敬一下UIToolkit的两位主要开发者Benoit Dupuis(贝努瓦·杜普伊)和 Damian Campeanu(达米安·坎皮努)。感谢在我学习的过程中在unite和官方论坛中多次看到他们精彩的分享与耐心的解答。
贝努瓦·杜普伊(左) 达米安·坎皮努(右)(图片来自领英)
贝努瓦·杜普伊在论坛中多次发布UIToolkit的最新技术栈,以及UIToolkit未来的计划Roadmap解答开发者的疑问。达米安·坎皮努是UIToolkit的主要开发者,而且他还是DOTS编辑器团队的老大。
UIToolkit官方论坛:https://forum.unity.com/threads/ui-update-q3-2021.1138603/
1.2 下一代UI系统
Unity在2018年发布UIElement时我就简单看过,由于当时它只支持Editor面板的UI,所以我就没有继续深入学习。Unity在2019年UIElement改名UIToolkit并且支持运行时UI时我又简单学了一遍,发现它就是基于XML和CSS的20年前的老技术,期初内心是有点抵制的,直到Unity 2021.2正式内置UIToolkit到引擎中,又一次勾起了我学习它的热情。时至今日它依然有很多问题是无法解决的,如:UI和粒子特效叠层、UI和3D模型叠层、UI裁剪粒子特效、3D界面、多UI相机叠层、UI特殊着色器和K帧动画等等。
毕竟UGUI已经好几年都没更新了,一个好引擎必然要跟上时代,替用户解决通用的痛点问题。在我看了UIToolkit最新的Roadmap以后我更加坚信UIToolkit会代替UGUI。目前无法满足需求的地方官方正在积极的开发,UIToolkit已经支持UGUI混合使用、支持Text mesh pro 图文混排和无限滑动列表。未来会支持Shader Graph、3D粒子与UI的叠层和深度问题。大家如果有需求也可以在这个链接中发布自己的想法,这里也能看到官方正在支持以及未来支持的功能。
https://unity.com/roadmap/unity-platform/gameplay-ui-design
1.3 安装UIToolkit
最好使用Unity 2021.2以及以前的版本,此版本中UIToolkit已经内置在引擎中不需要添加额外的Package包。缺点就是不利于查看C#源码,它将DLL内置在引擎中。如果对源码有兴趣的朋友也可以使用Unity 2020.3以及以上版本,但需要手动安装Package包。目前有个别功能只有在Unity 2021.2中才有,所以本教程我采用最新Unity 2021.2.9f1版本,在源码学习部分我会切到Unity 2020.3版本。
如果是Unity 2020版本,如下图所示,需要在PackageManager中添加,com.unity.ui和com.unity.ui.builder两个包,目前两个包的最新版本都是1.0.0-preview.18版本。
"com.unity.ui": "1.0.0-preview.18",
"com.unity.ui.builder": "1.0.0-preview.18",
com.unity.ui包就是UIToolkit,com.unity.ui.builder包则是UIBuilder,UIBuilder是UXML和USS的可视化编辑器,让使用者不需要手写布局代码,在编辑器中可以方便做出各式各样的界面。
戳此《UIToolkit下一代UI系统》查看全文。