【GodotEngine3.5】色が変わるゲージを作る
こういうのを作ります
前準備
HPバーの画像を用意しときます。
必要なのは
- under - 下地の画像
- progress - 実際に変動する画像。今回は真っ白に作る
- over - 上になる画像
の3枚です。
download
↑サンプル画像です。ライセンスは素材そのまま再販売禁止で自由にお使いください。
ノード構成

こんな感じです。%がついてるのはシーンユニークネームというやつです。
HP_Bar:TextureProgress
└HP_Color:Progressの画像の色を操作するアニメーションが入ったAnimationPlayer
└HPC_Seek:AnimationPlayerを操作するAnimationTree
Progressの画像の色を操作する
TextureProgressの画像の色はOver,Progress,UnderそれぞれのTintで操作できます。
なので、AnimationPlayerでtint_progressというプロパティを操作するアニメーションを作ります。

こんな感じに、0~1の間でお好みの色を設定します。
次に、AnimationTreeで新規BrendTreeを作成し、こんな感じに作ります。

SeekはAnimationを再生している判定じゃないとつかえないので、Animationから直接繋がず、再生速度を0倍(=停止)するためのTimeScaleを挟んで使います。
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| 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
終わり。