【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

終わり。