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

忘是亡心i 2023-09-23 17:28 126阅读 0赞

## 一、Overdraw ##

### 1.1 什么是Overdraw ###

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

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

### 1.2 解决方法 ###

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

对于这种UI元素，可以采用九宫格切分，并将图片类型设置为Sliced  
![17a7042f7932d0ab952f386edf13342d.png][]

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

## 二、Text效果组件 ##

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

开启Outline后：  
![1a6fc6b21e6b4c80c5f1cf181f50764d.png][]

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

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

## 三、控制UI的显隐 ##

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

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

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

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

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

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

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

在运行时，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面板上的顺序与序号一致）  
![5526abe531bee481c00df699d74186f0.png][]

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

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

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

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

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

但如果仍然在同一个平面上（比如沿Y轴旋转180度），仍然可以合批  
![00980ef38eee128a0630113abe9233eb.png][]

## 六、没有Overdraw的点击区域 ##

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

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

public class NoOverdrawImage:Image
    {
        
    	protected override void OnPopulateMesh(VertexHelper toFill)
    	{
        
    		toFill.Clear();
    	}
    }

效果如下  
![a3c2f4512955353e6c3e24b7b0980fe6.png][]

## 七、参考资料 ##

\[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

[c65c17fa523ff2e0b7faebbedac28b22.png]: https://img-blog.csdnimg.cn/img_convert/c65c17fa523ff2e0b7faebbedac28b22.png
[69fe6bb8f6b4231fa4a74d943c337b88.png]: https://img-blog.csdnimg.cn/img_convert/69fe6bb8f6b4231fa4a74d943c337b88.png
[17a7042f7932d0ab952f386edf13342d.png]: https://img-blog.csdnimg.cn/img_convert/17a7042f7932d0ab952f386edf13342d.png
[51c63695d48e9162674861fe84c15e37.png]: https://img-blog.csdnimg.cn/img_convert/51c63695d48e9162674861fe84c15e37.png
[50627dbcacdf56d3fd7bebe8f40dda10.png]: https://img-blog.csdnimg.cn/img_convert/50627dbcacdf56d3fd7bebe8f40dda10.png
[1a6fc6b21e6b4c80c5f1cf181f50764d.png]: https://img-blog.csdnimg.cn/img_convert/1a6fc6b21e6b4c80c5f1cf181f50764d.png
[6a6e18160833c28b60685778d948cf24.png]: https://img-blog.csdnimg.cn/img_convert/6a6e18160833c28b60685778d948cf24.png
[8bfc5fedcdc46d716a87185590bb085a.png]: https://img-blog.csdnimg.cn/img_convert/8bfc5fedcdc46d716a87185590bb085a.png
[a627b0f935b9651949012a208cc399c2.png]: https://img-blog.csdnimg.cn/img_convert/a627b0f935b9651949012a208cc399c2.png
[28dd26fbc6552f260a0557305c77c248.png]: https://img-blog.csdnimg.cn/img_convert/28dd26fbc6552f260a0557305c77c248.png
[Link 1]: https://huosk.github.io/2018/12/14/UguiOptimiseControl/
[5526abe531bee481c00df699d74186f0.png]: https://img-blog.csdnimg.cn/img_convert/5526abe531bee481c00df699d74186f0.png
[0e5a8927852da2a034b74242f12e9c21.png]: https://img-blog.csdnimg.cn/img_convert/0e5a8927852da2a034b74242f12e9c21.png
[1706aa894f2dafef771221d54c01c2a5.png]: https://img-blog.csdnimg.cn/img_convert/1706aa894f2dafef771221d54c01c2a5.png
[706aea97ad473ed31d7f1ecde764a300.png]: https://img-blog.csdnimg.cn/img_convert/706aea97ad473ed31d7f1ecde764a300.png
[00980ef38eee128a0630113abe9233eb.png]: https://img-blog.csdnimg.cn/img_convert/00980ef38eee128a0630113abe9233eb.png
[3c3e19fe6a110cd153c5c0bb920d9744.png]: https://img-blog.csdnimg.cn/img_convert/3c3e19fe6a110cd153c5c0bb920d9744.png
[a3c2f4512955353e6c3e24b7b0980fe6.png]: https://img-blog.csdnimg.cn/img_convert/a3c2f4512955353e6c3e24b7b0980fe6.png