VRChat 非公式日本語ドキュメント

Screen Canvas

Screen Canvas World Preview

このサンプルでは、モバイルや非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 キーを押したままにしてカーソルを画面中央から解放し、ボタンをクリックしてください。どちらの方法でも、ワールド内の別の地点へテレポートし、「Second Location / Here you are!」と書かれた別のキャンバスの前に移動します。

Second Location Screenshot

VR 環境を使用してワールドを訪れると、キャンバスは非表示になります。これは、ボタンが使えないままキャンバスが顔の前に固定されてしまうのを防ぐためです。

追加情報

VRCButtonLayout in Game, Hierarchy and Inspector

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

サンプルのインポート

以下の手順に従って、このサンプルを Unity プロジェクトに追加します。

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

技術的詳細

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

HideInVR

VRでオブジェクトを非表示にするGraph Program

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

TeleportToTarget

ローカルプレイヤーをテレポートさせるGraph Program

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

既知の問題

大きなキャンバスのシーンビュー

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

最終更新: