简介
滑动条(Slider)控件类型允许玩家便捷地通过拖动控制柄从预定范围中选择数值。滑动条可以是水平或垂直的。值得注意的是,滚动条(ScrollBar)控件类型有类似的功能,但是滚动条主要用于滚动而不是选择数值。
在游戏设计中滑动条是很常见的,我们熟悉的示例包括游戏中的音量设置和亮度设置,都常会用到滑动条。
【UIEditor_Slider001.png】
默认滑动条控件类型实例化的 UI 对象效果。
构成
滑动条(Slider)控件类型的 UI 对象(UI Object)由三个 图片(Image)控件类型的 UI 对象组成。可以通过 UI 对象展开子节点 功能进行编辑,具体展开方法请参阅 展开子节点 章节。
【UIEditor_Slider002.png】
默认 滑动条(Slider)控件类型实例化的 UI 对象展开子节点后的层级结构。
- __BG__ UI 对象,是 图片(Image)控件类型的 UI 对象,用于显示滑动条的背景图片。
- __Fill__ UI 对象,是 图片(Image)控件类型的 UI 对象,用于显示填充区域的图片。
- __Thumb__ UI 对象,是 图片(Image)控件类型的 UI 对象,用于显示控制柄的图片,是玩家可以滑动并与滑动条交互的部分。
属性
除了和滚动条有相似的可设置属性外,还有滑动条可配置的值范围、初始值等滑动条特有的属性,以及填充条图片的相关属性可以设置。
【UIEditor_Slider003.png】
| 名称 | 描述 |
|---|---|
| 是否启用(Interactable) | 此属性确定该 UI 对象是否接受交互。 勾选,接受交互,该 UI 对象有点击等交换效果。 不勾选,交互被禁用,过渡 类型(Type)属性也将设置为禁用状态。 |
| 类型(Type) | 确定 UI 对象的控制柄图片以何种方式对玩家的操作进行可视化响应的属性。请参阅 过渡选项 章节。 |
| 数值(Value) | 滑动条的当前数值。如果在 检视窗口(Inspector)中设置了该值,则该值将用作初始值,但是当值变化时,运行时的值也将变化。 |
| 范围(Range) | 设置滑动条可配置的最小值与最大值。“ - ” 符号左侧的输入框填写滑动条的最小值,“ - ” 符号右侧的输入框填写滑动条的最大值。最小值与最大值属性框只能输入自然数。 |
| 整数(Whole Numbers) | 设置滑动条约束是否为整数值。勾选,滑动条的约束将为整数值,数值(Value)属性只能为整数,控制柄只停留在数值属性为整数的位置。不勾选,滑动条没有约束,数值(Value)属性可以为整数或者小数。 |
| 滑动条类型(Slider Type) | 设置 填充(Fill)条图片的图片类型是 填充(Filled)图片类型还是 切片(Sliced)图片类型。两种图片类型的区别请参阅 图片 章节。 |
| 方向(Direction) | 设置拖动控制柄时滑动条 数值(Value)属性值增加的方向。此属性值包括: · 自左往右(Left To Right),滑动条为水平方向。当 UI 对象的控制柄在左侧时,数值(Value)属性值为 范围(Range)属性的最小值, 当 UI 对象的控制柄在右侧时,数值(Value)属性值为 范围(Range)属性的最大值。 · 自右往左(Right To Left),滑动条为水平方向。当 UI 对象的控制柄在右侧时,数值(Value)属性值为 范围(Range)属性的最小值, 当 UI 对象的控制柄在左侧时,数值(Value)属性值为 范围(Range)属性的最大值。 · 自下往上(Bottom To Top ),滑动条为垂直方向。当 UI 对象的控制柄在底部时,数值(Value)属性值为 范围(Range)属性的最小值, 当 UI 对象的控制柄在顶部时,数值(Value)属性值为 范围(Range)属性的最大值。 · 自上往下(Top To Bottom),滑动条为垂直方向。当 UI 对象的控制柄在顶部时,数值(Value)属性值为 范围(Range)属性的最小值, 当 UI 对象的控制柄在底部时,数值(Value)属性值为 范围(Range)属性的最大值。 |
| 填充(Fill) | |
| 2D 纹理(Texture 2D) | 可用于分配给此 UI 对象填充条的 2D 贴图资产,可从 项目窗口(Project)将 2D 贴图资产拖入,或点击打开列表选择 2D 贴图资产。2D 纹理属性支持 PNG,JPG,TGA,TIF 格式图片导入而生成的 2D 贴图资产,具体导入方法和限制请参阅 导入资产 章节。 |
| 尺寸(Size) | 用于设置填充条图片的尺寸。属性值为 二维向量(Vector 2)。可分别设置 X 和 Y 方向的尺寸,属性值可以输入自然数,单位为像素。 · X 属性表示填充条图片相对于 UI 对象在 X 轴上的尺寸。 · Y 属性表示填充条图片相对于 UI 对象在 Y 轴上的尺寸。 |
| 控制柄(Thumb) | |
| 2D 纹理(Texture 2D) | 可用于分配给此 UI 对象控制柄的 2D 贴图资产,可从 项目窗口(Project)将 2D 贴图资产拖入,或点击打开列表选择 2D 贴图资产。2D 纹理属性支持 PNG,JPG,TGA,TIF 格式图片导入而生成的 2D 贴图资产,具体导入方法和限制请参阅 导入资产 章节。 |
| 尺寸(Size) | 用于设置控制柄的尺寸。属性值为 二维向量(Vector 2)。可分别设置 X 和 Y 方向的尺寸,属性值可以输入自然数,单位为像素。 · X 属性表示控制柄相对于 UI 对象在 X 轴上的尺寸。 · Y 属性表示控制柄相对于 UI 对象在 Y 轴上的尺寸。 |
滑动条控件类型的 UI 对象在 检视窗口(Inspector)可设置属性是最基础的相关属性,如果需要对该 UI 对象进行更细致的编辑,建议对该 UI 对象进行层级展开,这样可以更细致编辑滑动条的控制柄、填充样式和背景。

勾选,接受交互,该 UI 对象有点击等交换效果。
不勾选,交互被禁用,过渡 类型(Type)属性也将设置为禁用状态。