Unity × DOTween × CanvasGroup でシンプルに実装するフェード付きシーン切り替え

2025年10月30日2025年11月5日

はじめに

シーンを切り替えるときに画面がいきなり切り替わると、プレイヤーに違和感を与えてしまいます。

そこでよく用いられるのが フェードアウト → シーン切り替え → フェードイン の演出です。

今回は、CanvasGroup と DOTween を組み合わせて、最小限のコードでシンプルにフェード付きシーン切り替えを実装する方法を紹介します。

CanvasGroup を使う理由

Image のアルファ値を直接操作する方法でもフェードは可能ですが、CanvasGroup を使うと以下の利点があります。

• alpha を変えるだけでUI全体を一括で透明化できる
• blocksRaycasts を使えば、フェード中のクリックやタップを無効化できる

シーン切り替えには最適な仕組みです。

実装チュートリアル

FadeTestなどの名前でプロジェクトを作成してください

Step 1. フェード用UIの準備

1. UI > Canvas を作成
2. 子に UI > Image を追加し、画面全体を覆うように設定
3. 名前を「FadePanel」とし、色を黒に設定
4. CanvasGroup コンポーネント を追加
   • alpha = 1（最初は黒画面）
   • interactable = true
   • blocksRaycasts = true

Step 2. フェード制御スクリプト

using UnityEngine;
using UnityEngine.SceneManagement;
using DG.Tweening;

public class SceneFader : MonoBehaviour
{
    [SerializeField] private CanvasGroup fadeCanvasGroup;
    [SerializeField] private float fadeDuration = 1.0f;

    private void Start()
    {
        // シーン開始時はフェードイン
        fadeCanvasGroup.alpha = 1;
        fadeCanvasGroup.DOFade(0, fadeDuration)
            .OnComplete(() =>
            {
                fadeCanvasGroup.blocksRaycasts = false; // 入力有効化
            });
    }

    public void FadeToScene(string sceneName)
    {
        // フェードアウト後にシーンをロード
        fadeCanvasGroup.DOFade(1, fadeDuration)
            .OnStart(() =>
            {
                fadeCanvasGroup.blocksRaycasts = true;  // 入力無効化
            })
            .OnComplete(() =>
            {
                SceneManager.LoadScene(sceneName);
            });
    }
}

[SerializeField] private CanvasGroup fadeCanvasGroup;

[SerializeField] private float fadeDuration = 1.0f;

fadeCanvasGroup.alpha = 1;

fadeCanvasGroup.DOFade(0, fadeDuration)

.OnComplete(() => fadeCanvasGroup.blocksRaycasts = false);

fadeCanvasGroup.DOFade(1, fadeDuration)

.OnStart(() => fadeCanvasGroup.blocksRaycasts = true);

.OnComplete(() => SceneManager.LoadScene(sceneName));

fadeCanvasGroup.DOFade(目標Alpha, 時間)

Step 3. セットアップ

1. SceneFader を Canvas にアタッチ
2. fadeCanvasGroup に FadePanel を割り当てる
3. fadeDuration にフェード時間を指定（例：1秒）

Step 4. ボタンから呼び出す

using UnityEngine;

public class TitleMenu : MonoBehaviour
{
    public void OnClickStart()
    {
        var sceneFader = FindFirstObjectByType<SceneFader>();

        if (sceneFader != null)
        {
            sceneFader.FadeToScene("GameScene");
        }
    }
}

Unity の Button コンポーネントの OnClick() に OnClickStart を登録しましょう。

参考）シーン構成

Titleシーン

Gameシーン

まとめ

• CanvasGroup.alpha を DOTween の DOFade で操作するだけでフェード演出が実装可能
• blocksRaycasts を使えばフェード中の誤操作も防げる
• シンプルながら実用的なシーン切り替え演出が完成

余計な処理を加えず、最小限でフェード付きシーン切り替えを作りたい方におすすめの方法です。