クールタイムボタン
この記事は Godot 3から Godot 4 へ内容の書き換え中です。 Godot4では存在しない変数、関数が含まれている場合があります。もしその場合はリポジトリのIssuesまでご報告ください。
課題
RPG風のスキルボタンを作成したい。クールタイム効果も組み込みたい。
解決策
ボタン用のアイコンが必要な場合、Game-icons.netでは多種多様なデザイン性の高いボタン素材を提供しています。このレシピでもその一部を使用しています。
ノード設定
能力ボタン用のシーンには以下のノードが必要となります。
AbilityButton: TextureButton
Sweep: TextureProgress
Timer
Counter: MarginContainer
Value: Label
選択したアイコンを AbilityButton の Textures/Normal プロパティにドロップしてください。
Sweepノードでは、Presetsメニューから 「Full Rect」 を選択します。**Fill Mode(塗りつぶしモード)**を「Counter Clockwise(反時計回り)」に設定してください。
また、クールタイム時の「時計ワイプ」でボタンを暗く表示させたいため、[変調] プロパティに透明度のある濃いグレーを設定してください。
Timerノードの設定は「One Shot」に設定してください。
Counterはテキストを保持・配置するためのコンテナです。レイアウトを"Bottom Wide"に設定し、Theme Overrides/Constants セクションでは両方の Margin Right と Margin Left を 5 に指定してください。
最後に、Valueラベルで［水平整列］を「右揃え」に設定し、［テキストクリッピング］を「有効」にしてください。テーマオーバーライド／フォントにフォントを追加してください。動作確認のため、テキスト欄には 0.0 のような値を入力してください。アイコンが白黒の場合は、テーマオーバーライド／定数／アウトラインサイズとして 1 を設定すると効果的です。
スクリプト
以下のスクリプトを AbilityButton に追加してください。
TimerのtimeoutシグナルとAbilityButtonのpressedシグナルを接続します。
extends TextureButton
class_name AbilityButton
@onready var time_label = $Counter/Value
@export var cooldown = 1.0
func _ready():
time_label.hide()
$Sweep.value = 0
$Sweep.texture_progress = texture_normal
$Timer.wait_time = cooldown
set_process(false)
まず、能力のクールタイム時間を格納するcooldown変数をエクスポートします。次に、_ready()メソッド内でこの値を使用してTimerを設定できます。最後に、カウントダウン中のみ表示させたいため、ラベルは非表示にしておきます。
次に、TextureProgress 表示に割り当てるテクスチャが必要となります。この例では、ボタンのテクスチャをコピーしていますが、お好みで別のテクスチャを使用しても構いません。
最後に、スイープ値を 0 に設定し、ノードの処理フラグを false にします。アニメーションは _process() 内で処理するため、クールタイムモードではない時に実行される必要がないようにします。
func _process(delta):
time_label.text = "%3.1f" % $Timer.time_left
$Sweep.value = int(($Timer.time_left / cooldown) * 100)
_process() 関数内では、タイマーの time_left プロパティを使用してラベルの text プロパティと Sweepノードの value プロパティを設定しています。
func _on_AbilityButton_pressed():
disabled = true
set_process(true)
$Timer.start()
time_label.show()
ボタンをクリックするとすべてが始まります。
func _on_Timer_timeout():
print("ability ready")
$Sweep.value = 0
disabled = false
time_label.hide()
set_process(false)
タイマーが切れるとすべての設定は初期化されます。複数のボタンを HBoxContainer に配置するだけで、アクションバーが完成します。
プロジェクトのダウンロード
プロジェクトのサンプルコードはこちらからダウンロードできます。 https://github.com/godotrecipes/ui_cooldown_button