AG05.コインを実装する - Vantan Unreal Engine 5

AG05.コインを実装する

😺では今回はコインを実装していきます。今までのページでもコインは部分的に実装してきましたが、このページではコイン実装に必要な全ての機能を実装していきます。アイテムを拾う機能というのは多くのゲームで実装するものなのでその作り方の流れを掴んでもらえればと思います。

今回実装する機能

コインを拾ってコイン枚数をUIでテキスト表示する機能を実装していきます。

https://youtu.be/kjrO3cTeKVQ

なおUIの見た目は段階的に作成していくため不自然になっていますが、徐々に後のページで作成してきます。

🐱ではコインを作る→プレイヤーが拾う→UIのテキスト表示するという流れで作成していきます。まずはブループリントクラスとしてコインを作成していきます。

①ブループリントクラスのコインを作成する

ブループリントクラス > Actor > 名前を「BP_Coin」にします。

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

StaticMesh コンポーネントを追加して、SM_Powerup_A を選択します。

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

BP_Coinサイズが少し大きかったのでStaticMeshコンポーネントを選択した状態で拡大縮小を0.8にしておきます。

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

そのままテスト用として最初のステージ上に何個か配置しておきます。

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

🐱ではここからコインが回転する機能とプレイヤーが拾える機能を実装していきます。

②コインを回転させる

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

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

TickイベントからAddActorLocalRotationを追加して、DeltaLocationのZを1にします。

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

これで毎フレームZ軸に1追加されて回転します。

🐱また、それぞれのコインが一緒の角度で回転し始めるのは不自然なので最初のアクタの角度をランダムで回転させておきます。

BgeinPlayからAddActorLocalRotationを作成します。DelataRotationを右クリックして構造体ピンを分割(下で解説)を選択します。RandomFloatinRangeで0~360の値を入力してDeltaRotationZに接続します。

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

構造体ピンを分割とは？復習しておこう!

Vectorと呼ばれる三つの小数から成るデータなどを分割する際には右クリック > 構造体ピンを分割をクリックする事で x,y,ｚそれぞれ分ける事ができます。分割するとそれぞれの値毎に入力できます。

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

分割されたピンを再度まとめる事も右クリックからできます。

RandomFloatinRangeノードとは？

RandomFloatinRangeはMinとMaxの間の値をランダムで出力するノードです。例えば以下のように0.0~3.5にした場合はその間の値がテキスト表示されます。

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

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

今回組んだノードでは0.0から360.0に設定したのでその間の値が出力される形になります。

プレイしてみるとコインの角度がスタート時にランダムになって、回転するようになりました。

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

🐱ではコインを拾ってカウントする機能を追加していきます。

③コインを拾ってカウントする

ではここからは拾ったコイン枚数を表示するための機能を作っていきます。

BP_Playerを開きます。

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

BP_Playerのイベントグラフを開きます。既存のノードはそのまま放置しておきます。ここにノードを作っていきます。

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

まず MyCoin という名前で型は Integer(整数)の変数を作成しておきます。

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

次に CapsuleComponent を右クリック > イベントを追加 > OnComponentBeginOverlap を追加を選択します。

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

OnComponentBeginOverlapというノードが作成されました。

OnComponentBeginOverlapとは？

このノードはCapsuleComponentというコリジョンに触れたアクタがOverlap(衝突しないが検知する)に設定してある場合に起動するノードです。これでプレイヤーがコインとの接触を検知します。

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

このノードは右クリックから検索しても、詳細ウィンドウからでも追加する事もできます。どこからでも追加しても構いません。

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

Cast To BP_Coinを繋いで DestroyActorを繋ぎます。

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

続けて「++」と検索してIncrementIntノードを繋ぎます。MyCoinの変数をGetで追加してIncrementIntノードに繋いで最後にPrintStringで表示させます。

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

ノード解説

CastToノードは触れたアクタを検知して、触れたアクタがCoinだった場合処理を継続します。Destroyでコインを削除してIncrementIntノードでMyCoinを+1してセットします。なのでMyCoinが0の場合にコインを拾うとMyCoinの値は1になるという事です。

ではコインのコリジョンを追加していきます。球体のコリジョンを追加しましょう。

