UGUI技术之基本布局使用_Unity3D开发_蓝鸥

【uGUI】基本布局

文/宋小波啊(作者)

本节我们来学习如何相对 Canvas 和其他元素来布局我们的 UI。我们可以先创建一个 Image 用来测试,在 GameObject 菜单中选择 UI -> Image 来创建。

Rect 工具

每个 UI 元素都会用一个矩形表示,这样方便布局。在工具栏中选择 Rect 工具之后,我们就能在 Scene 视图中操作这个矩形。Rect 工具既能用于 Unity 中的 2D 物体和 UI 系统,对 3D 物体也同样能够使用。

选择工具栏中的 Rect 工具

Rect 工具能够移动、缩放、旋转 UI 元素。一旦选择了一个 UI 元素,我们就可以点击矩形内任意位置进行拖拽,来移动 UI 元素。我们也可以点击并拖动矩形的边界或者四个角,来调整元素的大小。把鼠标停留在稍微远离矩形的四个角的位置,鼠标光标会变成一个旋转的图标,然后我们可以单击并拖拽,进行任意方向上的旋转。

和其他工具一样,Rect 工具需要使用当前元素的中心点和局部坐标,我们需要在工具栏中进行设置。当我们需要对 UI 进行操作时,最好先设置成 Pivot 和 Local。

在工具栏中设置 Pivot 和 Local

RectTransform 组件

RectTransform 是一个新的 Transform 组件,它用于所有的 UI 元素,和常规的 Transform 组件不一样。

RectTransform 组件

RectTransform 拥有常规 Transform 中的 Position、Rotation 和 Scale 属性,也拥有一个 Width 和 Height 属性,用于确定矩形的大小。

1、调整尺寸或比例

当我们使用 Rect 工具改变对象大小时,对于 2D 精灵和 3D 对象来说,会改变对象的 LocalScale,但是当它用于一个 RectTransform 对象时,会直接改变宽度和高度,保持 LocalScale 不变。这样就不会影响字体大小、Sliced 图片的边界等。

2、Pivot - 枢轴点

Pivot 的位置会影响旋转、大小调整和缩放的效果。当我们在工具栏中设置为了 Pivot 模式时,就可以在 Scene 视图中移动 RectTransform 的 Pivot。

绕 Pivot 旋转

3、Anchors - 锚点

RectTransform 引入了锚点这个布局概念。锚点在 Scene 视图中显示为四个小三角形手柄,并且锚点的信息会在 Inspector 视图中显示。

如果 RectTransform 的父对象也是一个 RectTransform,子对象可以以各种方式锚定到父对象。例如,将子对象锚定到父对象的中心,或者某个角。

UI 元素的锚点设置在父对象的中心之后,该元素距离中心保持固定的偏移量

UI 元素锚定到父对象的右下角,该元素距离父对象的右下角保持固定的偏移量

锚定了之后,子对象也可以随着父对象宽高的变化一起伸缩。矩形的每个角到对应的锚点都有固定偏移量,也就是说,矩形的左上角到左上方锚点的偏移量是固定的。这样,矩形的不同角就能够锚定在父矩形中的不同点。

UI 元素左边的角锚定在父对象的左下角,右边的角锚定在父对象的右下角,该元素的每个角到各自的锚点都是固定的距离

锚点在父矩形宽高方向上的位置定义出了一个百分比,0% 对应左侧或底部,50% 对应中间,100% 对应右侧或顶部。但锚点并不只限定于两边或中间,它们可以锚定在父矩形内任意一点。

UI 元素将左侧顶点锚定到距离父对象左边某个百分点,右侧顶点锚定到距离父对象右边某个百分点

我们可以分别拖动每一个锚点,或者,如果它们在一起的话,我们可以点击并拖拽它们的中间整体移动他们。如果我们拖拽锚点的同时按下 Shift 键,UI 元素矩形上相应的角会一起移动。

锚点另外一个方便的功能就是,他能够和 UI 元素同级的矩形锚点自动对齐,方便精确定位。

4、Anchor Presets - 预设锚点

在 Inspector 视图中,我们可以点击 RectTransform 组件左上角的预设锚点按钮打开预设锚点。里面包含了一些最常用的锚点选项,我们可以选择一个快速设置锚点。我们可以将锚点设置到父对象的边上或者中心,或者随着父对象的大小变化进行伸缩。可以分别设定水平方向和垂直方向的锚点。

预设锚点

预设锚点面板会显示当前所选的锚点预设值,如果当前的锚点设置在面板中存在的话。如果锚点在水平轴和垂直轴上的位置同预设位置都不一样,会显示为自定义锚点。

5、Inspector 视图中的锚点和位置属性

在 Inspector 视图中我们能够找到锚点的属性设置,如果没有的话,点击 Anchor 前的扩展箭头展开属性。Min 属性对应的是场景视图中锚点的左下方,Max 属性对应的是右上方。

Position 属性的显示会根据锚点位置的不同而发生变化,如果锚点都在一块会产生固定的宽度或高度,如果锚点分开会使矩形随父矩形一起伸缩。

RectTransform 组件

当所有的锚点在一起时,会显示 PosX、PosY、Width 和 Height 属性。PosX 和 PosY 的值是 Pivot 相对于锚点的位置。

当锚点分开时,属性会有一部分变为 Left、Right、Top 和 Bottom,这些属性根据锚点定义出矩形的大小和位置。锚点被水平分离时会出现 Left 和 Right 属性,垂直分离时会出现 Top 和 Bottom 属性。

