Unity UGUI之Canvas总结

由于项目需要了解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的关系。如下图：
• 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为一条直线时，上面标签会变成几种，如下图：

场景视图中锚点位置对应右边设置的值，看到标签已经变成PosX,Top,PosZ,Width,Bottom.PosX指定了Image中心点到锚点这条线的距离为640，Top指定了中心点到锚点最上方的距离是160，Bottom指定了中心点到锚点最下方的距离是160，Width指定了Image本身的宽为400.

同理，当锚点变成水平的线时标签变成如下图这样：

 Anchors还可以是一个区域，当它是一个区域时，它变成如下图：

这时就是指定了上下左右到中心点的距离，如果设定了某GO为该物体的父节点，父物体长宽发生改变，该物体会随着父物体改变，而上下左右这几个值不会改变。