game-ui-patterns

Game UI Patterns

HUD Health Bar

# Health bar with smooth tween animation and damage flash
class_name HealthBar extends Control
@onready var fill_bar: ProgressBar = $FillBar
@onready var ghost_bar: ProgressBar = $GhostBar  # Lags behind for damage visualization
@onready var flash_overlay: ColorRect = $FlashOverlay

@export var ghost_tween_duration: float = 0.4
@export var flash_duration: float = 0.1

var _ghost_tween: Tween

func _ready() -> void:
    flash_overlay.modulate.a = 0.0

func set_health(current: float, maximum: float) -> void:
    var ratio := current / maximum
    fill_bar.value = ratio * 100.0

    # Flash red overlay
    var flash_tween := create_tween()
    flash_overlay.modulate.a = 0.5
    flash_tween.tween_property(flash_overlay, "modulate:a", 0.0, flash_duration)

    # Ghost bar lags behind with tween
    if _ghost_tween:
        _ghost_tween.kill()
    _ghost_tween = create_tween()
    _ghost_tween.tween_property(ghost_bar, "value", ratio * 100.0, ghost_tween_duration)\
        .set_delay(0.2)\
        .set_ease(Tween.EASE_IN)\
        .set_trans(Tween.TRANS_QUAD)

Menu State Stack

# Push-down automaton for menu navigation
class_name MenuManager extends CanvasLayer
var _stack: Array[Control] = []

func push_menu(menu: Control) -> void:
    if not _stack.is_empty():
        _stack.back().visible = false
    _stack.append(menu)
    add_child(menu)
    menu.visible = true
    # Give focus to first focusable element
    var first_button := menu.find_child("*Button*", true, false) as Button
    if first_button:
        first_button.grab_focus()

func pop_menu() -> void:
    if _stack.is_empty():
        return
    var top := _stack.pop_back()
    top.queue_free()
    if not _stack.is_empty():
        _stack.back().visible = true
        var first_button := _stack.back().find_child("*Button*", true, false) as Button
        if first_button:
            first_button.grab_focus()

func clear_stack() -> void:
    for menu in _stack:
        menu.queue_free()
    _stack.clear()