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

image.png
image.png
image.png

2.RectTransform

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


image.png

UGUI的坐标系:


image.png

锚点的两种情况:

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

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


image.png

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

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

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

    那么另一种两两组合的情况也是一样的:左右粘连,上下分离,此时高度由锚点决定,通过设置Top和Bottom,意思就是上边距离上锚点的距离,下边距离下锚点的距离,而宽度依然是由Width来设置.
    如果是4个三角形都分开的情况呢?相信各位都知道怎么回事了吧,那么就是变成Left、Right、Top、Bottom,而这是4个值和上面的没有区别,都是一样的意思;此时图片的位置x,y轴都由锚点的位置来决定,图片的宽,高则由4个锚点的之间的距离来决定,那么中心点就没有那么重要了,这4个值的单位是像素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容