Screen Canvas

この例では、モバイルや非VRデスクトップのような2D画面を使用しているユーザー向けに、Screen-Space UI Canvasを作成する方法を紹介します。また、ユーザーを目的の位置と回転へテレポートさせる方法も示しています。

Screen Canvas Example Worldにアクセスして、実際に体験してみてください！

サンプルの使用方法

screen-canvasシーンを開いてUnity Editorでテストするか、VRChatクライアントでこちらのワールドにアクセスしてください。 このサンプルにはTextMeshProが必要です。プロジェクトにTextMeshProがまだ含まれていない場合は、「Import TMP Essentials」を促すウィンドウが表示されます。インポートを承諾し、完了後にシーンを再度開いてください。

モバイル端末やモニター付きのWindows PCといった非VR環境でワールドに入場すると、画面の端に太い白い枠線が表示され、「Teleport」と書かれたボタンが現れます。このボタンを押してください。モバイルの場合は画面を軽くタップするだけで有効になります。デスクトップの場合はTabキーを押し続けて画面中央からカーソルを解放し、ボタンをクリックしてください。どちらの方法でも、ワールド内の2番目のスポットへテレポートし、「Second Location / Here you are!」と書かれた別のキャンバスの前に移動します。

VRディスプレイを使用してワールドに訪れた場合、キャンバスは非表示になります。これは、ボタンが操作できずにキャンバスが顔の前に張り付いたままになるのを防ぐためです。

追加情報

VRCButtonLayoutオブジェクトは、VRChatモバイルUIの各ボタンがどこに配置されるかを確認し、それらを避けて配置を行うための便利なツールです。このオブジェクトにはEditorOnlyタグが付けられており、ワールドと一緒にアップロードされることはありません。

サンプルのインポート

以下の手順に従って、このサンプルをUnityプロジェクトに追加してください：

1. Unityエディタのメニューから「VRChat SDK > 🏠 Example Central」を選択し、Example Centralウィンドウを開きます。
2. リストの中からこのプレハブを見つけるか、タイトル（このページのタイトルと同じ）で検索してください。
3. 「Import」ボタンを押して、Unitypackageをプロジェクトにインポートします。

技術的な解説

このセクションでは、上記の機能を提供する2つのGraphプログラムについて説明します。どちらのプログラムも、シーン内の「ScreenCanvas」オブジェクトに含まれています。

HideInVR

このプログラムは Start で実行されます。ローカルプレイヤーの IsUserInVR の値をチェックし、VRであれば GameObject.SetActive(false) を呼び出すことで、ScreenCanvas とその UdonPrograms を無効化します。VRでない場合は、それ以上の処理は必要ありません。 このプログラムは、様々なオブジェクトに容易に追加できるよう、以下のテレポート機能とは別に提供されています。

TeleportToTarget

このプログラムはButtonによってトリガーされ、その_Triggerカスタムイベントをターゲットにします。このプログラムには、パブリックなtarget Transform変数が含まれています。トリガーされると、targetに対してTransform.GetPositionAndRotation()を呼び出し、その位置と回転をVRCPlayerApi.TeleportTo(position,rotation)に渡すことでプレイヤーを移動させます。 targetの値を変更して場所を更新したり、TeleportTarget Transformを移動させたりすることができます。利便性を考慮し、プレイヤーがテレポートする場所を地面に表示するための子スプライトがTransformに含まれていることに注意してください。このスプライトをメインのTransformの子にしているのは、テレポート時にプレイヤーに適用したくない回転が必要になるためです。

既知の問題

ClientSimにおいて、ScreenCanvas用に生成されるコライダーは常に(0,0,0)に配置され、キャンバスの全サイズを覆います。VRChatクライアントでは、既存のコライダーが適切な位置で使用されます。シーンをClientSimで利用できるようにするため、初期スポーン位置をオフセットし、生成されたコライダーの前にユーザーを配置するようにします。