こういうのを作ります

前準備

HPバーの画像を用意しときます。
必要なのは

  • under - 下地の画像
  • progress - 実際に変動する画像。今回は真っ白に作る
  • over - 上になる画像

の３枚です。

download

↑サンプル画像です。ライセンスは素材そのまま再販売禁止で自由にお使いください。

ノード構成

こんな感じです。%がついてるのはシーンユニークネームというやつです。

HP_Bar：TextureProgress
└HP_Color：Progressの画像の色を操作するアニメーションが入ったAnimationPlayer
　└HPC_Seek：AnimationPlayerを操作するAnimationTree

Progressの画像の色を操作する

TextureProgressの画像の色はOver,Progress,UnderそれぞれのTintで操作できます。
　なので、AnimationPlayerでtint_progressというプロパティを操作するアニメーションを作ります。

こんな感じに、0～１の間でお好みの色を設定します。

次に、AnimationTreeで新規BrendTreeを作成し、こんな感じに作ります。

SeekはAnimationを再生している判定じゃないとつかえないので、Animationから直接繋がず、再生速度を０倍（＝停止）するためのTimeScaleを挟んで使います。

コード

extends TextureProgress

onready var hp_bar = $"%HP_Bar"
onready var hp_color = $"%HP_Color"
onready var hpc_seek = $"%HPC_Seek"

func _ready():
ready_HP_bar_change() # ProgressBarの値をセットする。

func HP_bar_change(now_value):
var now_bar_color = hp_bar.get_tint_progress() # 現在の色を取得する
var progress = now_value / hp_bar.max_value # 現在の最大体力からみた体力の割合を計算する
var tween = Tween.new()
add_child(tween)
tween.interpolate_property(hpc_seek, "parameters/Seek/seek_position",
hpc_seek["parameters/Seek/seek_position"], progress, 2,
Tween.TRANS_CUBIC, Tween.EASE_OUT)
tween.start()
# TweenでAnimationTreeのSeekを操作する。
tween.interpolate_property(self, "value",
$".".value, now_value, 2,
Tween.TRANS_CUBIC, Tween.EASE_OUT
)
tween.start()
# TweenでProgressBarの値を変更する

func ready_HP_bar_change():
var now_value = SVar.player_data["HP"] # 体力を取得する
HP_bar_max_change()
var progress = now_value / hp_bar.max_value # 現在の最大体力からみた体力の割合を計算する
hpc_seek["parameters/Seek/seek_position"] = progress # 色を設定する。
hp_bar.value = now_value # ProgressBarの値を変更する

こんな感じです。コメントに書いてあることが全てです。
間違っている場所、わからないところがあったらいってください。

Special Thanks
Godot Japan User Community

終わり。