AG08.ステージクリアを実装する

今回実装する機能↓

今回実装する機能は作成した家の中のゴール地点まで行くと、ステージクリアのUIなどを表示する機能です。

https://youtu.be/jo-PcBPHhX8

実装する機能としては以下になります。

①ゴール音を鳴らす

②タイマーを止める

③プレイヤーの操作を止める

④ゴールした時のUIを表示する

⑤マウスカーソルを表示してボタンを押せるようにする

😺一つずつ作っていきましょう!

①ゴールを検知するブループリントクラスを用意する

まず、プレイヤーのゴールを検知するために見えないコリジョンをゴールに設置していきます。

Blueprintsフォルダで右クリック > ブループリントクラス > Actorを選択して名前を「BP_GoalPoint」にします。

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

BoxCollisionを追加します。

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

Boxを選択した状態でOnComponentBeginOverlap(重なり始めた瞬間を検知する)ノードを作成します。

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

CastToBP_Playerで衝突したオブジェクトがPlayerがどうか検証して、プレイヤーだった場合にPrintstringで「GOAL!」と表示させます。

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

BP_GoalPointを家の中にある中央の台に配置します。

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

ちょうどエフェクトの光と重なりあうように位置とサイズを調整します。トランスフォームはこんな感じになりました↓

位置 (X=6099.738507,Y=-3240.923129,Z=-125.684074)

回転 (Pitch=0.000000,Yaw=15.352844,Roll=0.000000)

拡大縮小 (X=2.679111,Y=3.354255,Z=8.673898)

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

そしたらゴールした時の挙動のみ試したいのでスタート地点を現在のカメラ位置にしておきます。

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

プレイしてゴール地点までいくとPrintstringで「GOAL!」と表示される事が確認できます。

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

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

BP_GoalPointは既存の家を構成しているアクタを入れているHouseフォルダにドラッグで入れておきましょう。

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

🐱ではゴール検知用のブループリントクラスは一旦用意できたので次にこのゴール地点に触れた瞬間にゴール音を鳴らしましょう。

②ゴール音を作成する

次にゴールした時のゴール音を実装していきます。

Audioフォルダにて右クリック > サウンド > サウンドキューを作成して名前をA_Goal_Cueにします。

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

A_Goal_Cueを開いて、WavePlayerノードを作成してSuccses_V2(LearningKit_Robotsフォルダの中のアセット)を選択します。

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

アウトプットを選択して音量となるVolumeMultiplierは0.13あたりにしておきます。

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

次にBP_GoalPointのイベントグラフを開きます。

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

作成したprintstingノードはもういらないので削除して、代わりにPlaySound2DノードでA_Goal_Cueをセットします。

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

プレイしてゴールする(BP_GoalPointに触れにいく)と音楽がなるようになりました。

https://youtu.be/iDK_ACAuL-g

🐱次にタイマーを止める処理を作っていきます。Ctrl+Shift+Sで保存も忘れずにこまめにしていきましょう。

③タイマーを止める

ではGoalPointにプレイヤーが触れたら作成したタイマーを停止する処理を作っていきます。

まずタイマーのカウントを止めるためにカウントを実装しているBP_Jumper_GameModeを開きます。

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

まずはIsGoalという名前のBoolean型の変数を作成します。

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

Booleanの型の初期値はfalseになっています。falseのままで良いです。

そしたらBP_Jumper_GameModeに既に実装してあるTimerのカスタムイベントから続く場所にノードを追加していきます。

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

ブランチからGetでIsGoalを追加してFalse側から後続ノードに接続します。

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

🐱繋ぐのはfalse側です。注意しましょう。

BP_GoalPointを開きます。

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

PlaySound2Dノードから作成していきます。GetGameModeノードとCastToBP_Jumper_GameModeを作成します。その後IsGoalをセットで追加してチェックを入れます。

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

ノード解説

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

IsGoalというtrueかfalseのデータを持つBooleanを作成しました。IsGoalがfalseである限りタイマーが計測されます。プレイヤーがゴールしたタイミング(BP_Goalpointに触れた時点)でIsGoalをtrueにしてタイマーを止めています。

🐱IsGoalという変数でゴールしたかどうか判別している形になります。

ここまでBP_GoalPointに実装した全ノードです↓

プレイしてみてゴールするとタイマーが停止します。

https://youtu.be/5gNwdQeNBGI

🐱では、BP_Jumper_GameModeのノードが長くなってきたので折りたたんで見やすくしておきます。

BP_Jumper_GameModeのBeginPlayから繋がるSetTimerbyEventノードから全てを選択して右クリック > ノードを折りたたむを選択します。

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

名前はCollapsedGraph_Timerにしておきます。

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

🐱では、続いてゴールした時のUIを作成していきます。

④ゴールした時のUIを作成＆表示する

ではここからはゴールした時のUIを簡単に作成して表示していきます

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

