NGUI 新增/修改 Atlas (圖集)

shellycute

近來因為多語系的需求, 需要重新繪製 Atlas (圖集) 供 Animation 使用, 所以稍微看了一下 NGUI 如何製作 Atlas 以及如何修改 Atlas. 首先, 先來講講為什麼需要 Atlas? 一張一張的圖檔不好用嗎?

Unity 中使用 Atlas 目的

Atlas 是指將多個2維圖檔組合成一個大的2維圖檔. 組合出的圖片尺寸皆為 2 的次方, 所以當原圖們不構塞滿整張大圖是會看到留有空白處. 除此之外, 組合的過程可以先裁切掉原圖多出來的空白處, 再組合起來. 也根據不同的組合演算法選擇圖檔壓縮. 說了這麼多, 到底有甚麼好處呢?

  1. 整理圖檔, 節省資源
    上面提到過的, Atlas 製作的過程經過裁切, 組合再壓縮, … 等等. 設計的目的能有效的減少資源大小.
  2. 減少 Draw Calls
    Draw Calls 在 Unity 是指繪製一個物件的動作 (Draw call batching). 一個物件包含位置, Mesh (面), 多個 Material (材質), 多個 Texture (貼圖), … 等等. Unity 根據物件包含的 Material 數量呼叫對應次數的 Draw Calls. 而組合成的 Atlas 內的圖檔都使用同個 Material, 所以使用這些圖檔的物件都可以在一次 Draw Calls 繪製出來, 比起分散的圖與 Material 節省很多 Draw Calls.
  3. 有利 GPU 提升效能
    圖片尺寸為 2 的次方是有利於 GPU 運算的. 零散的小圖相較於組合後的大圖比較不容易達到.

但是也不能盲目的都合成一個大的 Atlas, 因為 Unity 加載資源到記憶體時會整個 Atlas 一起加載, 如果尺寸過大容易有浪費記憶體的可能. 通常尺寸大小不會超過 2048*2048. 而且請盡量把常用的圖製作成 Atlas 較能有效利用記憶體.

有關 Unity 可能遇到的資源管理上的問題, 可以看這篇作者做的整理, 參考參考.

NGUI 製作 Atlas

匯入 NGUI package 後, 由上方工具列 NGUI > Open > Atlas Maker 打開編輯器. 選擇欲加入的圖檔, 按下 Create. 過程會跳出視窗詢問創建的 Atlas 存放位置.

成功後會看到產生了3個檔案: 圖, Material, 與 Prefab (即 Atlas 的 Asset).

NGUI 修改/更新/刪除 Atlas 中的圖

與製作同樣的方式打開編輯器. Atlas 選單選擇剛才創建的 main_ui, 把新加入的圖檔拉到下方, 按下 Add/Update. 更新圖檔方式也是一樣的, 只是字換成 Update.

另外, 點選 Material 與 Texture 會顯示相關訊息在 Inspector, 可以直些修改 Shader, Texture.

如果想要刪除圖檔, 直接點選欲刪除的圖右方 “X" 按鈕, 再按下 Delete 即可.

NGUI 匯出 Atlas 中的圖

點選欲修改的 Atlas Prefab 後, Inspector 中顯示 UI Atlas 元件, 點選 Sprite 選單選擇欲匯出的圖, 按下 “Save As …" 後另存於其他地方.

在做多語系操作時, 發現專案的文字圖時常與其他圖組合成 Atlas , 因此替換並重新製作 Atlas 常需要把原圖取出來在組合一次.

有無 Atlas 的 Draw Calls 比較

看 Draw Calls 可以用 Unity Editor 提供的工具 Statistics, 顯示了 Audio 與 Graphics s 訊息. 注意到 Batches 即 Draw Calls, 是指 Unity 專用的 Draw Call Batching 技術, 數字代表 Draw Calls 次數.

編輯模式下的 Statistics
場景中包含 5 個 NGUI Texture 物件
Run time 模式下的 Statistics
場景中包含 5 個 NGUI Sprite 物件
2D 物件類型數量Draw Calls 次數
Sprite (共用 Atlas) 物件51 + 1 (背景渲染) = 2
Texture 物件55 + 1 (背景渲染) = 6

同樣繪製了5個 2D 物件, 使用 Atlas 只需要繪製1次 (1次 Draw Call), 相較只使用圖檔的方式少了 (數量-1) 的 Draw Calls 次數.

其他

Atlas 設計出來的目的本就是為了節省資源, 提高效能. 但是這個設計會讓資源使用相較複雜一些, 去思考甚麼資源適合合併 (ex: 小張的 UI 集合), 甚麼資源不適合 (ex: 大張的背景圖). 如果在多語系配置下, 使否要把同樣的文字圖合併一起還是不要? 種種都是值得思考去衡量記憶體與空間的使用.

發表留言