2018-5-10
UI上に2D、3Dモデルを配置する方法
概要
- UI 用のカメラを配置
- UI 用のカメラは、UI レイヤーのみを表示するように CullingMask を設定
UI 用のカメラを配置
UI 上には通常 UI 部品しか配置出来ない。
ただ、UI を表示する用のカメラを配置し、そのカメラに UI を描画させることでモデルを UI 上に描画させることが出来る。
手順としては
- 新規で適当に Camera を配置し、AudioListener を削除
- Canvas の RenderMode を
Screen Space - Cameraに
UI 用のカメラは、UI レイヤーのみを表示するように CullingMask を設定
カメラはデフォルトで全レイヤーを描画しようとしてしまう。
そのため、UI よりカメラに近いモデルがあれば、それを UI より手前に描画しようとしてしまう。
なので、CullingMaskに UI のみを設定し、UI レイヤー上のオブジェクトのみ描画するようにする。
問題点（解決）
（追記）以下は完全に勘違い。SetParentの第二引数が true だと親の状態によって子の Scale を良い感じに調整されるのだが、これがデフォルト true なため影響を受けてしまっていたのが原因。
ScreenSpace Cameraな Canvas 内に動的に UI を追加すると、何故か UI の Scale が勝手に弄られてしまう。CanvasScaler のUI Scale ModeがConstant Pixel Sizeの時は、Camera の Size（Orthographic の場合）を見て Canvas の Scale を自動調整してくれるのだが、動的に追加された UI は、CanvasのScale * 追加したUIのScale = 1になるように Scale が設定されてしまう。Canvas の Scale が 0.5 とかの場合、追加 UI の Scale は 2 になってしまっている。
挙動はわかったが、解決法がわからない。とりあえずConstant Pixel Sizeは諦めてScale With Screen Sizeとかでお茶を濁すしか無い。この方法を使う場合は、UI 用のカメラの size を Canvas の scale が 1 になるように調整し、なおかつ、Canvas の PosZ が 0 になるようにカメラの Z を調整しないといけない。