WBP_Goalを開いてCanvasPanelを追加します。

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

では背景を薄暗くするためにImageウィジェットを使用します。Imageウィジェットを追加します。

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

Imageを選択した状態でアンカーを一番右下の画面サイズ全体に合わせる項目にします。

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

オフセットを全て0にします。

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

Tintから色を黒にして、A値(不透明度)を0.7あたりにします。

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

今の所、こんな感じになっています↓

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

テキストウィジェットを追加します。

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

テキストを選択した状態で緑の枠をテキストに合わせるためSizetoContenetにチェック入れておきます。

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

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

🐱テキスト内で改行はShift+Enter、覚えておきましょう!

Justification(行揃え)を真ん中にします。

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

😺なおゲームのクリアは「COURSE CLEAR!」や「LEVEL COMPLETED!」のように表現される事が多いです。

Font > Sizeを125にします。

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

アンカーを中央にセットします。

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

スロットの位置を以下の値にします。これで中央にテキストが表示されます。

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

今の所こんな感じになっています↓

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

次のステージに進むためのボタンを設置します。Buttonウィジェットを追加します。

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

アンカーを右下にセットして、位置を以下のようにします。大体でいいです。

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

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

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

テキスト内容をNEXTにします。

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

これでUIを完成させる事ができました。

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

🐱これを表示させましょう。表示させるタイミングはもちろんゴール時なのでBP_GoalPointに表示させるノードを作っていきます。

BP_GoalPointのブループリントクラスのイベントグラフを開きます。

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

既存のOnComponentBeginOverlapの最後に以下のUIを表示するノードを追加します。CreateWidgetノードとAddtoViewportノードを作成します。CreateWidgetノードにはWBP_Goalをセットします。

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

プレイしてみましょう。これでクリアした時のUIが表示できました。

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

🐱では残り三つの問題を解消していきます。

①タイマーのUIなどが隠れてしまっている

②プレイヤーがゴールした後も操作できてしまう

③NEXTボタンを押すためのマウスカーソルが表示されていない

⑤UIの表示優先度を変更する

では、タイマーの表示が隠れてしまっているので↓UIの表示優先度を変更していきます。

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

BP_Playerのイベントグラフを開きます。

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

既存で作成したWBP_Playerを表示するためのAddtoViewportノードがあります↓

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

AddtoViewportノードの下矢印をクリックしてZorderを1にします。

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

ZOrderとは？

プレイしてゴールしてみると、表示順が前面になってタイマーなど確認できる状態になりました。

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

😺なのでUIの表示順を変更したいのであればZOrderを変更すると覚えておきましょう!ではあと少し頑張っていきましょう!

⑥プレイヤーの操作無効＆マウスカーソルを強制表示させる

では、現時点ではクリア後プレイヤーの操作が可能になっており移動できる状態になっています。さらにWBP_Goalを表示させたタイミングでNEXTボタンを押せるようにマウスカーソルを表示する必要があるのでその機能を実装していきます。

BP_GoalPointのブループリントクラスを開きます。

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

OnComponetBeginOverlapの一番最後からノードを作成していきます。

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

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

SetInputModeUIOnlyとは？

SetInputModeUIOnlyノードとはキャラの操作を無効にして、UIの操作を可能にするノードです。これでキャラの操作はできなくなります。操作関連の処理はPlayerControllerが保持しているためGetPlayerControllerを取得する必要があります。

ShowMouseCousorとは？

ShowMouseCousorとはマウスカーソルを表示,非表示を決定するノードです。チェックを入れるとマウスカーソルが表示されます。これもPlayerControllerの設定なのでPlayerControllerをターゲットにする必要があります。

一旦これでプレイしてみます。ゴールしたと同時にキャラの操作が無効になってカーソルが表示されました。

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

しかしながらgifのようにキャラクターが走ったままになる場合があります。

キャラが走り続ける理由は？

これは 移動のキーを押す → 操作無効 → 移動のキーを離す..しかし操作無効になっているので離した時に止まるという操作が反映されない → ゴールした後もキャラが動き続けるといった仕様になっているためです。

そこでBP_GoalPointの最後のノードに戻ってDisableノードを追加します。GetPlayerCharactorで取得してターゲットに繋ぎます(自動で変換ノードが作成されます)。

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

Disable Movementノードとは？

Disable Movementノードは、キャラクターの移動を停止させるためのノードです。GetPlayerCharacterで操作しているBP_Playerを取得して停止させています。

完成！プレイしてみよう

これでステージクリアが実装できました。プレイしてみて確認してみましょう。

https://youtu.be/jo-PcBPHhX8

😸これで一旦ステージクリア時の実装は完了です。NEXTボタンで次のステージに移行させる機能は次のステージを作ってから実装していきます。保存もしておきましょう。以上です。お疲れ様でした。