AG13.プレイヤーのライフを実装する
実装する機能
落下する度に右上に表示されているプレイヤーのライフが減っていく機能を実装していきます↓
🐱ではプレイヤーのライフのUIを作成していきます。
①プレイヤーのライフのUIを作成する
まずはこんな感じのUIを作成していきます↓
https://scrapbox.io/files/65d551a64dd90c0024413aab.png
画像を用意していきます。ハートのアイコンですが今までと同じくIcooon monoのハートのアイコン素材を利用させてもらいます。リンク先にアクセスして、画像を白色にしてPNGでダウンロードしておきます。
https://scrapbox.io/files/65d551b1dc6c94002e7eeed8.png
UIフォルダにドラッグでインポートして名前を「T_Heart」にしておきます、
https://scrapbox.io/files/65d551d239b46e002471c692.png
WBP_Playerを開きます。
https://scrapbox.io/files/65d551db64075500236e98b4.png
WBP_PlayerのUIは現在こんな感じ↓になっています。
https://scrapbox.io/files/65d551e43d3c40002645f8c2.png
そしたらデザイナータブを開いてUIを作成していきます。時計の画像(Image)をCrl+CとCtrl+Vでコピペします。
https://scrapbox.io/files/65d551ecb7c3d4002426ac43.png
アピアランスのImageからT_Heartを選択します。
https://scrapbox.io/files/65d551f3392aba002dd0e47e.png
位置Xを252、Yを136にします。サイズXとYを30にします。
https://scrapbox.io/files/65d551fc4dd90c0024414196.png
既存のTextウィジェット(ただのTextウィジェット)をコピペします。
https://scrapbox.io/files/65d5520399dd5700251bf6f7.png
このTextウィジェットの名前を「LifeCount_Text」にしておきます。
https://scrapbox.io/files/65d55211a0396c00257b3b88.png
位置Xを292、Yを132にします。サイズXを100,サイズYを30にします。
https://scrapbox.io/files/65d5521a89f2c000230dde21.png
こんな感じのUIになりました↓
https://scrapbox.io/files/65d5522db2036d0024df090b.png
プレイしてみて確認しておきましょう↓
https://scrapbox.io/files/65d5523389f2c000230de06c.png
🐱ではこれでUIは実装できたので、プレイヤーのライフをカウントしていきましょう!
②初期ライフを10で保存してUIに表示する
最初に初期ライフを10として保存し、それをUIに表示していきます。
BP_Jumper_SaveGameを開きます。
https://scrapbox.io/files/65d55e9b90b3d000244590ef.png
Integer型のSaveGame_PlayerLifeという変数を作成します。
https://scrapbox.io/files/65d55ea6a72ecd0026af2565.png
コンパイルします。
🐱ちなみにこの時点でコンパイルする理由は作成した変数は一度コンパイルしないと外部からgetやsetで呼び出して使用する事ができないためです。では先にプレイヤーのライフの整数データをUIに反映させる処理を作っていきます。
WBP_Playerのグラフを開きます。
https://scrapbox.io/files/65d55eb20c6cbd0024d0fee2.png
WBP_Playerにノードを追加していきます。カスタムイベントを作成して、SetPlayerLifeTextという名前にします。インプットのプラスボタンを押してPlayerLifeという名前でInteger型のインプットを作成します。
https://scrapbox.io/files/65d55ebcccaabd0024804523.png
SetPlayerLifeTextからSetText(Text)と検索してSetText(Text)ノードを作成します。LifeCount_TextをGetで追加します。
https://scrapbox.io/files/65d55ed641464700261daf3f.png
LifeCount_Textはここのライフのテキストの部分の事になります↓
https://scrapbox.io/files/65d55ee641464700261db0cc.png
🐱一旦ライフのテキストを表示する機能は作れたので、プレイヤーのライフをセーブ,ロードする機能を作っていきます。
BP_Jumper_GameModeを開きます。
https://scrapbox.io/files/65d55eef854ce10026c7f44a.png
DoesSaveGameExistノードでSaveGameが存在しない場合に実行されるFlase側のCollapseGraph_CreateAndSaveノードを開きます。
https://scrapbox.io/files/65d55ef8c26ea00024f6d0c2.png
SaveGametoSlotでセーブする前のタイミングで、プレイヤーの初期ライフをセットしていきます。
https://scrapbox.io/files/65d55f00a0396c00257c4ccd.png
間にノードを追加していきます。SaveGame_PlayerLifeの入力値を10とします。その後、WBP_Playerで作成したSetPlayerLifeTextのカスタムイベントを呼びます。SaveGametoSlotにはBP_Jumper_SaveGameをGetで追加しておきます。
https://scrapbox.io/files/65d55f08db1c0a00241fdd7b.png
ノード解説
初期ライフとなるSaveGame_PlayerLifeを10にします。その後SetPlayerLifeTextでUIのテキストにセットして10とします。
次にDoesSaveGameExistノードでSaveGameが存在する場合に実行されるTrue側のCollapesedGraph_Loadの方を開きます。
https://scrapbox.io/files/65d55f1cfa31a70025444ab8.png
最後のSetCoinTextノードから以下を作成します。WBP_PlayerをGetで追加して、SetPlayerLifeTextノードを呼びます。ライフのカウントをSaveGameから呼び出してPlayerLifeにセットします。
https://scrapbox.io/files/65d55f2b854ce10026c7f8a5.png
ノード解説
このノードでBP_Jumper_SaveGameに実装してあるライフの整数データを表示できました。
プレイしてみて、Deleteキーで一旦セーブデータ(SaveGame)を削除します。その後再度プレイしてみると初期ライフとなる10と表示されます。
https://scrapbox.io/files/65d55f5053b8eb00245e4b24.png
🐱そしたら初期ライフの10は実装できたので、落下したらライフを1ずつ減らして保存する処理を作っていきます。
③落下したらライフを1ずつ減らして保存する
ではライフを-1する処理ですが、落下した時に実行したいのでBP_RespawnBlockにノードを記載していきます。
BP_RespawnBlockを開きます。
https://scrapbox.io/files/65d55f764dd90c0024422d3b.png
現在以下のようなノードが作られており、CastToBP_Playerの次にノードを追加していきます。
https://scrapbox.io/files/65d55f7e02f9c60023a7eed3.png
Altキーで切り離しておきます。
https://scrapbox.io/files/65d55f85b9e43700249db6a7.png
CastToBP_PlayerからLoadGamefromSlotノードを作成してSaveDataと入力します。その後CastToBP_Jumper_SaveGameで参照します。
https://scrapbox.io/files/65d55f90392aba002dd1d5c7.png
CastToBP_Jumper_SaveGameからGetでSaveGame_PlayerLifeを取得します。「--」と検索してDecrementIntノードを追加して繋げます。その後SaveGamtoSlotでSaveDataと入力します。
https://scrapbox.io/files/65d55fab53b8eb00245e4f7a.png
最後に外しておいたノードに繋いでおきます。
https://scrapbox.io/files/65d55fc0f1f23f0024e1c57f.png
ノード解説
https://scrapbox.io/files/65d55fd3ba32c20025c969cf.png
このBP_RespanBlockはステージ下に配置されており、プレイヤーが落下して触れた時に起動します。まず現在のプレイヤーのライフを取得するために、SaveGameを呼び出す必要があるためLoadGamefromSlotでセーブされたデータをロードします。そこからSaveGame_PlayerLifeを取得してDecrementIntノードによって-1してSaveGame_PlayerLifeにセットします。つまり整数データが10の場合は-1されて9がSaveGame_PlayerLifeにセットされます。その値を持つSaveGameをSaveGametoSlotによって保存する事で、プレイヤーの-1減ったライフの整数データが保存されます。
🐱つまり、ライフの整数データをロードして-1する→セーブという機能を作った形になります。そして、レベルがリスタートされたらセーブされた整数データをUIに表示するという流れになります。
プレイしてみましょう。落下すると10から-1されて9と表示されるようになりました。さらに落ちていくと「8」「7」とプレイヤーのライフが表示されているのが確認できます。
https://scrapbox.io/files/65d583f2640755002371b656.gif
🐱では細かい事ですが「09」「08」のように二桁で整数を表示する機能を実装していきます。
④プレイヤーのライフを「09」「08」と二桁で表示する
WBP_Playerを開きます。
https://scrapbox.io/files/65d55eb20c6cbd0024d0fee2.png
先にPlayerLifeという名前でInteger型の変数を作成しておきます。
https://scrapbox.io/files/65d5600471b19a00248e88e2.png
このページで先ほど作ったWBP_PlayerのSetPlayerLifeTextノードから後続のノードを編集していきます。
https://scrapbox.io/files/65d5600a15f88c0024499254.png
SetPlayerLifeTextノードから後続のノードを一旦削除します。
https://scrapbox.io/files/65d56010fb787e0025ecf7b2.png
カスタムイベントのSetLifeCountTextPlayerLifeにセットして「>」と検索してGreater(より大きい)ノードを追加して、「9」と入力します。ブランチに繋ぎます。
https://scrapbox.io/files/65d560184e00150026156143.png
True側にSetText(Text)ノードを作成して、PlayerLifeを表示させます。
https://scrapbox.io/files/65d56021605c430025729318.png
False側にはAppendノードで「0」を足してテキストを表示させます。
https://scrapbox.io/files/65d56028fb787e0025ecf968.png
SetPlayerLifeTextノードからはこんな感じになりました↓
https://scrapbox.io/files/65d5603432df57002500d35d.png
SetPlayerLifeTextノードから折りたたんで名前を「CollapseGraph_SetPlayerLifeText」とします。
https://scrapbox.io/files/65d5603b60e9b5002419c399.png
プレイしてみましょう。10の場合は「10」と表示されて9以下の場合は「0」とテキストを足して「09」「08」「07」と表示されるようになりました。
https://scrapbox.io/files/65d58405fb787e0025ef2726.gif
完成!プレイしてみよう
プレイヤーが落下する度にライフを減らす事ができました。
https://youtu.be/CTGhptT2TzU
😺ライフの実装は以上になります。ライフが0になった時にゲームオーバーにして、ライフのカウントをリセットする機能は後のページで解説していきます。ライフ実装については以上です。お疲れ様でした。