屬於 Unity 的 Flutter——UIWidgets

貓冬發表於2019-03-31

介紹

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

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

Flutter 自 2018 年 3 月釋出以來，社群不斷壯大。由於 Flutter 自身設計理念的出色，Unity 中國已經著手將其移植過來。當然了，也因為這兩個東西都非常的年輕，因此開發的時候都像開荒一樣。

Flutter 有自己的一套渲染系統，那麼 Unity 作為一個遊戲引擎，底層的圖形 API 用自己的一套東西就行了，因此移植過來更方便了。

這裡提一些基礎的知識：

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

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 搭應用。