Unity新UI系统概述——Basic Layout

翻译 2014年11月27日 20:22:32

这个章节中我们来看看你应该如何将UI元素放置到相对于Canvas和其它元素的位置上。如果你想在阅读的时候测试效果,你可以用菜单GameObject->UI->Image创建一个UI。

The Rect Tool(矩形工具)

为了布局方便,每个UI元素都用一个矩形来表示。这个矩形可以在场景窗口中用工具栏上的Rect Tool来操纵。这个矩形工具可以用于Unity 2D模式和UI,事实上也可以用于3D对象。


矩形工具可以用来移动、缩放和旋转UI元素,这些都集中在这个工具上。一旦你选择了一个UI元素,你可以点击矩形内部任何位置并拖动来移动它。你可以点击边或角并拖动来缩放它。将鼠标在稍微远离角点的位置移动直到指针变成了旋转符号时就可以旋转UI元素。然后你可以点击并在任何方向上拖动来旋转。

就像其它工具一样,矩形工具使用当前在工具栏上设置的中心点和空间模式。当设置UI时,设置为Pivot和局部空间是比较合适的。


Rect Transform(矩形变换)

Rect Trasform是UI元素专用的组件,不同于一般的Transform组件。


就像一般的Transform组建一样,Rect Transform含有位置、旋转和缩放,但是它也有专门用于矩形尺寸的宽度和高度。

Resizing VS Scaling(调整大小VS缩放)

当矩形工具用于改变对象的大小时(一般是在2D系统或者3D对象),它将会改变对象的local scale。但是当用于Rect Transform时,它就是用来改变宽和高,而不会影响local scale。这种改变大小不会影响到字体的大小或切片图像的边界等等。

Pivot(中心点)

旋转、调整尺寸和缩放修改都是围绕着中心点进行的,因此中心点的位置会影响到旋转、调整尺寸或缩放的最后结果。当工具栏上的中心点按钮被设置到Pivot模式时,矩形变换的中心点就可以在场景窗口中移动。

Anchors(锚点)

矩形变换包含了一个布局的概念,叫做锚点。锚点在场景窗口中显示为4个小三角形的权柄,而锚点信息显示在观察窗口中。

如果矩形变换的父对象也是一个矩形变换,子对象就可以用多种方式锚在父对象上。例如,子对象可以锚在父对象的中心或者一个角点上。


UI元素锚在父对象的中心。元素会相对于重心保持一个固定的偏移值。


UI元素锚在父对象的右下边。元素就会相对于右下角保持一个固定的偏移。

锚点也允许子对象和父对象的宽或高一起伸缩。矩形的每一个角都会跟它关联的锚点保持一个固定偏移量,例如矩形左上角相对于左上的锚点有固定偏移,等等。这样,矩形不同的角可以锚在父对象矩形的不同位置上。

UI元素的左边角点锚在父对象的左下角而右边的角点锚在父对象的右下角。元素的角跟它们各自的锚点保持者固定的距离。

 

锚点的位置用父对象矩形宽和高的小数(或百分比)来定义。0.0(0%)对应左边或下边,0.5(50%)对应着中间,而1.0(100%)表示右边或上边。但是锚点并不限于边上或中间;他们可以锚在父对象矩形内的任意位置。

左边锚在离父对象左边一定百分比位置的锚点上,右边锚在离父对象右边一定百分比的锚点上。

 

你可以单独拖动每一个锚点,或者点击它们的中间来一起拖动。如果你拖动的时候按住Shift,相关联的UI元素也会跟着一起移动。

锚点权柄一个有用的特点是它可以自动吸附到相邻矩形的锚点上,方便精确对位。

预设锚点

在观察窗口中,可以在Rect Transform组件的左上角找到锚点预设按钮。点击按钮后会出现锚点的预设下拉列表。在这里,你可以从大多数通用的锚点选项中快速选择。你可以锚定UI元素到父对象的边上或中间,或者和父对象一起伸缩。水平和垂直的锚点是独立的。