今度はBP_Coinを開いてSphereColiisionコンポーネントを追加します。

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

コリジョンのトランスフォームを以下にします。

位置 (X=-0.000000,Y=-0.000000,Z=119.004029)

拡大縮小 (X=2.954231,Y=2.954231,Z=2.954231)

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

🐱ではBP_Playerに作ったノードはOnComponentBeginOverlapなので、コイン側のコリジョンはOverlap(衝突しないが検知する)という設定でなければ起動しません。なのでコリジョンがOverlapである事を確認していきましょう。

Sphere(Collision)コンポーネントを選択した状態で、コリジョンのコリジョンプリセットがOverlapAllDynamicになっている事を確認します。さらにGenerateOverlapEventsもチェックが入っている事を確認します。(デフォルトのままで良いです)

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

😸OnComponentBeginOverlapの発動条件として、衝突するアクタのどちらかがOverlap(衝突しないが検知する)であり、GenerateOverlapEventsにチェックが入っている必要があります。これらの設定項目が正しくないとBP_Playerで作成したOnComponentBeginOverlapノードは起動しないので注意です。

コンパイルします。

プレイして確認してみましょう。問題無くコインが拾えました。

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

ちゃんと拾った時のMyCoinのカウントも増えています。

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

😸一旦コインを取得する機能は完成しました。ここから効果音とUIを実装していきます。

④コインを拾った時の効果音を実装する

次にコインを拾った時の効果音を実装していきます。

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

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

A_GetCoin_Cueを開いてWavePlayerノードを追加します。

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

WavePlayerノードは音を選択するノードです。

🐱では効果音を設定していくのですが、今回はエンジンフォルダにある音のアセットを使用します。エンジンフォルダのアセットを使用するには先に行う手順があります。

コンテンツブラウザ右上の設定からエンジンのコンテンツを表示をクリックします。するとエンジンフォルダが表示されます。

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

エンジンフォルダとは？

エンジンフォルダにはどのプロジェクトでも使用できるアセットが内包されています。例えば形状 > Cubeなどのアクタの元アセットはエンジンフォルダの中に入っています。アクタの元アセットの位置はCtrl+Bで確認できます。

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

なのでエンジンフォルダにはテスト用のアセットが用意されているのですが、デフォルトだと非表示になっています。基本的には表示させる必要はありませんが今回はエンジンフォルダの中にある音のアセットを使用するために表示させる必要がありました。

A_GetCoin_Cueを戻ってObject_Snaps_To_Gridというサウンドウェーブを選択します。このサウンドウェーブはエンジンフォルダを表示させておかないと選択できません。

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

アウトプットノードを選択して PitchMultiplier(音の高さ)を 2.0 にします。

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

キューを再生で音を確かめる事ができます。

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

ではコインを拾った時にA_GetCoin_Cueのサウンドキューを再生させます。

BP_Playerのイベントグラフを開いてPrintStringの最後からSpawnSoundatLocationノードを繋げます。SoundにはA_GetCoin_Cueをセットします。

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

SpawnSoundatlocationとは？

SpawnSoundatlocationは指定の場所で音を再生するノードです。今回は音に減衰(距離による音量変化)を設定していないためどこで音を鳴らそうが一定の音量になるため鳴らす場所は指定する必要はありません。

プレイしてみて確認しましょう。拾った時に音がなるようになりました。

https://youtu.be/9De9-rY9MbI

😸音の減衰(距離による音量変化)はあっても良いのですが毎回拾った時の距離は一緒なので今回は必要ないと判断しました。後のアクションゲーム制作のページで減衰付きの音も作っていきます。

⑤コインをカウントするUIを作る

では、ここからはコインを拾った時にカウントを追加するUIを作成していきます。最終的にこんな感じのUIにします↓

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

最初にまとめてUIの見た目の部分だけ作成しても良いのですが、明確に作成する手順を分けるためこのページではまずはコインの部分だけ作っていきます。

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

ではまずUIの見た目の部分から作っていきます。

Jumprフォルダの中にUIフォルダを作成します。

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

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

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

WBPはウィジェットブループリント(WidgetBluePrint)の事を示しています。

