Player Local UIで自分だけに見える画面表示をつくる

Player Local UIとは

Player Local UIを使うと、それぞれのプレイヤーの画面上に表示されるテキストや画像をつくることができます。
適切に設定すれば、PCやスマホ、VRのそれぞれで自動的に表示を最適化できます。

PCとスマホではアプリの画面上に重なるように、VRでは正面に画面が浮かぶように表示されます。

▼PCでの例

▼VRでの例

Player Local UIにテキストや画像を表示する

さっそく使ってみましょう。

Hierarchyを右クリック、または上部メニューのGameObjectを選択して「UI>PlayerLocalUI – cluster」を新規作成します。

Player Local UIが見つからない場合は、Cluster Creator Kitが正しく導入できているか確認してください。

Player Local UIはシーン上では巨大な枠で示されますが、プレビューやアップロードしたワールドでは画面サイズに合わせて表示されます。大きさなどは変更しないでください。

Sceneビュー右上の「2D」ボタンで表示を切り替えると見やすくなります。

作成したPlayer Local UIの子にSafe Areaというオブジェクトがあります。
Safe AreaはclusterのUIと被らずに表示できる範囲を示しています。
表示したいテキストや画像はSafe Areaの子に設置していきます。

テキストや画像をSafe Areaの子に設置し、Safe Areaコンポーネントの「Anchor自動設定」ボタンを押すことで、画面サイズが異なるデバイスでも自動的に位置・サイズを調整できます。

子オブジェクトの表示位置の基準となるAnchorをSafe Areaに合わせることで表示位置を自動調整します（Anchorについて詳しくはUnity公式ドキュメントを参照してください）。
「Anchor自動設定」ボタンを押すことで子オブジェクトの位置に応じて自動的にAnchorを設定できますが、Anchorは自分で設定しても構いません。

テキストを表示する

さっそくテキストをつくってみましょう。

Hierarchy上のSafeAreaオブジェクトを右クリックして、UI>Legacy>Textを作成します。
Rect Transformで表示領域の位置と大きさを、Textコンポーネントで表示するテキストの内容や文字サイズ、色などを変えられます。

Rect TransformのPos Zの値を0以外にすると、正しく表示されない場合があります。

Safe Areaの「Anchor自動設定」を押してから、アップロードして確認してみましょう。
clusterアプリのウインドウサイズを変更しても、画面内に収まるようにテキストが表示されます。

画像を表示する

同様に、今度は画面上に画像を表示してみます。

まずは表示したい画像をプロジェクトにドラッグアンドドロップしてインポートしてください。

インポートできたら、まず画像ファイルの設定を変更します。

画像のInspectorで、Texture Typeを「Sprite (2D and UI)」に変更し、下の方にあるApplyボタンを押してください。これでUI用の画像としてインポートすることができます。
設定を変更したら、HierarchyのSafe Areaオブジェクトを右クリックしてUI>Imageを子として作成します。
Source Imageの項目に先ほどの画像ファイルを選択してください。

先ほどと同じくSafe Areaの「Anchor自動設定」を押してから、アップロードして確認してみましょう。
ウインドウサイズを変更しても、画面内に収まるように画像が表示されます。

例えば、こちらの記事ではPlayer Local UIを使ってワールドを訪れたそれぞれの人だけに見える案内のつくり方を紹介しています。
画像やテキストを表示するだけでも工夫次第で色々できます！

自分のワールドで告知してみよう！──Url Texture・Url Raw Imageの使い方

Player Local UIでプレイヤーごとに動くギミックをつくる

Player Local UIの下に置いたオブジェクトには、PlayerをTargetとしたメッセージをやりとりすることでそれぞれのプレイヤーごとに動くギミックをつくることができます。

Set Text Gimmickでプレイヤーごとに数字を表示する

プレイヤーごとにボタンをクリックした回数を画面に表示するようにしてみましょう。

まず、押すたびに数字を加算するボタンをつくります。
新しい空のオブジェクトを作成し、名前をAddButtonとしてください。
- AddButtonのInspectorで、Add ComponentからInteract Item TriggerとItem Logicを追加します。
- それぞれのコンポーネントは画像のように設定してください。

Item LogicでTargetとして「Owner」を選択しています。アイテムをクリックしたプレイヤーがそのアイテムのOwnerになります。
TargetがOwnerのKeyはアイテムをクリックしたプレイヤーに対してメッセージの値を参照・反映するということになります。

また、ボタンの見た目とコライダーになるよう、AddButtonの子としてCubeも作成しておきます。

続いて、Safe Areaの子にTextを追加します。
TextのInspectorでSet Text Gimmickを追加してください。
- Set Text Gimmickは次のように設定します。

ポイントはTargetがLocal Playerになっている点です。こうすることでそれぞれのプレイヤーが自分だけの値を参照することができます。

TargetがOwnerのInteract Item Triggerと、TargetがPlayerやLocal Playerのギミックを組み合わせることで、クリックしたプレイヤーにのみ影響するギミックを作ることができます。
Ownerについてより深く知りたい場合はこちらの記事も参考にしてください。

プレビュー、またはアップロードして確かめてみましょう。ボタンを押すたびに画面上の数字が増えていきます。
この数字は自分だけに反映され、他の人がボタンを押しても増えません。

Set Game Object Active Gimmickでプレイヤーごとに画像の表示・非表示を切り替える

今度はボタンを押すたびに画像が出たり消えたりするようにしてみます。
まずはボタンをつくります。

新しい空のオブジェクトにInteract Item TriggerとItem Logicを追加し、画像のように設定します。
- ※ボタンを押すたびにオブジェクトを出し入れするギミックについてはこちらで詳しく解説しています。
上で解説した手順でSafe Areaの子にImageを設置し、ImageにSet Game Object Active Gimmickを追加して、こちらも画像のように設定します。