Unity4.6版本开始才有了新的UI系统UGUI
一.Canvas的组件介绍
1.Canvas
Canvas是UGUI最根本的元素,它是一个区域(画布)用来容纳所有UI元素的,UI元素必须是它的子物体,才能显示出来!
Canvas的三种渲染模式(Render Mode)
-
Screen Space - Overlay : UI元素在所有3D物体之上
这种模式下摄像机可有可无,UI元素仍然能够显示;如果有摄像机,UI元素绝对是显示于所有3D物体之上的,不会被遮挡!
Pixel:是否像素对齐以及排序
Sort Order:数字越大的Canvas显示在前
-
Screen Space - Camera:UI元素位置和摄像机有关,离摄像机前面有一定距离,
这种模式下没有摄像机的话,和第一种效果一样(如下图,它会提示你要指定一个摄像机);指定摄像机后,3D物体就可以显示在UI元素的前面,需要先调Plane Distance(Canvas与摄像机的距离),然后在调3D物体的位置,让它处于摄像机与Canvas之间,就可以显示于UI元素之上
Plane Distance:单位是米
Sorting Layer:位于下面的选项显示在前,显示位置优先由这个选项决定,如果选项一样,再由Z轴决定,同Layer还可调Order in Layer来调显示顺序
- World Space : 纯三维UI,Canvas可以随意旋转移动,和3D物体一样
2.Canvas Scale
主要用来控制UI界面中,Canvas的缩放,当屏幕分辨率和我们设计分辨率不一样的时候,如何缩放我们的Canvas
Scale Factor:缩放的倍数,如果原先图片的像素是800×600,把这个参数调成2图片大小就会变成1600×1200,一般默认为1,即图片初始大小,不更改。
Reference Pixels Per:1米代表多少个像素,一般默认为100,1米=100像素,不更改
Canvas的三种缩放模式(UI Scale Mode)
-
Constant Pixel Size(比较少用):像素大小是常量,也就是说,无论屏幕大小怎么变化,UI元素都不会变化
Scale With Screen Size(最常用):按照参照分辨率进行等比缩放
首先要设置好参照的分辨率 Reference Resolution,这个美工会定好这套UI是按照哪种分辨率来进行设计的,比如说800*600,填上去就完事了
Screen Match Mode:屏幕匹配模式,当屏幕大小与参照分辨率不一致时,调整此参数可以调整UI元素在当前屏幕的缩放比例,防止UI元素显示不全,有以下三个选项
Match Width Or Height:有拖动条,最大0,最小1,内容的宽除以设计的宽,内容的高除以设计的高
Expand:等于第一个选项的0值,UI元素等比例缩小,屏幕可能会留空,也就是缩小到尺寸和参照分辨率一致,让内容不超出屏幕
Shrink:等于第一个选项的1值,UI元素等比例放大直至填充屏幕留空位置,也就是放大到尺寸和屏幕一致,让屏幕不留空
2.RectTransform
RectTransform继承自Transform,是所有UI元素都有的组件,由于是平面的,Scale的z轴是没有用,而Rotation的y有用,一般用来做3D效果的UI
Pivot:中心点,可以设置UI元素中心点的位置,中心点是一个蓝色圆环形状
Anchors:锚点,它是以自身UI元素的父容器为基准的,锚点不能移出父容器区域外,由4个三角形组合成
UGUI的坐标系:
锚点的两种情况:
- 让我们来看第一种情况,锚点是合在一起的,即4个三角形顶点相对,UI元素可以根据锚点移动
PS:这个锚点和中心点是白色图片的,图片的父物体是一个Panel
这种情况下,设置图片的位置,它会以自身锚点的位置为原点,以中心点为基准来进行偏移,比如把图片位置设置为0,那么图片中心点会与锚点重合
也就是说,锚点在哪里,中心点根据锚点位置通过设置Pos X Pos Y来移动
- 接下来是第二种情况,锚点是分开的,可以是4个三角形分开,可以是两两组合
这种是两两组合:上下是粘连在一起的,左右分离,此时宽度由锚点决定,通过设置Left和Right,而高度依然是由Height来设置
把Left、Right、Pos Y 依次归零会发现,图片的左边会和左边的锚点对齐,也就是图片的左边与锚点的间距为0个像素,右边会和右边的锚点对齐,也就是图片的右边与锚点的间距为0个像素,y归0后,中心点所在的水平线会和锚点所在的水平线对齐.
那么另一种两两组合的情况也是一样的:左右粘连,上下分离,此时高度由锚点决定,通过设置Top和Bottom,意思就是上边距离上锚点的距离,下边距离下锚点的距离,而宽度依然是由Width来设置.
如果是4个三角形都分开的情况呢?相信各位都知道怎么回事了吧,那么就是变成Left、Right、Top、Bottom,而这是4个值和上面的没有区别,都是一样的意思;此时图片的位置x,y轴都由锚点的位置来决定,图片的宽,高则由4个锚点的之间的距离来决定,那么中心点就没有那么重要了,这4个值的单位是像素