如何在Godot中制作仅靠小图标移动来显示进度的进度条？

方法一：属性绑定（无脚本快速实现） #

• 创建ProgressBar节点，添加Sprite2D或TextureRect作为图标子节点。
• 选中图标节点，在Inspector面板找到Position属性，点击右侧的绑定按钮（📋），选择「New Expression」。
• 输入绑定表达式：

  Vector2(owner.size.x * owner.value / owner.max_value, owner.position.y)
  

  （如果是垂直进度条，将size.x改为size.y，position.x改为position.y即可）
• 调整图标锚点为(0, 0.5)，确保图标垂直居中于进度条。

方法二：脚本监听进度变化（更灵活） #

给ProgressBar添加如下脚本：

extends ProgressBar

@onready var icon = $Sprite2D  # 替换为你的图标节点路径

func _ready():
    connect("value_changed", _on_value_changed)
    _on_value_changed(value)  # 初始化图标位置

func _on_value_changed(new_value: float):
    var progress_ratio = new_value / max_value
    # 计算图标X位置，若需考虑内边距，可加入padding偏移
    icon.position.x = (size.x - padding_left - padding_right) * progress_ratio + padding_left
    # 垂直进度条请使用以下代码：
    # icon.position.y = (size.y - padding_top - padding_bottom) * (1 - progress_ratio) + padding_top

注意事项 #

• 如果进度条有内边距，计算位置时要加入padding_left/padding_right（水平）或padding_top/padding_bottom（垂直）的偏移，确保图标在有效进度区域内移动。
• 图标锚点设置为(0, 0.5)（水平）或(0.5, 1)（垂直），能避免进度变化时图标出现上下/左右偏移。

内容的提问来源于stack exchange，提问作者M. Fatih Yalçın