Кнопка кулдауна

Проблема

Вы хотите создать кнопки способностей в стиле RPG, включая эффект перезарядки.

Решение

Если вам нужны изображения для кнопок, вы можете найти множество хорошо оформленных иконок на Game-icons.net. В этом примере мы будем использовать несколько из них.

Настройка узлов

Сцена для нашей кнопки способности должна содержать следующие узлы:

AbilityButton:  TextureButton
   Sweep:  TextureProgress
    Timer
   Counter:  MarginContainer
      Value:  Label

1. Добавьте выбранную иконку в свойство Textures/Normal узла AbilityButton.
2. В узле Sweep выберите “Full Rect” в меню Presets. Установите Fill Mode в “Counter Clockwise” (против часовой стрелки).
3. Нам также нужно, чтобы эффект «радиальной очистки» затемнял кнопку во время перезарядки, поэтому установите параметр Modulate в темно-серый цвет с небольшой прозрачностью.

4. Узел Timer должен быть настроен как “One Shot”.
5. Counter — это контейнер для размещения и выравнивания текста. Установите его макет в “Bottom Wide”, а в Theme Overrides/Constants установите Margin Right и Margin Left на 5.
6. В Value label установите Horizontal Alignment в “Right”, а Clip Text — в “On”. Добавьте шрифт в Theme Overrides/Font. В поле Text введите значение, например 0.0, чтобы проверить, как оно работает. Так как наша иконка черно-белая, полезно также установить Theme Overrides/Constants/Outline Size в 1.

Скрипт

Добавьте скрипт к AbilityButton. Подключите сигнал timeout узла Timer и сигнал pressed узла AbilityButton.

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() мы задаем таймеру это значение и скрываем метку, так как хотим показывать ее только во время обратного отсчета.

Проверь свои знания в нашем бесплатном ТЕСТЕ по Godot! Узнай, насколько хорошо ты его знаешь!

Далее нам нужна текстура для отображения в TextureProgress. В этом случае мы просто копируем текстуру из кнопки, но можно использовать и другую, если необходимо.

Затем мы устанавливаем sweep в 0 и отключаем обработку узла, так как анимация выполняется в _process(), и нам не нужно, чтобы она работала вне режима перезарядки.

func _process(delta):
    time_label.text = "%3.1f" % $Timer.time_left
    $Sweep.value = int(($Timer.time_left / cooldown) * 100)

В _process() мы обновляем текст метки и значение sweep, основываясь на оставшемся времени таймера.

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, и у вас будет готовая панель способностей!