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. C#开发的股票盯盘小工具——摸鱼助手,附源码

    写了个盯盘小工具,最近发现很多炒股的小伙伴,上班期间看手机频繁是不是影响不好?电脑上打开交易软件,那影响是不是更不好?所以我就写了个小工具,给大家"摸鱼"用.虽然是摸鱼用,但是平常 ...

  2. itest(爱测试) 4.5.2 发布,开源BUG 跟踪管理 & 敏捷测试管理软件

    itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理4合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代(含任务, ...

  3. k8s——api

    api概述 api是k8s系统的重要部分,组件之间的所有操作和通信均由apiserver处理的rest api调用,大多数情况下,api定义和实现都符合标准的http rest格式,可以通过kubct ...

  4. CMake官网教程学习

    简介 本文档是根据CMake的官方教程学习的笔记,同时将教程中C++实现的代码更改为C语言实现.当前还未学习完. 教程官网:CMake Tutorial - CMake 3.27.0-rc1 Docu ...

  5. CF1838A-Blackboard-List

    题意简述 在黑板上有两个数字,进行如下操作 \(n-2\) 次: 每次在黑板上选择任意两个数,将两个数的差的绝对值写在黑板上. 这样你会得到一个长度为 \(n (3 \le n \le 100)\) ...

  6. FRDM-MCXN947开发板之i2c应用

    介绍 MCXN947 NXP FRDM-MCXN947开发板是一款基于MCXN947 MCU的低成本评估板,MCU集成了双核Arm Cortex-M33微控制器和一个神经处理单元(NPU).开发板由一 ...

  7. CF1016D

    problem & blog 构造题. 把从 \((1,1)\) 到 \((n - 1,m - 1)\) 的所有数变成 \(0\),这样从第 \(1\) 行到第 \(n - 1\) 行的最后一 ...

  8. 在线Bcrypt加密、验证工具

    在线bcrypt加密,bcrypt算法是一种密码哈希算法,它是基于Blowfish加密算法改进的,能够生成安全性很高的哈希值,并且可以通过调整计算时间来提高安全性.本工具支持在线Bcrypt加密及验证 ...

  9. Do not access Object.prototype method 'hasOwnProperty' from target object

    hasOwnProperty 判断对象是否为空 在使用 hasOwnProperty 判断对象是否为空时遇到了一下问题,总结一下 // Do not access Object.prototype m ...

  10. LiveCharts2:简单灵活交互式且功能强大的.NET图表库

    前言 之前的文章中提到过ScottPlot.与oxyplot,这两个是比较常用的.NET图表库,今天介绍一款新的.NET图表库:LiveCharts2. LiveCharts2介绍 LiveChart ...