Unity-UGUI-交互组件Slider7

2025-09-10 约 2252 字预计阅读 5 分钟

https://bing.ee123.net/img/rand?artid=151011044

【Unity UGUI 交互组件——Slider（7）】

Slider(滑动条)在游戏开发中应用的非常广泛，比如音量控制（主音量、音乐、音效）、画面亮度/对比度、鼠标灵敏度、视野范围（FOV）显示任务进度、加载进度、角色经验值；技能蓄力（如控制力道、射门力量条）、瞄准条等等

1.概述

这是一个典型的滑动条

Hierarchy 对象	作用	可删？	常用修改
Slider (根)	挂 Slider 脚本，统筹一切	❌	改方向、范围、事件
Background	整个轨道背景图	✅	换 9-Slice 底图
Fill Area	容器，决定填充长度	❌	改锚点 = 控制填充方向
Fill	进度条本身（Image）	❌	改颜色/渐变；Image Type 设 `Filled`
Handle Slide Area	容器，限制滑块移动范围	❌	改锚点 = 控制滑块行程
Handle	可拖动滑块（Image/Button）	✅	换图标；加阴影/粒子

只删除 Handle 即变成纯进度条；只删除 Fill 可变成纯输入条，二者效果如下图

场景	做法简述
血条 / 蓝条	隐藏 Handle，脚本每帧 `slider.value = hp / maxHp`
音量调节	保留 Handle，`OnValueChanged` → `AudioListener.volume = value`
难度选择	整数值，配合 `Whole Numbers = true` （这个布尔参数在Slider上的Slider组件里面设置）
Loading 进度	禁用交互，`slider.interactable = false`

2. 具体介绍

一、Slider

这是滑动条的父物体，挂载Slider组件，用来控制整个滑动条具体的交互表现（如下图，此时Transiton为Nono）

属性	中文	说明 & 常用值	示例
Fill Rect	填充图片	拖 Fill Image	—
Handle Rect	滑块图片	拖 Handle Image	—
Direction	方向	决定滑块和填充的行进方向： • LeftToRight：从左到右（血条/进度条常见） • RightToLeft：从右到左（镜像 UI） • TopToBottom：从上到下（垂直能量条） • BottomToTop：从下到上（垂直冷却条）	做横向血条选 LeftToRight，做竖向蓝条选 BottomToTop
Min Value	最小值	范围下限，默认 0	血量最小 0
Max Value	最大值	范围上限，默认 100 或 1	血量最大 100
Whole Numbers	整数	勾选后滑块只能停在整数刻度，适合做难度档位、等级选择	难度 0-2 共 3 档
Value	当前值	实时读写；可在代码里用 `slider.value = hp / maxHp` 同步	—
OnValueChanged(float)	值变化事件	绑定脚本方法，参数为新值；用于音量、灵敏度、进度回调	`void OnVolume(float v){ AudioListener.volume = v;}`
Interactable	可交互	设为 `false` 时滑块变灰且无法拖动，但进度仍能更新；常用于冷却禁用、只读进度	`slider.interactable = false; // 冷却中`
Transition	状态过渡	控制滑块/背景/填充在交互时的视觉反馈： • Color Tint：颜色渐变（最常用） • Sprite Swap：换图（自定义图标按钮） • Animation：骨骼动画（弹性、闪光） • None：无过渡，性能优先	血量条常用 Color Tint；技能冷却条可用 Animation
Navigation	键盘/手柄导航	决定按 ↑↓←→ 时焦点跳到下一个 UI 控件： • Automatic：Unity 自动找最近 • Horizontal/Vertical：仅限水平/垂直 • Explicit：手动指定	手柄菜单常用 Automatic；竖直列表选 Vertical

介绍完这些具体参数，介绍一下Transition 作用对象 它只影响 Slider 自身 的 可视状态反馈（背景图 + 滑块 + 填充图）。不改变数值逻辑，仅决定“鼠标悬停 / 按下 / 禁用”时这些元素如何变色、换图或做动画。

Transition 四种模式

模式	中文	作用目标	效果
None	无过渡	背景、滑块、填充	瞬间切换，无任何视觉变化
Color Tint	颜色着色	背景、滑块、填充	用颜色乘法做渐变（最常用）
Sprite Swap	精灵替换	背景、滑块、填充	直接换整张图（图标按钮常用）
Animation	动画过渡	背景、滑块、填充	播放 Animator 做缩放、旋转、闪光

