Unityに関連する記事です

 この手順ではゲームオーバーの処理を実装します。

 ゲーム画面の下部分に落下した場合に、ゲームオーバーにするように処理を追加していきます。


<実装画面 ゲームオーバー表示>



<実装動画 ゲームオーバー>
https://gyazo.com/3818b837953e9419c4f56ecfd787359a


手順19 ーゲームオーバー処理の実装ー
33.Canvas内にUI部品を作成する◆淵ぅ鵐侫表示)
34.画面外に落下した場合にゲームオーバーにする処理を追加する(GameOverZoneスクリプト、UIManagerスクリプト、PlayerControllerスクリプト)



 新しく学習する内容は以下になります。

・CanvasGroup コンポーネントの機能について



33.Canvas内にUI部品を作成する◆淵ぅ鵐侫表示)

設計


 Canvas ゲームオブジェクト内に新しくゲームオブジェクトを追加して、ゲームオーバー状態になった際に、ゲーム画面にゲームオーバーの表示を行うように制御をします。
この表示部分は後程、別の表示用にも利用しますので、ゲームオーバー表示だけに限らず、その都度、ゲームの進行状況に応じた内容を表示するように設計をします。


Canvas ゲームオブジェクトの子オブジェクトとして、InfoPlace ゲームオブジェクトを作成する


 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
空のゲームオブジェクトが作成されますので、名前を InfoPlace に変更します。
InfoPlace ゲームオブジェクトは、ゲームの状況をユーザーに伝えるためのインフォメーション機能を持つゲームオブジェクト群をまとめておくフォルダ役のゲームオブジェクトです。


InfoPlace ゲームオブジェクト ヒエラルキー画像



InfoPlace ゲームオブジェクト インスペクター画像



 今回はゲーム画面の中央に文字列を表示させたりするため、RectTransform 内の設定や、アンカーの設定は初期状態のままで問題ありません

 以上でこの手順は完成です。


InfoPlace ゲームオブジェクトの子オブジェクトとして、InfoBackGround ゲームオブジェクトを作成する


 InfoPlace ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Image を選択します。
Image コンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を InfoBackGround に変更します。
InfoBackGround ゲームオブジェクトは、ゲーム画面を覆うフィルター役のゲームオブジェクトです。


InfoBackGround ゲームオブジェクト ヒエラルキー画像



 InfoBackGround ゲームオブジェクトのインスペクター を確認し、Image コンポーネントの設定を2つ行います。

 1つ目は Raycast Target のチェックを外すことです。

 2つ目は Color の値を調整します。
下記の画像のように、ゲーム画面を薄暗くして、ゲームの情報を画面に表示させる際の背景としての役割を担います。
参考画像の Color の設定値は (0, 0, 0, 125) です。透明度の数字だけを約半分にして、黒い色を薄くして表示しています。

 Color を設定したら、Sceneビュー、あるいは RectTransform コンポーネントの Width と Height の値を調整して、
InfoBackGround ゲームオブジェクトが Canvas ゲームオブジェクトの大きさと同じ値か、それよりも若干大きな値に設定します。
こうすることでゲーム画面全体をカバーするようにし、ゲーム画面を覆うフィルターとしての機能が実装できます

 Gameビューも一緒に確認して、画面全体が薄暗くなっているか(ゲーム画面を覆う薄黒いフィルターになっているか)を確認します。


InfoBackGround ゲームオブジェクト インスペクター画像(Width と Height の値については、自分のゲーム画面に合わせてください。)



Sceneビュー画像



Gameビュー画像



 最後に、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加します。
設定は後で行いますので、いまは追加だけしていただければ問題ありません。


 以上でこの手順は完成です。


InfoBackGround ゲームオブジェクトの子オブジェクトとして、txtInfo ゲームオブジェクトを作成する


 InfoBackGround ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Text コンポーネントがアタッチされたゲームオブジェクトが作成されますので、名前を txtInfo に変更します。
txtInfo ゲームオブジェクトは、ゲーム画面にゲームオーバーなどの文字列を表示する役割を持つゲームオブジェクトです。


txtInfo ゲームオブジェクト ヒエラルキー画像



 txtInfo ゲームオブジェクトのインスペクターを確認して、Text コンポーネントの設定を2つ行います。

 1つ目は Raycast Target のチェックを外します。そうすることで、このコンポーネントの範囲内はタップ感知を阻害しなくなります。

 2つ目は Text プロパティ欄に "Game Over..." と入力してください。
ここで文字列を入力したのは、正常にゲーム画面に文字の全文が表示されるかを確認するためです。(後程、削除します。)

 文字を入力しても画面に表示されない場合は、Sceneビューでゲームオブジェクトの大きさを調整してください。文字が表示されるだけの大きさがないと表示されません。
