簡単なトランジションを作る

それでは、シーンの切り替えのときにフェードするトランジション（＝シーン切り替え効果）を作ってみましょう。

フェード用カンバスとパネルの作成

今回はuGUIのパネルの透明度を徐々に変えることでフェード効果を実現します。まずはシーンにCanvasを作り、「FadeCanvas」に名前変更してください。そうしたらその子として「Panel」オブジェクトを作ってください（「Create」→「UI」→「Panel」）。

すると画面いっぱいにパネルが表示されます。デフォルトだとこのパネルに画像が設定されていると思いますが、今回は使わないので削除してしまいましょう。さらに、パネルの「Image」コンポーネントの「Color」を開き、R,G,B,Aすべてを「0」にしてください。

ここまでできたらFadeCanvasをプレハブ化し、シーンから削除しましょう。これで下準備ができました。

フェード用カンバスのプログラム

新しいC#スクリプトを作り、名前を「FadeCanvas」に変更してください。これを先ほどのプレハブにアタッチしたら、スクリプトを開いて下のソースコードを記入してください。

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

public class FadeCanvas : MonoBehaviour {

	[System.NonSerialized]
	public bool fadeIn = false;
	[System.NonSerialized]
	public bool fadeOut = false;

	[SerializeField]
	Image panelImage;
	[SerializeField]
	float fadeSpeed = 0.02f;

	float red, green, blue, alpha;

	//最初の処理
	void Start ()
	{
		DontDestroyOnLoad(gameObject);

		//元の色を取得
		red = panelImage.color.r;
		green = panelImage.color.g;
		blue = panelImage.color.b;
		alpha = panelImage.color.a;
	}
	
	//毎フレームの処理
	void Update ()
	{
		if (fadeIn)
		{
			FadeIn();
		}
		else if (fadeOut)
		{
			FadeOut();
		}
	}

	//フェードイン
	void FadeIn()
	{
		alpha += fadeSpeed;

		SetAlpha();

		if(alpha >= 1)
		{
			fadeIn = false;
		}
	}

	//フェードアウト
	void FadeOut()
	{
		alpha -= fadeSpeed;

		SetAlpha();

		if(alpha <= 0)
		{
			fadeOut = false;

			Destroy(gameObject);
		}
	}

	//透明度を変更
	void SetAlpha()
	{
		panelImage.color = new Color(red, green, blue, alpha);
	}
}

プログラムの解説

最初の処理

FadeCanvasがシーンをまたいでも削除されないようにします。また、パネルの色と不透明度を取得しておきます。

毎フレームの処理

フェードインフラグがONならフェードインメソッドを実行します。それ以外でフェードアウトフラグがONならフェードアウトメソッドを実行します。

フェードイン・フェードアウト

不透明度を足したり引いたりして、色変更を行います。

GameManagerのプログラムの変更

あとはGameManage側でFadeCanvasを生成し、フェードの命令を出すだけです。GameManager.csを下のように書き換えてください。

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

public class GameManager : MonoBehaviour
{

	[System.NonSerialized]
	public int currentStageNum = 0; //現在のステージ番号（0始まり）

	[SerializeField]
	string[] stageName; //ステージ名
	[SerializeField]
	GameObject fadeCanvasPrefab;
	[SerializeField]
	float fadeWaitTime = 1.0f; //フェード時の待ち時間

	GameObject fadeCanvasClone;
	FadeCanvas fadeCanvas;

	//最初の処理
	void Start ()
	{
		//シーンを切り替えてもこのゲームオブジェクトを削除しないようにする
		DontDestroyOnLoad(gameObject);
	}
	
	//毎フレームの処理
	void Update ()
	{
		
	}

	//次のステージに進む処理
	public void NextStage()
	{
		currentStageNum += 1;

		//コルーチンを実行
		StartCoroutine(WaitForLoadScene());
	}

	//シーンの読み込みと待機を行うコルーチン
	IEnumerator WaitForLoadScene()
	{
		//フェードオブジェクトを生成
		fadeCanvasClone = Instantiate(fadeCanvasPrefab);

		//コンポーネントを取得
		fadeCanvas = fadeCanvasClone.GetComponent<FadeCanvas>();

		//フェードインさせる
		fadeCanvas.fadeIn = true;

		yield return new WaitForSeconds(fadeWaitTime);

		//シーンを非同期で読込し、読み込まれるまで待機する
		yield return SceneManager.LoadSceneAsync(stageName[currentStageNum]);

		//フェードアウトさせる
		fadeCanvas.fadeOut = true;
	}

	//ゲームオーバー処理
	public void GameOver()
	{

	}

}

テストプレイしてフェードイン・フェードアウトが正常に実行されれば成功です！

次のページ→ゲームオーバー処理を作る