Unity本の作例改造-Chapter3-12:スコアを保存してハイスコアを表示する

こんにちは！Unityの入門書で通称”ヒヨコ本”として親しまれている”Unity5入門 最新開発環境による簡単3D&2Dゲーム制作 “の作例に色々とゲーム要素を追加してオリジナルゲームに仕上げる内容を連載をしています。

スコアを保存してハイスコアを表示する

ヒヨコ本”Unity5入門 最新開発環境による簡単3D&2Dゲーム制作 “の”Chapter7：ゲームを作ろう！（2）”に掲載されている内容を参考にスコアを保存してハイスコアを表示する設定をやってみたいと思います。

ゲームオーバー画面のレイアウト変更

ゲームオーバー画面の中央にスコアを表示するためにレイアウト次のように変更しました。

ゲームオーバーロゴ画像の”Rect Transform”は次の通り…

リスタートボタンの”Rect Transform”は次の通り…

ゲームオーバー画面用のスコアテキストのUIオブジェクトを作成

まずはハイスコア用のUIオブジェクトを作成します。
[Hierarchy]ウィンドウ > [Create]ボタン > UI > Text を選択。オブジェクト名を”Text HighScore”に変更します。
[Inspector]ウィンドウ > [Rect Transform]コンポーネントのプロパティは次のように設定しました。

次にプレイしたゲームのスコアを表示するためのUIオブジェクトを作成します。
これは先に作成したハイスコア用のUIオブジェクトを流用します。
[Hierarchy]ウィンドウ > 作成したUIオブジェクト”Text HiScore”を右クリック > Duplicate を選択して複製。名前を”Text ResultScore”に変更します。
[Inspector]ウィンドウ > [Rect Transform]コンポーネントのプロパティは次のように設定しました。

[Text]コンポーネントのプロパティはどちらも次のように設定。

文字が見やすいように縁取りを付けました。
[Inspector]ウィンドウ > [Add Component] > UI > Effects > Outline を選択。次の通りに設定しました。

オブジェクトの階層は次のように変更しました。

出来上がりはこんな感じになりました。

スクリプト”Score”を編集

[Project]ウィンドウ > スクリプト”Score”をダブルクリックでエディタで開きます。
コードの内容が”ゲームスコアをUIオブジェクトで作成して表示する“からほとんど書き換えになりました。下記の通りです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// UI関連クラスを使用できるようにする
using UnityEngine.UI;

public class Score : MonoBehaviour
{
    // UIオブジェクト"Text Score"のTextコンポーネントを格納する変数
    public Text textScore;
    // UIオブジェクト"Text ResultScore"Textコンポーネントを格納する変数
    public Text textResultScore;

    // ゲーム実行中の繰り返し処理
    void Update()
    {
        // "textScore"に格納されたTextコンポーネントの"text"フィールドにスコアを代入
        //（スクリプト"Manager"の変数"score"を文字列として参照）
        textScore.text = "SCORE: " + Manager.score.ToString();

        // ゲームオーバーであれば
        //（スクリプト"Manager"の変数"gameOver"を参照）
        if (Manager.gameOver)
        {
            // "textResultScore"に格納されたTextコンポーネントの"text"フィールドにスコアを代入
            //（スクリプト"Manager"の変数"score"を文字列として参照）
            textResultScore.text = "ResultScore: " + Manager.score.ToString();
        }
    }
}

スコアのUIオブジェクトを設定

[Hierarchy]ウィンドウ > Canvas を選択。[Inspector]ウィンドウ > Score (Script) > Text Score フィールドと Text Result Scoreフィールドにそれぞれオブジェクトを割り当てます。

動作確認

ひとまず動作確認。ゲームオーバーになったら中央のゲームスコアの数字が正しいか確認します。

スクリプト”Score”を編集する

スクリプト”Score”にハイスコア管理用の設定を追加します。
[Project]ウィンドウ > スクリプト”Score”をダブルクリックでエディタで開きます。下記のマーカー部分が変更部分です。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// UI関連クラスを使用できるようにする
using UnityEngine.UI;

public class Score : MonoBehaviour
{
    // UIオブジェクト"Text Score"のTextコンポーネントを格納する変数
    public Text textScore;
    // UIオブジェクト"Text ResultScore"Textコンポーネントを格納する変数
    public Text textResultScore;
    // UIオブジェクト"Text HightScore"Textコンポーネントを格納する変数
    public Text textHightScore;

    // ゲームの初期化
    void Start()
    {
        // ゲームデータキー"HighScore"が無ければ
        if (!PlayerPrefs.HasKey("HighScore"))
        {
            // ゲームデータキー"HighScore"に"0"を設定
            PlayerPrefs.SetInt("HighScore", 0);
        }
    }

    // ゲーム実行中の繰り返し処理
    void Update()
    {
        // "textScore"に格納されたTextコンポーネントの"text"フィールドにスコアを代入
        //（スクリプト"Manager"の変数"score"を文字列として参照）
        textScore.text = "SCORE: " + Manager.score.ToString();

        // ゲームオーバーであれば
        //（スクリプト"Manager"の変数"gameOver"の値を参照）
        if (Manager.gameOver)
        {
            // ゲームスコアがハイスコアよりも大きければ
            //（ゲームデータキー"HighScore"とスクリプト"Manager"の変数"score"を比較）
            if (Manager.score > PlayerPrefs.GetInt("HighScore"))
            {
                // ゲームスコアをハイスコアに設定
                //（ゲームデータキー"HighScore"にスクリプト"Manager"の変数"score"を設定）
                PlayerPrefs.SetInt("HighScore", Manager.score);
            }
            // "textResultScore"に格納されたTextコンポーネントの"text"フィールドにスコアを代入
            //（スクリプト"Manager"の変数"score"を文字列として参照）
            textResultScore.text = "ResultScore: " + Manager.score.ToString();
            // "textHightScore"に格納されたTextコンポーネントの"text"フィールドにハイスコアを代入
            //（ゲームデータキー"HighScore"を文字列として参照）
            textHightScore.text = "HighScore: " + PlayerPrefs.GetInt("HighScore").ToString();
        }
    }
}

ハイスコアのUIオブジェクトを設定

[Hierarchy]ウィンドウ > Canvas を選択。[Inspector]ウィンドウ > Score (Script) > Text HighScore フィールドにオブジェクトを割り当てます。

動作確認

ここまでの内容をWebGLでビルドしてみました。ハイスコアが記録できるようになりました！