勾选后即可在下方 Normal / Highlighted / Pressed / Disabled 区域填入对应资源，感兴趣的话，自己做实验，看看效果，这里不赘述了。

二、Background

背景，这是就是一张Image,他是滑动条的底色，具体如下图，滑动条本质是两张图，一个（BackGround）在下面，一个在上面（Fill），上面（Fill）的盖住下面(Background)的，通过改变上面的图片大小（Fill），来实现滑动条改变效果。

三、FillArea&Fill

FillAera 就是限定滑动条滑动的位置大小，而Fill就是滑动条本身图片，通过改变它的大小，来实现改变进度。下图是他们单独拉出来方便看。

四、HandleSlideArea&Handle

HandleSile就是限定Hanlde(滑块)滑动的范围，他本身只有RectTransform组件。Hande就是滑块。

五、脚本控制举例

这里只举脚本例子，UI那部分就不做了，这里的主要是理解如果用脚本控制Slider

① 血量条（实时同步）

using UnityEngine;
using UnityEngine.UI;

public class HpSlider : MonoBehaviour
{
    public Slider hpSlider;   // 拖进来
    public float maxHp = 100;

    private float currentHp;

    void Start()
    {
        currentHp = maxHp;
        UpdateHpBar();
    }

    public void TakeDamage(float damage)
    {
        currentHp = Mathf.Max(currentHp - damage, 0);
        UpdateHpBar();
    }

    void UpdateHpBar()
    {
        hpSlider.value = currentHp / maxHp;   // 0~1
    }
}

把 Slider 的 MaxValue 设 1，Fill 用红色即可。

② 冷却倒计时（FillAmount 做环形遮罩）

using UnityEngine;
using UnityEngine.UI;

public class CooldownSlider : MonoBehaviour
{
    public Slider cdSlider;   // Fill 类型 = Radial360
    public float cdTime = 3f;

    private bool isCooling;

    void Update()
    {
        if (isCooling)
        {
            cdSlider.value -= Time.deltaTime / cdTime;
            if (cdSlider.value <= 0) isCooling = false;
        }
    }

    public void StartCooldown()
    {
        isCooling = true;
        cdSlider.value = 1f;   // 从满开始减
    }
}

把 Slider 的 Direction 设 Radial360，Fill 即可做环形冷却。

③ 音量滑块（实时生效）

using UnityEngine;
using UnityEngine.UI;

public class VolumeSlider : MonoBehaviour
{
    public Slider volumeSlider;

    void Start()
    {
        volumeSlider.value = AudioListener.volume;
        volumeSlider.onValueChanged.AddListener(SetVolume);
    }

    void SetVolume(float v)
    {
        AudioListener.volume = v;
    }
}

把 Slider 的 Min/Max 设 0~1，即可直接控制全局音量。

④ 整数档位选择（难度选择）

using UnityEngine;
using UnityEngine.UI;

public class DifficultySlider : MonoBehaviour
{
    public Slider diffSlider;
    public Text displayText;    // 显示档位

    readonly string[] names = { "简单", "普通", "困难" };

    void Start()
    {
        diffSlider.wholeNumbers = true;
        diffSlider.maxValue = names.Length - 1;
        diffSlider.onValueChanged.AddListener(UpdateText);
        UpdateText((int)diffSlider.value);
    }

    void UpdateText(int idx)
    {
        displayText.text = names[idx];
    }
}

勾选 Whole Numbers，滑块只能停在整数刻度。

⑤ 禁用滑块（冷却期间只读）

using UnityEngine;
using UnityEngine.UI;

public class LockSlider : MonoBehaviour
{
    public Slider slider;
    public Button startBtn;

    void Start()
    {
        startBtn.onClick.AddListener(Lock);
    }

    void Lock()
    {
        slider.interactable = false; // 变灰，不可拖动
        Invoke(nameof(Unlock), 3f);  // 3 秒后解锁
    }

    void Unlock()
    {
        slider.interactable = true;
    }
}

interactable = false 时滑块灰色，但仍可脚本改值。

总结

把 Slider 当“可调节的数值接口”，一行 slider.value = x + 一行事件绑定就能完成血条、音量、冷却、难度档位等需求。