【Unity実践】#21 ゲームオーバー画面の作成【ランゲーム】

morishita

今回の内容

今回はゲームオーバー画面を作成していきます。

※初めての方はこちらから
⇒ 【第１回記事】導入とサンプルの紹介

完成イメージと親の作成

完成イメージは以下です。

ゲームオーバーの背景のパネル、テキスト、リトライボタンだけのシンプルな配置ですので、
これまでのUIと比べてシンプルな作りとなっています。

Canvas の子要素として空のオブジェクトを作成し、名前を GameOverUI とします。
以下の配置設定とします。

次セクション以降で、GameOverUI の子要素として各UIオブジェクトを配置していきます。

背景のパネル

パネルを使って、背景を半透明のグレーとします。
GameOverUI の子要素として、Panel を配置します。

imageコンポーネントの Color を調整します。
ここでは色を「000000」、アルファを「60」としました。

背景はこれで完成です。

GameOverのメッセージ

GameOverUI の子要素として Text を配置し、名前は GameOverText とします。
配置と Text を以下の設定とします。

文字の色は「C53DFF」としました。

テキストに影を付けて立体感を出すために、Shadowコンポーネントを追加して以下の設定とします。

以下の表示となります。

（関連記事）
uGUI（Text）の使い方を詳しく解説

リトライボタン

GameOverUI の子要素として Button を配置し、名前を RetryButton とします。
配置と Button の色の設定を変更します。

色については、以下の設定となっています。
「Normal」「Highlighted」「Selected」⇒「C43DFF」
「Pressed」⇒「B300FF」

（関連記事）
uGUI（Button）の使い方を詳しく解説

ボタンにも影を付けるために Shadowコンポーネントを追加しておきます。

RetryButton の子要素の Text を編集します。

以下の設定とします。

ここまでで表示の実装は完了となります。

UIの表示切替

ゲームオーバー時にUIが表示されるようにします。
GameManagerScript の Updateメソッドを下記の通り編集します。

～ 省略 ～

public class GameManagerScript : MonoBehaviour
{
　　～ 省略 ～

    [SerializeField]
    GameObject clearUI, gameOverUI;

　　～ 省略 ～

    void Update()
    {
        if (status == GAME_STATUS.Clear)
        {
            // 現在のステージで獲得したコインの枚数
            int getCoinNum = tempCoinNum - PlayerPrefs.GetInt("coinNum", 0);

            resultCoinText.text = getCoinNum.ToString().PadLeft(3) + "/" + stageCoinNum;
            clearUI.SetActive(true);

            // コインを保存
            PlayerPrefs.SetInt("coinNum", tempCoinNum);

            enabled = false;
        }
        else if (status == GAME_STATUS.GameOver)
        {
            Invoke("ShowGameOverUI", 3f);
            enabled = false;
            return;
        }

        coinNumText.text = tempCoinNum.ToString();
    }

　　～ 省略 ～

    private void ShowGameOverUI()
    {
        gameOverUI.SetActive(true);
    }
}

8行目は元々ある行に「gameOverUI」の定義だけ追加しています。
ゲームオーバーになってから UI を表示するまでに少し遅延を持たせるために、Invoke を使用しています。

スクリプトを保存したら、Canvas > GameOverUI を非表示とします。

GameManager > GameManagerScript の GameOverUI に、Canvas > GameOverUI を設定します。

敵に触れてゲームオーバーになった後で UI が表示されれば成功です。

リトライボタンの処理

最後に、リトライボタンをクリックしたときに、現在のシーンを再読み込みするようにします。
まずは GameMangerScript に、以下のメソッドを追加します。

～ 省略 ～

public class GameManagerScript : MonoBehaviour
{
　　～ 省略 ～

    public void LoadCurrentScene()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().name);
    }

    public void LoadNextScene()
    {
        SceneManager.LoadScene("Stage1");
    }

　　～ 省略 ～
}

RetryButton の OnClick に、LoadCurrentSceneメソッドを設定します。