屬於 Unity 的 Flutter——UIWidgets

介紹

UIWidgets 是 Unity 的一個插件包，是一個從 Google 的移動 UI 框架 Flutter 演變過來的 UI 框架。

相對於原生開發的高開發成本（不一樣平臺都須要不一樣的一套代碼），Flutter、React-Native 等這種跨平臺 UI 框架應運而生。

Flutter 自 2018 年 3 月發佈以來，社區不斷壯大。因爲 Flutter 自身設計理念的出色，Unity 中國已經着手將其移植過來。固然了，也由於這兩個東西都很是的年輕，所以開發的時候都像開荒同樣。

框架圖

Flutter 有本身的一套渲染系統，那麼 Unity 做爲一個遊戲引擎，底層的圖形 API 用本身的一套東西就好了，所以移植過來更方便了。

Flutter 框架結構

UIWidgets 框架結構

執行效率

這裏提一些基礎的知識：

Batch 就是 DrawCall 的另外一種說法，瞭解渲染流水線的同窗會知道流水線在 CPU 與 GPU 之間通訊時，通常有三個步驟：

1. 把數據加載到顯存中。
2. 設置渲染狀態。
3. 調用 Draw Call

Draw Call 就是一個調用命令，讓 CPU 告訴 GPU 要怎麼樣用給定的渲染狀態和輸入的頂點信息來計算。Batch 裏面裝着頂點信息，也就是 DrawCall 中 GPU 須要的頂點信息。

DrawCall 能夠在 Profiler 中看，Batches 能夠在 Stats 窗口看，你們能夠仔細看看上面動圖（右鍵在新標籤頁打開圖片）裏面的數據變化。

在我隨便寫的一個例子中間，能夠看到 Batches 數只有 1 。即便在有動畫的時候 Batches 會多一點，但動畫中止後 DrawCall 和 Batches 都立刻下來了。這也有我這個應用寫的太簡單的緣由，可是這種效率仍是很是值得期待的。

組件樹

學過前端的同窗應該熟悉組件樹，這裏就不介紹了。

爲了更高的渲染效率，Unity 採用了 Render Object Compositiing 的技術。

若是一個子樹沒有發生改變，Unity 就會將其渲染到一個離屏的 Render Texture 上緩存下來，須要的時候再將其貼到屏幕上。

相比之下，之前的作法是，Canvas 只要有 UI element 改動了，整個 Canvas 都須要從新繪製。即便也有一種優化作法是準備兩個 Canvas 分別繪製動態 UI element 和 靜態 UI element，但這樣也存在不少手動管理的地方。

另一方面，你可能也意識到了，咱們不須要再管什麼用同一個材質等等來優化圖的合批，UIWidgets 會自動來管理這些事情。這方面也跟 FairyGUI 很是像，開發者能專一在生產效率上，讓插件來管理麻煩的事情。

優勢

• 能開發遊戲之外的 APP
• 遊戲中的 UI
• 新的用戶體驗
• 不用管渲染過程，提高效率
• 由於是 Unity 的插件，能夠輕鬆加各類粒子效果和其餘騷操做。
• 一套代碼能跑在遊戲中、APP 中、網頁中和 Unity 的 Editor 窗口中。（開發者還用其作了一個 Unity 中文文檔的網站...一套代碼能用在網頁上和 APP 端，不過還在開發中）
• 和 Flutter 的 API 幾乎同樣，能夠參考 Flutter 教程來用 UIWidgets 搭應用。

缺點

• 不管是 Flutter 仍是 UIWidgets 都還很年輕，有不少組件 UIWidgets 還沒移植過來（GridView、Circle Avatar 等等）
• 官方示例、文檔還沒完善
• 開發時是開荒模式，因此可能忍不住直接轉用 Flutter 去了...

個人示例

這裏借用了 ミライ小町 的模型，因此代碼倉庫大小會比較大。（項目裏面還有ミライ小町的跳舞動畫 animation！）

項目倉庫：Latias94/UIWidget-Practice

UIWidgets：UnityTech/UIWidgets

官方講解錄播：[官方直播] UIWidgets - 不止遊戲！如何使用Unity開發跨平臺應用