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)。这个功能会让锚点和中心点值改变时不引起其它值的变化。这可能会导致矩形框移动或大小的改变,因为它的位置和大小是与锚点和中心点值相关的。

Unity新UI系统概述——Rich Text

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

全面理解 Unity UI 系统

随着 Unity 4.6 发布,新 UI 系统终于与大家见面了。这篇文章将不会介绍如何使用按钮、滚动条之类的UI控件,这些内容可以参考 Unity Manual;这篇文章的重点是,如何理解 UI 系...
  • book_longssl
  • book_longssl
  • 2015年01月04日 20:31
  • 3342

Unity3d 5 官方教程:UI

UI UI系统允许用户迅速且直观地创建用户界面。本篇是对Unity的UI系统主要特性的介绍。 相关教程:用户界面CanvasCanvas是所有UI元素应当存放于内的区域。Canvas是一个有Can...
  • u010930289
  • u010930289
  • 2016年07月17日 16:54
  • 10584

【Unity】新的UI系统技巧

从Unity4.6开始,集成了新的UI系统。这篇文章将记录新的UI系统的一些使用技巧,内容将不断增加~~~ 1)给人物加血条效果 把血条的sprite的anchors都设置为0;假设3d摄像机对象为c...
  • stalendp
  • stalendp
  • 2015年01月11日 23:46
  • 8339

Unity新UI系统概述——Auto Layout

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

Unity新UI系统概述——Canvas

Canvas是用来放置所有UI元素的地方。Canvas是一个含有Canvas组件的GameObject,所有的UI元素必须是这样一个Canvas的子对象。 如果场景中还没有Canvas对象,新创建U...
  • u014630768
  • u014630768
  • 2014年11月27日 20:17
  • 3697

Unity UI(十):UI布局组(Layout Group)

Horizontal Layout Group——水平布局组         布局元素水平方向由左至右进行排列布局。 1、padding——页边距,即布局组四周与布局元素之间的间距; 2、Spa...
  • wkhabc
  • wkhabc
  • 2016年09月13日 11:13
  • 2661

Easy Ui Layout控件

EasyUi
  • sinat_28729797
  • sinat_28729797
  • 2015年08月21日 22:51
  • 327

Unity新UI系统概述——Visual Components

有新的组件和游戏对象增加到UI系统中,它们可以用来简化创建和完成特定GUI功能。本章会讲解这些游戏对象的基本功能。 Text(文本) Text组件(也可以用作Label),含有一个可以显示...
  • u014630768
  • u014630768
  • 2014年11月27日 20:34
  • 880

Unity新UI系统概述——Animation Integration

动画允许使用Unity的动画系统为控件状态转换进行完全的动画控制。这是转换模式最强大的地方,因为大量的属性可以被动画同时控制。 为了使用动画转换模式,需要添加Animator组件并生成相应的控制...
  • u014630768
  • u014630768
  • 2014年11月28日 23:36
  • 1366
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Unity新UI系统概述——Basic Layout
举报原因:
原因补充:

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