【Unity】シーン切り替え処理の作り方！トランジションを実装して滑らかにシーンを切り替えよう

今回はUnity初心者の方向けの話題で、

シーンの切り替え処理の作り方

を丁寧に解説するという内容になっています。

Unityにはシーンの概念があるため、シーン切り替えはゲームを作るうえで必須の処理となるのですが、正直なところ初心者の方からしたら

スクリプトからシーンを切り替える方法がなんか分かりづらいなぁ
シーンを滑らかに切り替えるのってどうやればいいんだろう

といった悩みのタネになりがちですよね。そこでここでは

基本編：シーンを簡単に切り替える方法
応用編：トランジションを使ってシーンを滑らかに切り替える方法

をそれぞれ丁寧にご説明していきますね。

シーンの切り替え処理の作り方
おわりに

シーンの切り替え処理の作り方

準備：動作確認用のシーンを作り、ビルド設定に登録する

まずはじめに、今回作るシーン切り替え処理の動作を確認するために

新しいテスト用シーンを2個作る
それぞれビルド設定に登録する

という簡単な作業を行っておく必要があります。

適当なシーンを2つ作り、それぞれ名前を「Scene 01」「Scene 02」に変更して、Scene 02のほうには適当なゲームオブジェクトを配置しておきましょう。

次にBuild Settingsウィンドウを開き（メニューバーの「ファイル」→「ビルド設定」）、先ほど作った2つのシーンを「ビルドに含まれるシーン」欄に登録しておいてください。

これで準備OKです。

基本編：シーンを瞬時に切り替える（すごく簡単）

ではここからシーン切り替え処理の作り方をサンプルスクリプトを使って説明していきます。まずは一番簡単な「シーンを一瞬で切り替える処理」について説明しますね。

動作サンプル

（画像クリックでGIF再生）

シーンを瞬時に切り替えるC#スクリプトの例

上記の動作を実行するためのサンプルスクリプトは次のとおりです。

using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneManager01 : MonoBehaviour
{

    [SerializeField]
    string targetSceneName = "Scene 02";

    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            LoadScene();
        }
    }

    void LoadScene()
    {
        SceneManager.LoadScene(targetSceneName);
    }

}

書けたらScene 01に新しいゲームオブジェクトを作り、上のスクリプトをアタッチしてください。

C#スクリプトの解説

マウスの左ボタンをクリックすると「Scene 02」という名前のシーンに切り替わる、という内容のC#スクリプトになっています。ポイントは次のとおり。

冒頭に「using UnityEngine.SceneManagement;」と書く。
「SceneManager.LoadScene関数」でシーンを切り替える。

シーンを切り替えるにはLoadScene関数を使います。この関数の引数は

Build Settingsウィンドウに登録したシーンのインデックス番号
Build Settingsウィンドウに登録したシーンのファイル名

のどちらかです（※現状、シーンファイルを直接指定することはできません）。

とりあえず上のサンプルでは分かりやすさを優先してシーン名を指定してありますが、インデックスを指定しても構いません。どちらを使っても一長一短なので好きなほうを使うようにしてください。

応用編：トランジションをつけてシーンをスムーズに切り替える

さてこれでシーンの切り替えができるようになりましたが、シーンが一瞬で切り替わるのは正直言ってダサいですよね。そこでトランジション（＝シーンが切り替わる時のエフェクト）を実装してシーンをスムーズに切り替えられるようにしてみましょう。

動作サンプル

シンプルなトランジションの作り方

ではトランジションから作っていこうと思います。とりあえず今回はシンプルなフェードのトランジションにするので、次の手順で作業を進めましょう。

真っ黒なキャンバスを用意する
キャンバスにアニメーターを設定する
トランジション用のアニメーションを作る
トランジション用のC#スクリプトを書く
キャンバスをプレハブ化する

手順1：真っ黒なキャンバスを用意する

まずはシーンに真っ黒なキャンバスを用意します。次の作業を行ってください。

新しいキャンバスを作る
キャンバスに「Canvas Group」コンポーネントをアタッチする
キャンバスの子としてパネルを作り、色を真っ黒にする

手順2：キャンバスにアニメーターを設定する

次にキャンバスにアニメーターを設定します。キャンバスにAnimatorコンポーネントをアタッチし、新しいアニメーターコントローラーを作って「コントローラー」欄に登録しましょう。

次にそのアニメーターコントローラーを開き、下のようにステートを作ってください。

手順3：トランジション用のアニメーションを作る

そうしたらトランジション用のアニメーションクリップを2個作ります。

Fade In
Fade Out

という名前のアニメーションクリップを作り、先ほどのアニメーターのステートにそれぞれ登録してください。

それができたらアニメーションウィンドウを開き（メニューバーの「ウィンドウ」→「アニメーション」→「アニメーション」）、次のようにキーを打ち込みましょう。

Fade In：Canvas Group.Alphaが「0」→「1」
Fade Out：Canvas Group.Alphaが「1」→「0」

これでトランジションをアニメーションさせる準備ができました。

手順4：トランジション用のC#スクリプトを書く

お次はトランジション用の簡単なC#スクリプトを書きます。

using System.Collections;
using UnityEngine;

public class SimpleTransition : MonoBehaviour
{

    readonly float waitTime = 1f;

    void Start()
    {
        DontDestroyOnLoad(gameObject);

        StartCoroutine(nameof(Transition));
    }

    IEnumerator Transition()
    {
        yield return new WaitForSeconds(waitTime);

        Destroy(gameObject);
    }

}

トランジションはシーンをまたいで存在する必要があるので、シーンを切り替えたときに他と一緒に削除されてしまわないようにDontDestroyOnLoad関数でシーンを切り替えてもこのゲームオブジェクトが残るようにします。ただしシーンが切り替わった後もずっと残り続けたら無駄ですからトランジションが完全に終了するタイミングを見計らってシーンから削除するようにします。

手順5：キャンバスをプレハブ化する

ここまでできたらキャンバスをプレハブ化しておきましょう。後で必要なときに生成して使います。

トランジションを使ったシーン切り替え処理のC#スクリプト

ではトランジションを使ったシーン切り替え処理のC#スクリプトを掲載します。

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

public class SceneManager02 : MonoBehaviour
{

    [SerializeField]
    string targetSceneName = "Scene 02";
    [SerializeField]
    GameObject transitionPrefab;

    readonly float waitTime = 0.5f;

    void Update()
    {
        if (Input.GetMouseButton(0))
        {
            StartCoroutine(nameof(LoadScene));
        }
    }

    IEnumerator LoadScene()
    {
        Instantiate(transitionPrefab);

        yield return new WaitForSeconds(waitTime);

        SceneManager.LoadScene(targetSceneName);
    }

}

こちらはトランジションを生成してから暗転が完了するまで待ちたいので、コルーチンを使って処理を待つようにしてあります。

書けたらこれをScene 01の適当なゲームオブジェクトにアタッチし、「Transition Prefab」に先ほど作ったトランジションのプレハブを登録してください。

これでトランジションを使った滑らかなシーン切り替え処理が完成しました！