AG17.ゲームオーバーの実装 - Vantan Unreal Engine 5

AG17.ゲームオーバーの実装

🐱今回はプレイヤーが落下してライフが0になった時にゲームオーバーを表示する機能を作っていきます。そして今回のページが実質最後のアクションゲーム制作となります。頑張っていきましょう!

今回実装する機能↓

今回はプレイヤーのライフが0になった時にGAMEOVERと表示させてUIをアニメーション再生させる機能を作っていきます。

https://youtu.be/ANE_ExPmIZE

具体的には以下を実装していきます。

①ライフが0になった時に最初に薄暗くなるフェードアニメーションを再生

②GAMEOVERのテキストのアニメーションを再生

③数秒後にタイトル画面に移動

🐱これら↑を実装していきます。それではゲームオーバーのUIから作っていきます。

①ゲームオーバーのUIを作る

こんなゲームオーバーのUIをまずは作っていきます↓

https://scrapbox.io/files/65d5a5fc02297c00253e579f.png

UIフォルダ内で右クリック > ユーザーインターフェース > ウィジェットブループリント > UserWidgetを選択してウィジェットブループリントを作成します。名前をWBP_GameOverにします。

https://scrapbox.io/files/65d5a60806a3fa0024ece142.png

CanvasPanelを追加します。

https://scrapbox.io/files/65d5a6127f5f3e0025c0ee6b.png

Imageウィジェットを追加します。

https://scrapbox.io/files/65d5a619ffea0100262b0e74.png

Imageウィジェットを選択した状態でアンカーを全体に伸縮する設定にして、オフセットを0にします。

https://scrapbox.io/files/65d5a61e5161d100267cfb0f.png

Tintから色を黒にします。

https://scrapbox.io/files/65d5a623fb0a3100242a9ef2.png

名前をBackground_Imageにします。

https://scrapbox.io/files/65d5a62a098f5500241c835d.png

Textウィジェットを追加します。

https://scrapbox.io/files/65d5a6308a9b7e00251e2a12.png

SizeToContextにチェックを入れて、テキスト内容を「GAME OVER」にします。

https://scrapbox.io/files/65d5a635d796530024339fa4.png

アンカーを中央にして位置とサイズとAlighnmentを以下のようにします。

https://scrapbox.io/files/65d5a64039e0770025461b9e.png

フォントサイズを136にして、今回フォントに使用するのはデフォルトのRobotのBoldItaric(デフォルトで使用できるフォント)を使用します。

https://scrapbox.io/files/65d5a6490958f80024698640.png

テキストウィジェットの名前をGameOver_Textにします。

https://scrapbox.io/files/65d5a650952fea0025ac6a2d.png

こんな感じになりました↓

https://scrapbox.io/files/65d5a658c4062b0024707580.png

🐱これでゲームオーバーのUIの見た目は完成しました。では次にアニメーションを作成していきます。

②ゲームオーバーのアニメーションを作る (背景のフェード)

では、二つのアニメーションを実装していきます。以下の様に最初に背景が徐々に薄暗くなるアニメーションと「GAMEOVER」のテキストが上から中央に移動してくるアニメーションの二つを実装していきます。

https://scrapbox.io/files/65d6d12405eb600024f0cdb1.png

まずは背景が徐々に薄暗くなるアニメーションを作成していきます。

下からアニメーションウィンドウを開いてレイアウトにドッキングしておきます。

https://scrapbox.io/files/65d6d13a15dda900247c5b19.png

アニメーションのプラスボタンを押して名前をFadeOut_BackgroundImageにします。

https://scrapbox.io/files/65d6d159558a610024bd1857.png

次にトラックを追加していきます。まずFadeOut_BackgroundImageを選択します。階層からBackground_Imageウィジェットを選択した状態で、+トラックをクリックします。Background_Imageを選択します。これでBackground_Imageというトラックが追加されます。

https://scrapbox.io/files/65d6d165b6b0eb0024e65975.png

gifで解説するとこんな感じ↓

https://scrapbox.io/files/65d6d16e7079e00023ab6d0c.png

Background_Imageのプラスボタンを押して、RenderOpacity(不透明度)を追加します。

https://scrapbox.io/files/65d6d1801e2b7c00245d0e76.png

(赤色のピンが0秒の場所で)RenderOpacityを0にしておきます。

https://scrapbox.io/files/65d6d19005efe000251f7736.png

赤色のピンを0.25秒まで移動させて、RenderOpacityを1にします。

https://scrapbox.io/files/65d6d19af547950024452d11.png