開いてとりあえずCanvasPanelを追加します。

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

CanvasPanelとは？

CanvasPanelは子のウィジェットでアンカーをセットするために必要なものです。

つまり今後追加するウィジェット(UI)を意図した位置に正しくセットするためにCanvasPanelを使用します。

🐱基本的にCanvasPanelはどのUI作成時にも必要なので最初に設置するウィジェットだと覚えておきましょう。また色々とUIを作成していくので種類別に分けるためにCanvasPanelをさらに追加していきます。

CanvasPanelの下にCanvasPanelを追加します。

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

今追加したCanvaspanelの名前をUpperRight_CanvasPanelにします。F2キーで名前が変更できます。

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

UpperRight_Canvaspanelのアンカーを右上に設置します。

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

UpperRight_Canvaspanelのスロット > 位置Xを-373、位置Yは0にしておきます。サイズxを373に、サイズを147にします。

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

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

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

Imageウィジェットの位置Xを75,位置Yを108にします。サイズXを257,サイズYを10にしておきます。このImageはただのデザインとして使用します。

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

さらにImageをUpperRight_Canvaspanelの下に追加します。コインのアイコンを表示させるImageウィジェットになります。サイズや位置等は一旦適当で良いです。

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

ではコインのアイコンを用意するのですが、今回はicooon monoさんというサイトのアイコンを活用させてもらいます。コインのベクター素材のページにアクセスします。

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

サイトを開いたらアイコンの色を変更できるので白色に変更しておきましょう。PNGでダウンロードします。

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

ダウンロードしたデータをエクスプローラーからドラッグでUIフォルダに追加します。名前はT_Coinにしておきます。

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

TはTextureのTです。基本的にゲーム開発で画像の事はTexture(テクスチャ)と呼びます。

WBP_Playerを開いてImageの画像をT_Coinに変更します。

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

コインの位置Xを73,Yを42にします。サイズXとYを52にします

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

TextウィジェットをUpperRight_CanvasPanelの下に追加します。一旦位置は適当に配置します。

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

テキストの名前をCoinCount_Textにします。

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

😸このテキストウィジェットは後から変数化してブループリントで使用するので名前を変更しました。必ず名前の変更は行っておきましょう。本来であれば名前は全て変更するのが最も良いのですが、今回は最低限必要なウィジェットだけ名前は変更していきます。

コンテンツのTextに00と入力します。

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

テキストのCoinCount_TextをFont > Sizeを25にします。

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

同じくテキストの位置Xを132,位置Yを60,サイズXを100,Yを30にします。

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

今の所こんな感のウィジェットブループリントになっています↓

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

🐱なお、上の画像でいう「Image_78」などの数字の部分はランダムなので自身のウィジェット名と違っていても構いません。またコンパイルは必ず必要な部分だけ「コンパイルします」と記載します。もちろん逐一コンパイルしていってもらっても構いません。

一旦ここまでできたら、見た目をゲームで表示して確認してみましょう。BP_Playerのイベントグラフを開きます。

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

BeginPlayを追加で作成して「create widget」と検索して「ウィジェット作成」ノードを作成します。ClassにはWBP_Playerを選択します。

Versionが5.2以上の場合は、Add Mapping Contextの次につなぎます。

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

ウィジェット作成ノードのReturnValueを右クリック > 変数を昇格を選択します。作成された変数の名前をWBP_Playerにします。

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

変数へ昇格とは？

「変数へ昇格」は変数を作成＆変数をセットしてくれる便利な機能です。

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

変数は数値や文字のデータだけではなく、アクタだったりウィジェットブループリントだったりのデータを格納する事ができます。なのでウィジェット作成ノードで作成したWBP_Playerを変数として取得しておいたという事になります。

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

後からそのウィジェットブループリントの変数やカスタムイベントを呼び出す予定がある場合にこのように変数に取得しておくと何かと便利です。

最後にAddtoViewportでゲーム画面上に出力させます。

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

プレイしてみて確認してみましょう。まだタイマーの部分など揃っていないので不格好ですが一旦これでコインのUIの見た目は完成です。

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

🐱ではここから拾ったコインの枚数をこのUIに反映させていきます。

