AG06.何分何秒表記のタイマーを実装する

今回実装するタイマーの機能

今回はゴールするまでのタイムを測る何分何秒表記のタイマーを実装していきます。例えばスタート時から90秒後には01:30と表示されて、650秒後には10:50と表示されます。(なおゴール時にタイマーを止める機能は後のページで実装してきます。)

https://youtu.be/U2qL7UUeL5c

🐱という事で作っていくのですが流れとしてはまずはUIを作成してその後何分何秒表記のタイマーを作っていきたいと思います。

①タイマーのUIを作る

まずこんな感じ↓にタイマーのUIを作っていきます。

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

まずWBP_Playerを開きます。

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

デザイナータブを開きます。

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

現時点でこんな感じのUIになっています↓

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

既存のコインのImageウィジェットをそのままCtrl+CとCtrl+Vでコピペします。

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

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

白色にしてダウンロードします。

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

UIフォルダにドラッグで追加します。名前をT_Stopwatchにします。

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

😸アセット名にもできるだけ日本語は含めないようにしましょう。

アピアランスのImageから画像をT_Stopwatchに変更します。

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

位置Xを187,Yを44にします。サイズXを55、Yを52にします。

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

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

コンテンツからテキスト内容を「00:00」にします。位置Xを243、Yを60にします。サイズXを100、Yを30にします。

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

フォントサイズはそのまま25です。

現在WBP_Playerはこんな感じのUIになっています↓

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

一旦ここまで出来たらプレイして確認してみましょう

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

😸実際のUI調整はかなり時間がかかるので方法としては1から自分で作るよりも何かのゲームのUIを参考に作る事をおすすめします。その後ゲームに合わせてアレンジしていきましょう。

②タイマーの機能を実装する

ではここからタイマーの機能の部分を実装していきましょう。作る機能は大きく分けると二つでゲーム開始して何秒なのか計測するタイマーをゲームモード側に作って、WBP_Player側に秒数をテキスト表示する機能を作成していきます。一旦こんな感じに↓秒数表示でつくっていきます。

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

🐱ノードが多くてわからなくなったら下の方のblueprintUEをご覧ください。

まずWBP_Player側には既に以下のノードが作られています。

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

邪魔なのでまとめておきます。SetCoinTextから後続のノード全てを選択した状態で、ノードを折りたたむを選択します。

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

コメントが追加してある場合は短くしておいて、折り畳みグラフの名前はCollapseGraph_SetCoinTextと記載します。

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

折り畳みグラフについて

折り畳みグラフはノードを折りたたんだだけなので機能としては何も変わりません。開く時にはダブルクリックで、戻る時にはイベントグラフをダブルクリックで開きます。

左側のマイブループリントからでも折り畳みグラフは開く事ができます。

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

左側のマイブループリントからでも折り畳みグラフは開く事ができます。

そしたらもうCollapseGraph_SetCoinTextは用は無いので置いておいて、別でカスタムイベントを作成して名前をSetTimerTextにします。

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

その後にSetText(Text)と検索してSetText(Text)ノードを作成します。変数からTimer_TextをGetで持ってきて繋ぎます。　

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

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

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

これでSetTimerTextを呼ぶと秒数のテキストがセットされます。

🐱次に秒数を計測するタイマーはゲームモード側に実装するので、ゲームモードを作成していきます。

Blueprintsフォルダで右クリック > ブループリントクラス > GameModeBaseを選択します。名前はBP_Jumper_GameModeにします。

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

設定からワールドセッティングを開きます。ゲームモードオーバーライドの設定にはBP_ThirdPersonGameMode　あるいは　BP_LerningKitGameModeというゲームモードがデフォルトでセットされています。

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

BP_Jumper_GameModeをドラッグでセットします。

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

れでこのゲームにはBP_Jumper_GameModeのルールが適用されるようになりました。

BP_PlayerをDefaultPawnClassにセットします。

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

DefaultPawnClassとは？

DefaultPawnClassとは操作可能なプレイヤーをスポーンさせる設定項目です。BP_Playerをセットした事でBP_Playerがスタート時にスポーンするようになっています。DefaultPawnClassにはPawnを継承したクラス(Characterクラスなど)しかセットできません。

一旦プレイしてみましょう。今まで通り問題なくプレイできます。

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

ではBP_Jumper_GameModeのイベントグラフを開きます。

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

ここにノードを記載していきます↓

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

WBP_Playerという名前の変数を作成します。型はWBP_Playerと検索してオブジェクト参照をクリックします。

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

WBP_Playerという型とは？

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

