Chapter 54無料公開

📰シューティングゲームを作る(4)タイマーを実装して完成させる [UE5入門チュートリアル #3-21]

daichi

2022.05.29に更新

コメント🐤

今回はシューティングゲームにタイマーの機能を付けてゲームを完成させたいと思います。なお今回は少し長めですのでじっくりゆっくり作成していきましょう。

このページで実装する機能

今回実装する機能はタイマーを実装して、20秒経過したら的の生成を終了させます。またラスト5秒になったら的を大量生成して、最後に最終スコアを表示さるという事を行います。

①タイマーを作成する

まずは20秒のカウントダウンを作成して0秒になったらPrintStringでFINISHと表示する機能を作成しましょう。

では、レベルブループリントを開きます。既に的をランダム生成するブループリントが記載されています。
レベルブループリントに変数Timerを作成してIteger型にします。コンパイルしたらこのゲームは20秒間のゲームにしたいので初期値を20にします。
イベントTickからDelayノードを作成してDecrementIntノード(--と検索すれば出てきます)を作成します。Delayには1と入力します。

ノード解説

Delayノードは指定時間遅らせるノードですが、Delayノードが実行されている間は再度Delayノードは実行されません。なのでTickノードでDelayノードは毎フレームは実行されずに、Delayに1と入力した場合は1秒ごとに実行される訳です。DecrementIntノードはTimerの変数を-1してセットするノードです。以下のノードを実行するとわかりやすいです。

こんな感じにカウントされます↓

では、実際の手順では0秒になった時にゲームを終了させたいのでもう少しノードを加えます。

DecrementIntノードからブランチノードを作り、そこからGreaterノード(>と検索すれば出てきます)を作成して下に0と入力して上にTimerを取得します。これで0よりTimerの整数が大きい場合にtrueのノードが実行され、0以下の場合はfalseのノードが実行されます。上のPrintStringは詳細設定を開いてわかりやすいようにTextColorを赤にしておきます。下のPrintStringにはFINISHと記載します。
タイマーとなるノードは完成しました。

確認＆コピペはこちら↓

プレイするとタイマーがカウントされるようになりました。

別で実装したSTARTテキストが3秒後に実行されるようになっているので、それに合わせてタイマーをそのSTARTのタイミングから行うように変更しましょう。
StartといBoolean変数を作成します。Booleanはtrueかfalseのデータを扱う変数で初期値はfalseになっています。
レベルブループリントのBeginPlayから実装したPrintStringの後にSetStartノードを挿入してチェックを入れてtrueにします。
イベントTickからブランチノードを間に入れて、GetStartノードを接続してtrueから接続します。これでStartノードがtrueになった場合にのみタイマーがカウントするようになりました。
これでSTARTと表示されてからタイマーがカウントされるようになりました。

またタイマーが0になったらFINISHと表示されるようになりました。

今の所のレベルブループリントです↓

②タイマーが0になったら的の生成を停止する

ではFINISHのテキスト表示と同時に、的の生成も止めましょう。

Boolean型のFinishという変数を作成します。
PrintSringでFINISHとテキスト表示されたノードから、SetFinishノードを作成します。trueになるようにチェックを入れます。
続いて的を生成しているSpawnTargetのカスタムイベントからブランチノードを作成してGetFinishノードで取得してfalseから既存のブランチノードに接続します。

これで、ゲームが終了したタイミングでFinishがtrueになって、trueになった場合に的の生成は行われないようになりました。

コメント🐤

プレイして試す前にtimerを3に一旦しておきましょう。元々が20なので20秒待たなくて済みます。

プレイして試してみましょう。タイマーが0になったら的の生成が停止しました。

現在のレベルブループリントです↓

③最終スコアを表示する

では、最後に最終スコアを表示させましょう。同じくレベルブループリントのイベントtick最後のSetFinishノードから作成していきます。

セットノードから以下の画像のノードを作成します。CastToでスコアを取得できるようにして、AppendノードにAにFinalScore:と入力してBにGetScoreノードを接続します。PrintStringも最終スコアなのでずっと表示されるようにDurationを100にしておきます。

Apeendノードとは？

AppendノードはString型のテキストとテキストを接続して出力するノードです。なので今回の場合だとAが「FainalScore:」BがScore(整数)なのでScoreが100だった場合は「FinalScore:100」と表示されます。

今の所、最終スコアが一秒ごとに何度も表示される仕様なので、一度しか再生されないようにイベントTickから間に以下のブランチノードを接続します。falseの時(終了していない時)にノードが実行されるようにしました。
コメントを付けたイベントTickからの全体のノードです。
プレイしてみるとタイマーのカウントが0になったら「FinalScore:~」と表示されました。
しかしタイマーが0になった時点で最終スコアを出したら、まだステージ上には的が残っています。少し最終スコアを遅らせて表示するようにしましょう。DelayノードをSetFinishノードの後に追加しておきます。大体5秒もあれば的はステージ外に行くのでDurationを5にしておきます。
プレイするとタイマーが0になってちょうど的がステージから無くなるぐらいに最終スコアが表示されました。

コメント🐤

テストプレイが済んだらTimerの初期値を短くしている場合は20に戻しておきましょう。

最終スコア完成！現在のレベルブループリント

確認＆コピペはこちら↓レベルブループリント全体図です。

④的を最後の5秒間だけ大量に生成する

では、最後の5秒間だけ的を大量発生させる→ゲーム終了という流れにしたいと思います。

レベルブループリントのSetTimerbyEventから繋ぐ的の生成を行っているノード(画像赤枠)をもう一度作成する事になるので、カスタムイベントを作成して処理を切り離してどこからでも呼べるようにしたいと思います。
SpawnTargetから接続されているノードを以下の画像のようにします。SpawnRightOrLeftというカスタムイベントを生成して、そこから既存のブランチを繋げます。そしてSpawnTargetからブランチ,SpawnRightorLeftノードでカスタムイベントを呼びます。
作成したらSpawnRightOrLeftノードから繋がるノードを少しずらして離しておきます。

ノード解説

これで一体何をしたのかというと、ただノードを切り離しただけで機能自体は代わっていません。ただしカスタムイベントを作成した事によってSpawnRightOrLeftのカスタムイベントをどこでも呼べるようになりました。これからの手順で同じノードを使う事になるので、何度も同じノードを使用する場合はこのようにカスタムイベントを作成しておくとノードがわかりやすく管理しやすくなります。

コメント🐤

では、Timerが5秒以内になったら的を大量に生成するノード成作成していきましょう。既に作成した的を生成するノードをほぼ同じです。

では、もう一つ的を生成するノードを作成していきます。既存のSetTimerbyEventから繋がるノードを選択した(Ctlr+クリック)状態でCtrl+CでコピーしてCtrl+Vでペーストします。
ペーストしたノードを以下のように編集します。Timeを0.1にして間隔時間を短く、Timerが5以下になった時のみSpawnRightorLeftノードを呼び出し的を生成するようにします。
タイムがラスト5秒以内になると、的が大量生成されるようになりました。

現在までのレベルブループリント

的を生成する処理を分岐させて、通常の的生成と大量生成の的生成の処理を完成させる事ができました。

コメント🐤

これでほぼ完成です。後は仕上げをしていきましょう。

⑤敷居を作成してジャンプできなくする

既存の壁をAltキーを押しながら移動させて複製します。
トランスフォームの位置は大体、0,1400,-300の位置にしました。
次にジャンプの処理をできないようにします。FirstPerson > Blueprints > BP_FirstPersonCharacterを開きます。
Jumpと書かれたノードを見つけてAltキー押しながらピンをクリックで接続解除します。
これで敷居ができて、ジャンプができなくなり近づきすぎる事がなくなりました。

⑥ゲーム開始(Start)と終わり(Finish)を作る

今回UIは使用しないので代わりに簡単に作成できる3Dテキストを使用します。

編集からプラグインを選択します。
Text 3Dを検索して、チェックを入れます。再起動します。
アクタ配置パネルを設置します。
3Dテキストがあるのでドラッグで追加します。
Textの欄にSTARTと入力します。
トランスフォームは以下のようにして、壁の真ん中あたりに設置します。
3Dテキストのアクタを選択した状態でレベルブループリントを開いて、BrginPlayから繋がれているPrintStringの後にSetActorHiddenノードを作成、チェックを入れます。

SetActorHiddenノードとは？

NewHiddenにチェックをいれるとアクタを非表示にするノードです。チェックが外した状態だとアクタを表示させます。

右クリックから3D Text3DActorを作成をクリックして参照を作ります。
以下の様に接続します。これでゲーム開始後三秒後にSTARTの3Dテキストは非表示になります。
先ほどのSTARTの3DTextアクタを複製して新たに3Dテキストを作成して、FINISHと入力します。(画像ではStartは非表示にしてあります)
FINISHの3Dテキストは最後しか表示しないのでそれまで非表示にしておきたいと思います。選択した状態で同じようにレベルブループリントを開いて、今度はBeginPlayの直後にSetActorHiddenノードと参照を作成します。チェックも忘れずに行います。
次にゲーム終了時にFINISHの3Dtextを表示させます。同じくレベルブループリントのFinalScoreを表示するPrintStringの後にSetActorHiddenノードと参照を作成します。チェックは外しておきます。
これでSTARTとFINISHの3Dテキストの処理が完成しました。

⑦ゲームの完成🎉🎉

4ページに渡るシューティングゲームが完成しました！プレイしてみましょう！

20秒間でどれだけ的に弾を当ててスコアを稼ぐのかというゲームが完成しました!作成したノードはこちら↓

完成したノードの確認

このシューティングゲームのチュートリアルで作成したノードと変数全てです。

①レベルブループリント↓

②Target(的)↓

③BP_FirstPersonCharacter↓

④BP_Rifle↓

おわりに

ここまでこれた方、本当にお疲れ様でした。ブループリントも結構長めで完全な初心者の方にとっては少し難易度が高すぎたかもしれませんが、このシューティングゲームチュートリアルでブループリント作成の経験値を少しでも得られていたら幸いです。次章のページから有料になり一部のユーザーの方のみとなってしまいますが、本だけではなくYouTubeの方でもUE5のゲーム開発について情報発信していこうとと思いますので今後とよろしくお願いします🏃🏻‍♀️