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. .net Core中实现SHA加密

    #region 用SHA1加密字符串 /// <summary> /// 用SHA1加密字符串 /// </summary> /// <param name=" ...

  2. 【终极指南】使用Python可视化分析文本情感倾向

    本文分享自华为云社区<Python理解文本情感倾向的终极指南>,作者: 柠檬味拥抱. 情感分析是一种通过自然语言处理技术来识别.提取和量化文本中的情感倾向的方法.Python在这一领域有着 ...

  3. itest(爱测试) 开源接口测试,敏捷测试管理平台10.1.0发布

    一:itest work 简介 itest work 开源敏捷测试管理,包含极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试,接口Mock,还有压测 ,又有丰富的统计分析,8合1工作站.可按 ...

  4. 在 TypeScript 中,extends

    extends 是一个关键字,用于指定类型参数的约束.它在类型参数的声明中使用,以确保类型参数满足特定的条件. 具体来说,extends 后面可以跟随一个类型,表示类型参数必须是该类型的子类型.在泛型 ...

  5. CF1900D - Small GCD 题解

    1900D - Small GCD 给定序列 \(A\),定义 \(f(a, b, c)\) 为 \(a, b, c\) 中最小的次小的数的 \(\gcd\),求: \[\sum_{i = 1}^n ...

  6. Linux扩展篇-shell编程(五)-流程控制(四)-while语句

    基本语法: while [ condition ] do statement done 或 while [ condition ]; do statement done 注意事项: 实践:

  7. SonarQube代码质量扫描工具

    1.什么是SonarQube 既然是学习devops 运维流水线构建 开发 ↓ 测试 ↓ 运维 华为devops软件开发流水线文档 https://support.huaweicloud.com/re ...

  8. mysql报错 a foreign key constraint fails(外键约束错误)

    报错信息如下: (pymysql.err.IntegrityError) (1452, u'Cannot add or update a child row: a foreign key constr ...

  9. javascript 生成器和迭代器

    前置知识 生成器函数会返回一种称为Generator的迭代器 迭代器是一个对象,定义一个序列,并在终止时返回一个返回值 Symbol.iterator为每一个对象定义了默认的迭代器,可以被for..o ...

  10. 5分钟带你了解RabbitMQ的(普通/镜像)集群

    前言 让我们深入探讨RabbitMQ的集群配置,了解各种集群模式的利弊.本次讨论的重点是帮助您快速理解RabbitMQ集群的运作方式,以及选择最适合您需求的模式.好的,话不多说.在RabbitMQ中, ...