シーン切り替えなどで使えるクロスフェードトランジションの作り方を2パターン紹介します。どちらもカメラを2つ使う方法です。
目次
方法1：Canvas Groupのアルファを使う方法
カメラに何も映らなくなると別のカメラに切り替わる仕組みを利用した方法です。
手順
- カメラを2つ作成（Camera1、Camera2）
- 両方のカメラのClear Flagsを「Don’t Clear」に設定して背景色を無効化
- Canvasを2つ作成し、それぞれにTextやImageを配置
- 各CanvasのRender Modeを「Screen Space – Camera」に変更
- Render Cameraにそれぞれのカメラをアサイン
- Pixel Perfectにチェック
- Canvas ScalerのUI Scale Modeを「Scale With Screen Size」にして解像度を設定（例：1920×1080）
- 各CanvasにCanvas Groupコンポーネントを追加
- Canvas GroupのAlpha値にアニメーションをつける
ポイント
Canvas Groupを使うことで、Canvas内のすべてのUI要素を一括でフェードできます。
方法2：Render Textureを使う方法
カメラの映像をテクスチャとして取得し、それをフェードさせる方法です。
手順
- カメラを2つ作成（Camera1、Camera2）し、背景色を設定
- 各CanvasにTextなどのUI要素を配置
- 各CanvasのRender Modeを「Screen Space – Camera」に設定
- Render Cameraにそれぞれのカメラをアサイン
- Pixel Perfectにチェック、UI Scale Modeを「Scale With Screen Size」に設定
- Projectウィンドウで右クリック → Create → Render Textureを作成
- Render TextureのSizeを画面解像度に合わせる（例：1920×1080）
- Camera1のTarget TextureにRender Textureをアサイン
- GameObject → UI → Raw Imageを作成
- Raw ImageのTextureにRender Textureをアサイン
- Raw ImageをCanvas2の階層下に移動
- Rect Transformで位置とサイズを調整
- Raw ImageのColorのアルファ値にアニメーションをつける
注意点
この方法は画面サイズが変わると、2つのテキストの大きさが合わなくなる場合があります。固定解像度のプロジェクト向けです。
参考：http://tsubakit1.hateblo.jp/entry/2015/11/15/000000
2つの方法の比較
| 項目 | 方法1（Canvas Group） | 方法2（Render Texture） |
|---|---|---|
| 実装の手軽さ | シンプル | やや複雑 |
| 画面サイズ変更への対応 | 対応しやすい | 調整が必要 |
| 応用の幅 | 基本的なフェード向き | 特殊なエフェクトにも応用可能 |
Unityのほかの記事は、まとめからご覧いただけます。
あわせて読みたい
Unityの使い方まとめ｜環境設定・uGUI・エディタ拡張
Unityについて書いた記事を、工程別に分類しました。 環境の設定でつまずいている場合は、最初の項目からご覧ください。 各カテゴリーは閲覧数の多い順に表示しています…
スクロールビューの作り方はこちらです。
あわせて読みたい
Unity│uGUIスクロールビューの作り方
uGUIの標準機能だけでスクロールビューを作る方法を紹介します。 コードは書かずに、コンポーネントの設定だけで実装できます。 完成イメージ リストの作成 下敷き（Scr…
まとめ
- シンプルなクロスフェードなら方法1（Canvas Group）がおすすめ
- Render Textureを使った表現に発展させたいなら方法2
- どちらもカメラ2台構成が基本
用途に合わせて使い分けてください。
