首先感謝UWA的公開課講解证九，本文中的內(nèi)容主要采集于UWA2017的公開課公開課中的優(yōu)化點(diǎn)對(duì)于項(xiàng)目的幫助是不容小覷的~
在去年觀看uwa在直播公開課的時(shí)候于微，發(fā)現(xiàn)了多在自己使用ugui中使用不正確的地方斟薇，但是礙于項(xiàng)目工期比較緊張，并沒有進(jìn)行系統(tǒng)的整理，時(shí)間一久當(dāng)時(shí)記下的東西就顯得很碎片化县好，有些問題也變得模棱兩可主守，趁著項(xiàng)目剛剛結(jié)尾禀倔，特意對(duì)公開課內(nèi)容指出的注意事項(xiàng)，進(jìn)行相應(yīng)的總結(jié)参淫、分類~
有不準(zhǔn)確救湖、不合理的地方希望大家能留言指出，方便及時(shí)更正
在公開課中的使用的Unity版本為4.6 目前本人實(shí)測(cè)版本為2017.4.2f2
盡可能的讓UI元素合批
首先創(chuàng)建一個(gè)新的場(chǎng)景涎才，攝像camera為Solod Color
可以看到場(chǎng)景中的Barches為1鞋既，這是因?yàn)閏amera在做Clear操作
然后創(chuàng)建兩個(gè)Button 去掉對(duì)應(yīng)的Text，運(yùn)行unity發(fā)現(xiàn)產(chǎn)生的Batches變?yōu)?
當(dāng)兩個(gè)Button進(jìn)行重疊的是時(shí)候耍铜，Batches并沒有變化
但是對(duì)有Text的兩個(gè)Button進(jìn)行上面的操作邑闺，就會(huì)出現(xiàn)不一樣的效果，重疊后的Batches和未重疊Batches不一致
按照公開課中的說法棕兼，這種重疊的做法會(huì)打破原有的拓?fù)渑判颍═ext2 與Button2合并）陡舅，造成Draw Call的合并失敗（Text -Button -Text - Button）伴挚，當(dāng)然在Hierarchy視圖中也要盡量按照這種拓?fù)渑判虻姆绞竭M(jìn)行UI的層級(jí)擺放靶衍。
結(jié)論：在進(jìn)行UI設(shè)計(jì)額時(shí)候盡量少使用來自不同Atlas的材質(zhì)灾炭，也盡量避免這種傾軋的情況（Scene視圖調(diào)節(jié)為Writeframe模式可以更容易查看），盡可能把所有的文字放到圖片之上颅眶，使用同種字體蜈出，更容易進(jìn)行合批
接下來要說的就是Mask組件
在一個(gè)新的場(chǎng)景中放圖兩個(gè)Image，然后設(shè)置統(tǒng)一的Packing Tag
而且也要在Editor Settings開啟圖集選項(xiàng)
運(yùn)行前后對(duì)應(yīng)可發(fā)現(xiàn)兩張圖片進(jìn)行了合批
然后在場(chǎng)景中添加一個(gè)對(duì)應(yīng)的Mask帚呼，發(fā)現(xiàn)Batches有所變化掏缎，兩個(gè)圖片也進(jìn)行了合批
把其中一個(gè)圖片放到mask的遮罩中，發(fā)現(xiàn)圖片無法合批
結(jié)論： 首先一個(gè)Mask組件就會(huì)產(chǎn)生一個(gè)Draw Call煤杀，而且在Mask中的圖片無法與外界的圖片進(jìn)行合批
減少Overdraw
根據(jù)上圖的顯示眷蜈，調(diào)節(jié)到OverDraw模式，顏色越鮮亮的地方造成的OverDraw越大沈自，隨之帶來的GPU壓力也是越大的
下面來說減少OverDraw的一些策略
在ImageType選項(xiàng)為Sliced的情況下酌儒，不需要Fill Center 的時(shí)候去掉勾選
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
在對(duì)應(yīng)的Text Image和Rawimage中都有Raycast Target選項(xiàng)，這個(gè)選項(xiàng)負(fù)責(zé)接收我們所點(diǎn)擊的事件枯途，但是項(xiàng)目中我們有些UI元素是不需要這些東西忌怎，所有可以去掉，減少不必要的性能消耗酪夷，可以用 RaycastTarget檢測(cè)小工具 榴啸，他可以在對(duì)應(yīng)的editor模式下，把開啟Raycast Target選項(xiàng)的UI以藍(lán)色線框的形式顯示出來晚岭，方便大家檢查遺漏的關(guān)閉的UI元素
避免網(wǎng)格重建（Canvas.BuildBatch）
現(xiàn)在untiy2017版本中Canvas.BuildBatch的主要耗時(shí)已經(jīng)放到了多線程中
網(wǎng)格重建的意思是把Canvas下所有的ui合成一個(gè)Mesh鸥印，當(dāng)有UI元素更改的時(shí)候就會(huì)重建這個(gè)Mesh，造成性能消耗坦报。 采取的對(duì)應(yīng)策略就是【動(dòng)靜分離】库说，在經(jīng)常變動(dòng)的UI元素（位置、顏色片择、圖片等）上添加Canvas組件潜的，就可以避免因?yàn)閁I的改變?cè)斐烧麄€(gè)Mesh全部重建。當(dāng)然對(duì)于數(shù)量較多需要進(jìn)行顏色漸變的UI元素都添加上canvas顯然不合適字管，因?yàn)樘砑觕anvas會(huì)增加DrawCall啰挪。所以我們需要采用另一個(gè)策略，在Image上添加一個(gè)自定義的material嘲叔，然后更改這個(gè)material的Tint屬性亡呵，這樣既能滿足顏色漸變，又能避免網(wǎng)格頻繁重建造成的性能消耗（實(shí)質(zhì)是避免修改網(wǎng)格上的頂點(diǎn)屬性借跪，造成網(wǎng)格重建）
額外注意的地點(diǎn)
- 避免使用OutLine組件
- 避免使用Shadow組件
應(yīng)對(duì)策略：使用Text Mesh Pro插件是一個(gè)不錯(cuò)的選擇（現(xiàn)在已經(jīng)免費(fèi)）
- 避免頻繁使UI元素SetActive（開政己、關(guān)），會(huì)造成網(wǎng)格重建
