Unity之新GUI系统介绍(1)
1、画布(Canvas)
每一个GUI控件必须是画布的子对象。当选择菜单栏中GameObject→UI下的命令来创建一个GUI控件时,如果当前不存在画布系统将会创建一个画布。
UI元素的绘制顺序依赖于它们在Hierarchy面板中的顺序。如果两个UI元素重叠,后添加的UI元素会出现在之前添加的元素的上面。如果要修改UI元素的相对顺序,可以通过在Hierarchy视图中拖动元素进行排序。对UI元素的排序也可以通过在脚本中调用Transform组件上的SetAsFirstSibling、SetAsLastSibling和SetSiblingIndex等方法来实现。
(1)Render Mode:渲染模式
- Screen Space-Camera:画布以特定的距离放置在指定的相机前,UI元素被指定的相机渲染,相机设置会影响到UI的呈现。
- Screen Space-Overlay:使画布拉伸以适应全屏大小,并且使GUI控件在场景中渲染与其他物体的前方。如果调整屏幕大小或改变分辨率,画布将会自动地改变大小以适应屏幕显示。
- World Space:该选项使画布渲染于世界空间。该模式使画布在场景中像其他游戏对象一样。可以通过手动调整它的Rect Transform来改变画布的大小,GUI控件可能会渲染于其他物体的前方或后方。
(2)使用Canvas Group组件(在Inspector视图中单击Add Component按钮后搜索Canvas Group添加)可以对UI元素进行分组,方便统一管理。
- Alpha:可调节该组UI元素的透明度
- Interactable:选项可控制该组件是否接受输入控制。
- Blocks Raycasts:选项控制该组件是否作为碰撞器 RayCasts。注意这不适用于Phycics.Raycast,当要处理Canvas上UI元素的Raycast时应调用绑定在Canvas上的Ghaphic Raycaster组件的Raycast方法。
- Ingore Parent Groups:用于控制是否忽略父对象上的Canvas Group设置。
在一个Unity工程中,对于所有GUI控件,一个画布已足够使用,但是在场景中组合使用多个画布也是可行的。用户也可以嵌套使用画布,即可使一个画布作为其他画布的子对象。一个嵌套的画布使用其父对象的渲染模式,是可以分别控制每一个画布的透明度。
2、Rect Transform(矩形变换)
Rect Transform(矩形变换)是一种新的变换组件,适用于在所有的GUI空间上来代替原有的变换组件。
矩形变换区别于原有变换的地方是在场景中Transform组件表示一个点,而Rect Transform表示一个可容纳UI元素的矩形,而且矩形变换还有锚点和轴心点的功能。
属性 | 功能 |
Pos(X,Y and Z) | 定义矩形相当于锚的准心点位置 |
Width/Height | 定义矩形的宽度和高度 |
Left,Top,Right,Bottom | 定义矩形的边缘相对于锚点的位置,锚点分离时会显示在Pos和Width/Height的位置 |
Anchors | 定义矩形在左下角和右上角的锚点 |
Min | 定义矩形左下角锚点。(0,0)对应父物体的左下角,(1,1)对应父物体右上角 |
Max | 定义矩形右上角锚点。(0,0)对应父物体的左下角,(1,1)对应父物体右上角 |
Pivot | 定义矩形旋转时围绕的中心点坐标 |
Rotation | 定义矩形围绕旋转中心点的旋转角度 |
Scale | 定义该对象的缩放系数 |
为了布局的目的一般建议调整UI元素的大小,而不是对其进行缩放(Scale)。调整UI元素的大小不会影响字体大小、切片图像的边界大小等。缩放(Scale)可用于动画的效果或其他特殊效果,缩放会作用于整个元素,包括字体和边框。给UI元素的Width或Height一个负值会让它们变成透明不可见,而将缩放值(Scale)设为负值则不会,所以缩放(Scale)可用于翻转对象。
3、在场景视图中编辑(Editing in the Scene View)
在Scene(场景视图)中使用矩形变换可以平移、缩放和旋转GUI控件。当用户选择了一个GUI控件后,按下T按键,用户可以在控件内任意位置单击并拖动来改变它的位置,也可以在控件的边角单击并拖动来改变它的大小;当鼠标悬浮在拐角附近光标变为一个旋转符号时,可以单击并朝任意方向拖动来旋转该控件。
4、锚点(Anchors)
矩形变换由一个锚点的布局概念。如果一个矩形变换的幅度向也是一个矩形变换,作为子物体的矩形变换可以通过多种固定在父物体的举行变换上。例如:子物体可以固定在父物体的中心点或某一拐角处;在固定锚点时也允许基于父对象的宽或高按指定的百分比拉伸。
在Scene(场景视图)中,锚点以四个三角形手柄的形式呈现。每个手柄都对应固定于相应的父物体的矩形的角。用户可以单独拖动每一个锚点,当它们在一起的时候,也可以单击它们的中心一起拖动它们。当按下【Shift】键拖动锚点的时候,矩形相应的角会跟随锚点一起移动。
在Inspector视图中,锚点预置按钮(Anchor Presets)在矩形变换组件的左上角。单击该按钮按打开预制锚点的下拉列表,在这里用户可以便捷地选择常用的锚点选项。用户可以将GUI空间固定在父物体的某一边或中心,或拉伸到与父对象相同的大小。水平方向和竖直方向的锚点时独立的。
当选择了锚点选项以后锚点预制按钮处将显示当前选中的选项。当锚点位置不在预制选项当中时,锚点预制按钮将在custom中。
用户可以单击锚点预制按钮下方的Anchor扩展箭头来设置锚点的位置。锚点的最小值与场景视图中左下角锚点的位置一致,最大值与右上角锚点的位置一致。
每一个锚点手柄都有一个相对于游戏对象固定的偏移量,也就是说左上角锚点手柄对应于GUI游戏物体的左上角有一个固定偏移量。轴心点规定了游戏物体的位置和锚点的对应关系。基于锚点在矩形变换组件的位置将显示不同的区域。当所有的锚点手柄在一起的时候,该区域显示Pos X、Pos Y、Width和Height,而当锚点分开的时候,该区域将部分或全部显示为Top、Buttom、Left和Right。一个锚点手柄的特点是它们能够自动精确定位对齐于其他游戏对象的锚点。
5、轴心点(Pivot)
旋转和缩放都围绕轴心点发生变化,所以轴心点的位置影响旋转和缩放的结果。
6、文本(Text)
文本控件显示非交互文本。可以作为其他GUI控件的标题或者标签,也可用于显示指令或者其他文本。
属性 | 功能 |
Text | 控制显示的文本 |
Font | 用于显示文本的字体 |
Font Style | 文本样式,可选择正常、粗体、斜体、粗斜 |
Font Szie | 文本的字体大小 |
Line Spacing | 文本行之间的垂直间距 |
Rich Text | 是否为富文本样式 |
Alignment | 文本的水平和垂直对齐方式 |
Horizontal Overflow | 用于处理文字太宽而无法适应文本框的方法,选项包含自动换行和溢出 |
Vertical Overflow | 用于处理文本太高而无法适应文本框的方法,选项包含截断和溢出 |
Best Fit | 忽略大小属性使文本适应控件的大小 |
Color | 文本颜色 |
Material | 渲染文本的材质 |
7、图像(Image)
图像(Image)控件用来显示非交互式图像。可用于作为装饰、图标等。在其他控件中也可通过脚本控制来改变图像。该控件类似于原始图像(Raw Image)控件,但是提供了更多选项的动画控制和准确填充控件的功能。图像控件需要Sprite类型的纹理,原始图像可以接受任何类型的纹理。
属性 | 功能 |
Source Image | 表示要显示的图像纹理(类型必须为Sprite) |
Color | 应用于图像的颜色 |
Material | 图像着色所需的材质 |
Image Type | 显示图像的类型,选项包括Simple、Sliced、Tilled和Filled |
Preserve Aspect(仅适用于Simple和Filled模式) | 图像的原始比例的高度和宽度是否保持相同比例 |
Fill Center(仅适用于Sliced和Tilled模式) | 是否填补图像的中心部分 |
Fill Method(仅适用于Filled模式) | 用于指定动画中图像的填充方式,选项有Horizontal、Vertical、Radial90、Radial180和Radial360 |
Fill Origin(仅适用于Filled模式) | 填充图像的起始位置,选项包括Bottom、Right、Top和Left |
Fill Amount(仅适用于Filled模式) | 当前填充图像的比例(范围从0.0到1.0) |
Clockwise(仅适用于Filled模式) | 填充方向是否为顺时针(仅适用于Radial填充模式) |
Set Native Size | 设置图像框尺寸为原始图像纹理的大小 |
文章摘自《Unity官方案例精讲》