需要注意的是,改变 Anchor 或 Pivot 属性的值通常将反向调整 Position 的属性值,这样能够使矩形停留在原本的位置上来改变锚点或 Pivot。如果我们希望在改变属性值的时候矩形也会同步发生变化,那么我们可以选择 Raw 模式(选中右边的 R 按钮),在 Raw 模式下会使锚点和 Pivot 的值在改变时不会改变其他属性的值,而是会使矩形本身的位置和大小发生变化。

时间: 2024-10-10 09:56:39

UGUI技术之基本布局使用_Unity3D开发_蓝鸥的相关文章

UGUI技术之Canvas-画布使用_Unity3D开发_蓝鸥

UGUI技术之Canvas-画布使用_Unity3D开发_蓝鸥 文/宋小波啊(作者) Unity 中有一个能够直观并且快速构建用户界面的 UI 系统,我们叫它 uGUI. uGUI 在 uGUI 中,Canvas 是一个挂载了 Canvas 组件的游戏对象,它划定了一个区域,用来容纳所有的 UI 元素,并且这些 UI 元素必须是 Canvas 的子对象. 当我们创建一个新的 UI 元素时,如果场景中还没有 Canvas,就会自动创建出一个 Canvas. Canvas 会在 Scene 视图中显

Unity 2D 终结手册 (1) (2) - 2D 项目+精灵_Unity3d开发

Unity 2D 终结手册 (1) - 2D 项目+精灵_Unity3d开发_蓝鸥 这篇系列文章主要介绍 Unity 2D 开发技术.包括 2D/3D 项目的区别.如何设置 2D/3D 模式.2D 开发中使用到的组件等. Unity 不止能够制作酷炫的 3D 游戏,同样也能够制作完美的 2D 游戏.使用 Unity 开发 2D 内容时,编辑器的大部分功能都是通用的,只不过有些功能为了简化 2D 开发,做了一些调整. (图 1)Unity 2D 游戏 在 Scene 视图上方的工具条中,有一个明显

Unity 2D 终结手册 (3) - 精灵编辑_Unity3d开发

Unity 2D 终结手册 (3) - 精灵编辑_Unity3d开发_蓝鸥 有时,一个精灵纹理(Texture)只包含一个精灵元素(Element),但是更常见的是,在一张图像中包含多个相关的精灵元素,这样使用起来会更方便.例如,在一张图像中可以包含一个角色身上的所有部位,或者包含一辆车的车轮.车身等.对于这样的图像资源,Unity 提供了一个方便的工具,能够快速地提取出里面的元素并让我们进行编辑,这就是精灵编辑器(Sprite Editor). 通过以下两个步骤打开精灵编辑器(Sprite E

微软借力.NET开源跨平台支持,布局物联网平台开发

今天科技类最大的新闻,莫过于微软宣布.NET开发框架开源计划..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之一的 IDE 正式支持编写 Android 和 iOS 程序 -- Visual Studio 和 .NET 真正开始走向跨平台化.Nadella 说的“移动为先,云为先”和“找到微软最初的本质”终于连成一线.(详情请参见相关新闻链接:http://www.cnbeta.com/articles/3

(转)微软借力.NET开源跨平台支持,布局物联网平台开发

今天科技类最大的新闻,莫过于微软宣布.NET开发框架开源计划..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之一的 IDE 正式支持编写 Android 和 iOS 程序 -- Visual Studio 和 .NET 真正开始走向跨平台化.Nadella 说的“移动为先,云为先”和“找到微软最初的本质”终于连成一线.(详情请参见相关新闻链接:http://www.cnbeta.com/articles/3

安卓开发_数据存储技术_sqlite

一.SQLite SQLite第一个Alpha版本诞生于2000年5月,它是一款轻量级数据库,它的设计目标是嵌入式的,占用资源非常的低,只需要几百K的内存就够了.SQLite已经被多种软件和产品使用 二.SQLite特性 1 2 1.轻量级 3 SQLite和C\S模式的数据库软件不同,它是进程内的数据库引擎,因此不存在数据库的客户端和服务器.使用SQLite一般只需要带上它的一个动态库,就可以享受它的全部功能.而且那个动态库的尺寸也相当小. 4 2.独立性 5 SQLite数据库的核心引擎本身

Xamarin技术文档------VS多平台开发

此技术业余时间研究,仅供大家学习参考,不涉及深入研究,有一定开发基础的人员,应该都能较快上手. 一.简介 Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单.Xamarin的产品简化了针对多种平台的应用开发,包括iOS.Android.Windows Phone和Mac App.Xamarin由许多著名的开源社区开发者创立和参与,而且也是Mono项目的主导者--C#与.NET框架的开源.跨平台实现. 作为一个跨平台开发框架,Xamarin.Mobile有很多优点.在这一框架内

分享基于Android系统的XMPP即时通讯技术项目实战(仿微信开发架构,自定义控件)

即时通讯技术是 网络技术中的明珠.即时通讯产品改变了人们的生活习惯.经过十几年的发展,即时通讯功能的应用也逐渐从专门软件才能实现的功能逐渐成为标准配置.即时通讯技术的应用不仅仅只是用于社交领域,在大多的协同工作领域,以及需要分布结构的网络通讯领域都是非常重要的.讲师本人在android领域有多年的开发经验,在即时通讯系统方面也有深入的研究.在本课程中,详细讲解了android开发中要解决的一些主要的问题,即时通讯在客户端实现的过程,并手把手的进行操作,方便学习和理解.因为课时的原因,对于一些初级

深入探索spring技术内幕(八): Spring +JDBC组合开发和事务控制

一. 配置数据源 <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"> <property name="driverClassName" value="org.gjt.mm.mysql.Driver"/> <property name="