現在主流的UI解決方案是UGUI和NGUI，近年來更是以UGUI爲主，本期結合UWA學堂以及Blog的相關內容整理了《Unity引擎UI模塊知識Tree》，主要介紹了UGUI的優化、框架完善及解決方案，也涉及到NGUI和FairyGUI的內容，最後是UWA的工具篇，開發者們可以根據報告查看問題，優化項目。
前期我們也整理更新過《Unity引擎渲染模塊知識Tree》和《Unity引擎資源管理模塊知識Tree》，深受開發者們的喜愛，歡迎大家按照自己的興趣和需要參考取閱。
UGUI
框架
《UGUI深度研究之源碼鑑賞》
從UI的代碼底層講起，通過理解底層代碼的原理來認知上層的有效優化方法。這裏會從源碼中深入分析UI網格重建的實現原理，並完成了提取觸發UI重建的UI元素的代碼實現，可以更方便、更準確地定位引起UI性能問題的UI元素，從而有針對性地做優化。
《Unity手遊UI框架一站式解決方案》
該課程內容非常詳實、性價比極高。初級開發者可以擁有一套完整的實戰UI框架源碼，快速進入實戰；中級及以上者可以深入理解框架的形成過程並在此基礎上進行修改，迭代出屬於自己的框架；語言中並沒有華麗的辭藻，技術則完全以實用、穩健爲基礎。
《UI框架搭建：控件定製篇》
《UI框架搭建：消息重構篇》
《UI框架搭建：應用技巧篇》
整套框架分爲三節課程來講解：第一節課程主要講解控件側的框架搭建，第二節課程進一步講解消息流程框架搭建，最後一節則羅列我們在研發過程中特別推薦的高級技巧操作。該系列課程帶你從一個不同的視角審視UI框架，並在關鍵的地方給予踩坑預警；底層認識UI控件背後的邏輯；在搭建框架時，教你面對不同技術選型做出合理的取捨判斷。
方案
《Unity UGUI 渲染3D對象詳解》
該課程是一個針對項目研發過程中一個場景問題的解決方案。在UI界面中渲染3D物體是一個非常普遍的需求，該課程講解的並不是如何去渲染，而是講解在UI界面中渲染3D物體通常會遇到哪些棘手的問題，它的原理是什麼以及如何解決。通過該課程，你可以對UI界面中渲染3D物體的原理進行掌握，同時對於大多數研發團隊中會碰到的問題和解決方案都會有一個更爲全面的瞭解。
《Unity運行時動態圖集的實現》
本課程講解了Unity 運行時通過動態圖集來降低Draw Call的方法，從基本思路和實現原理切入，隨後對動態圖集的功能做了優化和擴展，附帶Demo源碼。不僅包含可複用的圖集，還有空間利用效率更高的不可複用圖集的實現。
《基於DOTS的UI解決方案》
本文介紹了DOTS UI解決方案，是比較早的對DOTS UI的介紹，基於0.3.0版本，主要是一些簡單的功能實現，包括Conversion、UI Mesh Batching、 RenderSystem，並做了UGUI和DOTS UI的性能對比。
《UGUI 文本多語言方案》
Unity的兩套UI框架中，NGUI包含UI文本的多語言功能，而UGUI原生並不支持多語言。本文采用一套Key對應多套文本的方式，實現了遊戲內動態的語言切換，簡單、方便，又避免了插件的使用。原理講解清晰，並附上了關鍵的代碼講解，值得一讀。
《UGUI表情系統解決方案》
圖文混編是表情系統的常見問題，Unity推薦的TextMesh方式可以混編，但是與UGUI難以整合、使用多個材質時還會帶來動態合批的問題，作者通過研究UGUI源碼和其Shader，重寫了UGUI的Text生成Mesh的方法，很好地解決了圖文混編的問題，本文詳細講解了這套表情系統解決方案，並附贈源碼。
《Unity遊戲界面解決方案: PSD For UGUI》
在遊戲開發過程中界面系統需求變化頻繁，牽涉到人員最多，從項目長期各系統開發、維護所佔時間統計來看，界面系統所佔時間是最多的。筆者通過學習、總結，開發出這個從PSD文件直接生成Unity中Prefab資源的流程，該流程可以高保真地在Unity中復現美術設計，減少溝通，提高遊戲整體研發效率。
《屬性雷達圖UGUI渲染器》
使用雷達圖展示角色的各個屬性值，是常見的UI界面，文中對方案的實現邏輯和思路做了詳細的講解並實際測評了效果。
《如何實現次時代美術效果—UGUI美術製作篇》
本視頻展示了使用UGUI，現場製作自定義的材質，實現酷炫的UI表現效果的過程，並講解了如何通過編寫自定義的UI組件實現複雜的UI狀態，結合動畫系統來實現動感的UI效果。
FairyGUI+NGUI
《FairyGUI插件解析及Lua導出》
本專欄作者詳細介紹了UI框架設計理念和核心內容，並通過FairyGUI的自動化邏輯，重構了UI管線，同時在插件創建和Lua腳本導出兩個環節，詳細地介紹了自己的工程操作、並對關鍵代碼進行了解析，很好地解決了重度遊戲開發中常見的反覆率高、耗時等痛點，文末還提出了編輯器化的未來擴展思路。提高遊戲工業生產力、解決開發痛點，選它！
《FairyGUI的使用技巧和優化建議》
當時作者的團隊正面臨Cocos2d向Unity的轉型，選擇了FairyGUI作爲大部分圖形界面設計和測試的工具，經過一年半的時間，很好地完成了過渡和不同部門的配合。文中分享了實戰中總結的7個技巧，都很實用。包括：
1）像素點擊測試功能的注意點
2）動效播放TimeScale的問題
3）列表使用的優化
4）合批
5）循環虛擬列表
6）Text影響Draw Call的例子
7）濾鏡影響Draw Call
該作者在學堂的另一篇文章《Addressable系統解析及實踐經驗》也深受學堂用戶的歡迎。
《Unity一鍵圖集生成工具，附源碼（基於NGUI和TexturePacker）》
TexturePacker GUI是NGUI中打包管理圖集的常用工具，但是如果圖集較多，就會帶來很多的重複，筆者寫了這套工具來實現批量圖集的生成，從而提高效率。文中詳細講解了工具的製作過程，並附上了工程源碼。
優化
《Unity引擎渲染、UI、邏輯代碼模塊的量化分析和優化方法》
Unity引擎的渲染、UI和邏輯腳本耗時是大多數項目的Top 3耗時模塊。對此，我們對這三個模塊進行量化地統計和分析，介紹準確定位性能瓶頸的方法。同時，從常見的性能問題入手，分析和對比各種可行的性能優化方案，以求顯著地提升這些模塊的效率。內容包括：
- 渲染模塊的重要參數分析以及優化方法
- UI模塊瓶頸的精確定位和優化
- C#/Lua瓶頸函數的優化方法
《Unity引擎移動遊戲性能優化全解析》
課程是在UWA DAY 2018上的分享，當時UWA已經爲超過70款移動遊戲項目進行了深度優化。在針對這些項目的性能進行深度剖析時，我們遇到了大量的“疑難雜症”。在此，我們將這些問題進行總結和歸納，通過大量實際案例，讓大家能夠了解和掌握如何對Unity引擎各個模塊、資源和內存管理方面的性能問題進行快速的定位和精準的分析，內容主要包括：
- 渲染、UI、加載、物理等Unity引擎各個主流模塊的“疑難雜症”分析
- 紋理、網格等主流資源的資源加載和內存管理
《Unity UI模塊優化案例精講》
對UI模塊常見的性能問題進行全方位的解析，具體分析UGUI和NGUI各自的優勢和性能瓶頸所在，以及提升性能的主要方式，主要包括：
- 如何降低界面的渲染開銷
- 如何降低界面的更新開銷，以及避免峯值
- 如何高效地處理大量HUD元素等
《UGUI深度研究之優化技巧》
本課程通過講解紋理格式、紋理通道分離、紋理尺寸設置等方面，找到移動端UI紋理資源兼具效果和性能的合理格式，以此減少紋理資源加載耗時，從而減少UI的打開耗時。此外，還包括了UI製作上的常見UI製作優化思路，幫助開發者找到UI的“正確打開方式”。爲了更好地在研發後期找到瓶頸UI，這裏還提供了一個UI界面的靜態分析工具，可以幫助開發者更直觀地分析定位“問題UI”。
隨着UI迭代和研發流程的變化，在UI資源上也會遇到一些不可避免的麻煩問題，本課程也對這些問題進行了舉例並給出了可參考的解決方案。通過學習，開發者可以更好地對移動端UI製作進行有條理的性能把控，提升UI界面的運行效率。
《詳解UGUI Draw Call計算和Rebuild操作優化》
這是目前對UGUI Draw Call分析得最爲透徹、全面的一篇文章。通過大量舉例讓大家直接明白爲何UI界面中的Draw Call總是居高不下，同時讓大家掌握對Draw Call、UI重建、Overdraw等高頻實際問題的高效優化知識。
《如何實現高效UGUI性能—UGUI性能優化篇》
本視頻主要講解了以下四方面的內容：
- UGUI 中Draw Call的形成規則
- Overdraw的若干優化方式
- 通過對源碼的簡單修改，優化事件檢測的開銷
- UI 網格重建的機制和優化方法
《如何優化UGUI的ScrollRect》
UGUI的ScrollRect在加載太多物體的時候，第一次彈出界面會非常卡頓，而且不在界面裏的內容依然會參與繪製，導致毫無意義的浪費。筆者對此進行了一番研究，並將心得與大家分享。
《UGUI 降低填充率技巧兩則》
Fill Rate（填充率）是指顯卡每幀每秒能夠渲染的像素數。在每幀繪製中，如果一個像素被反覆繪製的次數越多，那麼它佔用的資源也必然更多。目前在移動設備上，FillRate的壓力主要來自半透明物體。因爲多數情況下，半透明物體需要開啓 Alpha Blend 且關閉 ZTest和 ZWrite，同時如果我們繪製像 alpha=0 這種實際上不會產生效果的顏色上去，也同樣有 Blend 操作，這是一種極大的浪費。因此，本文爲大家推薦了兩則UGUI 降低填充率的技巧，希望對大家有所幫助。
《Unity手遊開發札記——使用Shader進行UGUI的優化》
UI優化是個極其繁瑣且考驗功底的部分。筆者整理了之前工作中基於Shader來進行優化的思路和方法，以及自己構建的、代替UGUI提供的通用控件的組件，包括小地圖、Mask的使用、進度條、基於DoTween的動畫效果優化等，具有極高的參考意義。
《NGUI性能優化技巧》
包含了上、下兩節內容，上主要介紹了使 Widgets 對不同的屏幕尺寸進行自適應；自定義UI材質的製作；降低渲染時的Draw Call數量；解決拾取UI與場景物體的鼠標事件衝突等，下主要介紹了UI Panel 開銷原理和實例演示降低UI Panel的開銷。
《如何大幅優化NGUI的堆內存分配》
本文旨在修改NGUI的幾處底層實現，從而規避堆內存的臨時分配。文末，通過複雜的實例來這種方法進行了測試，通過比較可以看出，該方法可以大幅優化UI界面在運行時的堆內存分配。
對於NGUI解決方法的優化主要包括以下幾個方面：
- 對UIGeometry的頂點屬性做了緩存池，並保證OnFill時進行按需選擇
- 通過unsafe的方法來修改IndexBuffer的長度
- 填充數組前充分設置List.capacity
《高效的iPhone X適配技術方案（UGUI和NGUI）》
本文作者旨在通過改錨點的方式，分別實現在NGUI和UGUI上的iPhone X適配技術方案，並結合自身項目經驗，闡述了主要的實現細節，希望能對廣大遊戲開發團隊有借鑑意義。
《如何繞過Unity打造自己的HUD UI系統》
詳細講解如何自己實現一套UI系統渲染器，並實現HUD的高效渲染，從而解決戰鬥過程中大量頭頂血條和傷害數字效果造成的卡頓問題，特別適合於大量HUD高頻出現的遊戲項目，內附工程源碼方便移植。
工具
《一個高效研發的制勝之道 | UWA GOT Online功能說明》
不管項目本身是否重度，性能調優永遠是上線前的必經之路。優化性能，不僅需要足夠深度的分析來定位問題瓶頸，也需前瞻性的保障措施來緩解後續的優化壓力和性能風險。因此，我們推出了UWA GOT Online，方便研發團隊在本地真機測試，並能在編輯器中搭建本地服務器查看性能數據。
《如何讀懂UWA性能報告？—UGUI篇》
《如何讀懂UWA性能報告？—NGUI篇》
UI模塊是很多開發團隊頭疼的疑難雜症之一，它的性能和UI設計師的製作及工程師的實現息息相關，兩套看上去完全一樣的UI很有可能在底層設計和實現上截然不同，因此性能也大相徑庭。所以我們在UWA測評報告中也提供了UI的性能分析。
無論對於從業者還是正在讀大學的技術萌新，學習的有效時間和個人時間都是有限的。高效學習者最在意的是時間的價值，一個需要體系化的知識地圖就顯得尤爲重要。以上就是本期爲大家梳理的Unity引擎UI模塊知識Tree，作爲體系化的知識，我們希望大家能掌握背後的邏輯與原理，結合學習方法論並反覆實踐，能夠在自己的項目中更高效地解決UI問題。同時也歡迎大家向我們投稿，交流行業內的技術知識。