⑥拾った時にテキストを変更する

ではここからはコインを拾った時にテキストを変更していきましょう。

WBP_Playerを開いてCoinCount_Textを選択した状態でIsVariableにチェックを入れます。

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

グラフを開いて変数欄にCoinCount_Textがある事を確認します。

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

IsVariableとは？

IsVariableにチェックを入れるとCoinCount_Textが変数化されます。これでブループリントからCoinCount_Textにアクセスしてテキスト内容等変更する事ができます。

そのままグラフにカスタムイベントを作成して、名前をSetCoinTextにします。

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

カスタムイベントを選択した状態で詳細からインプットのプラスボタンからCoinCountという名前でInteger型で作成します。

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

SetText(Text)ノードを作成します。状況に合わせた表示のチェックを外してSetText(Text)と検索すると出てきます。検索はこんな感じ↓

出てこない場合は、先にCoinCountTextをGetして、CoinCountTextからSetTextを引っ張って作成しましょう。

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

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

SetText(Text)ノードとは？

SetText(Text)ノードはUIのテキスト内容を変更するためのノードです。

変数からCoinCount_TextをGetで追加してターゲットに繋ぎます。

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

CoinCountからInTextに繋ぎます。自動でToTextノードという変換ノードが作成されてInt変数からテキストデータに変換されます。

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

🐱これで外部からSetCoinTextのカスタムイベントを呼ぶとCoinCountの数値分、変数を渡されてテキスト表示されます。

コンパイルしておきます。

BP_Playerを開きます。

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

先にもう必要ないPrintStringを削除しておきます。

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

GetでWBP_Playerを追加します。

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

WBP_Player変数から作成したカスタムイベントSetCoinTextノードを追加して以下のように繋げます。

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

ピン留めのRerouteノードはワイヤー上でダブルクリックすると作成されます。

ノード解説

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

これでプレイヤーがコインを拾った時に、+1した合計のコイン枚数をUIに表示させています。BP_PlayerからWBP_Playerで作ったカスタムイベント「SetCoinText」を起動させて同時にコイン枚数のデータを渡し、テキストにセットしています。

これでプレイしてみましょう。コインを拾うとUIのテキストが変更されます。

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

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

🐱しかし、表示として01,02,03というような感じで表示したいので少しブループリントに変更を加えます。

WBP_Playerのグラフを開きます。

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

一旦SetCoinTextから接続したノードをAltキー+クリックで切り離して横においておきます。

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

SetCoinTextのCoinCountを右クリック > 変数へ昇格させておきます。変数の名前はそのままで良いです。

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

🐱このCoinCount変数はノードを見やすくするために利用します。

「>=」と検索してGreaterEqual(以上)ノードを作成、10と入力してブランチノードにつなぎます。

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

その後True側からSetText(Text)ノードを繋ぎます。

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

ノード解説

これで「CoinCount >= 10」という式が成立する場合にtrue側の処理が行われれます。つまりCoinCountが10以上だった(true)場合、コイン枚数をそののままテキストを表示させます。例:10,11,12,13

False側からもSetText(Text)ノードを繋ぎます。AppendノードでAに「0」と入力してBにCoinCountを繋げます(自動で変換ノードが作成されます)。AppendからInTextに繋ぎます。

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

これでCoinCountが10以上ではない(false)場合、0を追加してままテキストを表示させます。例:01,02,03,04

Reouteノードと整列方法について確認しておこう!

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

Rerouteノード(ワイヤーのピン留め)はダブルクリックまたは、Rerouteと検索すると作成できます。また覚えておくべきおすすめの整列ショートカットは一個だけで、ノードを複数選択した状態でQキーで直線上にする事がです。上のgifでもQキーで直線上にしています。

これでプレイしてみましょう。コインは10枚以上配置して試してみましょう。

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

🐱07,08,09,10,11のように一桁の場合は0を追加して表示する事ができました。

ではテスト用に配置したコインは削除しておきます。

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

BP_FloatingStageの上に何個かコインを配置します。

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

これで完成です!

コインの完成!

コインを拾って、コイン枚数を表示させる機能が実装できました。

https://youtu.be/kjrO3cTeKVQ