UIがカメラ範囲外にレンダリングされてしまう場合の対処法


カメラの範囲外の領域にUI(今回はフロート型のジョイスティック)がレンダリングされてしまい、それが残り続けてしまう現象に遭遇した。

 

f:id:exwks:20200423023004p:plain

左下の残り続けるUIのレンダリング

 

このような感じ。左下にジョイスティックの残骸があるのがわかると思う。
これがずっと残ってしまう為下記のように対応した。

 

CanvasのRender ModeをScreen Space - Cameraに変更」

 

f:id:exwks:20200423023008p:plain

Render ModeをScreen Space - Cameraに変更

 

UIがレンダリングされ、残骸が残ってしまう場合の設定は、
Screen Space - Over layで設定されていた。

 

Render Cameraには画角設定しているCameraを設定。
このようにすると、下図のようにカメラ範囲外にUIがレンダリングされず残らない。

 

f:id:exwks:20200423023018p:plain

カメラ範囲外にUIが入ったとしてもその残骸が残らなくなった