UGUI的初步使用

1. Canvas

使用UI的时候,所有的UI元素都作为Canvas的子节点存在于Canvas中,如果创建UI元素时没有Canvas作为父节点,会自动生成一个Canvas,是一位“粘人的老父亲”,总是陪伴着孩子

1-1. 绘制顺序

既然是画布,那么绘制内容就像是绘画,如果发生重叠,先画的会被后画的盖住,“后来居上”,但是在目录中,后绘制的在下面

但是,可以通过调整同一级的组件的顺序来更改层次,这与PS中的图层概念类似,每一个UI元素是一层玻璃纸,显示出来的是将它们叠在一起的样子

2. 布局

2-1. 矩形工具

在UI的布局中,UI元素都是以矩形的方式显示的

在2D模式下,选中对应的UI元素,可以使用矩形工具对其进行操作

操作主要包括移动、缩放和旋转

对于特定的UI进行操作的时候,通常会将这两项进行如上调节

2-2. Rect Transform

主要用于UI元素的调节,含有positionrotationscale,也有用于调节矩形大小的widthheight

2-3. 调节大小

使用矩形工具对于物体进行调节时,2D的Sprite和3D物体的scale都会发生改变

但是,如果使用矩形工具调整含有Rect Transform组件的物体,那将只会有widthheight发生变化

这样的缩放不会影响字号、图片切片的边框等内容

普通Transform

改变大小,scale变化

Rect Transform

改变大小,scale不会受影响

2-4. Pivot

由于图片默认的规格为1单位,所以pivot所占的位置就是就是相对于矩形左下角的坐标

工具栏切换到pivot模式下可以调节pivot的位置

旋转、缩放等操作都是围绕着pivot展开的

2-5. Anchors

如果Rect Transform的父对象也是Rect Transform,那么子对象可以通过多种方式锚定在父对象上

对象的角和其对应方向的锚点会有固定的偏移量

锚点的位置通过对于父对象的宽高占比体现出来,左下角开始,锚点的位置可以在父物体的内部及边缘

按下shift移动锚点,对应的方向的矩形顶点会一起移动

2-6. 锚点预设

锚点预设的弹框中显示的都是一些常用的锚点选项,可以让子元素固定在父元素的边或中心上,也可以使子元素跟随父元素缩放

2-7. Inspector视图中的锚点和位置属性

锚点代表的实际上也是一个矩形区域,左下角的指针表示Min坐标,右上角的点表示Max坐标,可以想象从一个点拉住右上角展开为矩形这样一个过程

位置属性的展现形式取决于锚点显示的形状

形状一:锚点的四个指针聚成一个点时,表示的是对应物体的尺寸大小恒定不变

位置对应的面板显示如上,显示当前的矩形长宽,该状态下恒定不变,即与父对象无关

剩下的PosXPosYPosZ表示的是相对于该对象自身的pivot的坐标

形状二:分开指针可以左右或者上下两两分开,也可以四个全分开,随父物体缩放而缩放

将原来的分割为上下结构,实质上就是y方向现在有两个了,上面的是Top,下面的是Bottom,表示的值是相对于当前对象的上下两条边而言的

类似地,左右结构是x方向上分为LeftRight,对应原对象的上下两边取相对位置

四个点分开,连起来正好是一个矩形,四个方向对应原对象的四边,表示相对于四边的位置

Inspector直接修改轴心与锚点会影响位置,右侧R键启用物体位置不变,否则自动调整位置

UGUI官方文档

