品尝Unity3D的Canvas组件


请尊重原作者的工作,转载时请务必注明转载自:www.xionggf.com

1 概述

Canvas组件,是所有UI组件进行绘制时使用的区域。一个canvas object即是一个绑定Canvas组件的game object所有绑定了UGUI的UI组件的game object,(以下统称为UI object)要想显示出来,都必须是这个canvas object的子object。如果场景中没有canvas object,那么我们创建任何一个UI object时,都会自动创建一个canvas object,并且将这个新UI object置于其下。

2 Canvas组件的参数

2.1 RenderMode(渲染模式)

RenderMode渲染模式有以下三种:Screen Space-Overlay、Screen Space-Camera、World Space。

2.1.1 Screen Space-Overlay模式

Screen Space-Overlay(基于屏幕空间的覆盖模式)模式下的canvas会填满整个屏幕空间,并将本canvas object下的所有的UI object置于屏幕的最上层,或者说canvas的画面永远覆盖在普通的3D画面智商,如果屏幕尺寸被改变,canvas将自动改变尺寸来匹配屏幕,而且这个模式下,是不需要明确地给这个canvas object指定使用哪个camera object去进行渲染的。在此模式下,Canvas组件有两个参数:

  1. Pixel Perfect:关于pixel perfect的细节见这里。
  2. Sort Order:Sort Orader是UGUI专用的设置,用来指示canvas object的深度。

当多个canvas object都使用Screen Space-Overlay模式的时候,它们之间的渲染顺序是由canvas组件的Sort Order属性决定的,值越大的越后渲染。

2.1.2 Screen Space-Camera模式

Screen Space-Camera(基于屏幕空间的摄像机模式)和Screen Space-Overlay模式类似,画布也是填满整个屏幕空间,如果屏幕尺寸改变,画布也会自动改变尺寸来匹配屏幕,不同点在于,在此模式下,canvas object会被放置到摄像机的前方,所有的UI object都由该摄影机渲染。所以看起来,canvas object下的所有UI object就好像 绘制在一个与摄像机固定距离的平面上。摄像机的设置会影响到UI object的显示。这种模式可以用来实现在UI上显示3D模型的需求,比如很多游戏中的查看人物装备的界面,可能界面左侧有一个3D的人物模型,右侧是一些UI控件。通过设置Screen Space-Camera模式就可以实现上述的需求。本模式有以下的参数

  1. Render Camera:渲染用的摄像机,UI object的外观需要用本摄像机才能呈现出来。
  2. Plane Distance:待绘制的canvas object距离摄像机的距离,当调整这个值的时候,Canvas Object的Rect Transform组件的z值,以及它的Scale值会随着变化调整,使得界面看起来始终保持原样的大小覆盖在屏幕上。如下两图所示:




Sorting LayerOrder in Layer两个参数则是用来当存在多个canvas object时,对这些多个canvas进行排序使用的。当多个canvas object都使用Screen Space-Camera模式的时候,它们之间的渲染顺序如下:

  1. 首先比较这些canvas object所使用的Render Camera的深度值(depth)值,值越小的越先渲染,越大的越后渲染
  2. 如果这些canvas object所使用的Render Camera的深度值相同,或者它们使用了同一个Render Camera。则比较这些canvas object的指定的Sorting Layer,这些层在层级列表中越靠下的,越后渲染。
  3. 前两个比较条件都相等的话,则比较Order in Layer的值,值越大越后渲染。

2.1.3 World Space模式

World Space即世界空间模式。在此模式下,canvas object可以理解为是在3D空间中的一张扁平的面片。该画布的尺寸可以通过Rect Transform设置,所有的UI元素可能位于普通3D物体的前面或者后面显示。当UI为场景的一部分(也就是我们通常所说的3D UI)时,可以考虑使用这个模式。

除了有和Screen Space-Camera模式下相同的Sorting Layer和Order in Layer之外,还有一个单独的参数Event Camera,这是canvas object用来指定接受事件的摄像机,可以通过canvas object上的GraphicRaycaster组件,发射射线,以产生事件。当有多个canvas object并且渲染模式都为World Space时。它们之间的渲染顺序如下:

  1. 首先比较canvas组件的Sorting Layer的顺序,顺序越后则越后渲染。
  2. 如果Sorting Layer值都相同,渲染顺序由Order in Layer决定,值越大越后渲染。
  3. 当Sorting Layer和Order in Layer值都相同的情况下,此时渲染顺序由canvas距离Render Camera的距离决定,距离越近越后渲染。但前提是cavas object都处于Render Camera的远近截平面范围内。

返回首页