9. クリア画面を作成しよう

ゲームをクリアしたら表示されるクリア画面を作成してみましょう。 画面には点数とリプレイボタンを配置します。

クリア画面をuGUIで作成しよう

これまでに作成した作業を復習を兼ねてやってみましょう。

  1. クリアパネルを配置するCanvasを作成する
  2. クリアパネル自身となるPanelを配置
  3. その中にゲームクリアを知らせるテキストを作成
  4. スコアを表示するテキストを作成
  5. リプレイ用のボタンを配置
  • テキストやボタンのラベルは TextMeshPro の使用を推奨します(明瞭な描画・リッチな機能)。初回はTMPのリソースインポートが必要です。

この章のコード表記について

  • コード中の省略記号として「// 省略: …」というコメントを用いています。
  • 既に前章までで説明済みの部分や、変更のない部分は省略しています。
  • 省略箇所の完全版は、これまでのコードと同様の実装です。

クリア画面に演出を加えよう

Canvasにもパーティクルを使用して演出を加える事が可能になっています。

こちらの演出は2Dの演出になるのでコインを取得したときはまた違ったパーティクルを作ってみましょう。 手元に使いたい素材が無い場合には下記を利用して下さい。

右クリックでダウンロード

まず、パーティクルに使用するマテリアルを作成します。

次にパーティクルシステムを配置して、Renderに上記マテリアルを設定しましょう。

パーティクルは普通に配置するとUIの後ろ側に描画されてしまいますが、Canvasの設定を変更する事で手前に描画する事ができるようになります。

Render ModeScreen Space - OverlayからScreen Space - Cameraに変更するとそのCanvasに配置している要素は画面の最前列ではなく、カメラから指定した距離に配置されるようになります。

CanvasOrder in Layerが0になっているのを確認して、今度はパーティクルのOrder in Layerを1に設定するとパーティクルがCanvasより手前に描画されるようになります。

上記の要素をレイアウトし、要素の入れ子の状態を変更してヒエラルキービューを整理しておきましょう。

クリアしたら画面が表示されるようにしよう

クリアしたらクリアのパネルを表示するようにGoalのスクリプトからClearCanvasのスクリプトにメッセージを送るようにプログラムを追記します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Goal : MonoBehaviour
{
	// 省略: 既存のフィールドや初期化処理

	// クリアパネルを追加する
	public GameObject clearCanvas;

	void OnTriggerEnter(Collider other) {
		// 省略: 既存の衝突時処理(スコア保存やパーティクル再生など)

		// クリアパネルにメッセージを送信する
		clearCanvas.SendMessage("OnEnter");
	}
}

これでクリアした瞬間にclearCanvasOnEnterのメッセージを送信するようになります。

次に、クリアパネル用のプログラムを作成し、クリアパネルが配置されているCanvasにアタッチしましょう。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro; // TextMeshProを使用

public class ClearCanvas : MonoBehaviour
{
    // パネルを登録する
    public GameObject panel;

    // パーティクルを登録する
    public ParticleSystem particle;

    // テキストエリアを登録する
    public TextMeshProUGUI clearText;

    // ゲーム開始時に実行される
    void Start()
    {
        // パネルを隠す
        panel.SetActive(false);
    }

    // クリアパネルを表示させる
    // GoalからSendMessageで呼ばれる
    void OnEnter()
    {
        // パネルを表示させる
        panel.SetActive(true);

        // パーティクルを再生する
        particle.Play();
    }
}

クリア画面が開いたら得点を表示するようにしよう

あとは、画面を開いた時にスコアを表示するようにプログラムを書き足しましょう。 まずはScoreクラスの中で、ゲーム中でスコアが加算されるタイミングでPlayerPrefsにスコアを保存するようにプログラムを追記します。

public class Score : MonoBehaviour
{
	// 省略: 変数宣言やUI参照など既存部分

	// メッセージを受け取る
	void OnScore (int num)
	{
		// 省略: 加算前の共通処理など

		// PlayerPrefsにスコアを保存する
		PlayerPrefs.SetInt("score", score);
		PlayerPrefs.Save();
	}
}

次に、クリア画面ではOnEnterのタイミングでPlayerPrefsからデータを取得し、スコアをテキストに反映するように記述しておきましょう。

public class ClearCanvas : MonoBehaviour {
	// 省略: 他のフィールドや初期化処理

	// テキストエリアを登録する
	public TextMeshProUGUI clearText;

	public void OnEnter () {
		// 省略: パネル表示やパーティクル再生など既存処理

		// スコアをPlayerPrefsから取得する
		int nowScore = PlayerPrefs.GetInt("score", 0);

		// スコアをテキストエリアに表示する
		clearText.text = nowScore.ToString();
	}
}