环境

系统:Windows 10
引擎:Unity 2017.2.1f1

目的

通过实例了解Camera层级控制

实例

一、布局主要分为三层:模型层、特效层、UI层。

(1-1)以两个Camera作为模型层和特效层的根节点。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用
(1-2)UI层的根节点默认为Canvas,通过生成UGUI控件(Image_UI)时自动生成Canvas和EventSystem。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(1-3)在模型层(Camera_Model)下创建子控件:文本控件Text_Model、图片控件Image_Model、3D对象Capsule。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(1-4)在特效层(Camera_Effect)下创建子控件:图片控件Image_Effect、粒子控件Particle System。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

二、调整各控件属性。

(2-1)调整各控件属性前,先添加两个层级(Model和Effect)以供分层管理。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-2)Camera_Model的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-3)Text_Model的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-4)Image_Model的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-5)Capsule的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-6)Camera_Effect的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-7)Image_Effect的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-8)Particle System的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-9)Canvas的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-10)Image_UI的属性设置如下:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(2-11)在Game窗口中可见通红的界面,显然这并非所想要的结果,而且明显是层级出了问题。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

三、通过Frame Debugger观察渲染过程。

(3-1)开启Frame Debugger窗口
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(3-2)运行工程后,按下FrameDebugger窗口的Enable按钮,可见渲染过程。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(3-3)折叠渲染过程至主节点,此时可见剩下两个主节点。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(3-4)观察第一个主节点:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(3-5)观察第二个主节点:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(3-6)根据两个节点的情况,可知这是Image_UI的层级问题所导致,而Image_UI是源于Canvas的默认UGUI镜头。

四、通过改变画布的默认渲染层级,以修正层级问题。

(4-1)添加一个用于UI的相机(Camera_UI)
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(4-2)调整Canvas的Render Mode(设为屏幕空间的相机Screen Space - Camera)和Render Camera(设为新加的相机Camera_UI)的参数值,可以显示出正确的层级。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(4-3)再调整一下Canvas的其他参数:
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

(4-4)运行后,可见Frame Debugger窗口的渲染只剩下一个主节点,默认的UGUI渲染节点已被干掉,从而得到正确展示效果。
日落20191001002 - Unity组件应用之Camera层级控制与FrameDebugger应用

以上简单回顾。

参考资料:

相关文章:

  • 2021-12-08
  • 2021-07-30
  • 2022-12-23
  • 2022-01-10
  • 2022-12-23
  • 2021-08-27
  • 2022-12-23
  • 2021-05-25
猜你喜欢
  • 2021-10-09
  • 2021-07-17
  • 2021-05-16
  • 2021-06-21
  • 2021-08-30
  • 2021-11-28
  • 2021-11-06
相关资源
相似解决方案