UGUI drawcall 优化实录

写在前面

去年参加uwa day 2017时，耳闻ui之于项目的影响，很多项目由于人少事多赶进度，而在开发中有很多粗放之处，ui就常常成为很多项目的性能短板。上个月项目上线，发现很多UI的性能堪忧，抽时间对于优化做了些优化。unity官方及其他很多渠道已经有很多关于ui优化的总结提纲，本文意在成为一本类似check list的手册，记录优化中碰到的实际问题。

原理

本文是基于UGUI的优化，先搞清楚几个概念：

drawcall,CPU准备好需要绘制的元素，对底层图形程序接口进行调用的过程。

drawcall Batching,是Unity对于drawcall的一种优化措施，从字面意思可以理解为drawcall的合并。对于使用相同图集，Material等信息的元素可以合并到同一个drawcall进行绘制，不过这种方式会造成合并后mesh的增大，导致内存占用的上升，对于大多数情况，drawcall batching都是利大于弊的。

下面开始我的优化流水帐：

透明的Image

游戏中会应用大量的透明image，大多是作为点击事件的响应媒介。要知道image即使没有设置texture，也会持续的早成绘制的开销。 用下面的脚本（丑哥出品 ）代替仅用于响应点击的image：（ 填充率!填充率!填充率! ）

using UnityEngine;
using System.Collections;
namespace UnityEngine.UI
{
    public class Empty4Raycast : MaskableGraphic
    {
        protected Empty4Raycast()
        {
            useLegacyMeshGeneration = false;
        }
        protected override void OnPopulateMesh(VertexHelper toFill)
        {
            toFill.Clear();
        }
    }
}

不透明的image

如果texture是中心镂空且切图为九宫格时，可以去除fill center，以减少over draw。栗子：

背景还是前景

一般在制作ui背景时，往往简单粗暴的创建形如image_BG之类的节点，位于Hierarchy的最上层（先被绘制）。这里需要根据项目的实际需要区分到底是背景还是前景，简言之，就是哪些图片是显示在下面，哪些是显示在上面。在优化项目的排行榜ui时，仅仅调整了排行榜中条目的“背景”，将一部分实际上是前景的image节点移动到最下层，ui便减少了10个drawcall。

重叠

有时制作prefab并不会刻意将无需重合的image元素重叠，然而现实的情况会更复杂，例如加入了动态的ui，特效等动态的情况，往往会造成image的重叠。

下图中的宝箱特效会左右抖动：

或是制作资源时边缘重叠：

上面的情况，最简单的解决办法当然是在不影响美术效果的前提下调整元素的位置；否则，如果有多处同时出现重叠的情况，可以考虑新建一个canvas，将变化的元素全部挂在新的canvas下，这样可以避免元素重叠引起ui 重建增加的开销。这样会增加prefab的层级及代码的复杂度，改动之前要做好trade off，是否值得如此。

旋转

        旋转往往不易被察觉，我在排查2D UI的过程中发现，有些text组件在rotation的x轴上有一些奇怪的旋转，而在正交投影的情况下，rotation在x轴上的旋转并不会有显示出来却会打断drawcall的合并。

打破沙锅问到底，到底什么样的旋转会影响drawcall呢？

x轴方向上：

90、270：0个drawcall

180、360: 1个drawcall

y轴方向上：

任何角度都是1个drawcall

z轴方向上：

任何角度都是 1个drawcall

90度的整数倍，Mesh依旧是原始大小。

非90度的整数倍， Mesh 会变大，并且容易破坏drawcall合并，这是由于不规则的旋转导致Mesh占据的空间比看起来大很多。下图中Text的mesh为最大的矩形，会与五角星的Image重叠。

渲染顺序

Unity drawcall的合并规则依赖于组件在Hierarchy中的顺序，越是在上面的元素越会首先绘制。对drawcall合并规则感兴趣可以看这篇文章： Unity GUI(uGUI)使用心得与性能总结
同一图集的Image元素应尽量保证在Hierarchy中连续，避免中间插入其他图集的不同组件。Image_BG(2)与Image_VIP，Image_VIP1显示的是同一图集中的元素，被Image_BG(3)打断了drawcall的合并：          

 

最后

通过上面的优化，大部分UI的drawcall都下降了30%～50%，效果还是很显著的。

参考资料：

https://blog.uwa4d.com/archives/1875.html