Zenn
📝

VR実験アンケート用UIの実装①(Unity × XR Interaction Toolkit)

2024/12/13に公開
VR
tech

はじめに

みなさま、普段VR空間内で回答するアンケートをどのように実装してますか？
色んなやり方があると思いますが、今回はUnityとXR Interaction Toolkitの機能を素直に使って実装するやり方を紹介していきます。あくまで一例だと思ってもらえれば幸いです。

今回作るもの

VR空間内で回答可能なVASと7段階リッカートのアンケートのUI

  • VR空間内に配置
  • VRコントローラでUIを操作可能
  • 回答結果がcsvで出力 → 長くなったので分けます

今回省くもの

  • GoogleFormなどにある回答していないと先に進めない（回答必須項目）
  • 質問内容をcsvで入力
    など

環境

Unity 2022.3.11f1
XR Interaction Toolkit 2.5.4 (導入は FRAME SYNTHESIS - Unity VR開発メモ（XR Interaction Toolkit） がよくまとまってます)
使用してるVRHMD：MetaQuest2

作り方

では早速アンケートのUIを作っていきます。
でもただのUIじゃないです。上記にもある通り、
①VR空間内に配置してあって
②VRコントローラで操作可能で
③回答結果がcsvで出力される
ようなUIを作ります。

XR Interaction ToolkitのサンプルであるStarter Assetsをダウンロードしていない人は以下参考に進めてください

Unity上部のヘッダタブのWindowから、Package Managerを選択して

左上のPackagesをUnity Registryにして、右上の検索窓からXR Interaction Toolkitを検索。
見つかったら、SamplesのタブでStarter AssetsをImport（既に導入済みなので添付画像はUpdate）。

これでサンプルをダウンロードできました。

①VR空間内に配置

それではまずVR空間を用意します。全てはこれからだ―――

ProjectからCompleteXR Origin Set Up Variant（もしくはXR Origin）を探してHierarchyにドラッグアンドドロップします。

次にXR Interaction Toolkitに対応したCanvasを使います。
Hierarchyで右クリック > XR > UI Canvas　で出します。

選択して、InspectorにてCanvasコンポーネントのRender ModeがWorld Spaceになっていることを確認。

以降は、適宜Canvasの座標を編集して好きな場所に配置したり、大きさを変更して見やすくしてください。
それでは要素を追加していきましょう。→②へ

②VRコントローラで操作可能なUI

①でVR空間内に配置するキャンバス、つまり土台はできました。
では実態のUI要素を配置していきたいのですが、VRコントローラで操作するUIってどうやって実装しましょう？
しかもキャンバスは有限な大きさなので、表示する質問数が多い場合は表示内容をスクロールしたいですね。

コントローラの先からray飛ばしてヒット判定して...
ヒットしたUIオブジェクトに対してイベント処理して...
コントローラの入力によってはキャンバスをスクロールして...
うーん大変そう......。

でも大丈夫！なぜって？XR Interaction Toolkitにサンプルがあるから！

使えるものは使っていきましょう。再利用によるコスト削減、大事。

さて、やることは大きく4つあります。

1. XR Interaction Toolkit の Scroll UI Sample を使用

今回はScroll UI Sampleを使います。
このサンプルは、Assets/Samples/XR Interaction Toolkit/2.4.3(versionによって異なる)/Starter Assets/Prefabs/UI_2Dにあります。検索してしまうのが早いかも。
見つけたらHierarchyに配置しましょう。

これをドラッグアンドドロップで、①で作成したCanvasの子オブジェクトにします。

Scroll UI SampleはHeader, Top, Scroll Viewから構成されています。
今回は質問と回答するUIの表示をスクロールしたいので、編集するのはScroll Viewですね。

2. Scroll View に質問内容と回答UIを表示

それではここに質問やそれに回答するUIを書き連ねていきます。
Scroll Viewの中身を見てみると、
Scroll View > Viewport > Content > Scroll Text の Text コンポーネントの文字列が表示されてそうですね。

