首先感谢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 的时候去掉勾选
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<RectTransform>();
}
if (image == null)
{
image = GetComponent<Image>();
}
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<UIVertex>(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<int>(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（开、关），会造成网格重建
网友评论