この記事では、アクションゲームなどで最近良く見かけるクールダウンアイコンの実装方法を紹介します。
![](https://2dgames.jp/wp-content/uploads/2021/11/cool-down.gif)
目次
クールダウンアイコンの作り方
Spriteノードを追加して、”icon.png” を Textureに設定します。
![](https://2dgames.jp/wp-content/uploads/2021/11/sprite-2-1024x570.png)
Spriteノードの下に TextureProgress
を追加します。
![](https://2dgames.jp/wp-content/uploads/2021/11/textureprogress.png)
そして、Texture > Progress
に “icon.png” を設定します。
![](https://2dgames.jp/wp-content/uploads/2021/11/texture-1-1024x536.png)
見た目をわかりやすくするために、ひとまず Range > Value
を 75にしておきます。そして、Fill Mode
を 「Counter ClockWise」に変更します。
![](https://2dgames.jp/wp-content/uploads/2021/11/range.png)
すると Godotくんの右上が欠けたような画像となります。
![](https://2dgames.jp/wp-content/uploads/2021/11/godot-man.png)
続けて Tint > Progress
の色をクリックしてカラーパレットを表示し、(R,G,B,A)を(80, 80, 80, 200) あたりに設定します。グレーの色になっていれば良いと思います。
![](https://2dgames.jp/wp-content/uploads/2021/11/color.png)
すると 欠けたGodotくんの色がグレーになります。
![](https://2dgames.jp/wp-content/uploads/2021/11/godot-man2.png)
そしてTextureProgressを中央に移動しておきます。
![](https://2dgames.jp/wp-content/uploads/2021/11/gdman.gif)
Spriteにスクリプトをアタッチして以下のように記述します
tool
extends Sprite
# クールダウン値 (0でクールダウン終了)
export(float, 0, 100) var cooldown = 0
onready var progress = $TextureProgress
func _process(delta: float) -> void:
# プログレスに値を反映
progress.value = cooldown
tool
宣言はシーンを開き直す必要があるので、シーンを保存して読み込みし直すと、エディタ上でクールダウンの動きが確認できます。
![](http://2dgames.jp/wp-content/uploads/2021/11/cool-down.gif)