UGUI性能优化学习笔记（番外）一些零星的优化点_ugui overdraw

一、Overdraw

1.1 什么是Overdraw

overdraw也就是过度绘制，是指在每个渲染周期内，屏幕上每个像素最理想只渲染一次，但是由于UI元素的重叠会导致像素会被渲染多次，每次渲染从CPU阶段到GPU阶段会消耗大量资源，如果这种情况比较严重，就会造成卡顿。

在编译器窗口下，选择Overdraw模式，可以观察场景中UI的过度绘制情况。颜色越深说明绘制次数越多。

1.2 解决方法

降低Overdraw最有效的方法就是减少UI的重叠。对于多个元素构成的UI，尽量将元素整合进一张图中。
对于下面这种中间透明的边框，其中间部分仍然会进行绘制。

对于这种UI元素，可以采用九宫格切分，并将图片类型设置为Sliced

此时，这个UI元素中间透明的部分就不会再进行绘制，从而减少Overdraw的可能性

二、Text效果组件

当我们给Text使用效果组件，比如Outline和Shadow时，会增加大量的顶点和边数量
开启Outline前：

开启Outline后：

可以看到，只是单纯的开了一个Outline效果，就会导致顶点和边的数量翻了4倍！其实我们将「Effect Distance」调大，就能看出来，这个组件实际上就是把Text的内容复制了四份，通过偏移来达到描边的效果

令人欣慰的是，比较新的Unity版本已经默认引入了Text Mesh Pro来替代原本的Text组件。TMP在这方面的优化就要好很多。

三、控制UI的显隐

之前说过，通过SetActive()设置UI的显隐会造成UI的重绘操作，从而影响性能。

对于单个的UI元素，可以使用其上的「Canvas Renderer」组件的「Cull Transprent Mesh」选项。这个选项的作用是在物件的Alpha设置为0时不进行渲染，从而减少性能消耗。但UI元素仍然会保留射线检测，因此也可以用做阻挡点击的遮罩。

对于一组UI元素可以使用「Canvas Group」组件中的Alpha来控制整组UI的显隐。

这两种方式都可以避免重绘操作。

四、避免使用Text组件的Best Fit

在Text组件中，Best Fit可以使文本内容自适应组件自身的大小，从而动态调节字体大小。

但开启这个选项会造成严重的性能问题。（以下内容参考自文章）

在运行时，Unity 会将 Text 组件中使用的字符打包到一个字符图集中。每一个加载的字体都会生成自己的字符图集，即使它与另一种字体类型相同。比如现在有两个 Text 组件，显示内容都是 ‘A’，那么：

• 如果两个Text 的字体大小（fontSize）相同，字符图集中只有一个‘A’字形。
• 如果两个 Text 的字体大小不一样（一个16，一个24），字符图集将会包含两份‘A’字形的拷贝（一个对应16号字体，一个对应24号字体）。
• 如果一个Text 的字体样式是 blod，而另一个是 normal，字符图集将会包含两份‘A’字形的拷贝（一个对应 bold 样式，一个对应 normal 样式）。

每当 Text 遇到字符图集中没有的字符时，都会对字符图集进行重新构建。如果字符图集能够容纳新的字形，就会将它添加到图集中，并将图集重新上传到图形设备，如果字符图集太小不能容纳新字形，系统将会尝试重新构建字符图集。如果原本的图集大小已经无法容纳需要显示的字符，就会重新生成一个更大的图集。

由此可见，如果开启Best Fit，自动调整字体大小的过程生成的不同字形会很快地将字符图集占满。其导致的最终结果就是字符图集占用过多的内存，从而提高性能消耗。

另外，由于TMP不支持动态字体，而是采用回退字体的方式，所以它的「Auto Size」并不存在上面的问题。

五、打断合批

5.1 修改UI的Z轴导致打断合批

对于下图中的四个Button，很明显它们是同一个批次。（在Hierarchy面板上的顺序与序号一致）

但假如我们将右上角的Button2的Z轴修改一下，使其不为0，则会出现打断合批的情况

此时，Button1为一批，Button2为一批，Button3和Button4为一批。即便将Button3的Z轴改为与Button2一致，它们也不会进行合批

可见，只要修改了Z轴，无论值是否相同，都会打断合批。

5.2 修改UI旋转导致打断合批

仍然是上面的四个按钮，如果修改其中一个的旋转值，使其与其他几个Button不在同一个平面，也会出现打断合批的现象

但如果仍然在同一个平面上（比如沿Y轴旋转180度），仍然可以合批

六、没有Overdraw的点击区域

在制作UI的过程中，我们经常遇到下面这种需求：点击空白区域关闭当前显示的窗口。通常的做法是在底层放置一个全屏的透明UI，并添加按钮组件。但这种方式无疑会增加Overdraw的面积。

解决方案也很简单。因为UI对射线的响应并不是依赖于Mesh，而是依赖于Rect。也就是说，对于底层的检测UI，是没有必要渲染Mesh的。所以我们只需要自制一个Image组件，重写渲染Mesh的方法即可。

public class NoOverdrawImage:Image
{
	protected override void OnPopulateMesh(VertexHelper toFill)
	{
		toFill.Clear();
	}
}
1
2
3
4
5
6
7

效果如下

七、参考资料

[1]. https://blog.csdn.net/salvare/article/details/82432073
[2]. https://teafatesanya.blog.fc2.com/blog-entry-104.html
[3]. https://huosk.github.io/2018/12/14/UguiOptimiseControl/
[4]. https://zhuanlan.zhihu.com/p/35677228