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. ceph客户端配置自动挂载存储服务

    1. 安装支持ceph的内核模块 可选: centos/ubuntu: yum install -y ceph-common 或 apt install -y ceph-common 2. 拷贝认证密 ...

  2. mysql binlog故障演练

    mysql备份恢复 mysqldump备份 企业故障恢复案例: 正在运行的网站系统 mysql数据库 数据量25G,日业务量10-15M 备份策略: 每天晚上23点通过计划任务调用mysqldump执 ...

  3. 构建X264 .a 静态库 For iOS

    一.构建X264准备 1.下载X264源代码到本地,并解压.修改文件夹名称为x264 ftp://ftp.videolan.org/pub/x264/snapshots/ 2.下载gas-prepro ...

  4. Java中File类和I/O

    目录 File 类 File 构造方法 输入输出(I/O) 字节流与字符流 输入流与输出流 输入输出字节流 构造方法 方法 InputStream 基本方法 public int read() thr ...

  5. 状态管理(redux)

    https://www.redux.org.cn/ 2013年 Facebook 提出了 Flux 架构的思想,引发了很多的实现.2015年,Redux 出现,将 Flux 与函数式编程结合一起,很短 ...

  6. CF Round 881 (Div. 3)

    CF Round 881 (Div. 3) Div. 3 果然简单,虽然但是,我还是有 1 道题没有想出来. A.Sasha and Array Coloring 排序双指针向内即可. https:/ ...

  7. 剑指Offer-67.剪绳子(C++/Java)

    题目: 给你一根长度为n的绳子,请把绳子剪成整数长的m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m ...

  8. C#.NET MySql8.0 EF db first

    .net framework 4.5.2,winform 程序. mysql 8.0 1.nuget中引用EntityFramework,6.4.4 2.nuget中引用MySql.Data.Enti ...

  9. mac os 10.15.1 懒人 .CDR

    链接:https://pan.baidu.com/s/1MHbUnHWQuGVE1P36mTjmkQ 提取码:ohlu

  10. Vue 3深度探索:自定义渲染器与服务端渲染

    title: Vue 3深度探索:自定义渲染器与服务端渲染 date: 2024/6/14 updated: 2024/6/14 author: cmdragon excerpt: 这篇文章介绍了如何 ...