文字の大きさ、文字の位置(中央揃え)、フォントについても適宜変更してください。今回はスコア表示に使用したフォントと同じフォントを利用しています。


txtInfo ゲームオブジェクト インスペクター画像



 SceneビューとRectTransform コンポーネントを調整して、画面の中央付近に文字列を表示させます。ここで文字の大きさや位置を再度調整します。


txtInfo ゲームオブジェクト インスペクター画像



Sceneビュー画像



Gameビュー画像



 調整が終了したら、Text プロパティ欄に入力した "Game Over..." の文字列を削除してください。
この部分はスクリプトを利用して、ゲームの状況に合わせて文字列を表示する命令を行うので空で問題ありません。


 以上でこの手順は完成です。


構造を確認して、InfoBackGround ゲームオブジェクトの CanvasGroup コンポーネントの Alpha を 0 に設定して非表示にする


 以上でゲームオーバー用の画面表示用のゲームオブジェクトの作成は完了です。

 Gameビューで確認をします。問題がなければ、InfoBackGround ゲームオブジェクトにアタッチされている CanvasGroup コンポーネントの Alpha プロパティを 0 に設定します。
これで背景の薄い黒いイメージと Text が一緒に見えなくなります。ゲームオーバーの状態になるまでこのまま非表示にしておきます。


<手順動画 CanvasGroup コンポーネントの Alpha を操作>
https://gyazo.com/0d051828fd900fae73070508607d6393


完成画像 Alpha 1



完成画像 Alpha 0



<CanvasGroupコンポーネントの機能について>


 先ほどの動画をみていただくとわかるように、CanvasGroupコンポーネントがアタッチされているゲームオブジェクトと、その子のゲームオブジェクトがグループ化されます。
これにより、グループ全体の透明度を変更したりすることができます。

 今回はInfoBackGroundゲームオブジェクトにCanvasGroupコンポーネントをアタッチしています。
そのためこのゲームオブジェクトの子オブジェクトである txtInfo ゲームオブジェクトがグループ化されます。

 透明度(Alpha)を操作した場合、グループ化されているため、子要素も一緒に透明になったり、元に戻ったりします。

Unity公式マニュアル
CanvasGroup
https://docs.unity3d.com/ja/2020.1/Manual/class-Ca...
TechProjin様
【Unity】Canvas Groupってこんなに便利だったのか…
https://tech.pjin.jp/blog/2017/03/20/unity_ugui_ca...


34.画面外に落下した場合にゲームオーバーにする処理を追加する

設計


 ゲームオーバーの判定を行うために、見えないゲームオブジェクトを作成して、ゲーム画面の下側に設置します。
この部分をキャラが通過した場合、海へ落下したと判断して、ゲームオーバーの判定を行うようにします。

 最初にキャラとの接触判定を行うために、コライダーを持つゲームオブジェクトを作成します。これをゲーム画面に配置して、プレイヤーからは見えないように透明にします。

 接触判定は、スクリプトを利用して判定します。スクリプト内に OnTriggerEnter2D メソッドを用意して、キャラとの接触・通過判定を行い、ゲームオーバーの判定と処理を行う設計にします。

 以下の順番で実装を行います。

1.GameOverZone ゲームオブジェクトを作成して、ゲームオーバーの範囲を設定する
2.GameOverZone スクリプトを作成して、GameOverZone ゲームオブジェクトにアタッチする
 
ー ここで一度、実装内容に問題がないか検証するー

3.UIManager スクリプトを修正して、ゲームオーバーの表示を画面に表示するための制御処理を追加する
4.PlayerController スクリプトを修正して、ゲームオーバー状態になったらキャラを移動できなくする制御処理を追加する


1.GameOverZone ゲームオブジェクトを作成し、ゲームオーバーの範囲を設定する


 順番に作成していきます。

1.SpriteRenderer コンポーネントを持つゲームオブジェクトを作成して、名前を GameOverZone に変更する

 ヒエラルキー上の何もゲームオブジェクトがない場所で右クリックをしてメニューを開き、2D Object => Sprite => Square を選択します。
ヒエラルキーに New Sprite ゲームオブジェクトが作成されます。


ヒエラルキー画像



 名前を GameOverZone に変更します。


ヒエラルキー画像



2.SpriteRenderer コンポーネントに仮の画像を登録して、大きさを調整しながら配置を行う

 作成された GameOverZone ゲームオブジェクトのインスペクターを確認します。
