UGUI基础及锚点介绍

由于项目需要了解Unity GUI,这两天初学UGUI,此为背景。(Unity版本是5.3.4p4)

先说UGUI方便之处,由于是unity自带GUI,当然相当方便,不用导入任何第三方插件就能画UI,很爽。新建一个UI,比如一个button,如果之前没有创建过任何有关UI的元素,引擎会自动创建一个名为Canvas的GO,这个GO自带Rect Transform组件,Canvas组件,Canvas Scaler组件,Graphic Raycaster组件。RectTransform涉及到的东西比较多而且有些理解不是很清楚,最后再说。

先说Canvas组件的理解。这个组件有一个Render Mode属性可供选择,分别是Screen Space-Overlay,Screen Space-Camera,World Space。

  • Screen Space-Overlay:是屏幕空间-覆盖,这个模式始终将UI放到场景最上面渲染,但是当有多个Canvas时就需要根据Sort Order来计算前后关系,这个值越大越靠前,即值越大越显示在前面,值小的在后面。Pixel Perfect表示是否需要打开抗锯齿。
  • Screen Space-Camera:是屏幕空间-相机,这个模式需要指定一个渲染相机,Plane Distance指定了UI与该相机的距离,越近越显示在前面。Sorting layer则指定了相机的渲染顺序,Order in Layer值越大,该UI越显示在前面。值越小越靠后。所以Sorting layer只有在有多个同类型Sorting Layer时才有效。如果两个Canvas指定的Sorting Layer一样,则依据Order in Layer的值的大小决定先后顺序。如果Sorting Layer不一样,则Order in Layer值无意义,此时会根据Sorting Layer里面值的顺序来决定,值越大显示越靠前。
  • World Space:是世界空间。也需要指定渲染相机,Sorting Layer与Order in Layer的处理与屏幕空间相机一样。
Canvas Scaler主要负责屏幕适配,当Canvas的render mode为Screen Space-Overlay或者Screen Space-Camera时,可以指定UI Scale Mode,有三种模式:
  • Constant Pixel Size:保持UI的像素大小,无论屏幕大小如何改变。Scale Factor指定几倍像素。
  • Scale With Screen Size:随着屏幕的大小改变而等比缩放UI大小。然后就是设置标准长宽。Reference Pixel Per Unit:如果sprite设置了一个单元的像素值,这里设置的值将被sprite的Pixel per unit值覆盖。也就是说如果sprite设置Pixel per unit为100,这里如果设置为200,那么在这个Canvas下面的sprite如果Set Native Size的话,长宽均会X2. 这里也不是很明白这个地方的实际用处。详细说明可以参考如下链接:http://gad.qq.com/article/detail/7166336,这里详细讲述了Reference Pixel Per Unit与Pixel per unit和sprite的Rect Transform 的Width与Height的关系。如下图:UGUI基础及锚点介绍
  • Constant Physical Size可以参考unity官方说明吧。
Graphic Raycaster用于射线检测,与Canvas搭配使用,Ignore Reversed Graphic是指是否忽略图形的反面射线检测,如果勾上,说明只有正面接受射线检测,能响应射线检测事件,反面无法接收射线检测事件。Blocking Object是指屏蔽指定类型的对象使他们忽略射线检测,有None,2D,3D,All,分别代表没有忽略的,2D忽略,3D忽略,忽略所有。Blocking Mask是指屏蔽上面对象中指定层,使他们忽略射线检测。

下面重点说说Rect Transform,对于每个UI,都有一个Rect Transform组件,这个组件继承自Transform,默认锚点在中心,可设置的是PosX,PosY,PosZ,Width,Height,这几个标签会随着下面Anchors的设置而改变,当Anchors设置为一个点时,即Anchors下面的Min,Max均为同一个值时,上面Rect Transform的标签就是上面说的那几个标签。当Anchors为一条直线时,上面标签会变成几种,如下图:UGUI基础及锚点介绍
场景视图中锚点位置对应右边设置的值,看到标签已经变成PosX,Top,PosZ,Width,Bottom.PosX指定了Image中心点到锚点这条线的距离为640,Top指定了中心点到锚点最上方的距离是160,Bottom指定了中心点到锚点最下方的距离是160,Width指定了Image本身的宽为400.
同理,当锚点变成水平的线时标签变成如下图这样:UGUI基础及锚点介绍
 Anchors还可以是一个区域,当它是一个区域时,它变成如下图:
UGUI基础及锚点介绍
这时就是指定了上下左右到中心点的距离,如果设定了某GO为该物体的父节点,父物体长宽发生改变,该物体会随着父物体改变,而上下左右这几个值不会改变。