1. 程式人生 > 其它 >unity ui解決方案新玩法-Blazor 1. 介紹

unity ui解決方案新玩法-Blazor 1. 介紹

公司最近需要開發一套監控裝置實時執行的系統,場景本身直接使用unity引擎的dots技術棧實現,但在使用者介面方面,由於沒有一個統一的標準,所以都淺試了一下。

1. 試用過的執行時ui解決方案有這幾個:

  • ugui。 unity editor內建,設定好的元件可轉化為prefab實現重用,其佈局基於軸心、錨點設定。ugui相關連結
    個人體驗: 實際使用過程中,我司設計部門出圖基於figma,其樣式屬性基於css樣式,公司內的web前端開發人員可以快速實現,但將這一套佈局在開發時轉化為ugui自帶的軸心+錨點發現開發效率不太滿意
  • fgui。 擁有自己獨立的UI編輯器,在其中搭建完之後打成資源包,搭配對應的unity fgui sdk進行解析使用。
    fgui相關連結

    個人體驗: 基於上一個理由,改變自己流程還好說,改變合作部門的流程阻力很大,這款解決方案推崇的設計人員也可參與在我司已經穩定的流程中並不現實,而我自己本身也不太喜歡這種UI開發方式(這裡屬於是個人喜好問題)
  • uiwidgets。 基於flutter,需要提前熟悉flutter相關元件開發用法,使用C#語言代替dart。 uiwidgets相關連結
    個人體驗: 元件的樣式可以直接使用css樣式,開發效率和執行效率非常高。缺點是在高版本的unity editor中不支援webgl平臺,專案要求是pc本地端和webgl平臺都能支援。而且2.0及以後版本需要unity的中國團隊特殊打包的unity editor。(執行效率非常高,而且特別適合開發移動端app)
  • UIE。 基於現在的通用web技術包括html和css相關去編寫uxml標籤和uss規則,使用C#代替js實現功能邏輯。uie相關連結
    個人體驗: 比較契合我們公司部門的流程,奈何完善度不夠,uss屬性使用上有一些問題,現階段使用在深度定製時容易發現小問題。
  • 在unity中嵌入瀏覽器相關元件,直接將web頁面投到unity中。
    個人體驗: 在我們公司可以做到極快的開發效率,經過實際測試,幀數能接近uiwidgets,需要特殊的方式實現頁面與unity場景間互相通訊,但是對應的unity開發工程師需要學習前端相關技術棧,或者通過部門資源申請調web前端開發工程師參與開發工作(這麼爽不嘗試一下嘛)。

那有沒有一種方式既能滿足我們公司設計部門與開發部門流程不變又能減少unity開發側流程改變和語言學習成本呢? 那就是本文將要介紹的blazor,使用C#構建web頁面,降低unity開發工程師學習成本(其實和flutter一樣,blazor已經支援很多平臺了)。blazor相關連結

2. unity和前端配合下的ui介面與場景的互通方式

  • 大多數情況下,web頁面和unity場景需要藉助額外的開發(獨立於業務外)才能進行互相rpc操作,比如unity手冊:與瀏覽器指令碼互動
    這個場景下的網路通訊架構類似下圖:

    當然可能有些會將客戶端與服務端通訊部分合併為上半部分,UI不參與後端直接通訊,即圖中3不存在。
  • 但是blazor有一個特點,能以非常低開發成本的方式使用SignalR這個網路庫,進而方便的實現RPC功能
    此時網路通訊架構就變成了:

    當然,此方式也有對應的缺點,即服務端不可用的情況下場景和UI無法互動。但我們公司當前實現裡服務端不可用的情況下客戶端場景內也無法渲染(場景內都依賴服務端儲存的配置進行動態生成和動作),所以這個缺點不用關注。

3. 接下來我們來使用unity+blazor實現一個最小可用的demo,下面是需求整理與具體實現:

  • 客戶端場景和UI頁面例項存在一一繫結關係且各自均有重連機制,具體實現
  • 點選UI中的相機方向按鈕或者場景模型列表,要能控制相機移動,具體實現
  • 點選UI中的場景模型對應設定,要能在場景中獲取正確模型並材質變化
  • 在場景中控制相機移動,UI中的相機方向按鈕要能聯動實現樣式變化
  • 在場景中點選對應模型,要能在UI中展示對應模型屬性
    (在這個demo裡面將要使用到額外4個資源包,其中兩個是付費包,而且因為是demo所以程式碼結構不會設計的太美麗,大佬們輕噴)。

4. 結尾一些想說的話:

  • 在此,我先祝文中提到的和其他可能遺漏的各個UI解決方案都能發展的更好更強,各位看官也都能實現自己想要的目標!
  • 大家要根據自己實際條件來選擇,這東西本身沒有銀彈只有適合自己的,要評估個人與部門技術棧(我們軟體部門全員除新入職的unity工程師,其餘包括我自己均掌握至少一個angular、vue、react、flutter等前端技術棧和一個.net或Java後端技術棧)、公司各部門流程和對接方式(我們公司設計部門使用figma進行原型設計與素材交付)、專案的條件和特性(專案不是競技類遊戲不需要場景和頁面快速互相響應、客戶端和服務端都在內網進行部署執行)等因素去靈活選擇。