触れるオリジナルUIをつくれる「Player Interactive Local UI」を使おう！

「Player Interactive Local UI」を使うと、プレイヤーごとに表示されるUIをクリックして、さまざまなことができるようになります。

Player Interactive Local UIで色々する｜Creators Guideベータ版から引用

この機能を使えばオリジナルUIのゲームワールド、擬似的にオリジナルエモートを使えるワールドなどもつくれたりします。
この記事では、基本的な使い方を紹介します。

Table of Contents

使用する時の準備

本機能を使用するにはスクリプトの他にCCKのコンポーネントを設定する必要があります。まずはCCKのコンポーネントを設定していきます。

Player Local UIの作成

まずは、表示するためのPlayer Local UIを作成します。
今回はButton コンポーネントを設定します。

Hierarchyを右クリック、または上部メニューのGameObjectを選択して「UI>PlayerLocalUI – cluster」を新規作成します。
- Hierarchy上のSafeAreaオブジェクトを右クリックして、UI>Legacy>Buttonを作成します。
  - Buttonの子に自動的にText (Legacy)が作成されます。
    - こちらがボタン内に表示されるテキストになります。
    - Text (Legacy)がない場合は、Hierarchy上のButtonを右クリックして、UI>Legacy>Textを作成します。
位置を調整すると、下図のようになります。この段階では、ボタンはクリックしても反応しません。

Player Local Object Reference ListにPlayer Local UIを登録する

制作したPlayer Local UIをスクリプト側から参照するためには「Player Local Object Reference List」コンポーネントを使用する必要があります。

GameObjectを新しく作成して、「Player Local Object Reference List」コンポーネントを追加してください。
- Player Local Object Referenceの右にある数字を「1」にするか下部にある「＋」を押して登録欄を表示させてください。
  - 先ほど制作したButtonをTarget Objectにドラッグ&ドロップしてください。
    - Target Objectに設定するGameObjectは後ほどスクリプトから参照する「Button」コンポーネントが追加されているGameObjectを追加してください。
    - idは「screen_button」にしてください（後ほど、このidでスクリプト側から参照します）。
「Player Local UI」コンポーネントを追加したGameObjectを選択して、Sorting Order Typeを「Interactable」にしてください。
- 設定したら「選択できるUIをセットアップする」というボタンがInspectorに表示されるので、そちらをクリックしてUIのセットアップを行なってください。
  - この設定を行うことでUIがインタラクトできるようになります。

PlayerScriptの設定

本サンプルを使用するにはPlayerScriptの設定が必要になります。

作成したワールドはベータ機能を有効にしてアップロードする必要があります。
先ほど「Player Local Object Reference List」コンポーネントを追加したGameObjectに「Scriptable Item」コンポーネントを追加して、以下のスクリプトを設定してください。
- 今回は子にCubeを新規作成して、Cubeをインタラクトしたら「Player Interactive Local UI」に設定した機能が使えるようにします。

$.onInteract((player)=> {
    $.setPlayerScript(player);
});

PlayerScriptを設定していきます。
- 「Player Local Object Reference List」コンポーネント、「Scriptable Item」コンポーネントを追加したのと同じGameObjectに「Player Script」コンポーネントを追加してください。

これで準備は完了です。

スクリプトサンプル

後は、スクリプトを設定するだけです。
今回は、「Player Interactive Local UI」をクリックすると少しワープするスクリプトサンプルになっています。

先ほどの「PlayerScript」コンポーネントを設定したGameObjectに下記のサンプルコードを設定してください。

_.playerLocalObject("screen_button").getUnityComponent("Button").onClick(isDown => {
  if (isDown) {
    const pos = _.getPosition().add(new Vector3(0, 1, 0));
    _.setPosition(pos);
  }
});