前言

注意：DC指的是Draw Call。
溫馨小提示：Frame Debugger 窗口（菜單：Window > Analysis > Frame Debugger）會顯示繪制調(diào)用信息，并允許您控制正在構(gòu)建的幀的“回放”。

一、合批測試

首先看第一種情況 相同圖片的情況 這里是使用了四個Image，都使用同一張圖

相同圖片 z軸相同的合批

接下來看一下FrameDebugger看一下DC情況

👆看到DC只有一次，引擎自動對這些使用相同圖片的Image進行了合批處理，一次畫完

下面在看另一種情況 相同圖片不同Z軸

👆每個Image的Z軸都不相同

和上面的擺放比較類似，就是4個物體的Z軸各不相同，在此查看一下FrameDebugger，發(fā)現(xiàn)DC和上面的一樣

👆在這個情況Z軸的不同是不影響合批的，合批依舊發(fā)揮作用

那在看下面一種情況，在Image之間插入其他Text物體，也就是說，這幾個物體上下的Z軸都不相同，看看會如何

相同圖片Z軸不同 之間插入文本

在來看一下FrameDebugger

👆可以看到每個UI都需要一次DC，沒有任何的合批

👇下面在做一點小改動，把所有Z軸都設(shè)為0，這個時候合批又起作用了，DC變?yōu)?

下面在做一點小改動，僅僅把Text都放在Image的后面

👆這個時候會合批，所有圖片一次，Text又一次,合批又發(fā)揮了作用

結(jié)論：這里我發(fā)現(xiàn)原本能夠被合批的UI即使Z軸不同，也能被合批，不受Z軸影響，但是原本可以合批的UI之間插入了其他Z軸不同的UI，就會打斷合批。

👇下面在看另一種情況 ，也就是UI之間的遮擋，這也會影響合批（所有物體Z軸相同情況下）

上面是三個完全一致的Image，但是前兩個Image之間夾了一個Text。

第一次DC畫最左側(cè)的Image，第二次DC繪制Text，第三次DC繪制剩下的Image，中間遮擋的Text會中斷DC，這個也很好理解，被擋住了的話，需要要逐層繪制，這當然也會影響合批。

二、圖集

Sprite Editor 圖集插件的安裝：https://blog.csdn.net/weixin_45961836/article/details/145359732

👇下面在看一下不同圖片的情況（所有物體Z軸相同情況下）

👆一個Image繪制一次，有幾種圖片就DC幾次

那實際開發(fā)中，基本都是用的不同的圖片，為了合批，就得使用圖集。
現(xiàn)在應(yīng)該都使用新版圖集了，老的spritetag的方式應(yīng)該棄用了。

下面需要在項目設(shè)置中打開圖集功能Editor->Project Setting->Editor 下面Sprite Packer選擇Always Enabled

如果不開的話Atlas就會有如下的提示，告訴你如何打開

下面可以右鍵Create->Sprite Atlas 來創(chuàng)建一個圖集

圖集的基礎(chǔ)使用這里就不再講解了，圖集的優(yōu)化必須在Play Mode下才能看到

還是上面四張圖，區(qū)別就是使用了圖集，DC就只有一次了👇

詳細查看可以看到使用的圖片并不是單張圖片了，而是一整張圖集資源了

如果有用到跨多張圖集的的資源的話，相對應(yīng)的DC也會增加
之前的項目都是這樣使用圖集的，每一個圖片文件夾創(chuàng)建一個圖集，那么現(xiàn)在可以這樣用，一個面板就創(chuàng)建一個對應(yīng)的Atlas，把面板用到的圖片添加到這個圖集上，這樣可以大大節(jié)省GC。

下面看看實際項目中的使用

實際的DC就僅僅2次

在看看二級面板的情況，大體布局如下

現(xiàn)在看看DC情況

有3次DC，第一次是繪制半透明黑色面板，第二次繪制剩余圖片，第三次是剩下的字。需要注意的是第一次DC。

這是因為我們使用了一個黑色半透明的背景

如果這樣的話會使用一個默認資源，并且不能和圖集合批，為了優(yōu)化這個DC，改為使用一張4*4的白色方塊圖片，并打入到圖集中去。下面看看優(yōu)化后的DC

在看看同時打開多個面板的情況，MainPanel打開這個二級菜單的情況，可以主要到的是需要一層一層繪制，也就是避免設(shè)計太多層級的UI

在這個情況下，所有UI的DC就只有4次，每個面板個2次

下面在看一下平時使用的UI優(yōu)化

看一下下面這種情況，一個很常見的情況\

這是一個透明度為0的圖片按鈕，且使用了一個默認資源。他在DC里面的情況是這樣的

會單獨使用一個DC，當然你也可以和上面的說過的一樣，選擇一個打入圖集的白兔，也能合批掉。但是還是會繪制一張看不見的區(qū)域，其實并不需要這樣，這里可以像這樣做

//不渲染但可以相應(yīng)點擊
public class NoOverdrawImage : Graphic
{public override void Rebuild(CanvasUpdate update){}
}   

向上面的Button就可以變成這樣

不會發(fā)生繪制了，也不會發(fā)生Overdraw的情況

在看看ScrollView這一類的組件，或者說Mask的組件

這一類組件在DC的情況，

這個看不到的Mask也會占用一次DC

這個地方的解決方案是使用RectMask2D組件來代替,當然只能是矩形的情況下

另外還有一個優(yōu)化就是打開全屏UI的時候，可以選擇關(guān)閉主相機，只保留UI相機?？梢允褂靡粋€基類來統(tǒng)一管理

另外即使在UI相機看不到的物體，也會被渲染并占用DC，就下下圖這樣，在外面擺了一大堆東西，這些全部會占用DC，可以先隱藏它們，等需要的時候在顯式它們。

總結(jié)一下：
合批優(yōu)化：

1. UI中如非必要，Z軸統(tǒng)一設(shè)為0。如果有Z改變了，盡量通過Group來規(guī)整在一起
2. 注意組件的遮擋關(guān)系，尤其是Text被Image遮擋的情況。
3. 打圖集。
4. 圖集的管理選擇以單個面板來管理圖集，而不是使用文件夾形式。
5. Image組件不要選擇None，也會使用一個默認圖片且無法與圖集合批，選用一張圖片來統(tǒng)一使用并打入到圖集中。
6. 不要設(shè)計很多層級的UI，會全部繪制。

UI組件優(yōu)化

1. 不要使用透明為0的圖片當作按鈕，改用NoOverdrawImage來代替
2. 使是RectMask2D來代替Mask
3. 全屏UI關(guān)閉主相機，只保留UI相機
4. UI相機看不到的物體也會被渲染，占用DC，可以先禁用它們

參考文獻：https://zhuanlan.zhihu.com/p/364785849