ゲームオーバー、エリア表示に使える！──特定の場所に入ったときにメッセージや画像を表示する

アスレチックから落下したときや、別のエリアに移動したときなど、アバターが特定の場所に来たときに画面上にメッセージや画像を表示してみましょう！
アスレチックのようなゲームワールドだけでなく、例えば川に落ちたときなどに警告を出すといった使い方もできます。

Table of Contents

つくり方

「GAMEOVER」の表示をつくる

まずは画面に表示するメッセージ表示の内容をつくります。

Hierarchyを右クリックして、メニューから「UI>PlayerLocalUI – cluster」を作成してください。
作成されたPlayerLocalUIの子に「SafeArea」というオブジェクトがあります。このSafeAreaの子に表示するものを追加していきます。
SafeAreaを右クリックして空の子オブジェクトを作成し、名前を「GameOverMessage」とします。
さらにGameOverMessageの子に「UI>Legacy>Text」を作成してください。
作成された「Text (Legacy)」オブジェクトのInspectorで、「Text」の項目を「GAMEOVER」に書き換えましょう。
- ※UIはシーン上に非常に大きなサイズで表示されるため、見づらい場合はHierarchy上でダブルクリックか、選択してシーン上でキーボードの「F」キーを押してフォーカスしてください。
- ※Player Local UIやTextの詳しい設定についてはこちらの記事も参考にしてください。

設定できたら、一度プレビューで確認してみましょう。画面に「GAMEOVER」の文字が表示されます。

さらにこだわりたい場合は、Imageコンポーネントを使って画像を表示したり、より高度な設定で文字を表示できるTextMesh Proなども使ってみてください。

「GAMEOVER」の表示切り替えの仕組みをつくる

次に、この文字の表示・非表示を切り替える仕組みをつくっていきます。

GameOverMessageのInspectorを開き、「Add Component」から「Set Game Object Active Gimmick」コンポーネントを追加します。
Set Game Object Active Gimmickの「Target」を「LocalPlayer」、「Key」を「messageIsActive」と設定してください。
設定できたら、Inspectorで「GameOverMessage」と書かれている場所の隣のチェックを外して初期状態を非表示にしておきます。

アスレチックで落ちたときに「GAMEOVER」を表示する

アスレチックで足場から落ちたときに先ほどのメッセージを表示するようにします。
「足場から落ちたとき」は「足場の下の空間にアバターが入ったとき」として判定することができます。

新しいGameObjectを作成して名前を「GameOverArea」とし、足場より低い位置に移動してください。

Despawn Heightよりは低くならないようにしてください。また落ちたときに中間地点に戻すワープなどを設定している場合は、それらよりも上に来るようにします。

GameOverAreaのInspectorで「Box Collider」を追加し、「Is Trigger」にチェックを入れます。
- このコライダーに触れたときにメッセージを表示するようにしていくので、落下したときにメッセージを表示したい範囲に広げましょう。Box Colliderの「Size」の値を調整するか、Edit Colliderボタンを押して緑の枠線の範囲を動かしてください。
さらに「On Collide Item Trigger」コンポーネントを追加します。
- 「Triggers」の+ボタンで項目をひとつ追加し、「Target」を「CollidedItemOrPlayer」、その隣の「Key」を先ほどと同じ「messageIsActive」、「Value」を「Bool」にしてチェックを入れます。

ここまで設定できたらプレビューしてみましょう。Box Colliderを設定した範囲に落ちると、上で作成したテキストが表示されます。

表示された「GAMEOVER」を消す仕組みをつくる

このままでは一度落ちると表示されたままになってしまうので、最後にこれを一定時間で非表示にする仕組みをつくります。

On Collide Item Triggerの+ボタンを押して項目をさらにひとつ追加して、「Target」を「CollidedItemOrPlayer」、その隣の「Key」を「MessageTimer」、「Value」を「Signal」としてください。
続いてGameOverAreaに「PlayerTimer」コンポーネントを追加します。
- 「Target」を「Player」、「Key」を「MessageTimer」とします。「Delay Time Seconds」にはメッセージが表示されてから消えるまでの秒数を設定してください。ここでは「2」として、2秒後に消えるようにしてみます。
- Triggersの+ボタンで項目をひとつ追加して、Keyを「messageIsActive」、「Value」を「Bool」にしてチェックが外れた状態にしてください。

ここまで設定できたらプレビューしてみましょう。足場から落ちるとメッセージが表示され、2秒後にそれが消えるようになっています。

フェードイン/アウトさせてみる

メッセージの表示の仕方をもう少しつくりこんでみましょう。例として、ふわりと現れて消えるようにしてみます。

Projectウィンドウを右クリックして、「Create>Animation」から新規Animationファイルを作成します。
作成したAnimationファイルを、Hierarchy上の「GameOverMessage」オブジェクトにドラッグ&ドロップしてください。

GameOverMessageに「Animator」コンポーネントが追加されたことを確認したら、Animationファイルをダブルクリックか上部メニューの「Window>Animation>Animation」からAnimationウィンドウを表示します。
続いてAnimationウィンドウ上でアニメーションを記録していきます。GameOverMessageを選択して、オブジェクト名の隣のチェックをつけてアクティブにしてから、Animationウィンドウの赤い〇ボタンを押してRECモードにしてください。
- RECモードに切り替わったら、縦線が0フレームの場所にあることを確認して、GameOverMessageの子のTextを選択し、「Color」の「A」のスライダーを0（左端）にします。
- 続いて縦線を30フレームに移動し、同様にTextのColor>Aを最大（右端）にします。
- 次に90フレームに移動して、「Add keyframe」ボタン（ひし形に+のボタン）でキーフレームを追加、最後に120フレームでColor>Aを0にしてください。

これでフェードイン・フェードアウトのアニメーションが設定できました。もう一度赤い〇ボタンでRECモードを終了し、GameOverMessageを非アクティブに戻してから、プレビューで確認してみましょう。

エリアを移動したときにエリア名を表示する

同じ仕組みを使って、特定のエリアに入ったときにメッセージを表示するようにしてみましょう。

上と同様にTextでメッセージの表示内容を作成し、On Collide Item Triggerのコライダー範囲をメッセージを表示したいエリアを覆うように設定してください。
コライダーの範囲に入るとメッセージが表示されるようになります。

コライダーの境界付近にクリックできるアイテムなどがある場合、コライダー範囲の外側からクリックできなくなってしまう場合があるので気を付けてください。

今回は「アスレチックから落ちたとき」を例にしましたが、例えば川や海に落ちたときに警告する、あるいは秘密の場所を見つけて入ったときに隠しメッセージが表示されるなど、さまざまな使い方ができるテクニックです。
風景などがメインのワールドでも、ちょっとした仕掛けを組み込んでおくと体験の幅が広がります。ぜひ試してみてください！