SpriteRenderer コンポーネントの Sprite プロパティに画像が最初から登録されている場合には、画像の登録の手順は不要です。

 もしも Sprite プロパティ欄が None になっている場合には、ゲーム画面には何も画像が表示されません。
このままでは、ゲームオーバーの判定部分の設定が難しいため、仮で画像を登録します。
Sprite プロパティ欄に好きな画像を登録してください。後で SpriteRenderer コンポーネントのスイッチを切って見えなくするのでどの画像でも問題ありません。


GameOverZone ゲームオブジェクト インスペクター画像



 SceneビューとGameビューの両方で、GameOverZone ゲームオブジェクトの位置と大きさを調整します。
下記のSceneビュー画像やインスペクターのRectTransform コンポーネントの値を参考してください。
画面外へ落下したら、ですので、あまりキャラが画面に残っている状態では判定しないようにするのがポイントです。
上記のインスペクター画像, RectTransform コンポーネントの値も参考にしてください。


Sceneビュー画像



Gameビュー画像(画像が見えない位にする)



3.BoxCollider2D コンポーネントを追加する

 配置と大きさの調整が終了しましたので、コライダーを追加していきましょう。

 インスペクターの一番下にある Add Component ボタンを押して、BoxCollider2D コンポーネントを追加してください。

 最初に、IsTrigger のスイッチにチェックをいれてください。

 コライダーの大きさは自動的に GameOverZone ゲームオブジェクトの大きさで調整されるはずですが、必ず、同じ大きさになっているかを確認してください。
もしも大きさが異なる場合には、BoxCollider2D コンポーネントの Edit Collider ボタンを押して調整します。Sceneビューからでも変更できます。


GameOverZone ゲームオブジェクト インスペクター画像◆BoxCollider2D コンポーネント



Edit Collider 時の Sceneビュー画像



4.SpriteRenderer コンポーネントをオフにする

 SpriteRenderer コンポーネントの名前の左横にあるチェックを外してください。
このチェックが外れていると、コンポーネントは機能を停止します。Sceneビューから画像が見えなくなっています。

 画像が見えなくなっただけで、ゲームオブジェクトは存在していますし、コライダーの大きさも変わりません。
確認しておきましょう。


Sceneビュー画像 ゲームオブジェクトの大きさ



Sceneビュー画像 コライダーの大きさ



 以上で GameOverZone ゲームオブジェクトの作成は完成です。次の手順で、このゲームオブジェクトのコライダーをキャラが通過した場合に
ゲームオーバーの判定を行えるように、スクリプトを作成していきます。


GameOverZone ゲームオブジェクト 完成時のインスペクター画像(1枚の画像にするために、各コンポーネントの表示を閉じています)



2.GameOverZone スクリプトを作成する


 処理の中に PlayerController スクリプトの GameOver メソッドの呼び出しがありますが、現在はまだ PlayerController スクリプトの修正が終了していないので
このまま書いてしまうとエラーになります。PlayerController スクリプトの修正が終了するまで、この1行はコメントアウトしておきます。


GameOverZone.cs

 <= クリックすると開きます。



GameOverZone ゲームオブジェクトに GameOverZone スクリプトをアタッチする


 ヒエラルキーにある GameOverZone ゲームオブジェクトを選択し、 作成した GameOverZone スクリプトをドラッグアンドドロップしてアタッチしてください。


GameOverZone ゲームオブジェクト インスペクター画像



 以上で、GameOverZone ゲームオブジェクト関連の実装は終了です。これでゲームオーバーの判定はできるようになりましたので、
続けて、UIManager スクリプトと PlayerController スクリプトを修正して、ゲームオーバーの表示を行う処理と、キャラを移動できなくさせる処理を実装します。
1つの処理に連動する内容が増えてきますので、どの部分で、どの処理が行われているかを、しっかりと確認しながら書いて覚えてください。


ゲームを実行して動作を確認する


 ここまでの手順が問題ないかどうか、ゲームを実行して動作を検証して確認します。
 
 GameOverZone ゲームオブジェクトをキャラが通過したら、GameOverZone スクリプトの OnTriggerEnter2D メソッドが実行されますので
その処理の中に用意してある Debug.Log が実行されて Console に Game Over と表示されるはずです。確認してください。
もしも表示されない場合には、GameOverZone ゲームオブジェクトの BoxCollider2D コンポーネントの IsTrigger のスイッチが入っているかどうか確認してください。


<検証動画 GameOverZone ゲームオブジェクトにキャラが侵入したら、Console にゲームオーバーと表示される>
https://gyazo.com/033ecc244645c748f4a286291eb984cc


