UGUI笔记1-Canvas

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显示在前
UGUI笔记1-Canvas_第1张图片
image.png
  • Screen Space - Camera:UI元素位置和摄像机有关,离摄像机前面有一定距离,
     这种模式下没有摄像机的话,和第一种效果一样(如下图,它会提示你要指定一个摄像机);指定摄像机后,3D物体就可以显示在UI元素的前面,需要先调Plane Distance(Canvas与摄像机的距离),然后在调3D物体的位置,让它处于摄像机与Canvas之间,就可以显示于UI元素之上
    Plane Distance:单位是米
    Sorting Layer:位于下面的选项显示在前,显示位置优先由这个选项决定,如果选项一样,再由Z轴决定,同Layer还可调Order in Layer来调显示顺序
UGUI笔记1-Canvas_第2张图片
image.png
UGUI笔记1-Canvas_第3张图片
image.png
  • World Space : 纯三维UI,Canvas可以随意旋转移动,和3D物体一样
UGUI笔记1-Canvas_第4张图片
image.png

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元素都不会变化

    image.png

  • 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元素等比例放大直至填充屏幕留空位置,也就是放大到尺寸和屏幕一致,让屏幕不留空

UGUI笔记1-Canvas_第5张图片
image.png
image.png
image.png

2.RectTransform

RectTransform继承自Transform,是所有UI元素都有的组件,由于是平面的,Scale的z轴是没有用,而Rotation的y有用,一般用来做3D效果的UI
 Pivot:中心点,可以设置UI元素中心点的位置,中心点是一个蓝色圆环形状
 Anchors:锚点,它是以自身UI元素的父容器为基准的,锚点不能移出父容器区域外,由4个三角形组合成


UGUI笔记1-Canvas_第6张图片
image.png

UGUI的坐标系:


UGUI笔记1-Canvas_第7张图片
image.png

锚点的两种情况:

  • 让我们来看第一种情况,锚点是合在一起的,即4个三角形顶点相对,UI元素可以根据锚点移动
    PS:这个锚点和中心点是白色图片的,图片的父物体是一个Panel
    UGUI笔记1-Canvas_第8张图片
    image.png

这种情况下,设置图片的位置,它会以自身锚点的位置为原点,以中心点为基准来进行偏移,比如把图片位置设置为0,那么图片中心点会与锚点重合


UGUI笔记1-Canvas_第9张图片
image.png

也就是说,锚点在哪里,中心点根据锚点位置通过设置Pos X Pos Y来移动

  • 接下来是第二种情况,锚点是分开的,可以是4个三角形分开,可以是两两组合
    这种是两两组合:上下是粘连在一起的,左右分离,此时宽度由锚点决定,通过设置Left和Right,而高度依然是由Height来设置
    UGUI笔记1-Canvas_第10张图片
    image.png

    把Left、Right、Pos Y 依次归零会发现,图片的左边会和左边的锚点对齐,也就是图片的左边与锚点的间距为0个像素,右边会和右边的锚点对齐,也就是图片的右边与锚点的间距为0个像素,y归0后,中心点所在的水平线会和锚点所在的水平线对齐.
    UGUI笔记1-Canvas_第11张图片
    image.png

    那么另一种两两组合的情况也是一样的:左右粘连,上下分离,此时高度由锚点决定,通过设置Top和Bottom,意思就是上边距离上锚点的距离,下边距离下锚点的距离,而宽度依然是由Width来设置.
    如果是4个三角形都分开的情况呢?相信各位都知道怎么回事了吧,那么就是变成Left、Right、Top、Bottom,而这是4个值和上面的没有区别,都是一样的意思;此时图片的位置x,y轴都由锚点的位置来决定,图片的宽,高则由4个锚点的之间的距离来决定,那么中心点就没有那么重要了,这4个值的单位是像素

你可能感兴趣的:(UGUI笔记1-Canvas)