[UE4]閉じても消えないスコアランキングを作ろう

こんにちは、ゲームデザイナーの西尾です。

今回はリザルト画面で使えそうな
スコアランキングを作って行きます。

セーブデータを作ってスコアを保存するため
ゲームを終了してもスコアは初期化されません。

【制作手順】

今回はスコアランキングと、セーブデータの読み込みや作成に関するの記事となりますが
説明の為「ポイントやスコアがあるプロジェクト」の作成も行います。

準備その１（スコアカウント）
スコアを作り、カウントします。

準備その２（リザルト画面）
ゲーム終了時のリザルト画面を作ります。

①セーブクラスとスコアデータの作成
セーブクラスを作り、保存用の変数を配列で作成します。

②ロード・セーブの処理を作成
スコアのセーブ、ロード、セーブデータが無ければ作る処理を作ります。

③スコアランキングの作成
セーブデータからスコアを表示する処理を作ります。

■準備その１（スコアカウント）

準備その１、その２で作成するのは、「コインを取る」や「敵を倒した数」などのスコアを想定した機能ですので
既にプロジェクトがある方は、[①セーブクラスとスコアデータの作成]までスキップして大丈夫です。

まずはスコアを作り、カウントさせましょう。
プレイヤーBPを開き、Int型の変数を作ります。（変数名：Score）

続いてマウス左クリックのインプットを出し、画像の様に繋ぎます。
左クリックをするとScoreに＋１されていくノードの完成です。

■準備その２（リザルト画面）

続いてリザルト画面を作ります。
UIというフォルダを作り、ウィジェットを新規作成します。（ウィジェット名：Result）

続いてResultを開き、Textを二つ配置します。
その後VerticalBoxを配置し、その中に配置した２つのテキストを入れます。

テキストは下記の様に設定します。

上のText
・テキスト：今回のスコア
・サイズ：40

下のText
・テキスト：（スコア）
・サイズ：100

下のTextでスコアを表示させます。
Content＞Textの右側にあるバインド作成をクリックします。

続いて画像の様にBPを組みます。
ThirdPersonCharacterをCastし、先ほど作ったInt型の変数（Score）を呼び出し
ReturnNodeに繋いで表示させます。

ThirdPersonCharacterで先ほど作ったUI（Result）を表示させましょう。

BeginPlayとCreateWidgetを配置し、繋げます。（ClassはResultを選択してください。）
CreateWidgetのReturnValueを伸ばし「変数を作成」を選択して変数を作成します。（変数名：Result）
マウス右ボタンのインプットを配置し、「Add to Viewport」と繋ぎます。Targetには先ほど作った変数「Result」を繋げてください。

プレイして見て見ましょう。

動画の様に左上にスコアがカウントされていき
最後にリザルトのUIが表示されていれば成功です。

これをベースに「スコアランキング」を作って行きましょう。

■①セーブクラスの作成

Saveというフォルダを作り、セーブクラスを新規作成します（クラス名：MySaveGame）

続いてMySaveGameを開き、Int型の変数を配列で作ります。（ScoreBord）
今回はリザルト画面で３つのスコアを表示させたいので
デフォルト値を３つ作り、昇順になる様値を入れていきます。

■②スコアデータのロードとセーブ処理

Result内で、セーブデータの作成、ロード、セーブの処理を作ります。

まずResultを開き、マクロを３つ新規作成します（マクロ名：LoadGame・SaveGame・ScoreUpdate）

続いてLoadGameのマクロを開き、画像の様にBPを組みます。
Load Game from SlotのSlotNameには「ranking」と記載します。
またCastToMySaveDataのAsMySaveDataから、変数を新しく作成します(変数名：SaveData)

続いて、先ほど作成したマクロ「ScoreUpdate」を開き、以下の画像の様にＢＰを組みます。

赤枠の「RemoveIndex」は、
指定されたIndexの値を削除するノードで、
配列にデータを多く持たせないために繋いでいます。

今回はIndex「３」の値、つまり配列の４番目を削除していますが、
表示させたいスコアを増やしたい場合は
このIndexの値も増やしてください。

次に「SaveGame」を開き、画像の様にBPを組みます。
「Save Game from Slot」の「SlotName」には「ranking」と記載します。

「SaveGame」のマクロにはこのノードしか入れないので
実はマクロにする意味はないのですが
整理の為に作っています。

イベントグラフへ戻り、カスタムイベントを作成します（イベント名：Start）
次に先ほど作った3つのマクロを繋ぎ、以下の様にBPを組みます。

最後にThirdPersonCharacterを開き
カスタムイベント「Start」を呼び出します。

■③スコアランキング作成

最後にリザルト画面にスコアランキングを作成しましょう。
Resultを開き、Textを追加します。
バインディングを作成しFanction名を「Score_0」と名前を変え、SaveData内の「ScoreBoard」の値を表示させます。

「Score_0」はSaveData内の０番目の値（一番得点の高い値）を表示させているので
「1stScore」のテキストにバインドしています。
同じ手順で赤枠のところを１・２に変更した「Score_1」と「Score_2」を作り
それぞれのテキストにバインドします。

お疲れ様でした。これで完成となります。

あとがき

サクッとゲームを制作すると
スコアを競うという仕様になる事が多いかと思いますが
スコアの保存まで手が回りにくい印象があったので、今回ご紹介させていただきました。

過去のスコアをランキングとして表示できれば
ループ式のゲームとして大きな意味合いが生まれます。
「やった！3000点に到達したぞ！」や「お前の記録を塗り替えてやった！」など
出来たらとっても楽しいですよね。

是非実装して、楽しい作品にして頂ければと思います。