IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> Unity UGUI 之Rect Transform(一) -> 正文阅读

[游戏开发]Unity UGUI 之Rect Transform(一)

敝人最近刚刚学到Unity的UGUI,横在面前的第一座大山就是每个控件必备的Rect Transform组件。因此在此总结整理下自己对它的理解,侧重点是对它实现原理的理解。

为了统一说法,下面对三维空间中的gameObject称为“物体”;UI层面的gameObject称为“控件”;控件挂载的脚本称为“组件”;说明父子关系时,把子控件称为“元素”;

1. 为什么用Rect Transform,而不用Transform了呢?

因为Transform里只有物体的位置信息,没有大小信息。不是说Unity不想把大小信息存进去,而是没办法。因为三维物体的形状是任意的,比如立方体、球体、胶囊体等等。不方便统一表示。而对于UI来说,所有的控件都是二维矩形,只有长和宽两个参数,这使得把控件大小信息表示出来成为可能。于是干脆就采用“矩形变换”来表示,实现了对控件长宽的控制。

在我看来,UGUI里的基本控件是空控件、文本框、图片这三种矩形区域。加上特效、交互组件、布局组件即可组合成各种控件。

这里我也顺带查了下为啥图片都是矩形的,一种说法是古往今来的纸张、胶片都是矩形的(为了不产生裁切废料),数码相机感光原件、显示器也是矩形的。这些记录、显示图片的装置是矩形的,那图片也就一直是矩形了。即便是VR场景,也是生成一张矩形全景图。不过随着VR设备的应用普及,是否会产生球形摄影、存为球形图片、然后必须在VR设备中进行720°的观看和编辑的情况呢?这部分暂时没时间去了解,先不深究了。

?

不同于Transform组件,Rect Transform表示控件位置只有相对位置这一种表示方法。这是因为,Unity规定了UI控件必须是Canvas的子控件才能被渲染,也就是所有控件都有父控件,直接用相对父控件的位置表示就可以了。

控件作为一个矩形,想同时确定它的尺寸和位置,可以有两种方法,也就是Rect Transform的两种形式:

  • 长、宽值+中心点位置
  • 确定了位置的、两条水平+两条竖直的直线

?

2. 表示控件尺寸、位置的5组基本特征——锚点Anchors、中心点Pivot、相对坐标Pos(X,Y,Z)、长和宽Weith/Height、四个偏移(Left/Right,Top/Bottom)

(1)锚点

锚点是父控件上的参考区域,用Min(X,Y)和Max(X,Y)两个点来表示。

其实叫锚点不太合适,应该叫“锚框”,因为Min和Max两个点确定的是一个矩形框。这个框框住了父控件的部分区域。

Min点是框的左下角,Max点是右上角。X,Y的取值范围是0~1,代表其在父控件长和宽方向的相对位置。

(2)中心点

中心点是子控件的代表点,默认位于子控件的中心,即(0.5,0.5)位置。

也许会在某些情况下,为了方便计算把它调整到子控件的四角上。

当然它也是控件旋转Rotation和缩放Scale的中心,但控件的旋转和缩放功能我暂时没用到。

(3)相对坐标

Poz?(X,Y)表示子物体中心点到锚点的相对位置坐标。

Pos Z似乎没什么用,默认是0,也就是在Canvas平面上。尝试改变z值使其不在Canvas上,不管Canvas是什么Render Mode,都不会对控件的渲染顺序造成影响。也就是说,UI的渲染顺序就是按照Hierarchy面板中所有层级完全展开时,先上后下的顺序渲染,与空间中离相机远近没有关系。

(4)长和宽

这个不用多说,就是矩形的长和宽。上面的坐标确定位置,长和宽确定尺寸,矩形就被唯一确定了。

(5)四个偏移

我叫它们左偏移Left、右偏移Right、上偏移Top、下偏移Bottom。表示子控件四边到父控件四边的距离。

父控件的四条边确定时,只要给出四个偏移,就可以得到确定的子控件了。

3. 使用场景

根据锚点形式的不同,Rect Tranform组件会变换表现形式。

  • 当锚点是一个“点”时,即Min和Max重合,用长、宽值+中心点位置;锚点就是子控件的(0,0)点。

  • 当锚点是条“横线”时,Poz X会变成Left;Weidth会变成Right;

发生这种变化的原因大概是:这种锚点组合意味着子控件会随着父控件水平拉伸,继续用Pos X和Weidth的话,会发生操作父控件,子控件Rect Transform数值改变的情况。为了保证相对坐标值的稳定,所以换了坐标表示形式。

  • 当锚点是条“竖线”时,Poz Y会变成Top;Height会变成Bottom;

  • 当锚点是“锚框”时,四个都变。

需要注意的是,当控件的左偏移+右偏移>父物体宽度时,也就是左边比在右边的右侧时。。控件会无法显示,出现一个红X。

4. Unity内置的一键快捷设置

(1)只设置锚点(黄色点):9个“点”模式,6条“线”模式,1个“面”模式。

(2)按Alt,出现7种“拉伸”控件模式

(3)按shift,同时设置中心点(蓝色点)

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2021-08-04 11:32:18  更:2021-08-04 11:33:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/6 11:10:00-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码