第 35 课 · 进度条与滑块

⏱ 预计时长 30 分钟📊 难度入门📚 模块 第 4 部分 · UI 界面 · 动画 · 特效

🎯 本课学习目标

用 ProgressBar 显示血条/加载条
用 Slider 做设置滑杆
监听滑块数值变化

血条、音量、加载进度都靠 ProgressBar 和 Slider。本课实现它们。

📖 详细教学步骤

ProgressBar 基础实操

添加 ProgressBar 节点，调整宽高
属性 Min Value / Max Value：范围（如 0-100）
属性 Value：当前值
Show Percentage 勾选可显示百分比文字

用代码控制进度代码

血条跟随玩家 HP：

GDSCRIPTextends CanvasLayer

@onready var hp_bar: ProgressBar = $HpBar

func update_hp(current: int, max: int):
    hp_bar.max_value = max
    hp_bar.value = current

# 在 main.gd 里调用
# hud.update_hp(player.hp, player.max_hp)

血条颜色变化（高/中/低）进阶

血量低时变红：

GDSCRIPTfunc update_hp(current: int, max: int):
    hp_bar.max_value = max
    hp_bar.value = current
    var ratio = float(current) / float(max)
    if ratio > 0.5:
        hp_bar.modulate = Color(1, 1, 1)      # 白色
    elif ratio > 0.25:
        hp_bar.modulate = Color(1, 0.8, 0.2)  # 黄色
    else:
        hp_bar.modulate = Color(1, 0.3, 0.3)  # 红色

Slider 滑块实操

添加 HSlider（水平滑块），设置 Min/Max/Value
监听 value_changed 信号实时获取数值

GDSCRIPTextends CanvasLayer

@onready var volume_slider: HSlider = $VolumeSlider

func _ready():
    volume_slider.value_changed.connect(_on_volume_changed)
    volume_slider.value = 0.8   # 初始音量

func _on_volume_changed(value: float):
    print("音量: ", value)
    AudioServer.set_bus_volume_db(0, linear_to_db(value))

组合：滑杆 + 数值显示实操

滑块旁边显示数值：

GDSCRIPTfunc _on_volume_changed(value: float):
    volume_label.text = "%d%%" % int(value * 100)

圆形进度（进阶思路）进阶

需要圆形血条/冷却转圈时，可用 TextureProgressBar 配合旋转，或用自定义绘制。先把基础进度条玩熟，后续再拓展。

⚠️

进度条 Max/Min 弄反了？

Max 必须大于 Min。血条一般 Min=0、Max=最大生命。

⚠️

滑块拖不动？

滑块本身可拖。若被容器挤压，检查容器布局与 Size 是否足够。

🧪 动手试一试

🏋️ 课后练习

做一个玩家血条（跟着玩家 HP 变）和一个音量滑块（调整主总线音量），血量低于 25% 时血条变红。

hp_bar.value 更新 + modulate 变色；AudioServer.set_bus_volume_db。

💡

进度条加 Show Percentage 或自定义 Label 显示数值更友好。

💡

value_changed 在拖动时实时触发，适合即时预览。

🎓 本课小结

ProgressBar 显示进度（Min/Max/Value），Slider 交互调节（value_changed 信号）；配合 modulate 做血条变色。