質問内容はここを編集すれば良いことが分かりました。では回答UIは？
VASと7段階リッカート尺度について分けて説明していきます。

VASについて

簡易的にSliderで実装します。
Hierarchyで右クリックして UI > Slider を選択してScroll Textの子にSliderを作成してください。

スライダーの左右にラベルを表示しておきたいですね。
Slider同様にTextを二つ生成し、Rect TransformのPosX, PosYを変更して位置調整します。
こんな感じでしょうか

真ん中の丸オブジェクトをコントローラで操作することができます。
具体的には、MetaQuest2ならコントローラの先をオブジェクトに合わせて、人差し指のトリガーを押してコントローラを左右に動かすことで操作できます。
この丸オブジェクトを操作することでSliderコンポーネントのValueが0~1の間で変化し、これが回答になります。
回答の保存はまた次回。

後のために、質問と回答を一つのオブジェクトでまとめてPrefab化し、使いまわせるようにしておきましょう。
Create Emptyで空のGameObjectを追加して（名前は適宜変更してください。画像ではVAS）、Scroll Text, Slider, Text×2を子にして、Projectにドラッグアンドドロップしましょう。
これでVASのPrefabができました。

7段階リッカート尺度について

簡易的にToggleで実装します。
ここでは先にScroll UI Sample > Scroll View > Viewport > Content下に空のGameObjectを作成しておきます。（名前は7Likertに変更しておきます）
7Likertの子にToggleを作成していきます。
Sliderと同様、Hierarchyで右クリックしてScroll Textの子にToggleを作成してください。
今回は7段階なので、7つToggleを作成しましょう。

ここでToggleは画像のように横（もしくは縦）に整列してほしいですよね。
そんなときはHorizontal(Vertical) Layout Groupを使いましょう。
7Likertの子に空のGameObjectを作成します。（名前はChoicesに変更しておきます）
このChoicesにAdd Componentから、Horizontal Layout Groupを追加します。
そして先ほど作成した7つのToggleをこのChoicesの子オブジェクトにします。
整列してくれました！うれしい

一見すると、これでできたかのように思えます。
でも残念ですがまだ終わらない―――
これだと7つ全て選択できてしまいます。
1つだけしか選択できないように、各Toggleに対してToggleコンポーネントのGroupをChoicesに設定してください。

これで一つだけしか選べないようになり、先ほどの画像のようになるはず！

あとはVASと同様、7段階リッカートについてもPrefab化しておきましょう。

3. 質問内容と回答UIを複数表示

2で質問とそれに回答するUIの1セットは表示できました。Prefab化したVASと7Likertを使い回して、これをContentの子として複製していきます。
このとき、ContentにはVertical Layout Groupが既に追加されているので、自動で縦に整列してくれます。

質問内容を変えたい場合は、配置したPrefabのScroll Textを編集すればできます。

ここまでやるとこのようなアンケートUIができていると思います。

4. アンケート内容を確定するボタン

Contentの子オブジェクトとして空のGameObjectを作成し、さらにその子にButtonを作成してください。
空のGameObjectを挟んでいるのはButtonのサイズを調整するためです。

これでボタンの外枠はできました。
あとはこのボタンを押したときに、回答結果を保存するべく選択内容をcsv出力する処理を書きます。これはまた次回！

おわりに

XR Interaction Toolkitを導入していれば、結構簡単に作れちゃいます。
csv出力に関してはまた書こうと思いますが、gptなどに要件伝えてコーディングしてしまうのが早いですマジで。

ところで、長々と書いてるうちに手順説明の丁寧さにムラが出てしまいました。分からないところや補足箇所などあればコメントいただけると嬉しいです！

付録になるかも

ライセンス周りがちゃんと確認できれば、アンケートのサンプルが入ってる.unityPackageを公開するかもしれません。

Discussion