🐱これで0秒の時点でRenderOpacity(不透明度)は0、0.25秒の時点でRenderOpacity(不透明度)は1になるアニメーションを作成できました。

こんな感じのフェードするアニメーションになりました↓赤色のピンをドラッグで移動させて確認してみましょう。徐々に真っ暗になるアニメーションです。再生はスペースキーでも可能です。

https://scrapbox.io/files/65d6d1ae85fe390024f45cfb.png

トラックのフレームの拡大縮小方法

アニメーションのフレームはCtrl+スクロールで拡大する事ができます。

https://scrapbox.io/files/65d6d1cac528df00243a5888.png

🐱これで背景画像のアニメーションは完成しました!

③ゲームオーバーのアニメーションを作る (テキストの移動)

ではテキストの方も上から下へ移動するようなアニメーションを作っていきます。こんな感じです↓

https://scrapbox.io/files/65d6d42cf1218a002510a6e9.gif

同じくアニメーションウィンドウを開いた状態で進めていきます。

https://scrapbox.io/files/65d6d1fd30afff0025effbbb.png

＋アニメーションをクリックしてアニメーションを追加します。名前をTopToCenter_GameOverTextにします。

https://scrapbox.io/files/65d6d20af1218a002510870f.png

まずTopToCenter_GameOverTextを選択します。その後、GameOver_Textウィジェットを選択した状態で、+トラックをクリックしてGameOver_Textを追加します。

https://scrapbox.io/files/65d6d21d13f75f0026da794b.png

GameOver_Textのプラスボタンを押してTransformを選択します。

https://scrapbox.io/files/65d6d2356335d300253e03b6.png

Transform > 変換 > Y軸を変更していきます。

https://scrapbox.io/files/65d6d23c93b5bc00256542df.png

(赤色のピンが0秒の場所で)Y軸を-900にします。

https://scrapbox.io/files/65d6d24a1e2b7c00245d1812.png

1秒の場所までピンを移動させて、Yを0にします。

https://scrapbox.io/files/65d6d257a8a9f40024ae7fd3.png

ピンをドラッグまたはスペースキーを押してアニメーションを確認してみましょう。こんな感じの画面外からテキストが移動してくるアニメーションになりました↓

https://scrapbox.io/files/65d6d3ebd2661300238e22d7.gif

🐱UIはアニメーション含めて全部完成しました。後はプレイヤーのライフが0になった時にこのゲームオーバーのUIを表示させていきましょう。

④ライフが0になったらゲームオーバーのUIを表示する

ではプレイヤーが落下してライフが0になった場合、今作ったゲームオーバーのUIを表示させていきます。

https://scrapbox.io/files/65d6d2fc8c298d0023f8317c.gif

アニメーションの再生は後から実装していきます。

では、プレイヤーが落下した時の処理はBP_RespawnBlockに記載しているのでBP_RespawnBlockを開きます。

https://scrapbox.io/files/65d6d33745566e002438f107.jpg

作成したBP_RespawnBlockのノードがどんなものだったのか復習

まずプレイヤーが落下してこのBP_RespawnBlockに触れた時に実行されます。セーブデータをロードしてプレイヤーライフを取得します。その後プレイヤーライフから-1してセットし、レベルをロードする機能になっています。

🐱ではここに、プレイヤーライフが0になった場合の処理を追加していきます。

まずLoadGamefromSlotからAlt+クリックで切り離します。

https://scrapbox.io/files/65d6d49193b5bc00256562a8.png

LoadGamefromSlotのRetrunValueから右クリック > 変数へ昇格します。名前を「BP_Jumper_SaveGame」にします。

https://scrapbox.io/files/65d6d4a4222b3c0024c0afa7.png

作成したセットノードと既存のCastToBP_Jumper_SaveGameと繋げます。

https://scrapbox.io/files/65d6d4b34bfbda00243fa86a.png

DecrementIntノードからSaveGametoSlotへのワイヤーをAlt+クリックで切り離しておきます。

https://scrapbox.io/files/65d6d4c9de4b1700245afd99.png

<=と検索してLessthanノードを作成し、0と入力します。その後ブランチノードを追加します。

https://scrapbox.io/files/65d6d512ca542900248fe6f2.png

ノード解説

これでプレイヤーが落下した時にプレイヤーのライフから-1して結果が0以下だった場合、処理を分岐させるノードになっています。つまりプレイヤーのライフが0になった場合とそうではない場合で処理を分けています。

False側から既存のSaveGametoSlotからのノードに繋げます。さらにSaveGametoSlotにBP_Jumper_SaveGameをGetで繋ぎます。

