Zenn
📰

MRTK3 - Volumetric UIについて

2022/12/14に公開
Unity
VR
HoloLens
#
mr
MRTK3
tech

Mixed Reality Toolkit3で使える「Volumetric UI」

Unityで様々なXRコンテンツを作る際のオブジェクトの配置を支援するための機能。
特にメニューなどで効果を発揮し、サイズ計算などをせずにきれいにオブジェクトを並べることができる。この機能はUGUIで構成されているが、MRTK3ではUGUI上で発生するイベントをXRIの方に通知する機能(Canvas Proxy Interactor)があるので、Canvasだからと言って実装が特殊になることがない。また、UGUI対応のボタン部品なども提供されている。

ここが便利

配置がとても楽でかつ、実行時のサイズ調整も簡単にできる。

  • 親のサイズを基準に子の要素を自動調整
  • 子のサイズを基準に親の要素を自動調整
  • 可変サイズに対する設定が可能（最小サイズ）

必要なパッケージ

  • com.microsoft.mrtk.uxcomponents: 3.0.0-pre.12
  • com.microsoft.mrtk.uxcore: 3.0.0-pre.12

Volumetric UI概要

Volumetric UIの機能はUnityのCanvasのレイアウトに関する機能を利用して実現しています。MRTK3ではこの機能を利用できるようにUX部品を構築することでメニューなどの作成が容易になっています。

種類 概要
レイアウト要素として定義する Canvas内に配置するオブジェクトのサイズをコントールします。最小サイズや最大サイズを設定することでサイズ変更に柔軟に追従するオブジェクト要素を構成します。
水平に並べる - Horizontal Layout Group 子要素を水平に並べていきます。
垂直に並べる - Vertical Layout Group 子要素を垂直に並べていきます。
格子状に並べる - Horizontal Layout Group 格子状にオブジェクトを配置したい場合に利用します。MRTK3のボタンサイズは32が基本となっているので、ボタンのみを格子状に配置する場合はcell sizeを32にすると隙間なく並べることが可能になっています。

Volumetric UIをうまく使うために

MRTK3では現時点ではCanvas対応した以下のUX部品が提供されています。

ボタン系

部品名 概要
Action Button 押すことでイベントが発生するボタン
CanvasButtonToggleSwitch トグル機能がついたボタン
Empty Button 空のボタン
PressableButton_Custom_Cube 四角形の押しボタン
PressableButton_Custom_Cylinder 円形の押しボタン
部品名 概要
CanvasButtonBar ボタンを複数グループ化したもの
CanvasButtonBar_SharedBackplate ボタンを複数グループ化したもの。背景パネルの境涯がないパターン
CanvasButtonBar_Toggles ボタンを複数グループ化したもの。トグル制御が可能
部品名 概要
SeeItSayItLabel-Canvas ボタンなどの操作対象がフォーカスされると表示されるラベル

スライダー

部品名 概要
CanvasSlider スライダーUI

チェックボックス、トグル

部品名 概要
Checkbox チェックボックス
ToggleSwitch トグル制御

背景パネル

部品名 概要
UIMenuBackplate_R13 MRTK3のUIに合わせた背景要素として利用
UIPanelBackplate_R16 MRTK3のUIに合わせた背景要素として利用

ダイアログ

部品名 概要
CanvasDialog ダイアログ

メニュー系

部品名 概要
HandMenuBase 手元で使うメニュー部品（多くの情報を表示するためのもの）
NearMenuBase 手元で使うメニューの土台（手のひらを返して表示する操作数が少ないもの）

テキスト入力

部品名 概要
MRTKTMPInputField テキスト入力フィールド(TextMesh Pro)
MRTKUGUIInputField テキスト入力フィールド(UGUI)

キーボード

部品名 概要
KeyboardPreview キーボード

サンプル - サイズ変更可能なボタンが並んだメニューを作ってみる

Unityプロジェクトを作成しMRTK3を導入する

基本的な手順は以下の記事を参考に設定してください。

https://zenn.dev/miyaura/articles/32dbaf7256fef4

https://zenn.dev/miyaura/articles/be65665439f0d4

Volumetric UIのパッケージを導入する

必要なパッケージは以下のものになりますので、Mixed Reality Feature Toolでインポートしてください。

https://learn.microsoft.com/ja-jp/windows/mixed-reality/develop/unity/welcome-to-mr-feature-tool

  • com.microsoft.mrtk.uxcomponents: 3.0.0-pre.12
  • com.microsoft.mrtk.uxcore: 3.0.0-pre.12

親要素を追加する

最初に空オブジェクトを作成して名前を[Menu]としています。さらにその下にからのGameObjectを作成します。

空Canvasを追加する

次にVolumetric UIでデザインするために空のCanvasを追加します。合わせて[Render Mode]を[World Space]に設定します。また、Positionを(0,0,0),Scaleを(0.001,0.001,0.001)に変更します。

BackPlateを仕込む

次に背景にパネルが入るようにBackPlateを入れます。先ほど作った空のPlateに[Canvas Element Rounded Rect]を追加します。
また、Rect Transformも合わせて変更しておきます。

  • XY方向にストレッチ
  • Positionおよびsizeはすべて0

横に並べる

次に背景パネルを入れたPlateに[Horizontal Layout Group]を追加します。

  • [ControlChildSize]のWidth,Heightにチェック
  • [ChildForceExpand]のHeightにチェック

Plateの子要素に空のオブジェクトを1つ作成し[Vertial Layout Group]を追加します。

  • [ControlChildSize]のWidth,Heightにチェック
  • [ChildForceExpand]のHeightにチェック

[Vertial Layout Group]の子要素にActionButtonを複数個追加します。追加するとわかると思いますが、自動的に破綻せずにレイアウトしていくことが可能になっています。[ActionButton]は[Hierarchy]タブ内で右クリックメニューより[Create]-[UI]-[MRTK]-[ActionButton]で追加可能です。

画像領域を追加する

Plateの子要素に空のオブジェクトを1つ作成し[Horizontal Layput Group]を追加します。

  • [ControlChildSize]のWidth,Heightにチェック
  • [ChildForceExpand]のWidth,Heightにチェック

さらにその下にImageを配置してみます。

メニューのサイズ調整などを可能にする

最後にサイズの変更を実現する手段を紹介します。こういったメニューのサイズを調整するための機能としてMRTK3では[Bounds Control]と[Object Manipulator]を組み合わせることで実現できます。
まず操作用にオブジェクトを追加します。Plate等が入っているCanvasにImageを追加します。追加したImageオブジェクトにさらにBox Coliderを追加してください。Imageオブジェクトを以下の通りに設定します。

  • Rect Transform
    • Position : (15,0,0)
    • Width : 3
    • Height : 100
    • Anchor : Middle Right
  • Box Collider
    • Size : (13,110,10)

このImageオブジェクトを左右に作成します。

最後にMenuオブジェクトに[Bounds Control]及び、[Object Manipulator]を追加します。以下の設定のみ変更してください。

  • Bounds Control
    • [Bounds Visuals Prefab] に [BoundingBoxWithHandles]を設定
    • Flatten ModeをAlwaysに

上記の設定で実行すると、ホールド操作でメニューの移動、ダブルタップでサイズが変更可能になります。

参考リンク

Discussion