UE4向けMRTK UX ToolsとUMGでらくらくUI作り
はじめに
https://crssnky.hatenablog.jp/entry/2021/BMD
↑の子記事となっています。記事の背景を知る場合はこちらから参照ください。
MRTK UX Toolsとは
Mixed Reality Tool Kitはみなさんご存知かと思いますが、それのUE4版の主なツールキットです。
UE4ではUX Toolsの他に、Graphics ToolsというMR向けマテリアルキットがあります。
UMGとは
誤解を恐れずに言えば、GUIとBlueprintで記述可能なUIシステムです。
ゲーム内はもちろん、UE4 Editorの拡張機能を作る場合にも使えます。
デモ
こういうハンドメニューだったり、
UMGのListViewだって置けちゃいます。
今回は、この2つのUIを例に解説します。
ハンドメニュー
https://github.com/microsoft/MixedReality-UXTools-Unreal/blob/public/0.12.x/Docs/HandMenu.md
公式ドキュメントとやっていることは変わらない。
見た目とコンポーネントはこのようになっています。
SceneComponentはRootをUxtUIElementにします。
ここに、UIの部品を入れていくわけですが、単純なSceneComponentによるPivotを一個挟むことを個人的にはオススメします。
というのも、位置を調整できるようにしないと、デフォの位置では下記画像のように手に埋まってしまう可能性があります。
X軸方向にズラしましょう。僕は8くらい移動させています。
UxtBackPlateはUIの背景用のコンポーネントです。ただのStaticMeshComponentではなく、UX Toolsのカスタム？品です。
下記画像を見てください。有る無しでは、UIのまとまり感がぜんぜん違うと思います。
各種ボタンについては、ChildActorComponentで他のBlueprintファイルを埋め込む形を取っています。
それらの解説は次の章へ
各種ボタン
https://github.com/microsoft/MixedReality-UXTools-Unreal/blob/public/0.12.x/Docs/PressableButton.md
ボタンに関しても、公式ドキュメントと変わらない。
UxtPressableButtonを継承したBlueprintで作ります。
そうすれば、各種プロパティをいじるだけで良い感じのボタンになるでしょう。
いじるのは以下のプロパティです。BlueprintのDetailsにあります。
ボタンのサイズやアイコン、ラベルを好きに変えていきましょう。
ボタンにはたくさんのイベントが用意されています。困りませんね。
ListView
https://github.com/microsoft/MixedReality-UXTools-Unreal/blob/public/0.12.x/Docs/WidgetComponent.md
UMGであるListView(Widget)を入れる方法の公式ドキュメントはこちら↑
え？BlueprintだけでListViewを作る方法がわからないって？だったら下記のForumを参考にすると良いですよ。僕はこれに何度も救われています(いつまで経っても覚えていない)
ListViewのUMGファイルを作ったあとということで進めていきます。
見た目とコンポーネントはこのようになっています。
UxtFollowは、HoloLens2の向きにUIを追従させるためのActorComponentであり、SceneComponentではないのですが、なぜかSceneComponentの場所に入っています。なんでやねん。
ちゃんと、Non-scene componentって書いてある↑
UxtWidgetは、UMGに触れられるように、手の当たり判定とUMGをつなぐためのコンポーネントです。
これと、Widgetコンポーネントを配置することで、触れられるUMGを表示して操作することができます。WidgetコンポーネントはちゃんとScreenSpaceではなく、WorldSpaceに配置するように設定してくださいね。
ちなみに、ListViewのスクロールは右のスクロールバーで行います。スマフォでよくあるListView全体をぐいーってスライドしてもスクロールしませんからね！(僕はその罠に嵌りました)
UxtBackPlateは前述の通り背景用です。これが無ければ本当に背景がありません。
CloseButonは、このBlueprintを閉じるためのボタンです。UMG側に用意するとWidgetだけ閉じられてしまうので、Blueprint自体をDestroyできるようにBlueprint側で用意します。
(今思えば、Widget側でイベント発行してBlueprintで受信すれば良かったか？)
おわりに
以上、簡単なボタンを持つUIやUMGを埋め込んだUIを作る方法でした。正直、UMGが使えてしまうのであればなんでもできちゃうので、HoloLens2のUIに関してはできないことが無いと思います。
とはいえ、UX Toolsの標準的な見た目のみを使っているため、見た目に凝ったUIに関しては制約があるかもです....
