Godot入門：ProgressBarの使い方と活用法

はじめに
ProgressBarとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

HPゲージ・経験値バー・ロード画面の進捗表示——ゲームに欠かせない「バー型の進捗UI」を手軽に作れるのが ProgressBar です。ColorRect を重ねて自作する方法もありますが、ProgressBar を使えばゲージの塗りつぶしロジックを自分で書かずに済みます。

この記事では、ProgressBar の仕組みと使いどころ、カスタマイズ方法を紹介します。

ProgressBarとは？

ProgressBar は 最小値・最大値・現在値を設定すると、その割合をバー（帯）で視覚的に表示するUIノードです。値を変えるだけでゲージの長さが自動で更新されます。

温度計をイメージしてください。目盛りの最小・最大が決まっていて、現在の温度に応じて液体が伸び縮みします。ProgressBar はその「伸び縮みする液体の部分」を自動で計算して描画してくれるノードです。

継承ツリーは ProgressBar → Range → Control → CanvasItem → Node です。Range クラスを継承しているため、Slider や SpinBox と共通のプロパティ（min_value・max_value・value・step）を持っています。

ProgressBar の各部名称（min_value / max_value / value と見た目の関係） — value を 0〜max_value の範囲で変えると、塗りの割合が自動で更新される

このノードを使うべき場面

HPゲージ・MPゲージ：キャラクターの体力・魔力の残量を画面上部に表示するとき
経験値バー：現在の経験値と次のレベルまでの距離を帯で表示するとき
ロード画面の進捗：リソースの読み込み進捗をパーセントとバーで表示するとき
クエスト・実績の進捗：「敵を10体倒す」などのタスク達成度を視覚化するとき
チャージゲージ・クールダウン：スキルが使えるようになるまでの残り時間を表示するとき

別のノードが適切な場面：

デザインを完全に独自にしたい（角丸・グラデーション・アニメーション込み） → ColorRect（029）やシェーダーで自作する方が自由度が高い
ユーザーが値をドラッグで変更できるようにしたい → HSlider / VSlider を使う

主なプロパティと機能

ProgressBar と親クラス Range の代表的なプロパティをまとめました。

プロパティ	型	役割
`min_value`	float	ゲージの最小値（デフォルト: 0）
`max_value`	float	ゲージの最大値（デフォルト: 100）
`value`	float	現在の値。この値を変えるだけでゲージが更新される
`step`	float	値の最小変化単位。`0` にすると滑らか（連続値）になる
`show_percentage`	bool	`true` でバーの上に「75%」などのテキストを自動表示する
`fill_mode`	enum	塗りの方向（左から・右から・上から・下から・中央から）

コード例：HPゲージをダメージで減らす

@onready var hp_bar: ProgressBar = $HPBar

var max_hp := 100.0
var current_hp := 100.0

func _ready() -> void:
    hp_bar.min_value = 0
    hp_bar.max_value = max_hp
    hp_bar.value = current_hp
    hp_bar.show_percentage = false  # ゲームHUDではテキスト非表示にすることが多い

func take_damage(amount: float) -> void:
    current_hp = clamp(current_hp - amount, 0.0, max_hp)
    hp_bar.value = current_hp

コード例：Tween でゲージをなめらかに変化させる

func set_hp_smooth(new_hp: float, duration: float = 0.4) -> void:
    var tween := create_tween()
    tween.tween_property(hp_bar, "value", new_hp, duration)\
         .set_trans(Tween.TRANS_SINE)\
         .set_ease(Tween.EASE_OUT)

ProgressBar の fill_mode 比較（左から・中央から・右から） — fill_mode を変えると塗りの向きが変わる。チャージ演出には CENTER がよく使われる

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ・テクニック	変えると何が起きるか
`show_percentage` を `false` に	パーセント表示が消え、ゲージだけのすっきりした見た目になる。ゲームHUDでよく使う設定
`fill_mode` を `END`（右から）に	右端から左方向に塗りが伸びる。タイムリミットの残り時間ゲージに使いやすい
`fill_mode` を `CENTER` に	中央から両端に向かって塗りが広がる。チャージや充電の演出に向いている
Tween で `value` をアニメーション	ダメージや回復のゲージ変化が滑らかになり、ゲームらしい見た目になる
Theme Overrides でスタイルボックスを変える	バーの色・背景色・角丸・ボーダーをカスタムスタイルに変更できる。デザインの核心部分
`step` を `0` に	値が連続変化するので Tween との組み合わせでなめらかなアニメーションになる