Theme
SD MILIEU

2018-5-10

UI上に2D、3Dモデルを配置する方法

Demo

概要

  • UI 用のカメラを配置
  • UI 用のカメラは、UI レイヤーのみを表示するように CullingMask を設定

UI 用のカメラを配置

UI 上には通常 UI 部品しか配置出来ない。

ただ、UI を表示する用のカメラを配置し、そのカメラに UI を描画させることでモデルを UI 上に描画させることが出来る。

手順としては

  1. 新規で適当に Camera を配置し、AudioListener を削除
  2. 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 ModeConstant 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 を調整しないといけない。

参考

Unity で uGUI を使った UI に 3D オブジェクトを表示させたい - hildsoft のコード置き場