CG・映像デザイナー技術ブログ

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

eyecatch_unity

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

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

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

やり方 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】二つのカメラをクロスフェードで切り替える - テラシュールブログテラシュールブログ

以上、すいみん(@cg_method)でした!