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

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

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

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

  1. クリアパネルを配置するCanvasを作成する
  2. クリアパネル自身となるPanelを配置
  3. その中にゲームクリアを知らせるテキストを作成
  4. スコアを表示するテキストを作成
  5. リプレイ用のボタンを配置

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

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;

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

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

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

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

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

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

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

public class Score : MonoBehaviour
{
	~

	//メッセージを受け取る
	public void OnScore (int num)
	{
		~

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

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

Legacy(Text)版

public class ClearCanvas : MonoBehaviour {
	~
	//テキストエリアを登録する
	public Text clearText;

	public void OnEnter () {
		~

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

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

TextMeshPro版

public class ClearCanvas : MonoBehaviour {
	~
	//テキストエリアを登録する
	public TMP_Text clearText;

	public void OnEnter () {
		~

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

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