【Unity/UI】实践记录-多个摄像机的组合使用

说在前面

  • Unity版本:2017.4.37

说明

  • 在UI设计的时候可能会遇到正射投影透视投影组合的情况,这个时候就需要用到多个摄像机来实现。
    例如明日方舟的主界面
    【Unity/UI】实践记录-多个摄像机的组合使用
    右边这一块是可以根据手机的陀螺仪进行一定角度的3D转动的,而左上角的几个Button是固定的。

实例

  • 使用unity自带的UI组件来完成一个简单的例子,不涉及C#脚本。
  • 层级结构如下
    【Unity/UI】实践记录-多个摄像机的组合使用
    先创建两个摄像头,Main Camera以及Sub Camera,这两个摄像头的配置如下,均使用正射投影:
    【Unity/UI】实践记录-多个摄像机的组合使用
    注意他俩的Depth属性均为-1
  • 然后在Main Camera下创建一个Canvas,用于盛装固定的UI,就简单添加一个Text,这两者的配置如下:
    【Unity/UI】实践记录-多个摄像机的组合使用
  • 然后在Sub Camera下创建一个Canvas,用于盛装3D UI,添加一个Scroll View组件,这两者的配置如下:
    【Unity/UI】实践记录-多个摄像机的组合使用
    注意这个CanvasRender Mode使用World SpaceEvent Camera选择后面创建的透视投影摄像头,并且我们将这个Canvas旋转一定的角度,这样看起来就有3D效果。
    【Unity/UI】实践记录-多个摄像机的组合使用
    可以在Scroll View组件中添加一些文字,便于测试。
    【Unity/UI】实践记录-多个摄像机的组合使用
  • 最后在Sub Camera下再创建一个摄像头,这个摄像头使用透视投影,配置如下:
    【Unity/UI】实践记录-多个摄像机的组合使用
    注意这个摄像机的Depth为1,表示这个摄像机捕捉到的东西将会在前面两个摄像机之后渲染
  • 最后显示的画面如下:
    【Unity/UI】实践记录-多个摄像机的组合使用

结果

  • 试着改变Sub Camera下的CameraRotation属性,可以轻松的看到效果(如下GIF)
    【Unity/UI】实践记录-多个摄像机的组合使用

总结

  • 至少两个摄像机
  • 3D部分的Canvas的Render Mode使用World Space
  • 3D部分的Canvas的Event Camera选择3D部分的摄像机
  • 3D部分的摄像机Depth属性要高于其他正常UI摄像机(按需调整)