【Unity】性能优化：UI的合批图集和优化

在这里插入图片描述

前言

注意：DC指的是Draw Call。
温馨小提示：Frame Debugger 窗口（菜单：Window > Analysis > Frame Debugger）会显示绘制调用信息，并允许您控制正在构建的帧的“回放”。

一、合批测试

首先看第一种情况相同图片的情况这里是使用了四个Image，都使用同一张图
在这里插入图片描述

相同图片 z轴相同的合批
在这里插入图片描述

接下来看一下FrameDebugger看一下DC情况
在这里插入图片描述
👆看到DC只有一次，引擎自动对这些使用相同图片的Image进行了合批处理，一次画完

下面在看另一种情况相同图片不同Z轴

在这里插入图片描述
👆每个Image的Z轴都不相同

和上面的摆放比较类似，就是4个物体的Z轴各不相同，在此查看一下FrameDebugger，发现DC和上面的一样
在这里插入图片描述
👆在这个情况Z轴的不同是不影响合批的，合批依旧发挥作用

那在看下面一种情况，在Image之间插入其他Text物体，也就是说，这几个物体上下的Z轴都不相同，看看会如何
在这里插入图片描述

相同图片Z轴不同之间插入文本
在这里插入图片描述

在来看一下FrameDebugger
在这里插入图片描述
👆可以看到每个UI都需要一次DC，没有任何的合批

👇下面在做一点小改动，把所有Z轴都设为0，这个时候合批又起作用了，DC变为2
在这里插入图片描述

下面在做一点小改动，仅仅把Text都放在Image的后面
在这里插入图片描述

在这里插入图片描述
👆这个时候会合批，所有图片一次，Text又一次,合批又发挥了作用

结论：这里我发现原本能够被合批的UI即使Z轴不同，也能被合批，不受Z轴影响，但是原本可以合批的UI之间插入了其他Z轴不同的UI，就会打断合批。

👇下面在看另一种情况，也就是UI之间的遮挡，这也会影响合批（所有物体Z轴相同情况下）
在这里插入图片描述

上面是三个完全一致的Image，但是前两个Image之间夹了一个Text。
在这里插入图片描述

在这里插入图片描述
第一次DC画最左侧的Image，第二次DC绘制Text，第三次DC绘制剩下的Image，中间遮挡的Text会中断DC，这个也很好理解，被挡住了的话，需要要逐层绘制，这当然也会影响合批。

二、图集

Sprite Editor 图集插件的安装：https://blog.csdn.net/weixin_45961836/article/details/145359732

👇下面在看一下不同图片的情况（所有物体Z轴相同情况下）
在这里插入图片描述

在这里插入图片描述
👆一个Image绘制一次，有几种图片就DC几次

那实际开发中，基本都是用的不同的图片，为了合批，就得使用图集。
现在应该都使用新版图集了，老的spritetag的方式应该弃用了。

下面需要在项目设置中打开图集功能Editor->Project Setting->Editor 下面Sprite Packer选择Always Enabled

在这里插入图片描述

如果不开的话Atlas就会有如下的提示，告诉你如何打开

在这里插入图片描述

下面可以右键Create->Sprite Atlas 来创建一个图集
在这里插入图片描述

在这里插入图片描述

图集的基础使用这里就不再讲解了，图集的优化必须在Play Mode下才能看到

还是上面四张图，区别就是使用了图集，DC就只有一次了👇
在这里插入图片描述

详细查看可以看到使用的图片并不是单张图片了，而是一整张图集资源了

在这里插入图片描述

如果有用到跨多张图集的的资源的话，相对应的DC也会增加
之前的项目都是这样使用图集的，每一个图片文件夹创建一个图集，那么现在可以这样用，一个面板就创建一个对应的Atlas，把面板用到的图片添加到这个图集上，这样可以大大节省GC。

在这里插入图片描述

下面看看实际项目中的使用

在这里插入图片描述

实际的DC就仅仅2次

在看看二级面板的情况，大体布局如下

在这里插入图片描述

现在看看DC情况

在这里插入图片描述

有3次DC，第一次是绘制半透明黑色面板，第二次绘制剩余图片，第三次是剩下的字。需要注意的是第一次DC。

在这里插入图片描述

这是因为我们使用了一个黑色半透明的背景

在这里插入图片描述
如果这样的话会使用一个默认资源，并且不能和图集合批，为了优化这个DC，改为使用一张4*4的白色方块图片，并打入到图集中去。下面看看优化后的DC

在这里插入图片描述

在看看同时打开多个面板的情况，MainPanel打开这个二级菜单的情况，可以主要到的是需要一层一层绘制，也就是避免设计太多层级的UI

在这里插入图片描述

在这个情况下，所有UI的DC就只有4次，每个面板个2次

在这里插入图片描述

下面在看一下平时使用的UI优化

看一下下面这种情况，一个很常见的情况\

在这里插入图片描述

这是一个透明度为0的图片按钮，且使用了一个默认资源。他在DC里面的情况是这样的

在这里插入图片描述
会单独使用一个DC，当然你也可以和上面的说过的一样，选择一个打入图集的白兔，也能合批掉。但是还是会绘制一张看不见的区域，其实并不需要这样，这里可以像这样做

//不渲染但可以相应点击
public class NoOverdrawImage : Graphic
{public override void Rebuild(CanvasUpdate update){}
}

向上面的Button就可以变成这样

在这里插入图片描述

不会发生绘制了，也不会发生Overdraw的情况

在看看ScrollView这一类的组件，或者说Mask的组件

在这里插入图片描述

这一类组件在DC的情况，

在这里插入图片描述
这个看不到的Mask也会占用一次DC

这个地方的解决方案是使用RectMask2D组件来代替,当然只能是矩形的情况下

另外还有一个优化就是打开全屏UI的时候，可以选择关闭主相机，只保留UI相机。可以使用一个基类来统一管理

另外即使在UI相机看不到的物体，也会被渲染并占用DC，就下下图这样，在外面摆了一大堆东西，这些全部会占用DC，可以先隐藏它们，等需要的时候在显式它们。

在这里插入图片描述

总结一下：
合批优化：

UI中如非必要，Z轴统一设为0。如果有Z改变了，尽量通过Group来规整在一起
注意组件的遮挡关系，尤其是Text被Image遮挡的情况。
打图集。
图集的管理选择以单个面板来管理图集，而不是使用文件夹形式。
Image组件不要选择None，也会使用一个默认图片且无法与图集合批，选用一张图片来统一使用并打入到图集中。
不要设计很多层级的UI，会全部绘制。

UI组件优化

不要使用透明为0的图片当作按钮，改用NoOverdrawImage来代替
使是RectMask2D来代替Mask
全屏UI关闭主相机，只保留UI相机
UI相机看不到的物体也会被渲染，占用DC，可以先禁用它们

参考文献：https://zhuanlan.zhihu.com/p/364785849