Unity入门学习日记(一)的更多相关文章

  1. Egret入门学习日记 --- 第四篇

    第四篇(学习篇) 好了,今天继续把昨天的问题解决了. 今天见鬼了. 现在界面又出来了.唯一我动过的地方,应该就是这里: 是的,我点了一下刷新.之后,不管我怎么创建新的EXML文件,放在src目录,还是 ...

  2. Egret入门学习日记 --- 第十三篇(书中 5.2~5.3节 内容)

    第十三篇(书中 5.2~5.3节 内容) 写日记已经十天多了,我发现越到后面,我书写的方式越来越程序化. 感觉渐渐失去了人类所谓的感情似的. 不过,没想到的是,书中的内容,很少出现了错误,我一路过来到 ...

  3. Egret入门学习日记 --- 第五篇(书中 3.5节 内容)

    第五篇(书中 3.5节 内容) 今天得把昨天的问题解决了才行. 去了Q群,碰到一位大大,他给我解惑了.Thanks♪(・ω・)ノ 这是我之前按照书上写的方式写的,并没有效果. 然后大大给我解答了: 后 ...

  4. Egret入门学习日记 --- 第十八篇(书中 8.5~8.7 节 内容)

    第十八篇(书中 8.5~8.7 节 内容) 其实语法篇,我感觉没必要写录入到日记里. 我也犹豫了好久,到底要不要录入. 这样,我先读一遍语法篇的所有内容,我觉得值得留下的,我就录入日记里. 不然像昨天 ...

  5. Egret入门学习日记 --- 问题汇总

    问题1: 图片无法拖入到 EXML 文件的问题 在日记 第六篇 有记载:https://www.cnblogs.com/dmc-nero/p/11188975.html 位于 3.6节 内容. 问题2 ...

  6. Egret入门学习日记 --- 第十一篇(书中 4.1~4.6节 内容)

    第十一篇(书中 4.1~4.6节 内容) 好了,到了这篇开始,前三章都记录完了. 接下来就是到第四章了. 4.1节 的内容总结一下重点: 1.resource目录下default.res.json文件 ...

  7. Egret入门学习日记 --- 第十篇(书中 2.9~2.13节 内容)

    第十篇(书中 2.9~2.13节 内容) 好的 2.9节 开始! 总结一下重点: 1.之前通过 ImageLoader 类加载图片的方式,改成了 RES.getResByUrl 的方式. 跟着做: 重 ...

  8. Egret入门学习日记 --- 第八篇(书中 2.0~2.6节 内容)

    第八篇(书中 2.0~2.6节 内容) 好!开始把前三章的内容录入进来. 但是!由于第一章说的内容都是在介绍白鹭引擎的背景信息,我就不在日记中写了. 直接开始从第二章写起. 2.0节 中提到了IDE( ...

  9. Egret入门学习日记 --- 第六篇(书中 3.6~3.9节 内容)

    第六篇(书中 3.6~3.9节 内容) 在本篇写之前,还是要为昨天写的日记道歉才行,差点就误人子弟了. 没想到在程序员界最低级的错误 “单词拼写错误” 还是会经常犯. childrenCreated ...

  10. Egret入门学习日记 --- 第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容)

    第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容) 既然选好了Egret,那我就要想想怎么学了. 开始第一步,先加个Q群先,这不,拿到了一本<E ...

随机推荐

  1. tab切换中嵌套swiper轮播

    今天在做官网的时候需要用到swiper多图轮播的功能,但是得嵌套在tab切换中,就在我把砖都搬完后,发现了个问题,就是我在进行tab切换后,发现原本设置的swiper的自动轮播竟然失效了,而且样式也是 ...

  2. 一周万星的文本转语音开源项目「GitHub 热点速览」

    上周的热门开源项目让我想起了「图灵测试」,测试者在不知道对面是机器还是人类的前提下随意提问,最后根据对方回复的内容,判断与他们交谈的是人还是计算机.如果无法分辨出回答者是机器还是人类,则说明机器已通过 ...

  3. Web 页面性能衡量指标-以用户为中心的效果指标

    Web 页面性能衡量指标-以用户为中心的性能指标 以用户为中心的性能指标是理解和改进站点体验的关键点 一.以用户为中心的性能指标 1. 指标是用来干啥的? 指标是用来衡量性能和用户体验的 2. 指标类 ...

  4. php基本语法与安装

            // 什么是PHP         //     PHP 是 后端语言的一种          //         主要作用就是实现数据交互          //          ...

  5. java 中 pop 和 peek 方法区别

    相同点:都返回栈顶的值. 不同点:peek 不改变栈的值(不删除栈顶的值),pop会把栈顶的值删除. 下面通过代码展现 /* * 文 件 名: TestPeekAndPopDiff.java */ i ...

  6. 不好分类的好题Record

    这里装的是一些不太好分类的. problem 1 给你 \(n\) 个序列,第 \(i\) 个序列的长度为 \(m_i\),要求在每个序列中选择一个数,每种选法的代价为选择的 \(n\) 个数之和,请 ...

  7. 基于服务器响应的实时天气数据进行JSON解析的详细代码及其框架

    #include <netinet/in.h> #include <arpa/inet.h> #include <stdio.h> #include <err ...

  8. python3读csv文件,出现UnicodeDecodeError: 'utf-8' codec can't decode byte 0xd0 in position 0: invalid con

    使用csv.reader(file)读csv文件时,出现如下错误:UnicodeDecodeError: 'utf-8' codec can't decode byte 0xd0 in positio ...

  9. SpringBoot3整合SpringDoc实现在线接口文档

    写在前面 在现目前项目开发中,一般都是前后端分离项目.前端小姐姐负责开发前端,苦逼的我们负责后端开发 事实是一个人全干,在这过程中编写接口文档就显得尤为重要了.然而作为一个程序员,最怕的莫过于自己写文 ...

  10. Bloom Filter布隆过滤器

    简介 本质上布隆过滤器是一种数据结构,比较巧妙的概率型数据结构(probabilistic data structure),特点是高效地插入和查询,可以用来告诉你 "某样东西一定不存在或者可 ...