変数は数字や文字列だけではなく、様々なデータを格納する事ができます。そして今回のWBP_Playerという型は作成したウィジェットブループリント「WBP_Player」専用の変数になります。なのでWBP_Playerという型の変数にはWBP_Playerというウィジェットブループリントしかデータとして入れる事ができません。ブループリントクラスやウィジェットブループリントなどを作るとこのようにそれぞれの名前の型が自動で用意されます。

🐱ではBP_Jumper_GameModeのWBP_Playerという変数は現在空の状態です。なのでWBP_Player変数に表示するWBP_PlayerのUIのデータを入れておく必要があります。

BP_Playerを開きます。イベントBeginPlayの後続ノードから作成していきます。

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

イベントBeginPlayから繋がる最後のAddtoViewportノードから、以下のノードを作成します。まずCastToBP_Jumper_GameModeノードとGetGameModeを追加します。

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

GetGameModeノードとは？

その後、As BP_Jumper_GameModeからワイヤーを引っ張ってきて、WBP Playerをセット。

WBP_PlayerをGetで追加してセットノードを追加します。

これはつまり、BP_JumperGameModeのWBP_Playerに、BP_PlayerのWBP_Playerを渡していることになります。

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

ノード解説

これでBP_Jumper_GameModeのWBP_Player変数にWBP_Playerの参照データを格納する事ができました。格納する事でBP_Jumper_GameModeからWBP_Playerのブループリントを実行できるようになります。

🐱これでBP_Jumper_GameModeからUIのテキストを変更する準備が整いました。

そしたらBP_JumperGameModeのイベントグラフを開きます。

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

まずは以下ノードを作成します。BeginPlayからSetTimerbyEventを作成してTimeを1にしてLoopingにチェックを入れます。Eventからカスタムイベントを作成してTimerという名前にします。

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

SetTimerbyEventノードとは？

SetTimerbyEventとはLoppingにチェックを入れた場合、Eventに繋いだカスタムイベントをTimeの時間でループ処理させるノードです。つまり上のように組んだ場合はTimerから繋がるノードを1秒間毎に繰り返すノードになります。

そのままInteger型でSecondsという名前の変数を作成します。

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

Timerのカスタムイベントからは以下のように作成します。「++」と検索してIncreamentIntノードを追加してSeconds変数をGetで追加します。次にWBP_Player側に作成したカスタムイベント「SetTimerText」ノードを呼んで、ターゲットにWBP_Playerの変数をGetで持ってきます。

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

ノード解説

SecondsをIncrementInt(++)ノードで+1してセットしてテキストを表示するというノードです。コメントで書いてある「色々な秒数テスト用」の加算ノードは後から色々な秒数を確認するために使用するノードです。最後にWBP_PlayerのSetTimerTextを呼んでUIに秒数のテキストをセットしています。

現状WBP_Playerのノードはこんな感じになっています。

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

全体ノード解説

まずあらかじめBP_Player側からWBP_Playerを変数にセットしておきます。これによってBP_Jumper_GameModeからWBP_PlayerのUIを変更できるようになります。次にSetTimerByEventノードによって1秒毎にノードが実行されます。一秒ごとにElapsedTimeに+1してテキスト表示されるというのが流れになります。

一旦これでプレイしてみましょう。秒数が1,2,3とカウント表示されるようになりました。

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

秒数が変化しなかったりエラーが発生した場合はノードが必ずどこか間違えていますので再度実装したノードをご確認ください。

🐱ではタイマーも表示として「00:05」「00:35」「01:49」のように何分何秒表示にしたいのでその処理を作っていきます。

'

③何分何秒表示のタイマーを実装する

「01:10」のように何分何秒表示のタイマーを実装するために、先に簡単に説明しておくと「01(分)」の部分と「10(秒)」のテキストそれぞれ作成します。そしてそれらのテキストを結合させて「01:10」と表示させるといった事を行います。

🐱要するに現在の秒数から現在「何分」「何秒」をそれぞれ割り出して、後からそれらをテキストに変換して結合するという事を行います。ちょっとノードが長くなりますがひとまず作ってみましょう。

まずはWBP_Playerを開きます。

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

🐱BP_Jumper_GameModeから渡す変数はInteger型ではなくString型にするのでその部分を変更しておきます。

SetTimerTextのカスタムイベントを選択してインプットからElapsedTimeを削除します。あるいは下記の変数に名前を変更します。

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

新しくCountTextというString型のインプットを作成します。

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

既存のToTextノードは一旦削除してもらってSetTimerTextのCountTextからSetTextのInTextに接続します。

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

Cキーでコメントもつけておきます。

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

次にBP_Jumper_GameModeを開きます。

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

最初にMinuite変数を作成します。型はInteger型にしておきます。

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

ElapsedTimeに接続されたワイヤーを削除します。

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