3.UIManager スクリプトを修正して、ゲームオーバーの表示を画面に表示するための制御処理を追加する


 先ほど作成したゲームオブジェクトとの紐づけを行って、ゲームオーバーの背景と文字の表示を行う処理を追加します。
そのために必要な変数を2つ、新しく宣言フィールドで宣言します。

 新しく DisplayGameOverInfo メソッドを作成して、ゲームオーバーの判定が行われた場合にこのメソッドを呼び出すことで、
ゲーム画面を薄暗くして、ゲームオーバーの文字を表示する処理を実行させます。

 このメソッドでは、ゲーム画面を薄暗くする処理と、ゲームオーバーの文字を表示する処理に、DOTween 機能を利用しています。
それぞれどのような機能になっているのか、自分で調べてみましょう。


UIManager.cs

 <= クリックすると開きます。



UIManager ゲームオブジェクトの UIManager スクリプトを設定する


 UIManager ゲームオブジェクトを選択してインスペクターを確認します。UIManager スクリプト内に新しく宣言した2つの変数のアサイン情報が表示されますので設定します。


UIManager ゲームオブジェクト インスペクター画像



 txtInfo 変数には、Textコンポーネントをアサインします。
この Text コンポーネントは InfoPlace ゲームオブジェクトの子オブジェクトである txtInfo ゲームオブジェクトをアタッチされています。
このゲームオブジェクトを選択して、ドラッグアンドドロップしてアサインします。これにより、txtInfo ゲームオブジェクトにアタッチされている Text コンポーネントを扱えるようになりました。

 canvasGroupInfo 変数には、CanvasGroup コンポーネントをアサインします。
CanvasGroup コンポーネントは、InfoPlace ゲームオブジェクトの子オブジェクトである、infoBackGround ゲームオブジェクトにアタッチされています。
このコンポーネントの Alpha プロパティ欄を操作することで背景と文字列を一緒に表示させます。
この処理には DOTween 機能を利用していますので、いきなり表示されるのではなくて、徐々に画面が薄暗くなって文字が表示されるように演出しています。


<手順動画 アサイン>
https://gyazo.com/f8a77cd14a0a09bcd629e985d758bb20


UIManager ゲームオブジェクト アサイン後のインスペクター画像



4.PlayerController スクリプトを修正して、ゲームオーバー状態になったらキャラを移動できなくする制御処理を追加する


 宣言フィールドに新しく bool 型の isGameOver 変数を用意します。この変数を、キャラがゲームオーバーなのか、あるいはゲームプレイ中なのかの判定用に利用します。
ゲーム開始時は false にしておきます。この状態が「ゲームプレイ中」の状態です。ゲームオーバーになった場合には、true に変更します。これが「ゲームオーバー」の状態です。

 このように新しく宣言する変数には、自分がどのようにプログラム内で活用させていきたいのか、役割を明確に決めて作成していく必要があります

 isGameOver 変数は、Public 修飾子で新しく作成する GameOver メソッドによって変更されます。このメソッドは、GameOverZone スクリプトの
OnTriggerEnter2D メソッドから呼び出されます。つまり、キャラがゲームオーバーの地点に侵入した際に、GameOver メソッドが呼び出されて isGameOver 変数が true に変更される流れになります。

 FixedUpdate メソッドを修正して、キャラがゲームオーバーになったら移動処理をしなくなるように処理を追加します。
この処理を制御するために、上記で宣言した isGameOver 変数を使用します。

 isGameOver 変数は private 修飾子の変数であるため、処理が実行されたかどうかをインスペクターから確認することはできません。
そのため、変更されるタイミングに合わせて Debug.Log を用意して、処理が正常に動いているかどうかを Console ビューを利用して確認します。


PlayerController.cs

 <= クリックすると開きます。



GameOverZone スクリプトのコメントアウトを解除する


 GameOverZone スクリプトを修正します。
先ほど PlayerController スクリプトに処理がなかったためにコメントアウトしておいた処理から、コメントアウトを解除してください。


GameOverZone.cs

 <= クリックすると開きます。



ゲームを実行して動作を確認する


 すべての手順が終了しましたので、ゲームを実行して動作を確認します。

 GameOverZone ゲームオブジェクトにキャラが侵入したら、ゲーム画面に GameOver の文字が表示されます。
また、その後はキャラの移動が制御されるため、十字キーを操作しても移動できなくなっています。

 どの処理と、どの処理がつながって動いているかを、しっかりと確認しておいてください。


<実行確認動画 ゲームオーバー>
https://gyazo.com/3818b837953e9419c4f56ecfd787359a


 以上でこの手順は終了です。

 次は 手順20 ーゲームクリア処理の実装ー です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます