決まったエリアから出たときに「警告メッセージ」を表示してみよう

ワールドを制作する際、壁はつくりたくないけどこの場所から先には進んでほしくない、といった場合があります。

例えば外の景色は見えるようにしたいけど庭から外には出てほしくない、扉の奥の廊下は見えるけどその先には入ってほしくない、対戦エリアが決まっているのでその外には出られないようにしたい、などといった場合です。

こういった場合は見えないコライダーを設定することになりますが、見えないコライダーに近づいたときに警告などを表示することで体験をよりよくできる場合があります。

今回はそうしたエリア制限の警告表示などに使える、特定のエリアに出入りしたときにUI上などにメッセージを表示するギミックを紹介します！

Table of Contents

警告表示をつくる

UI上に表示するものを設定する

まずはUI上に表示するものをつくっていきます。

画面に表示したい画像を用意して、UnityのProject上にインポートしてください。
インポートした画像を選択し、Inspectorを確認します。
- いちばん上の「Texture Type」の項目を「Sprite (2D and UI)」に変更して、下の方にある「Apply」ボタンを押してください。これでUI上の画像として表示できる形式になります。

続いて、この画像をUIとして表示するようにしていきます。

シーンのHierarchyを右クリック、または上部メニューのGameObjectから「UI>PlayerLocalUI – cluster」を選択します。
- ※UIのオブジェクトはシーン上に非常に大きく表示されます。見づらい場合は注目したいGameObjectをHierarchy上でダブルクリックするか、選択してシーン上で「F」キーを押すとそのGameObjectにフォーカスすることができます。

作成されたPlayerLocalUIの子の「SafeArea」を右クリックして、「UI>Image」を子オブジェクトとして作成します。
Imageを選択してInspectorを確認してください。
- Imageコンポーネントの「Source Image」に先ほどの画像を指定します。
- Rect Transformを調整して、画像の表示サイズを合わせましょう。SafeAreaの青い枠線の中に収まるようにすると、clusterのUIと干渉しづらくなります。
画像の表示サイズや位置が調整できたら、SafeAreaを選択してInspectorを確認します。
- SafeAreaコンポーネントの「Anchor自動設定」ボタンを押してください。
  - ※SafeAreaについて詳しくはこちら https://docs.cluster.mu/creatorkit/world-components/player-local-ui/safe-area/

表示するものの表示・非表示の切り替えの仕組みをつくる

最後に、この画像の表示・非表示を切り替える仕組みを設定します。

もう一度ImageのInspectorを開き、「Add Component」から「Set Game Object Active Gimmick」コンポーネントを追加します。
- Set Game Object Active Gimmickの「Target」を「LocalPlayer」に変更し、「Key」に「isWarning」と入力します。
  - 設定できたらImageのInspectorのオブジェクト名の左のチェックを外して、初期状態を非表示にしておきましょう。

警告表示されるエリアを設定する

続いて、進入すると上の警告が表示されるエリアを設定していきます。

GameObjectメニューから「Create Empty」で新しい空のGameObjectを作成し、名前を「Area」としてください。
Areaを選択してInspectorを開き、Add Componentから「Box Collider」コンポーネントを追加します。
- Box Colliderの「Is Trigger」にチェックを入れ、「Center」「Size」を調整して警告表示エリアにしたい範囲に合わせます。「Edit Collider」ボタンを有効にするとシーン上で直観的に編集することもできます。

範囲が設定できたら、さらにAreaに「On Collide Item Trigger」コンポーネントを追加します。
- 「Collision Event Type」が「Enter」、「Collision Type」が「Everything」になっていることを確認して、「Triggers」の+ボタンで項目をひとつ追加してください。
  - 追加したトリガーは「Target」で「CollidedItemOrPlayer」を選択、その隣の項目にImageのSet Game Object Active GimmickのKeyと同じ「isWarning」を入力、「Value」を「Bool」に変更してチェックを入れてください。
  - これでエリアに入ったときにImageが表示されるようになります。
続いてもうひとつ「On Collide Item Trigger」コンポーネントを追加します。
- こちらは「Collision Event Type」を「Exit」に変更し、同様にTriggersをひとつ追加、TargetとKeyを同様に「CollidedItemOrPlayer」「isWarning」とし、ValueをBoolにして、チェックが外れた状態にしておきます。

ここまで設定できたらアップロードして確認してみましょう。
コライダーを設定した範囲にアバターが入るとメッセージが表示され、範囲から出ると表示されなくなります。

また、少し変えることで「この範囲に入ったら」ではなく「この範囲から出たら」という条件に改変することもできます。

ふたつのOn Collide Item TriggerのCollision Event Typeを逆にしてみましょう。ひとつめを「Exit」、ふたつめを「Enter」にします。
こうすると指定のエリアから出たときに警告が表示され、戻ると消えるようになります。

発展編：警告表示をフェードイン・フェードアウトさせる

このままでも機能としては十分ですが、余裕のある人はもう少し演出にこだわってみましょう。
警告表示がゆっくりとフェードイン・フェードアウトするようにしていきます。

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