https://scrapbox.io/files/65d6d528dcca580024188b15.png

True側からCreateWidgetノードを作成して、ClassにWBP_GameOverを選択します。AddtoViewportで表示させます。AddtoViewportのZOrder(表示の優先度合い)は1にしておきます。

https://scrapbox.io/files/65d6d5340a1482002577ca03.png

ノード解説

https://scrapbox.io/files/65d6d54979725e00255d9f13.png

ここまでのノードを一旦整理すると、プレイヤーが落下した時点でライフが0以下かそうではない場合で処理を分けています。0以下の場合はゲームオーバーのUIを表示させます。

LEVEL1を開いておきます。

https://scrapbox.io/files/65d6d5586335d300253e487f.png

一旦プレイしてみましょう。ライフが0以下ではない場合はライフから-1されてレベルがリセットされます↓

https://scrapbox.io/files/65d6d572c1dd2a00242d3baa.gif

ライフが0以下になった場合はゲームオーバーのUIが表示されます↓

https://scrapbox.io/files/65d6d2fc8c298d0023f8317c.gif

今の所ライフが0になるまで落下し続けないとゲームオーバーは試せませんが、後からテスト用として一時的にいつ落ちてもゲームオーバーになるようにします。

🐱プレイヤーのライフが0になった時にゲームオーバーのUIを表示できました。

⑤ゲームオーバー時に音楽を停止してライフをリセットする

ではゲームオーバーになった場合に音楽を停止する機能とプレイヤーのライフをリセットする機能を追加していきます。

BP_RespawnBlockを再度開きます。True側の最後のAddtoviewportノードから以下のように追加します。CastTo_Jumper_GameModeからBackgroundMusicをgetで取得して、FadeOutノードに繋ぎます。FadeOutノードは0.5秒にしておきます。

https://scrapbox.io/files/65d6d616335da000252153c0.png

FadeOutノードから続けて追加していきます。CastToBP_Jumper_SaveGameからSaveGame_PlayerLifeに10をセットします。

https://scrapbox.io/files/65d6d61f75e4a10025d72883.png

その後、BP_Jumper_SaveGameをgetで追加してSaveGametoSlotを作成します。SlotNameにはSaveDataと入力します。

https://scrapbox.io/files/65d6d6285bc14c0025f33481.png

ノード解説

https://scrapbox.io/files/65d6d63dff806d0025e9177c.png

プレイヤーが落下した時にライフが0になった場合、つまりブランチのTrue側のノードが実行されます。音楽を停止してライフを10にしてセーブする機能を作りました。

😺ではここからゲームオーバーのUIアニメーションを再生させていくのですが、毎回プレイヤーのライフが0になるまで落下し続けるのは大変なので一時的にライフが9以下の場合、ゲームオーバーの処理が走るように設定しておきます。

BP_RespawnBlockを開いて「<=」のLessThanノードの値を一時的に9にしておきます。

https://scrapbox.io/files/65d6d65c5b21820024c999bd.png

🐱これでプレイヤーが落下した時にライフが9以下の場合、つまり常にゲームオーバーの処理が走るようになりました。

https://youtu.be/V2HQ_mV7E9w

プレイしてみて確認してみましょう↓音楽が0.5秒かけて停止する処理とライフを10にリセットする処理が完成しました。

🐱では最後に作ったアニメーションを順に再生させていきます。

⑤ゲームオーバーのアニメーションを順に再生する

では以下のように作成したアニメーションを順に再生させていきます。

https://scrapbox.io/files/65d6d42cf1218a002510a6e9.gif

WBP_GameOverのグラフを開きます。

https://scrapbox.io/files/65d6d69f206cb6002660492c.png

まずUIが表示された時に起動するイベントConstructからPlayAnimationノードを作成します。変数からFadeOut_BackgroundImageを追加します。

https://scrapbox.io/files/65d6d6a8425d7e0025b3fa94.png

🐱イベントConstructはBeginPlayと同様にゲームプレイ開始時だけではなく、そのウィジェットが作成された時にも実行されます。つまりこのゲームオーバーのUIが表示されたタイミングでPlayAnimationノードによってアニメーションは実行されます。

これで落下すると、Background_Imageとなる黒色の画像がアニメーションでフェードされている事が確認できます。

https://scrapbox.io/files/65d6d6ce1e2b7c00245d5c31.gif

(こちらのgifは若干レベルの内容が違っていますが無視してください)

次にWBP_GameOverのアニメーションウィンドウを開いて、既存のFadeout_BackgroundImageを選択して、+トラックからイベントのトリガーをクリックします。

