Unity 优化之UGUI (2017年版【一】)

首先感谢UWA的公开课讲解，本文中的内容主要采集于UWA2017的公开课公开课中的优化点对于项目的帮助是不容小觑的~

在去年观看uwa在直播公开课的时候，发现了多在自己使用ugui中使用不正确的地方，但是碍于项目工期比较紧张，并没有进行系统的整理，时间一久当时记下的东西就显得很碎片化，有些问题也变得模棱两可，趁着项目刚刚结尾，特意对公开课内容指出的注意事项，进行相应的总结、分类~

有不准确、不合理的地方希望大家能留言指出，方便及时更正

在公开课中的使用的Unity版本为4.6 目前本人实测版本为2017.4.2f2

---

尽可能的让UI元素合批

首先创建一个新的场景，摄像camera为Solod Color

可以看到场景中的Barches为1，这是因为camera在做Clear操作

然后创建两个Button 去掉对应的Text，运行unity发现产生的Batches变为2

当两个Button进行重叠的是时候，Batches并没有变化

但是对有Text的两个Button进行上面的操作，就会出现不一样的效果，重叠后的Batches和未重叠Batches不一致

按照公开课中的说法，这种重叠的做法会打破原有的拓扑排序（Text2 与Button2合并），造成Draw Call的合并失败（Text -Button -Text - Button），当然在Hierarchy视图中也要尽量按照这种拓扑排序的方式进行UI的层级摆放。

结论：在进行UI设计额时候尽量少使用来自不同Atlas的材质，也尽量避免这种倾轧的情况（Scene视图调节为Writeframe模式可以更容易查看），尽可能把所有的文字放到图片之上，使用同种字体，更容易进行合批

---

接下来要说的就是Mask组件

在一个新的场景中放图两个Image，然后设置统一的Packing Tag

而且也要在Editor Settings开启图集选项

运行前后对应可发现两张图片进行了合批

然后在场景中添加一个对应的Mask，发现Batches有所变化，两个图片也进行了合批

把其中一个图片放到mask的遮罩中，发现图片无法合批

结论： 首先一个Mask组件就会产生一个Draw Call，而且在Mask中的图片无法与外界的图片进行合批

---

减少Overdraw

根据上图的显示，调节到OverDraw模式，颜色越鲜亮的地方造成的OverDraw越大，随之带来的GPU压力也是越大的

下面来说减少OverDraw的一些策略

在ImageType选项为Sliced的情况下，不需要Fill Center 的时候去掉勾选

• 作者钱康来重写Image相关组件降低性能消耗

Code Empty4Raycast

using UnityEngine;
using System.Collections;

namespace UnityEngine.UI
{
    public class Empty4Raycast : MaskableGraphic
    {
        protected Empty4Raycast()
        {
            useLegacyMeshGeneration = false;
        }

        protected override void OnPopulateMesh(VertexHelper toFill)
        {
            toFill.Clear();
        }
    }
}

Code PolygonImage

using System.Collections.Generic;

namespace UnityEngine.UI
{
    [AddComponentMenu("UI/Effects/PolygonImage", 16)]
    [RequireComponent(typeof(Image))]
    public class PolygonImage : BaseMeshEffect
    {
        protected PolygonImage()
        { }

        // GC Friendly
        private static Vector3[] fourCorners = new Vector3[4];
        private static UIVertex vertice = new UIVertex();
        private RectTransform rectTransform = null;
        private Image image = null;
        public override void ModifyMesh(VertexHelper vh)
        {
            if (!isActiveAndEnabled) return;

            if (rectTransform == null)
            {
                rectTransform = GetComponent();
            }
            if (image == null)
            {
                image = GetComponent();
            }
            if (image.type != Image.Type.Simple)
            {
                return;
            }
            Sprite sprite = image.overrideSprite;
            if (sprite == null || sprite.triangles.Length == 6)
            {
                // only 2 triangles
                return;
            }

            // Kanglai: at first I copy codes from Image.GetDrawingDimensions
            // to calculate Image's dimensions. But now for easy to read, I just take usage of corners.
            if (vh.currentVertCount != 4)
            {
                return;
            }

            rectTransform.GetLocalCorners(fourCorners);

            // Kanglai: recalculate vertices from Sprite!
            int len = sprite.vertices.Length;
            var vertices = new List(len);
            Vector2 Center = sprite.bounds.center;
            Vector2 invExtend = new Vector2(1 / sprite.bounds.size.x, 1 / sprite.bounds.size.y);
            for (int i = 0; i < len; i++)
            {
                // normalize
                float x = (sprite.vertices[i].x - Center.x) * invExtend.x + 0.5f;
                float y = (sprite.vertices[i].y - Center.y) * invExtend.y + 0.5f;
                // lerp to position
                vertice.position = new Vector2(Mathf.Lerp(fourCorners[0].x, fourCorners[2].x, x), Mathf.Lerp(fourCorners[0].y, fourCorners[2].y, y));
                vertice.color = image.color;
                vertice.uv0 = sprite.uv[i];
                vertices.Add(vertice);
            }

            len = sprite.triangles.Length;
            var triangles = new List(len);
            for (int i = 0; i < len; i++)
            {
                triangles.Add(sprite.triangles[i]);
            }

            vh.Clear();
            vh.AddUIVertexStream(vertices, triangles);
        }
    }
}

---

减少Raycast Target

在对应的Text Image和Rawimage中都有Raycast Target选项，这个选项负责接收我们所点击的事件，但是项目中我们有些UI元素是不需要这些东西，所有可以去掉，减少不必要的性能消耗，可以用 RaycastTarget检测小工具 ，他可以在对应的editor模式下，把开启Raycast Target选项的UI以蓝色线框的形式显示出来，方便大家检查遗漏的关闭的UI元素

---

避免网格重建（Canvas.BuildBatch）

Canvas.BuildBatch

现在untiy2017版本中Canvas.BuildBatch的主要耗时已经放到了多线程中

网格重建的意思是把Canvas下所有的ui合成一个Mesh，当有UI元素更改的时候就会重建这个Mesh，造成性能消耗。 采取的对应策略就是【动静分离】，在经常变动的UI元素（位置、颜色、图片等）上添加Canvas组件，就可以避免因为UI的改变造成整个Mesh全部重建。当然对于数量较多需要进行颜色渐变的UI元素都添加上canvas显然不合适，因为添加canvas会增加DrawCall。所以我们需要采用另一个策略，在Image上添加一个自定义的material，然后更改这个material的Tint属性，这样既能满足颜色渐变，又能避免网格频繁重建造成的性能消耗（实质是避免修改网格上的顶点属性，造成网格重建）

---

额外注意的地点

• 避免使用OutLine组件
• 避免使用Shadow组件

应对策略：使用Text Mesh Pro插件是一个不错的选择（现在已经免费）

• 避免频繁使UI元素SetActive（开、关），会造成网格重建

应对策略：使用CanvasGroup