Godot: TextureProgressBar を使って HPバーを作る
Godot Engineの TextureProgressBar ノードを使って HPバーを作る
Godot 4.0 stable で確認
今回は以下の仕様とする
受けたダメージの量だけ黄色で表示して、ゲージ増減アニメーションをつける
残り体力の割合で色を変える
まず、TextureProgressBar ノードを追加する
今回は２つのTextureProgressBarを重ねるので、Over と Under の２つ作成する
Over が残量表示
Under がダメージ受けた時の差分アニメーション表示用
ヒエラルキー上では、Underを上にする。
Over の TextureProgressBar には、以下のテクスチャをセットする。
Under
セットしない
Over
枠だけあって、中身は Transparent
Progress
↑では見えないけど、白いゲージ。tint で色をつける
Under の TextureProgressBar には、以下のテクスチャをセットする。
Under
バックグラウンド用
Over
セットしない
Progress
↑では見えないけど、白いゲージ。tint で色をつける
これで準備はOK
プレイヤーのHPダメージを受けた時などで、以下の処理を実行する
gdfunc _change_hp_var() -> void:
var tween := create_tween()
tween.set_ease(Tween.EASE_IN).set_trans(Tween.TRANS_SINE)
tween.tween_property(%PlayerHpBarUnder, "value", hp * 100.0 / max_hp, 0.5)
%PlayerHpBarOver.value = hp * 100.0 / max_hp
if hp <= max_hp * 0.3:
%PlayerHpBarOver.tint_progress = Color.RED
elif hp <= max_hp * 0.6:
%PlayerHpBarOver.tint_progress = Color.SANDY_BROWN
else:
%PlayerHpBarOver.tint_progress = Color.GREENTween で、
PlayerHpBarUnder の増減だけアニメーションさせて、 %PlayerHpBarOver の値は即時に変更するこれにより、ダメージを受けた分だけが
PlayerHpBarUnder の色でアニメーション表示される参考動画: