メニュー

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

eyecatch_unity

カメラを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との連携 参考 概要 ...

全記事一覧

  • URLをコピーしました!

Unityに関する参考記事・ツール・書籍のまとめ

Unityの参考書籍

著:北村 愛実
¥2,970 (2023/01/14 00:41時点 | Amazon調べ)
著:吉谷幹人, 著:布留川英一, 著:一條貴彰, 著:西森丈俊, 著:藤岡裕吾, 著:室星亮太, 著:車谷勇人, 著:湊新平, 著:土屋つかさ, 著:黒河優介, 著:中村優一, 著:牙竜, 著:コポコポ, 著:かせ, 著:hataken, 著:monmoko
¥4,400 (2023/01/14 00:41時点 | Amazon調べ)
著:森哲哉, 著:布留川英一, 著:西森丈俊, 著:車谷勇人, 著:一條貴彰, 著:打田恭平, 著:轟昂, 著:室星亮太, 著:井本大登, 著:細田翔, 著:西岡陽, 著:平井佑樹, 著:コポコポ, 著:すいみん, 著:Maruton, 著:karukaru, 著:ハダシA, 著:notargs, 著:EIKI`, 著:おれんじりりぃ, 著:黒河優介, 著:中村優一, 著:藤岡裕吾
¥8,151 (2023/01/14 00:41時点 | Amazon調べ)
ボーンデジタル
¥5,060 (2023/01/14 00:41時点 | Amazon調べ)
技術評論社
¥4,620 (2023/01/14 20:57時点 | Amazon調べ)

Unityの人気アセット

目次