https://scrapbox.io/files/65d6d6e43714840025a31075.png

イベントのトリガーが追加されました↓

https://scrapbox.io/files/65d6d6ec425d7e0025b3ff4f.png

トリガーとは？

トリガーとはアニメーションのあるタイミングで、ブループリントのノードを実行したい時に追加します。例えば今回の様にトリガーをアニメーション終了時に設定すると、そのアニメーションが終わったタイミングでノードを実行する事ができます。

0.25秒の場所までピンを移動させて、イベントのプラスボタンを押します。すると見にくいですが黒色のキーが追加されます。

https://scrapbox.io/files/65d6d713f88c8d0024be6d43.png

🐱再度確認ですが、このキーフレームの場所はCtlr+スクロールで拡大縮小ができ、右クリック＋ドラッグで見ている場所の移動ができます。

追加したイベントのキーをダブルクリックします。

https://scrapbox.io/files/65d6d722a8a9f40024aee6b8.png

そうするとカスタムイベントが開かれます↓カスタムイベントの名前は自動でBackground_image_Event_0という名前になります。

https://scrapbox.io/files/65d6d72b6bd0a200289c165f.png

🐱このBackground_image_Event_0のカスタムイベントは0.25秒の時点でイベントを作成したので、背景が薄暗くなるアニメーションが再生された0.25秒後に実行されます。

Background_image_Event_0のカスタムイベントから以下の様にPlayAnimationノードを作成してTopToCenter_GameOverTextをGetで追加します。

https://scrapbox.io/files/65d6d73e273d880025c01349.png

ここまでのノード解説

まずプレイヤーのライフが0以下になった場合に背景が薄暗くなるアニメーション(Fadeout_BackgroundImage)が実行されます。その後Fadeout_BackgroundImageに作ったイベントによって0.25秒後にGAMEOVERのテキストが表示されるアニメーション(TopToCenter_GameOverText)が実行されます。

🐱つまり、落下してライフが0になった→ゲームオーバーのUIが表示→背景のアニメーションが再生→テキストのアニメーションが再生という流れになります。

プレイしてみます。GameOverのアニメーションが背景画像のフェードアニメーションが終了した後に再生されました。しかし、最初にGameOverのテキストが一瞬表示される仕様になっているのでこれを修正していきます。

https://scrapbox.io/files/65d6d7647a494c002578bfab.gif

WBP_GameOverのデザイナータブを開いてGameOverのテキストを選択した状態で、VisibilityをCollapsed(非表示)にします。

https://scrapbox.io/files/65d6d7700a9eb80025932b0c.png

GameOverのテキストを選択した状態でIsVisibleにチェックを入れます。

https://scrapbox.io/files/65d6d7840782da0025ca5716.png

WBP_GameOverのBackground_Image_Event_0のイベントを開きます。開く時は以下の二つの場所どちらからでも開けます。

https://scrapbox.io/files/65d6d7891676210026563d02.png

既存のノードの間にSetVisibilityノードを追加してGameOver_TextをVisible(表示)にします。

https://scrapbox.io/files/65d6d797fab021002511a032.png

🐱これで最初はテキストは非表示にしておいて、アニメーションが再生されるタイミングと同時に表示させる事ができました。

プレイすると黒くフェードアニメーションが再生された後に、GAMEOVERのテキストアニメーションが再生されました。

https://scrapbox.io/files/65d6d1ee016f9d00276a78c9.png

🐱最後にGAMEOVERのテキストが表示されてから数秒後にタイトル画面のレベルを開く処理を組みます。

そのままBackground_Image_Event_0の最後のノードから、Delayを作成して2秒に設定。OpenLevelを作成してTitleと入力します。

https://scrapbox.io/files/65d6d7ad80190300243f2d5d.png

ゲームオーバーになった後にタイトル画面に戻りました。

https://scrapbox.io/files/65d6d7bc35fe2d00258a2820.png

最後にBP_RespawnBlockのLessThanノードの値を0に戻しておきます。

https://scrapbox.io/files/65d6d7d3fab021002511a525.png

これでプレイヤーのライフが0になった時にゲームオーバーになるように戻しました。

ゲームオーバー完成！プレイしてみよう

これでプレイヤーのライフが0になる→GameOverのUIを表示→アニメーション再生→タイトル画面に戻るという機能を実装させる事ができました。

https://youtu.be/ANE_ExPmIZE

🐱ゲームオーバー実装の流れとしてはこんな感じかなと思います。次回全体をプレイしてみて終了になります。以上です。お疲れ様でした。