Zenn
💯

テンプレ通りのゲーム制作　FPS⑤スコア加算

2024/11/18に公開
Unreal Engine
初心者向け
ハンズオン
blueprint
tech

スコアの表示

今回はスコア表示をやっていきます。現在破壊可能なアクタはボックスしかありませんが、これを破壊した際にスコア加算し保存して表示します。スコア表示は前回作ったウィジェットブループリントを流用します。前回の記事は以下の通りです。

https://zenn.dev/yukumoto/articles/be111c171339ee

前回のUIを作るためにウィジェットブループリント作成したと思います。そのレイアウトに追加していきます。
コンテンツ/UI/UI_Bulletをダブルクリックして開きます。
右上の部分をスコア表示のエリアにしたいと思います。ウィジェットブループリントエディタの左側にあるパレットの中からパネル/サイズボックスをキャンバス内にドラッグアンドドロップします。大きさは後から調整できるで大体で構いません。

さらに、サイズボックスの中に二つのパネル/HorizontalBox、そのなかに一般/テキストボックスをふたつ入れます。階層構造は下の画像を参考にしてください。この操作はパレットから下の階層パネルにドラッグしたほうがやりやすいはずです。

（注）画像のものはすでにテキストボックスの内容を修正しています
ふたつテキストを追加したのでそれぞれ設定をしていきます。

テキストをクリックして表示を変更します。詳細パネルで文字の調整を行います。以下のように変更してください。

  • Size:自動

  • Horizontal Alignment:水平方向に塗りつぶし

  • Vertical Alignment:垂直方向に塗りつぶし

  • Text:「SCORE:」

  • Color and Opacity:（カラーピッカーで黄色）
    ※残弾と同じ色にしたい場合はカラーピッカー内のスポイトボタンを押して「残弾」の文字をクリックすると同じ黄色になります。

  • Font Family:Roboto（標準のまま変更なし）

  • Size:80

  • Size:フィル

  • Horizontal Alignment:水平方向右揃え

  • Vertical Alignment:垂直方向に塗りつぶし

  • Text:「99999」

  • Color and Opacity:（カラーピッカーで白色）

  • Font Family:Roboto（標準のまま変更なし）

  • Size:80

プログラムを再生してUIが追加されているのを確認してください。表示されましたね。ただこのままでは点数が99999のままなので、ブロックを壊したら10点入るようにします。

GameModeに点数を管理する変数を作る

点数を管理するために変数を作ります。プレイヤーに変数を作っても良いですが、点数や残機、残り時間などのゲームのルールに関する情報はプレイヤーのクラスに作るのではなく、GameModeクラスというゲームのルールや各種情報を管理するクラスに作ったほうが情報が集約されて管理がしやすくなります。上部メニューの編集/プロジェクト設定を選びます。開いたウィンドウの中の左側のメニュ一覧の中からマップ＆ウィンドウを選びます。


デフォルトのゲームモードという項目があります。ここでこのプロジェクトのデフォルトのゲームモードを決めるわけです。ゲームモードは一つのプロジェクトに複数持つことができ、適宜切り替えることができます。新しく作って設定する場合はプラスボタンを押して作ることができますが、今回はフォルダに虫メガネボタンを押しましょう。コンテンツブラウザに戻るとテンプレートプロジェクトで用意されているゲームモードが選択されています。BP_FirstPersonGameModeが選ばれているのでこれをダブルクリックします。

ルーペをクリックすると保存されている場所がわかる

BP_FirstPersonGameModeを開くとブループリントエディタが開いていない時がありますが、その場合は画像のように「ブループリントエディタを開く」の部分をクリックしてエディタを開いてください。

エディタが開いたら左側の変数カテゴリのプラスボタンを押して変数を追加します。名前は「SCORE」にしてInteger型にします。他のクラスからアクセスされるため右側の目玉マークを押してインスタンス編集可能状態にします。こうしておくことで他のクラスブループリントからこの変数をキャストによってアクセス可能になります。

ターゲットに点数をつける

次に破壊される側に点数を付けます。

コンテンツ/Blueprints/BP_Targetにアクセスして開きます。

変数カテゴリのプラスボタンを押して変数を新しく作ります。名前を「Point」、変数の型をInteger型にします。これも目玉ボタンを押してインスタンス編集可能にしておきます。

変数が作れたら一度コンパイルした後に右側のPoint変数のデフォルト値を「10」にしておきます。

得点加算の関数を作る

ターゲットが破壊される前に点数を加算する必要があります。加算するための「関数」を作ってみましょう。関数とは平たく言うと「処理の集まり」です。良く実行する一連の処理パターンがある場合は関数にまとめると非常に便利になります。左側の関数カテゴリのプラスボタンを押して関数を新たに作ります。名前は「AddPoint」にします。作れたらダブルクリックして開きます。

得点の集計はGameModeで行われていますので、BP_FirstPersonGameModeにキャストする必要があります。開始点のピンからワイヤを伸ばしてBP_FirstPersonGameModeにキャストします。ObjectピンにはGet Game Modeノードを作って接続します。

キャストしたらノードを画像のように組みます。具体的には

  1. BP_FirstpersonGameModeの青ピンからワイヤを伸ばしてSCORE変数のGetノードを作る
  2. このクラスのPoint変数をドラッグしてきてGetノードを作る
  3. 二つのGetノードを足すAddノードを作ってピンをつなぐ
  4. BP_FirstpersonGameModeの青ピンからワイヤを伸ばしてSCORE変数のSetノードを作る
  5. Addノードの出力をSCORE変数の緑の入力ピンにつなぐ

以上の手順でやりましょう

関数が作れたらイベントグラフに戻り、作った関数をEventDestroyedイベントの最初に差し込みます。一度ワイヤをAltを押しながらクリックで切断してつなぎ直します。右クリックして「AddPoint」ノードを呼び出し、入出力ピンを画像のようにつなぎます。

これでキューブが破壊される前にポイントが加算されるようになりました。

ウィジェットブループリントに得点を伝える

では今度はBP_FirstpersonGameModeのSCORE変数の内容をウィジェットブループリントに伝えましょう。
コンテンツ/UI/UI_Bulletクラスをダブルクリックして開きます。
スコア表示の99999の部分をクリックしておき、詳細パネルでコンテンツカテゴリのTEXTの右のバインドボタンを押し、「バインディングを作成」を選びます。

バインディングを作ったら画像のように

  1. BP_FirstpersonGameModeにキャストし、右クリックして「純粋キャストに変更」する
  2. Objectピンからワイヤを伸ばしてGet Game Modeノードをつなぐ
  3. BP_FirstpersonGameModeのキャストノードの青ピンからSCORE変数のGetノードを作る
  4. SCORE変数のGetノードの出力ピンからReturn Valueに直接つなぐと間に変換がはいる

以上でバインディングは完了です。

ゲームをプレイしてみましょう。

これでキューブが破壊されると得点が加算されたはずです！！
大分ゲームっぽくなってきましたね。次は破壊されたキューブを補充していきます。
次回をお楽しみに！

Discussion