| |
|
开发:
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组件会变换表现形式。
发生这种变化的原因大概是:这种锚点组合意味着子控件会随着父控件水平拉伸,继续用Pos X和Weidth的话,会发生操作父控件,子控件Rect Transform数值改变的情况。为了保证相对坐标值的稳定,所以换了坐标表示形式。
需要注意的是,当控件的左偏移+右偏移>父物体宽度时,也就是左边比在右边的右侧时。。控件会无法显示,出现一个红X。 4. Unity内置的一键快捷设置 (1)只设置锚点(黄色点):9个“点”模式,6条“线”模式,1个“面”模式。 (2)按Alt,出现7种“拉伸”控件模式 (3)按shift,同时设置中心点(蓝色点) |
|
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/28 12:13:32- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |