UI画面を重ねて徐々に切り替えるならCanvasGroup、カメラの描画結果を1枚の画像として重ねるならRenderTextureとRawImageを使います。UIだけのフェードにカメラ2台は必須ではありません。CanvasGroupのAlphaが変えるのは子UIの透明度で、カメラが描く3Dオブジェクトの透明度ではありません。
説明はuGUI 2.0とUnity 6.3の公式資料を参照しています。以下の最小構成は今回Unityで実行しておらず、コンパイル・描画・端末別表示を検証済みとはしていません。旧GIF2点は元記事の資料として分けて掲載します。別Sceneを読み込む処理はSceneManagerによるシーン遷移を参照してください。
CanvasGroupとRenderTextureの使い分け
| 項目・症状 | 設定・確認先 |
|---|---|
| UIパネル・文字・ボタンをフェード | CanvasGroupを対象の親へ追加し、Alphaを変える。Canvas内の描画順と入力可否を別に設定する。 |
| カメラ映像や合成済みのUIをフェード | Camera→RenderTexture→RawImageとして画像を表示し、そのAlphaを変える。カメラの対象・Canvas方式・Texture寸法を確認する。 |
| 背景の3Dシーンを切り替える | UIのAlphaだけでは3D描画は変わらない。映像を重ねる構成やScene読み込みを別に用意する。 |
| 黒いImageでフェードアウトしてからSceneをロード | 2画面を同時に重ねるクロスフェードと違い、暗転→読み込み→明転の順。ロード中に覆うUIの寿命と入力を管理する。 |
方法1：1つのCanvasでUI画面を重ねる
最小例は、背景を含むPanelAとPanelBを同じCanvas内に重ね、手前のPanelBを透明から不透明へ変える構成です。PanelAはAlpha＝1のままにします。両方のAlphaを反対向きに動かすと、重なりの合成条件によって背面が透けるため、最初は片側だけを変えて確認します。
- CanvasのRender ModeをScreen Space – Overlayにします。UIの配置とCanvas ScalerはCanvasの記事の設定を確認してください。この方式のUI表示にはRender Cameraを指定しません。
- Canvas直下に常に有効なUIRootを作り、その子にPanelAとPanelBを作ります。両パネルはアンカーをMin(0,0)／Max(1,1)、四辺の余白を0にして同じ領域へ重ねます。PanelBはHierarchyでPanelAより後ろの項目に置き、描画上は手前にします。
- パネルの背景Imageは別の色にしてColorのAlphaを1にします。文字を置く場合も各GraphicのAlphaを1にして、最初の比較条件を揃えます。子のAlphaとCanvasGroupのAlphaは掛け合わせになります。
- PanelAとPanelBへCanvasGroupを追加します。PanelAはAlpha＝1、PanelBはAlpha＝0。Ignore Parent Groupsはオフ、祖先のCanvasGroupがある場合はそのAlphaと入力設定も確認します。
- この表示用の最小例では両パネルのInteractableとBlocks Raycastsをオフにします。確認用ButtonはUIRootの外、Canvas内の最後の項目に置き、パネルに覆われず押せる状態にします。
公式のCanvasGroupはAlpha、Interactable、Block Raycastsを別の設定として説明しています。Alpha＝0だけでは操作可否を指定したことになりません。実際のメニューでは、遷移前・遷移中・完了後にどの画面の入力を許可するかも決めてください。
AnimationとButtonでPanelBをフェードインする
- UIRootにAnimatorを追加し、専用のAnimator Controllerを割り当てます。AnimationウィンドウでUIRootを選び、PanelBのCanvasGroup.Alphaを記録するクリップを作ります。
- 待機用AOnlyはPanelB.Alpha＝0のキーを保持するクリップにします。遷移用FadeToBは、0秒でPanelB.Alpha＝0、1秒で1のキーを設定します。ループしないようLoop Timeをオフにし、記録後はRecordとPreviewを解除します。
- AnimatorにAOnlyとFadeToBの2状態を作り、それぞれのMotionにクリップを指定します。既定状態はAOnlyです。TriggerパラメーターShowBを作ります。
- AOnly→FadeToBだけを接続し、ConditionsにShowB、Has Exit Timeをオフ、Transition Durationを0にします。FadeToBから自動でAOnlyへ戻る遷移は作りません。
- 確認用ButtonのOn Click()にUIRootを指定し、Animator.SetTrigger(string)を選び、文字列ShowBを登録します。クリップ名ではなくTrigger名を入れます。
- Play開始時にPanelA、クリック後にPanelBが徐々に現れ、終わりにPanelBの背景が全領域を覆うかを確認します。開始状態へ戻す最小確認はPlay停止・再開で行います。戻るボタンや連続遷移はこの2状態だけには含まれません。
PanelAの背景が手前へ残る場合はHierarchyの順、別CanvasのSorting、入れ子CanvasのOverride Sortingを確認します。PanelBの背景Alphaが1でない場合は、フェード完了後もPanelAが見える構成になります。重なった文字や画像をCanvasGroupでフェードすると個々のGraphicが透けるため、合成した1枚の見た目を保って混ぜる必要がある場合はRenderTexture方式を検討します。
旧CanvasGroupのGIF
次のGIFは旧記事のCamera2台・Screen Space – Cameraの例です。新しい最小構成の確認画像ではありません。旧手順にあった全カメラのClear Flags＝Don’t Clear、Pixel Perfect、1920×1080という値は、UIクロスフェードの必須条件としては扱いません。
方法2：Cameraの映像をRenderTextureから表示する
別の位置から見たカメラ映像Aを画面のカメラ映像Bへ重ね、A側をRawImageとしてフェードアウトする構成です。まず同じScene内の3D対象をカメラ2台で見る検証用Sceneを使い、別Sceneのロードや複雑なUIの取り込みを同時に追加しないようにします。
- CameraAとCameraBを置き、異なる位置・向きにして見分けられる映像にします。CameraAはTexture用、CameraBは画面用と役割を分けます。両者が同じ画面へ意図せず重複描画していないか確認します。
- ProjectでRenderTextureを作ります。最小例の寸法は512×512などに固定し、この段階では自動解像度変更を実装したと扱いません。カメラAのTarget Textureへ割り当て、Textureのプレビューに映像が出るか確認します。
- CameraBのTarget Textureは未設定にして画面へ描画します。空の背景を残さないよう各描画先をクリアする設定を確認し、両方をDon’t Clearにする手順から始めません。URPのBase／OverlayやHDRPの設定はBuilt-inのClear Flagsと同一の欄とは限りません。
- 表示用CanvasをScreen Space – Overlayで作り、RawImageを置きます。RawImage.TextureへRenderTextureを指定、Colorは白・Alpha＝1、Raycast Targetはオフにします。RawImageのアンカーを全領域、余白0にして重ねます。
- Textureのプレビュー、RawImage、CameraBのみの表示を順に比較します。RawImage.ColorのAlphaを1→0へ変え、カメラAの画像からカメラBの画面へ変わるかを確認します。Animationで動かす場合はRawImageのColor.Alphaを記録し、Loop Timeをオフにします。
- 画面とRenderTextureの比率が違う場合は、伸び・余白・切り取りの方針を決めます。自動追従を実装するなら再作成や所有Textureの解放も別に管理し、固定寸法の例が全端末へ対応すると判断しません。
公式のCamera.targetTextureは、Texture指定時はそのTexture全体へ描画し、Camera.rectやpixelRectが描画範囲を限定しないと説明しています。比率や切り取りをViewport Rectだけで解決したことにはできません。RawImageのTexture表示は画像読み込みの記事、矩形と画像の比率は画像比率の記事で確認できます。
UIをCameraAのTextureへ含める場合
Screen Space – OverlayのUIはCameraAの映像と同じ入力ではありません。取り込み用CanvasをScreen Space – CameraにしてRender CameraをCameraAへ割り当て、Plane Distanceとカメラのクリップ範囲、UIのLayerとCulling Maskを確認します。表示用Overlay CanvasのRawImageを取り込み側へ戻すと、意図しない映像の循環につながるため、取り込みCanvasと表示Canvasは分けてください。
旧RenderTextureのGIF
次のGIFは元記事に掲載されていた資料です。2015年の参照記事にはImageEffectなどを使う旧カメラ合成が含まれます。現在のUnityやURP／HDRPへ同じ設定を適用して確認した画像ではありません。
フェードしない・透明な画面が入力を邪魔する場合
| 項目・症状 | 設定・確認先 |
|---|---|
| Alphaを変えてもカメラ映像が変わらない | CanvasGroupの子UIだけが対象。カメラ映像を対象にするならRenderTextureがRawImageへ渡っているか確認。 |
| 開始時からPanelBが見える | PanelBのAlpha初期値、AOnlyのMotionとキー、Animatorの既定状態、Record／Previewの残りを確認。 |
| クリックで遷移しない | ButtonのOnClick対象とShowBの綴り、EventSystem/入力モジュール、GraphicRaycaster、上のGraphicのRaycast Targetを確認。 |
| 見えないパネルが操作を遮る | CanvasGroupのBlocks RaycastsとInteractable、子Graphic、入れ子のIgnore Parent Groupsを確認。Alphaだけで入力を決めない。 |
| 切替中に文字の重なりが見える | CanvasGroupはGraphicごとのAlpha。画面全体を一度合成した結果が必要なら、Textureへ描く方法と比較。 |
| RenderTextureが黒い・古い映像が残る | CameraAの有効状態/対象/TargetTexture、Textureプレビュー、描画先のクリア、Canvasの描画方式を確認。 |
| 映像が伸びる・端末で比率が変わる | カメラ映像、Texture寸法、RawImage矩形の比率を別々に確認。端末変更に伴う再作成は今回未実装。 |
この記事の手順は見た目の遷移を説明します。Sceneの読み込み完了、操作可能な画面、途中キャンセル、連打、Time.timeScale＝0での進行は別の確認条件です。実際の対象環境で結果を記録してから組み合わせてください。
スクロール領域内にフェードするUIを置く場合は、表示範囲と入力面を次の記事で確認できます。
アニメーションと演出の記事は、ほかにもあります。