次に「format text」と検索してテキストフォーマットノードを作成します。解説は後から行います。

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

そしたらFormatの部分に「{MinutesText}:{SecondsText}」と入力してエンターキーを押します。自動で入力ピンが作成されます。

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

MinutesとSeconds変数をGetで追加してそれぞれ繋ぎます。

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

テキストをフォーマットノードからSetTimerTextノードに繋ぎます。自動で変換ノードが作成されます。

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

「テキストをフォーマット」ノードとは？

🐱つまり「テキストをフォーマット」ノードは文章の中にInteger型などの整数データを組み込む事ができるノードです。

そしたら以下のようにしてブランチのfalseからSetTimerTextの実行ピンに接続しておきましょう。

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

完成図↓

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

Branchの前には、以下のようにSecondsが60になったら、trueになるような==ノードの条件式を作成し、Branchのコンディションにつなぎましょう。

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

現在のノードはこんな感じです↓

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

全体ノード解説

プレイしてみましょう。「0:1」「0:2」~「0:10」のように「分数:秒数」でカウントされるようになりました。

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

試しに分数表示も確認していきますが、待つのが面倒なのでテスト用のノードを組み込んでいきます。

再度BP_Jumper_GameModeを開きます。

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

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

試しにSecondsに57と入力してMinutesに1と入力します。

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

これで1分57秒からの表示をプレイ後すぐに確認する事ができます。

プレイしてみます。ひとまず問題なく「分数:秒数」と表示されているのが確認できます。

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

🐱ノードによって60秒になった時に分数に+1して秒数をリセットするという処理になっているため、このような処理が実行されている訳ですね。ただしこのままだと2分1秒だった場合「2:1」のように不自然な表示方法になっています。そこで「02:01」のように二桁表示されるように処理を変えていきます。

④タイマーの表記を「02:01」のような表示方法にする

BP_Jumper_GameModeを再度開きます。

String型のSecondsText変数とMinutesText変数を作成します。

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

そのままBP_Jumper_GameModeの++ノードから繋がる部分をAlt+クリックで切り離します。SetTimerTextノードは端の方に置いておきます。

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

++ノードからブランチノードと「>」と検索して上にSeconds変数を接続,下に9と入力します。

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

そのブランチノードから以下のようにノードを作成します。SecondsTextをセットで追加して下のノードはAppendノードで0を結合させます。

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

上のパターンの条件は９秒を超えたらの世界線、つまり１０秒以上を表しますので、テキストはそのままの表示となります。

下のパターンの条件は９秒以下の世界線なので、Appendで先頭に０をつけて、01,02,03のように表しています。

そしたらコメントを追加しておきます。

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

次に、分のテキスト表示も、秒と同じように作っていきます。

最後のSecondsTextセットノードから今作ったノードと同じように作成していきます。

まずは以下の様にブランチノードを作成します。

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

続けてMinutesTextのセットノードを作成します。

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

コメントを追加しておきます。

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

現在こんな感じのノードになっています。

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

置いておいたSetTimerTextノードを最後に接続します。

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

そしたら以下の部分をSecondsTextとMinutesText変数に変えておきます。

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

コメントをつけておきます

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

ついでにカスタムイベントの始めの方にも以下の様にコメントしておきましょう。

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

プレイしてみましょう。タイマーのテキスト表示が「02:02」のように何分何秒表示されているのが確認できます。

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

なお色々な表示を試すように変更したBP_Jumper_GameModeの最初のセットノードの入力値を0に戻しておきましょう。

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

再度プレイしてみましょう。問題なく「00:01」「00:12」と表示されるのが確認できます。

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

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

作成したノードを改めて解説!

一秒ごとにSecondsを+1していきます。Secondsが60になった時にMinutesに+1してSecondsは0に戻します。つまり一分後にはMinutes = 1,Secondsが0になっているという事になります。

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

次に秒数の整数データをSecondsTextというString型の変数に代入します。同じように分数データもMinutesTextというString型の変数に代入します。

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

最後にそれぞれ作成した秒数と分数のテキストを結合してSetTimerTextというカスタムイベントを実行しています。

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

WBP_Playerのカスタムイベントが実行されて、SetTextノードによって渡されたテキスト(例 02:12,00:03)などが渡されてUIのテキストに反映されます。

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

完成!プレイしてみよう!

https://youtu.be/U2qL7UUeL5c

何分何秒表記のタイマーが実装できました。なおタイマーを止める処理などは後のページで作成していきます。

🐱タイマーはゲームではかなり汎用的な機能になると思うので実装してみました。今回複雑に色々なノードを作っていたので大変だったかもしれません。一個一個どんなノードか理解して焦らずゆっくりノードへの理解を深めていきましょう。