読者です 読者をやめる 読者になる 読者になる

CGメソッド

CG制作に関してのヒント

MENU

【Unity】uGUI クロスフェードトランジション

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

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

やり方 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にアニメーションをつける

f:id:min0124:20160718231917g:plain

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

やり方 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のアルファをアニメーションさせる

f:id:min0124:20160718224731g:plain

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

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

tsubakit1.hateblo.jp