【Unity6】2D脱出ゲームの作り方⑬｜画面フェード演出を実装する方法【白フェード対応】

✅前回の記事はこちら👇

🎮 Unity6で進める「1つのシーンで完結する2D脱出ゲーム講座」第13回！
今回は ゲーム開始時・スタート時・クリア時に、白いフェード演出を追加する方法 を解説します。

ゲームの印象が変わるので、ぜひ取り入れてみてください！

🎥制作例動画

Contents

フェード演出の流れ
フェード用パネルを作成する
- ▼ Hierarchy 構成例
- オブジェクトの作り方
FadeController スクリプトを作成
- FadeController.cs
- インスペクターの設定
BackgroundManager の追加処理
動作確認チェック
まとめ

フェード演出の流れ

本記事で実装するのは以下の3つのフェードです。

ゲーム起動時 … 白 → フェードイン
スタートボタン押下時 … 白フェードアウト → フェードイン
ゲームクリア時 … 白フェードアウト → フェードイン

すべて同じフェードパネルを使い共通処理で実現します。

フェード用パネルを作成する

フェード演出には 透明度を変更できる白いUIパネル を使います。

▼ Hierarchy 構成例

├─ Stage
├─ Panel （アイテム詳細やオプション画面など）
└─ FadeController（すべてのオブジェクトより手前に表示）
　　└─ FadePanel

オブジェクトの作り方

Canvas の一番手前に空のオブジェクトを作成
　→ FadeController にリネーム
サイズを 800×600（画面いっぱい） に設定
FadeController の子に UI → Panel を追加
　→ 名前を FadePanel に変更
色を 白（透明度 0） に設定
CanvasGroup コンポーネントを追加
　　→ Alpha（透明度）をスクリプトで操作するため

FadeController スクリプトを作成

フェードイン・フェードアウト共通の処理 をコルーチンで管理します。

FadeController.cs

using UnityEngine;
using System.Collections;

public class FadeController : MonoBehaviour
{
[SerializeField] private CanvasGroup fadePanel;
[SerializeField] private float fadeDuration = 1f;

public static FadeController Instance;

void Awake()
{
Instance = this;
}

void Start()　// ゲーム起動時のフェードイン
{
StartCoroutine(Fade(1f, 0f));
}

public IEnumerator Fade(float from, float to)
{
float elapsed = 0f;
fadePanel.alpha = from;

// フェードアウト中はクリックをブロック
if (to > 0f) fadePanel.blocksRaycasts = true;

while (elapsed < fadeDuration)
{
elapsed += Time.deltaTime;
fadePanel.alpha = Mathf.Lerp(from, to, elapsed / fadeDuration);
yield return null;
}
fadePanel.alpha = to;

// 完全に透明になったらブロック解除
if (to == 0f) fadePanel.blocksRaycasts = false;
}

// タイトル → ゲーム開始
public void FadeOutToGame()
{
StartCoroutine(FadeOutThenGame());
}

private IEnumerator FadeOutThenGame()
{
yield return StartCoroutine(Fade(0f, 1f));
BackgroundManager.Instance.GameStart();
yield return StartCoroutine(Fade(1f, 0f));
}

//クリア時のフェード
public void FadeOutToClear()
{
StartCoroutine(FadeOutThenClear());
}

private IEnumerator FadeOutThenClear()
{
yield return StartCoroutine(Fade(0f, 1f));
BackgroundManager.Instance.GameClear();
yield return StartCoroutine(Fade(1f, 0f));
}
}