目的:
增進GUI在Unity3D運算時的效率,也就是降低Batches (舊版稱Drawcall),GUI元件設計後,切圖會切出很多細小的圖片檔案,透過Sprite Atlas可以將一整個資料夾的圖片直接整合成一張大圖。對於系統的計算,載入一張圖,就需要一個Batches,因此整合好的一張大圖,只需要一個Batches大幅降低運算次數。特別是開發行動裝置,這方法是必要的處理。
說明:
什麼是 Sprite Atlas? 有網友稱為圖片集。Wiki上比較接近的稱為Texture Atlas 紋理地圖集。可以先Google圖片搜尋Sprite Atlas看看,可以看出大概都是把細小的圖片整合成一張大圖的樣子。

其實這功能在Unity3D 5.6版時有出現,甚至在Unity3D 2017版也有調整新功能,但早在這之前,比較有名的方案是使用nGUI插件,透過它來進行拼板。也能做出2D人物動畫。

原理是透過給予座標與每張圖片的大小來提取圖元,也就是說若你要做成一連串的動畫。可以逐一地告訴系統,你每一張圖在這個大圖的哪裡、有多大,依序讀取,進而變成逐格動畫(Frame by Frame Animation)。
無論如何,Unity3D 就把這功能收編了,而且做得更完整、更簡單。現在就來看看。
步驟:
新增Sprite Atlas,Atlas 有人翻成圖片集,大概的意思就是把圖片集合起來。在Project視窗中按右鍵選Create > Sprite Atlas。

點選後可以看到一個新的Atlas Icon出現。如下圖紅框處,點選後可以看到相關屬性出現在Inspector視窗中。

若第一次使用時,會出現下方藍框的警告訊息,這邊是說,這個功能已經預設關閉,若想使用圖片打包功能,需要開啟。

快速雙擊警告訊息,可以自動帶出設定介面。可點選”Always Enabled”


此時可以開始進行打包了,回到剛剛的地方,可以看到下圖紅框處,有一個”Objects for Packing”, 點選右下角的 “+”,這時候會跳出一個視窗,要你指定要打包的圖片資料夾。簡單來說,只要你把要打包整成一張圖的東西,都放在同一個資料夾,unity3D就會自動幫你包起來變成一張大圖。



這時候記得按一下Pack Preview 來打包,其實滑鼠移上去是寫Pack this atlas。也就是按下去就會開始打包。所以若有重新放圖,或是重新勾取調整設定,都需要再按一次Pack Preview來重新打包。


值得一提的是,打包的時候可以選擇圖片打包的緊緻一點,或是不重疊的放置。特別是有圓形的圖片,若有開啟Tight Packing,有時候介面顯示時會有一些奇怪的圖在邊緣出現,這時候只要把Tight Packing 勾掉不選即可。


實際效果:
可以看到在使用Sprite Atlas 整合前,系統開始Play時,所占用的Batches為25,而開啟後只剩下14。只能說包越多圖,省越多。




小結:
程式開發到後期時,常常因為沒有控制效能,最後導致Batches (Drawcall)大幅上升3D場景變得非常卡頓,因此而要注意時時養成習慣,從小地方優化效能。無論介面或是3D物件,聚沙成塔。就不會在最後階段優化時,這麼痛苦的擠出效能來。 Sprite Atlas可以說是基礎的增加效率良藥。