Imageを選択して表示状態に切り替え、まずはSet Game Object Active Gimmickコンポーネントを削除します。
- ※コンポーネント右上の3点ボタンから「Remove Component」でコンポーネントを削除できます。
Set Game Object Active Gimmickの代わりに、Animationを使って見える・見えないを変化させるようにします。
- まず、初期状態でImageが透明になるように、Imageコンポーネントの「Color>A」を0にしておいてください。

Projectを右クリックして「Create>Animation」を選択し、Animationファイルを作成します。名前を「FadeIn」としてください。
同様にもうひとつAnimationファイルを作成し、こちらは名前を「FadeOut」とします。
- FadeInとFadeOutをそれぞれHierarchy上のImageにドラッグ&ドロップします。Animatorファイルが自動で作成され、またImageにAnimatorコンポーネントが追加されます。

アニメーションを編集する

続いて上部メニューの「Window>Animation>Animation」を選択、またはAnimationファイルをダブルクリックしてAnimationウィンドウを表示します。
- Animationウィンドウを表示した状態でImageを選択すると、Imageに設定されたAnimation、つまりFadeInとFadeOutを編集できます。
まずはFadeInを編集して、ゆっくりと現れるようにしましょう。
- 編集中のAnimationがFadeInであることを確認して、赤いボタンを押します。RECモードになるので、Animationの基準となるキーフレームを記録していきましょう。
  - まずAnimationウィンドウ右側のタイムシートで、白い縦線が「0」の位置にあることを確認してください。
    - 0の位置にない場合は数字の部分をクリック・ドラッグすることで縦線を移動することができます。
  - 0の位置でフェードインの最初の状態、つまり透明で見えない状態に設定します。
    - ImageのInspector上で、Imageコンポーネントの「Color」を編集して「A」の値を0にします。
  - 続いて1秒後に完全に見えるようにしましょう。
    - Animationウィンドウの縦線を移動して、60フレームの位置に移動します。60フレームの位置で、今度はColor>Aの値を最大にしてください。

これで透明から1秒かけて現れるAnimationを設定することができました。再生ボタンを押すとエディタ上でAnimationをプレビューすることができます。

フェードインのAnimationが設定できたのを確認したら、赤いボタンをもう一度押してRECモードを終了します。

続いてフェードアウトもつくりましょう。

Animationウィンドウで編集中のAnimationをFadeOutに切り替えてください。
- ※切り替えを忘れるとFadeInを上書きしてしまう場合があります。
切り替えたら同様にAnimationを設定していきます。
- こちらは先ほどと逆に、0の位置でColor>Aを最大、60の位置で0にします。
  - これで表示がゆっくりと消えるフェードアウトのAnimationも設定できました。

アニメーションを切り替える仕組みをつくる

最後にこれらのAnimationを切り替える仕組みをつくります。

AnimationをImageに適用した際に自動生成されたAnimatorファイルをダブルクリック、または「Window>Animation>Animator」でAnimatorウィンドウを開きます。
Animatorウィンドウを開いた状態で、Animatorファイルを選択します。FadeInとFadeOutのStateがあることを確認してください。
ギミックと連動するためのパラメーターを設定します。
- Animatorウィンドウ左上のタブで「Parameters」を開き、+ボタンから「Bool」を選択してパラメーターを追加します。
  - パラメーター名はisVisibleとしてください。
- Animatorウィンドウの何もないところを右クリックし、「Create State>Empty」を選択してStateを追加します。
  - 作成されたNew Stateを右クリックして「Set as Layer Default State」を選択し、初期状態がAnimationが再生されていない状態から始まるようにします。
- もう一度New Stateを右クリックし、「Make Transition」でFadeInに向かう矢印を作成します。
  - 矢印をクリックで選択して、Inspectorを確認してください。
    - Conditionsの+ボタンで条件をひとつ追加します。
      - 左側のパラメーターが先ほど設定した「isVisible」、右側の値が「true」になっていることを確認してください。
        
        これでパラメーターがtrueになったときにフェードインするようになります。
- さらに、FadeInからFadeOutに向かう矢印を作成します。
  - こちらも条件を追加し、値を「false」にしてください。
    - フェードインしたあとでパラメーターがfalseになるとフェードアウトするようになります。
- もうひとつ、FadeOutからFadeInに向かう矢印を作成します。
  - こちらはNew Stateからの遷移と同じく値を「true」にしておきます。
    - これで、パラメーターの値が切り替わるたびにフェードインとフェードアウトを行き来するようになりました。

アニメーションがギミックと連動するようにする

最後に、これをギミックと連動するようにしましょう。

シーンに戻り、Imageを選択してInspectorを表示します。
- Add Componentから「Set Animator Value Gimmick」を追加してください。
  - 「Target」は「LocalPlayer」、「Key」はOn Collide Item Gimmickと同じ「isWarning」とします。
  - さらに「Parameter Type」「Animator Parameter Name」をAnimatorのパラメーターと同じ「Bool」「isVisible」にします。