8/26に開催された「xR Tech Tokyo #11」にて、AR_Ojisan(https://twitter.com/AR_Ojisan)のLT「VRChat内でARアプリのUI/UXを研究できるか検証してみた」のデモ開発を担当しました。

実はほぼ初めてのVR&VRChat、8年ぶりのUnityということで、いろいろ間違っているかもしれませんがご容赦くださいませ。

お題

picture pc 87ede650d934aee82a35e5c2ed959c22

動作フロー

今回はチームにお題があったので、近いイメージで組み立てました。

1.落ちているARグラスをゲット→装着する 2.リストからアプリを選択する(Chatアプリ) 3.Chatする相手を選択する 4.Chat相手と出会う

実際の動作

※これはデスクトップ録画したものです

デモシーン構成

picture pc ba4365d5b5d496243f6daca6c0cd91e1

World VRC_SceneDescriptorを設定したステージ用のGameObject。 User プレイヤーのデフォルト位置指定用のGameObject。 PlayerTracking プレイヤーの現在位置を取得するToyboxの機能。 Glasses 落ちているARグラス。 ARGlass ARグラス装着状態を再現するためのGameObject。 Ui 今回のインターフェイス全体を格納したGameObject。 UiMenu 戻るボタンを格納したGameObject。 ※Uiと挙動を変えたかったので別に制作 Unitychan ダミーのChat相手。

使用Script

・AutoCam(https://vrcworld.wiki.fc2.com/wiki/AutoCam) ・Suspension(https://vrcworld.wiki.fc2.com/wiki/Suspension) ・Toybox(https://vrcworld.wiki.fc2.com/wiki/Toybox)

1.落ちているARグラスをゲット→装着する

まず、装着するARグラス(ARGlass)とインターフェイス(Ui、UiMenu)にAutoCamを追加します。これで、プレイヤーの位置や向きに追従するようになります。

※ここで言う「ARグラスの装着」とは「1.ビジュアルとしてのARグラスの表示」「2.インターフェイスの表示」をさします picture pc e61460779d979210c120e15891f6a63b

次に、落ちているARグラス(Glasses)にインタラクションを設定するため、VRC_Trigger / onInteract を追加します。 picture pc a4966d5fda610203002b823f9a7240bc

ActionsにSetComponentActiveを追加し、装着するARグラス(ARGlass)とインターフェイス(Ui、UiMenu)のAutoCamをアクティブにします。これにより、ARグラスとインターフェイスがプレイヤーの視界に表示されるようになります。 picture pc 176d4def43303552dfca075e7b1cdd3a

アプリ選択用のメニュー(Ui01App)を表示するため、ActionsにSetGameObjectActiveを追加し、 Ui01Appをアクティブにします。 ※Ui01AppはUiの配下に設置し、事前に非アクティブにしておきます picture pc dc8191d2dda24ac141af55d9c2885ff1

この後のデモでは落ちているARグラス(Glasses)自体は不要となるので、ActionsにDestroyObjectを追加して自身を設定し、消去します。 picture pc efa2e862ad4b1b3fdb23a0475a7e7f8b

ARグラスとアプリ選択メニューが表示されました。 picture pc 810c2fe5e0edf8b0181ed6e0928a52b3

2.リストからアプリを選択する(Chatアプリ)

アプリの選択は、Ui01App配下の各ボタンにVRC_Trigger / OnInteractを追加します。今回、メニュー間の遷移はすべてSetGameObjectによるアクティブ状態の切り替えで実装しています。 picture pc 9f24f5fc632d81101403bc8ebe4e6dc4

Chat相手選択用のメニュー(Ui01Member)をアクティブにします。 picture pc c84531b44f0a499f1d741a100d2a0eb5

Effectはボタンを選択した時の演出になります。 ↓こんな感じ。 picture pc c1b6b9265ef20f0a94e37c7fc45ca00e

現在のアプリ選択用メニュー(Ui01App)は非アクティブにします。 picture pc 2b6d3dd5fad4457b0dbab31cf1477924

3.Chatする相手を選択

Chat相手の選択も、VRC_Trigger / OnInteractの追加とSetGameObjectによるアクティブ状態の切り替えで実装します。 picture pc 9453628739436e598e552b2e5608c4c7 picture pc e653f47e4305a35f899a0217bad55429

4.Chat相手と出会う

最後に、Chat相手と出会うインターフェイスを表示します。今回は、ミニ地図に自分の位置を表示し、相手と合流しやすくなることを目指しました。 picture pc 057636e7412a108a4da465b2369ab993

シーンにToyboxの「PlayerTracking」を追加します。これにより、プレイヤーの位置を利用できます。 picture pc 06ed29e25331a94862763a49843bb7a8

任意のGameObjectにプレイヤーの位置を反映するには「Suspension」を使用します。Wheelには、PlayerTrackingの配下にある「PlayerHandle」を設定します。 picture pc 81937f2906e2792b8e3eba029c8b641a

青色のCubeがプレイヤーの位置にあわせて動くようになりました。 picture pc 470bd07ac52fe5fbd1bc334d5cae94a0 これで一通りのフローが構築できました。

補足:アニメーションを作成する

今回、アニメーションはBlenderで制作しています。各メニューには「表示(Start)」と「選択待ち(Loop)」のアニメーションを準備しました。 ※当初「消去(End)」も作っていたのですが工数の都合上カット

各アニメーションはBlenderのActionを使って登録します。 picture pc e4de419ad53d7cd364919e8a3e1c0f32

BlenderからFBXを出力したら、Unity上でAnimation Controllerを作成します。GameObjectがアクティブになった時に「Start」を再生し、そのまま「Loop」に移行するよう設定します。

picture pc 002ce70bcdccce97cd0fded9fa89441f

まとめ

技術的な障壁としては、当初は「プレイヤー2人が入室し、実際に出会う」までを実装したかったのですが、VRChatがほとんどScriptを使用できず、外部APIとの接続結果をシーンに反映するのも難しそうだったため、今回は「UI/UXがテストできるか」に絞り、ローカルでの実装となりました。

随時WebPanelにクエリとしてプレイヤーの位置を送れるだけでもかなり多くのことができそうだったのですが、WebPanelのURLは設定できそうでも、プレイヤーの位置を数値として送るまではリサーチが及ばず。もしどなたかお分かりでしたら、お教えいただけますと大変嬉しいです。(ただ、WebPanel自体しばらく使えなくなってしまった・・・)

これまで手がけてきたデバイスと違い、インターフェイスの根本を考える上で面白い経験となりましたので、いずれ、別の機会にまとめてみたいと思います。