Zenn
🌒

【Unity】フェードアウト後にシーン遷移する方法

2023/08/21に公開
Unity
tech

今回はUnityでフェードアウトして、その後他のシーンに遷移する方法を紹介していきます。

実装するのはこんな感じ↓

https://youtu.be/6yvbjw8ksPM
フェードアウトしてシーン遷移しています。

今回紹介する方法の良い所

・Time.deltaTimeを使っているのでフレームに左右されない。
・表示しているUIとシーン内容まとめてフェードアウトできる。

よく紹介される「SimpleFadeSceneTransitionSystem」アセットは、フェードアウトできますがUIには反映されません。なので自身でCanvasでImageを作って、フェードアウトさせる方法が良さげです。

手順

  1. まずCanvasとPanelのUIを追加します。

  2. PanelのImageコンポーネントのColorのRGBAを全部0にします。

  3. PnaelのImageを無効にしておきます。(無効にしないとUIのボタンが押せないため)

  4. 以下のFadeSceneLoaderというスクリプトを作成します。

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

public class FadeSceneLoader : MonoBehaviour
{
    public Image fadePanel;             // フェード用のUIパネル（Image）
    public float fadeDuration = 1.0f;   // フェードの完了にかかる時間

    private void Start()
    {
        StartCoroutine(FadeOutAndLoadScene());
    }

    public IEnumerator FadeOutAndLoadScene()
    {
        fadePanel.enabled = true;                 // パネルを有効化
        float elapsedTime = 0.0f;                 // 経過時間を初期化
        Color startColor = fadePanel.color;       // フェードパネルの開始色を取得
        Color endColor = new Color(startColor.r, startColor.g, startColor.b, 1.0f); // フェードパネルの最終色を設定

        // フェードアウトアニメーションを実行
        while (elapsedTime < fadeDuration)
        {
            elapsedTime += Time.deltaTime;                        // 経過時間を増やす
            float t = Mathf.Clamp01(elapsedTime / fadeDuration);  // フェードの進行度を計算
            fadePanel.color = Color.Lerp(startColor, endColor, t); // パネルの色を変更してフェードアウト
            yield return null;                                     // 1フレーム待機
        }

        fadePanel.color = endColor;  // フェードが完了したら最終色に設定
        SceneManager.LoadScene("Menu"); // シーンをロードしてメニューシーンに遷移
    }
}
  1. 作成したらCanvasにスクリプトをアタッチします。変数のFadePanelに子のPanelをドラッグで追加しておきます。

完成です。上記のスクリプトではStart()で呼び出していますが、下記のスクリプトでは任意タイミングで実行できます。

他スクリプトから任意のタイミングで実行する場合のスクリプト

他スクリプトから任意のタイミングで実行する場合、スクリプトを以下に変更してください。

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

public class FadeSceneLoader : MonoBehaviour
{
    public Image fadePanel;
    public float fadeDuration = 1.0f;

    //追加した部分
    public void CallCoroutine()
    {
        StartCoroutine(FadeOutAndLoadScene());
    }

    public IEnumerator FadeOutAndLoadScene()
    {
        fadePanel.enabled = true;                 // パネルを有効化
        float elapsedTime = 0.0f;                 // 経過時間を初期化
        Color startColor = fadePanel.color;       // フェードパネルの開始色を取得
        Color endColor = new Color(startColor.r, startColor.g, startColor.b, 1.0f); // フェードパネルの最終色を設定

        // フェードアウトアニメーションを実行
        while (elapsedTime < fadeDuration)
        {
            elapsedTime += Time.deltaTime;                        // 経過時間を増やす
            float t = Mathf.Clamp01(elapsedTime / fadeDuration);  // フェードの進行度を計算
            fadePanel.color = Color.Lerp(startColor, endColor, t); // パネルの色を変更してフェードアウト
            yield return null;                                     // 1フレーム待機
        }

        fadePanel.color = endColor;  // フェードが完了したら最終色に設定
        SceneManager.LoadScene("Menu"); // シーンをロードしてメニューシーンに遷移
    }
}

以下のように呼び出します。

public FadeSceneLoader fadeSceneLoader;

public void GameOver()
{
    fadeSceneLoader.CallCoroutine();
}

以上です。

Discussion