【Unity】uGUIクロスフェードトランジションの作成方法

カメラを2つ使ったクロスフェードトランジション。uGUIを適当にいじって見つけたものとネットで調べたもの2つ紹介。

すいみん

海外でフリーランスをしているテクニカルアーティスト
ゲーム開発・映像制作・WEB制作等を請け負っています。
当ブログは作業効率化のための技術ブログです。

クロスフェードトランジション

やり方 1

1. カメラを2つ作成（Camera1,Camera2）Cler FlagsをDont’t Clerにして背景色を切る
2. TextとImageを2つずつ作成。
3. 2つのCanvasのRender ModeをScreen Space – Cameraに、Render CameraをCamera1Pixel Perfectにチェック、CanvasのUI Scale ModeをScale With Screen Scale 1920×1080に
4. 2つのCanvasにCanves Groupを作成してAlphaにアニメーションをつける

※カメラに何も映らなくなると別のカメラに切り替わる仕組みを利用。

やり方 2

1. カメラを2つ作成（Camera1,Camera2）背景色に色を付ける
2. Textを2つ作成
3. 2つのCanvasのRender ModeをScreen Space – Cameraに、Render CameraをCamera1Pixel Perfectにチェック、CanvasのUI Scale ModeをScale With Screen Scale 1920×1080に
4. Assets>Create>Render Textureを作成。Sizeをを1920×1080に
5. Camera1のTarget TectureにRender Textureをアサイン
6. GameObject>UI>RawImageを作成して、Render Textureをアサイン、Canvas2の階層へ
7. TextやRaw Imageの Rect TransformのRect Transformを調整
8. Raw Imageのアルファをアニメーションさせる

※Render Textureを使った表現。下記の記事を参考。

※ちなみにこちらのやり方は画面サイズが変わると、2つのテキストの大きさが合わなくなります。

テラシュールブログ

【Unity】二つのカメラをクロスフェードで切り替える - テラシュールブログ 二つのカメラをクロスフェードして切り替えます。 概要 カメラのフェード実装方法 フェード実装時の注意点 絵が上下反転する ScreenOverlayで代用 uGUIとの連携 参考 概要 ...