Unity│uGUIでクロスフェードトランジションを作る2つの方法

シーン切り替えなどで使えるクロスフェードトランジションの作り方を2パターン紹介します。どちらもカメラを2つ使う方法です。

方法1：Canvas Groupのアルファを使う方法

カメラに何も映らなくなると別のカメラに切り替わる仕組みを利用した方法です。

手順

1. カメラを2つ作成（Camera1、Camera2）
2. 両方のカメラのClear Flagsを「Don’t Clear」に設定して背景色を無効化
3. Canvasを2つ作成し、それぞれにTextやImageを配置
4. 各CanvasのRender Modeを「Screen Space – Camera」に変更
5. Render Cameraにそれぞれのカメラをアサイン
6. Pixel Perfectにチェック
7. Canvas ScalerのUI Scale Modeを「Scale With Screen Size」にして解像度を設定（例：1920×1080）
8. 各CanvasにCanvas Groupコンポーネントを追加
9. Canvas GroupのAlpha値にアニメーションをつける

ポイント

Canvas Groupを使うことで、Canvas内のすべてのUI要素を一括でフェードできます。

方法2：Render Textureを使う方法

カメラの映像をテクスチャとして取得し、それをフェードさせる方法です。

手順

1. カメラを2つ作成（Camera1、Camera2）し、背景色を設定
2. 各CanvasにTextなどのUI要素を配置
3. 各CanvasのRender Modeを「Screen Space – Camera」に設定
4. Render Cameraにそれぞれのカメラをアサイン
5. Pixel Perfectにチェック、UI Scale Modeを「Scale With Screen Size」に設定
6. Projectウィンドウで右クリック → Create → Render Textureを作成
7. Render TextureのSizeを画面解像度に合わせる（例：1920×1080）
8. Camera1のTarget TextureにRender Textureをアサイン
9. GameObject → UI → Raw Imageを作成
10. Raw ImageのTextureにRender Textureをアサイン
11. Raw ImageをCanvas2の階層下に移動
12. Rect Transformで位置とサイズを調整
13. Raw ImageのColorのアルファ値にアニメーションをつける

注意点

この方法は画面サイズが変わると、2つのテキストの大きさが合わなくなる場合があります。固定解像度のプロジェクト向けです。

参考：http://tsubakit1.hateblo.jp/entry/2015/11/15/000000

2つの方法の比較

項目	方法1（Canvas Group）	方法2（Render Texture）
実装の手軽さ	シンプル	やや複雑
画面サイズ変更への対応	対応しやすい	調整が必要
応用の幅	基本的なフェード向き	特殊なエフェクトにも応用可能

まとめ

• シンプルなクロスフェードなら方法1（Canvas Group）がおすすめ
• Render Textureを使った表現に発展させたいなら方法2
• どちらもカメラ2台構成が基本

用途に合わせて使い分けてください。