Unity入门学习日记(一)
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元素的调节,含有position、rotation、scale,也有用于调节矩形大小的width和height
2-3. 调节大小
使用矩形工具对于物体进行调节时,2D的Sprite和3D物体的scale都会发生改变
但是,如果使用矩形工具调整含有Rect Transform组件的物体,那将只会有width和height发生变化
这样的缩放不会影响字号、图片切片的边框等内容
普通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坐标,可以想象从一个点拉住右上角展开为矩形这样一个过程
位置属性的展现形式取决于锚点显示的形状
形状一:锚点的四个指针聚成一个点时,表示的是对应物体的尺寸大小恒定不变


位置对应的面板显示如上,显示当前的矩形长宽,该状态下恒定不变,即与父对象无关
剩下的PosX、PosY、PosZ表示的是相对于该对象自身的pivot的坐标
形状二:分开指针可以左右或者上下两两分开,也可以四个全分开,随父物体缩放而缩放


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


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


四个点分开,连起来正好是一个矩形,四个方向对应原对象的四边,表示相对于四边的位置
Inspector直接修改轴心与锚点会影响位置,右侧R键启用物体位置不变,否则自动调整位置
Unity入门学习日记(一)的更多相关文章
- Egret入门学习日记 --- 第四篇
第四篇(学习篇) 好了,今天继续把昨天的问题解决了. 今天见鬼了. 现在界面又出来了.唯一我动过的地方,应该就是这里: 是的,我点了一下刷新.之后,不管我怎么创建新的EXML文件,放在src目录,还是 ...
- Egret入门学习日记 --- 第十三篇(书中 5.2~5.3节 内容)
第十三篇(书中 5.2~5.3节 内容) 写日记已经十天多了,我发现越到后面,我书写的方式越来越程序化. 感觉渐渐失去了人类所谓的感情似的. 不过,没想到的是,书中的内容,很少出现了错误,我一路过来到 ...
- Egret入门学习日记 --- 第五篇(书中 3.5节 内容)
第五篇(书中 3.5节 内容) 今天得把昨天的问题解决了才行. 去了Q群,碰到一位大大,他给我解惑了.Thanks♪(・ω・)ノ 这是我之前按照书上写的方式写的,并没有效果. 然后大大给我解答了: 后 ...
- Egret入门学习日记 --- 第十八篇(书中 8.5~8.7 节 内容)
第十八篇(书中 8.5~8.7 节 内容) 其实语法篇,我感觉没必要写录入到日记里. 我也犹豫了好久,到底要不要录入. 这样,我先读一遍语法篇的所有内容,我觉得值得留下的,我就录入日记里. 不然像昨天 ...
- Egret入门学习日记 --- 问题汇总
问题1: 图片无法拖入到 EXML 文件的问题 在日记 第六篇 有记载:https://www.cnblogs.com/dmc-nero/p/11188975.html 位于 3.6节 内容. 问题2 ...
- Egret入门学习日记 --- 第十一篇(书中 4.1~4.6节 内容)
第十一篇(书中 4.1~4.6节 内容) 好了,到了这篇开始,前三章都记录完了. 接下来就是到第四章了. 4.1节 的内容总结一下重点: 1.resource目录下default.res.json文件 ...
- Egret入门学习日记 --- 第十篇(书中 2.9~2.13节 内容)
第十篇(书中 2.9~2.13节 内容) 好的 2.9节 开始! 总结一下重点: 1.之前通过 ImageLoader 类加载图片的方式,改成了 RES.getResByUrl 的方式. 跟着做: 重 ...
- Egret入门学习日记 --- 第八篇(书中 2.0~2.6节 内容)
第八篇(书中 2.0~2.6节 内容) 好!开始把前三章的内容录入进来. 但是!由于第一章说的内容都是在介绍白鹭引擎的背景信息,我就不在日记中写了. 直接开始从第二章写起. 2.0节 中提到了IDE( ...
- Egret入门学习日记 --- 第六篇(书中 3.6~3.9节 内容)
第六篇(书中 3.6~3.9节 内容) 在本篇写之前,还是要为昨天写的日记道歉才行,差点就误人子弟了. 没想到在程序员界最低级的错误 “单词拼写错误” 还是会经常犯. childrenCreated ...
- Egret入门学习日记 --- 第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容)
第二篇 (书籍的选择 && 书籍目录 && 书中 3.3 节 内容) 既然选好了Egret,那我就要想想怎么学了. 开始第一步,先加个Q群先,这不,拿到了一本<E ...
随机推荐
- .NET Core 中使用GBK GB2312编码报错的问题
错误描述 环境 dotnet core 2.1 2.2 dotnet core 3.1 dotnet core 5.0 现象 当代码中使用 System.Text.Encoding.GetEnco ...
- FreeRTOS例程开发
环境配置 下载官方源码 https://www.freertos.org/ 找到这个,他就是visual studio示例demo,我们主要在这个的基础上修改 下载visio studio https ...
- Android桌面Launcher源码浅析
在Android启动过程-万字长文(Android14)中介绍了Android系统的启动过程,本篇文章将继续介绍桌面应用Launcher. 一.Launcher介绍 在Android启动过程-万字长文 ...
- LVGL8文本框设置长文本会自动滚动到文本最后解决方法
在创建完成并设置完文本之后加一句 lv_obj_scroll_to_y(obj,0, LV_ANIM_OFF); 就可以了 原因:官方控件里面设置文本的接口里面设置文本后会设置一次光标位置到文本末尾, ...
- C#.NET 逐行读取TXT文本
C#.NET 逐行读取TXT文本 using System; using System.IO; class Program { static void Main() { string filePath ...
- nordic—RTC+PPI定时驱动某外设做非单次触发(本次测试为驱动GPIO口做电平翻转)
简介:在nordic的开发中使用到RTC时,对于比较通道0/1/2/3的中断来说,如果不进行相关配置(如SDK中例子,使用的RTC比较通道就只能触发一次,不能多次触发),会导致比较中断只进入一次,如果 ...
- golang 所有关键字的列表及释义归类
golang 所有关键字的列表及释义归类,截至1.18版本. [控制结构] if : 条件语句,基于布尔表达式的值决定是否执行特定的代码块. else. else if : 用在 if 语句 ...
- SQLite vs MySQL vs PostgreSQL对比总结
开发业务系统时,是绕不开RDBMS(关系型数据库)的.虽然现在诞生了各种NoSQL的数据库,RDBMS在业务系统中的严谨和优势依然无法取代. 近几年大大小小的项目中,常用的三种RDBMS(SQLite ...
- 关于java时间类型和格式化到微秒问题
常规的问题此处略,因为网络上到处都是,这里主要讨论三个问题: 1.数据库的时间戳类型(含微秒)对应java的什么类型 java的常见时间类型比较多: java.util.Date java.sql.D ...
- Vite-Wechat网页聊天室|vite5.x+vue3+pinia+element-plus仿微信客户端
基于Vue3+Pinia+ElementPlus仿微信网页聊天模板Vite5-Vue3-Wechat. vite-wechat使用最新前端技术vite5+vue3+vue-router@4+pinia ...