共用方式為

使用 Canvas 的音量 UI — MRTK3

  • 發行項

彈性且回應式版面配置

使用滑杆調整容器的大小

完整表達的手部支援

注意

這是混合式畫布型 UI 建置方式的概念性概觀。 如需個別 UX 預製專案的檔，請參閱 UX 元件檔。

MRTK3 引進了與 Unity RectTransform 和 Canvas 系統整合的磁片區 UI。 雖然此系統過去主要用於 2D 一般 UI，但它能夠轉譯和配置磁片區 3D UI。 這可以加速設計反復專案，並增加可使用磁片區 UI 建立的設計逼真度。

注意

畫布型元件庫正在進行作用中的開發，而且會隨著新功能、外觀與風格、版面配置和架構而快速變更。

MRTK 2.x 的非 Canvas UI 系統很難設計，因為它們缺少介面設計系統預期的許多基本功能。

  • ✘ 缺少非實體設計單位
  • ✘ 沒有對齊方式
  • ✘ 無邊界/邊框間距
  • ✘ 沒有彈性或回應式版面配置
  • ✘ 每個配置、大小和組態的單一排列的相異預製專案
  • ✘ 集合配置 (水準/垂直可組合版面配置) 非常有限的支援
  • ✘ 缺少基本設計功能，例如絕對大小的圓角弧度或筆劃寬度
  • ✘ 需要使用 縮放 來調整 UI 元素大小，以破壞性改變子系
  • ✘ 有限的滑鼠和鍵盤支援
  • ✘ 不支援遊戲台

由於這些限制，磁片區 UI 在過去在設計中更為基本，而且需要技術設計工具大量手動人力來建立美觀的版面配置。

MRTK3 引進了統一的方法。 支援所有 XR 互動 (的美觀音量 UI 控制項，例如，可透過Canvas-RectTransform內容撰寫清楚的手部追蹤按下和注視捏合) 。 控制項可以自動設定適當的邊界、填補、回應彈性，以及設計工具預期的所有功能。 此外，我們可以將 UGUI 事件向下路由傳送到 XRI，讓完全相同的 UI 預製專案在 2D 內容和 3D 之間運作都相同，包括遊戲台等可存取的輸入。

其優點包括：

  • ✔ 對應到各種實體內容的彈性設計單位， (3D 實境、2D 螢幕、電視/桌面/行動/Web)
  • ✔ 回應式配置的完整 RectTransform 對齊支援，具有一致性父/子關聯性
  • ✔ 透過UnityUI AutoLayout 群組的完整 RectTransform 邊界和填補支援
  • ✔ 透過UnityUI AutoLayout 群組支援具有優先順序和邊界的 flex 版面配置
  • ✔ 每種控制項類型的單一預製專案，可以調整大小和調整以符合任何內容或內容
  • ✔ UnityUI AutoLayout 群組的水準、垂直和格線配置。 自訂版面配置可以透過 Unity 版面配置介面的延伸模組來達成。
  • ✔ 各種進階設計功能，例如Mixed Reality圖形工具套件中的進階 UI 著色器功能所啟用的絕對大小圓角弧度、筆劃寬度和邊界。
  • ✔ 無調整：所有調整大小和版面配置都是透過 RectTransform 大小和位移計量來達成。 父系不會調整子系。
  • ✔ 完整支援滑鼠 + 鍵盤，透過 UGUI 事件 UGUIInputAdapter 和 和 CanvasProxyInteractor (原生方式，請參閱 可互動架構檔以取得詳細資訊)
  • ✔ 支援遊戲台和方向/相對流覽

此電源和彈性可能會因為成本而產生，而 Canvas 型 UI 需要仔細管理，以避免常見的效能陷阱。

  • UI 的每個「移動部分」都應該是不同的 Canvas 節點。 O(tree_height)有與畫布階層變動相關的成本;強烈建議針對多個移動元件/可重複使用的元件使用多個畫布。
  • 避免在整個場景中使用單一全域畫布。
  • 移動和旋轉 Canvases 和 RectTransforms 可能會有效能影響。 強烈建議您將 Canvas 巢狀放在將移動的非 RectTransform「全像」轉換底下，而不是直接移動 Canvas。
  • 遮罩和裁剪碰撞器型 UI 的故事仍在開發中。 請考慮避免包含可點選內容的捲動檢視。
  • 在某些 3D 內容中，預設 Unity 方向導覽系統的行為很奇怪。 我們正在調查自訂導覽系統，這些系統在不尋常的 3D 版面配置中表現更強固。

我們將發行更明確的指引，以優化以畫布為基礎的版面配置，因為我們會在各種裝置上執行更詳細的效能測試。

安裝程式

我們的元件是使用 1 個設計單位所撰寫：實體內容的 1mm 比例。 當您設定 Canvas 以搭配音量 UI 使用時，用於沉浸式 3D 應用程式中的顯示：

  • 確定您的 Canvas 是 worldspace
  • 確定畫布的縮放比例在所有軸上都是全域 0.001

對於轉譯為 2D 顯示器的應用程式，可以自由調整縮放比例，以符合您指定的可用性計量和最小觸控目標大小。

使用與 UGUIInputAdapter 畫布型 UX) 之類的 (互動時，請確定您在 CanvasProxyInteractor 場景中的 (最好是空的) GameObject。 這會透過 XRI 轉送 UGUI 事件，以確保您的互動可正常運作。

如果您想要在非 UX 元件上試驗 UGUI 輸入，請將 新增 UGUIInputAdapter 至您的 XRI 可互動。 非 UX 相關互動的 UGUI 輸入是實驗性的，而且會受到數個開放式 Bug 的影響。

進行中的開發

我們仍在塑造開發案例，以跨各種支援的平臺建置美觀 UI。 目前，我們仍會提供兩個版本的 UX 元件：一個未使用 Canvas、具有靜態、沒有回應的配置 (，因為我們過去在 MRTK 2.x) 中提供，以及另一個使用統一 Canvas 型方法建置的版本。 當我們建置更多元件並充分利用設計程式庫實作時，我們預期會因為一致性和維護而取代非 Canvas 元件。

整合狀態管理

由於嚴格區隔狀態/互動和視覺效果，您會發現相同的狀態和互動腳本會在 Canvas 和非 Canvas 內容之間共用。 這是設計方式;相同的互動腳本可以跨任何視覺效果或版面配置內容重複使用，減少 API 介面並增強互動的一致性。 例如， Slider 是 Canvas 和非 Canvas 滑杆的滑杆互動元件，而且 PressableButton 是 Canvas 和非 Canvas 按鈕之間的相同腳本。 在未來，如果採用新的版面配置或呈現架構，我們可以採用相同的互動邏輯和系統，以確保一致性和可維護性。

下圖詳細說明不同的輸入事件和可互動類型如何一起運作，以提供統一的互動狀態。 按一下圖表以查看較大的版本。

顯示不同輸入事件和可互動類型如何一起運作的架構圖。