锚点预设按钮会显示当前选择的预设选项。如果锚点在设置的值在水平或垂直轴上和所有预设的都不同,就会显示为自定义(Custom)。

观察窗口中的锚点和位置域

展开Anchors的按钮就可以看到锚点的数值。Min表示场景窗口中锚点权柄的左下值,而Max关联的是右上值。

矩形的位置域会根据锚点是否在一起显示不同的值。

如果所有的锚点在一起,会显示为Pos X, Pos Y, Width和Height。PosX和PosY值指示出中心点相对于锚点的位置。

当锚点是分离的,会部分或全部显示为Left, Right, Top和Bottom。这些域定义了矩形离锚点的空当。如果锚点水平分开,Left和Right就会显示出来,如果是垂直分离,Top和Bottom就会显示出来。

注意:如果改变了锚点或者中心点域中的值,一般都会反向更新位置值。如果你不希望出现这个变化,可以使用观察窗口中的小按钮来开启原始模式(Raw Mode)。这个功能会让锚点和中心点值改变时不引起其它值的变化。这可能会导致矩形框移动或大小的改变,因为它的位置和大小是与锚点和中心点值相关的。

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Unity4.6新UI系统初探(uGUI)

原文:https://github.com/jareguo/unity-ugui/tree/master/overview 引言 Unity终于在即将到来的4.6版本内集成了所见即...
  • jjiss318
  • jjiss318
  • 2015年02月03日 13:04
  • 10116

Unity UI框架开发(1)--框架介绍

学习知识,分享知识。 记录下自己经常使用的这个UI框架。首先说下这个UI框架整体吧,该框架主要实现了UI的的显示、隐藏、按钮点击、UI数值更新,这也是大多数游戏UI的功能。 该框架主要分三个部分来理解...
  • chy_xfn
  • chy_xfn
  • 2016年10月16日 16:45
  • 1730

[UnityUI]使用UI框架

现在,网上流传着三种unity的UI框架: 1. 教程:http://blog.csdn.net/Fredomyan/article/details/46879203 github地址:https:/...
  • lyh916
  • lyh916
  • 2015年11月20日 18:05
  • 6988

[UnityUI]UGUI的事件系统

官方文档链接:http://docs.unity3d.com/460/Documentation/Manual/SupportedEvents.html Supported Events The Ev...
  • lyh916
  • lyh916
  • 2015年03月23日 21:37
  • 6955

Unity新UI系统概述——Auto Layout

Rect Transform拥有的布局系统对于各种类型的布局是足够灵活的,并且它也可以让你自由放置元素。但是,有时候更多结构化的东西是需要的。 自动布局系统提供了在嵌套布局组(如水平组、竖直组或者格子...

Unity新UI系统概述——Rich Text

UI元素和text meshes的文本可以混合使用多种字体风格和大小。新的和旧的UI系统都支持富文本。Text,GUIStyle和TextMesh类都有用于指示Unity查询文本内部标记标签的富文本设...

Unity新UI系统概述——Interaction Components

这个章节会讲解UI系统中能用鼠标或触摸进行交互,还有用键盘或控制器交互的组件。 可选组件的基本类型 所有可交互的组件都有一些共通的地方。他们都可以被选中,这意味着他们有共享的内建功能,这些功能用于不同...

Unity新UI系统概述——Animation Integration

动画允许使用Unity的动画系统为控件状态转换进行完全的动画控制。这是转换模式最强大的地方,因为大量的属性可以被动画同时控制。 为了使用动画转换模式,需要添加Animator组件并生成相应的控制...

Unity新UI系统概述——Visual Components

有新的组件和游戏对象增加到UI系统中,它们可以用来简化创建和完成特定GUI功能。本章会讲解这些游戏对象的基本功能。 Text(文本) Text组件(也可以用作Label),含有一个可以显示...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Unity新UI系统概述——Basic Layout
举报原因:
原因补充:

(最多只允许输入30个字)