Tu juego puede tener el mejor gameplay del mundo,
pero si el jugador no sabe cuántas vidas tiene, qué nivel está o si ganó,
va a sentirse más perdido que un RigidBody sin gravedad.

AhĂ­ entra el HUD:

Heads-Up Display (o “la interfaz que siempre está en la cara del jugador”).


🧠 ¿Qué es HUD y GUI?

  • HUD: Elementos visuales del juego que informan cosas importantes.
    Ej: vidas, puntaje, tiempo, barra de energĂ­a, botĂłn de pausa.

  • GUI (Graphical User Interface): Todo lo que el jugador puede ver o tocar para interactuar con el juego (HUD incluido).

En Godot, se crean usando nodos del tipo Control.


đź§© Nodos esenciales para HUD:

Nodo Para qué sirve
Label Mostrar texto (puntaje, tiempo, etc.)
TextureRect Mostrar imágenes o íconos
ProgressBar Barras de vida o energĂ­a
Button Pausa, reinicio, menĂş
CanvasLayer Mantiene la interfaz visible siempre

⚙️ Ejemplo básico:

HUD (CanvasLayer)

├── Label (text: “Score: 0”)

├── TextureRect (icono de corazón)

├── ProgressBar (vida)

├── Button (text: “Pause”)

 

➡️ Este HUD se queda siempre en pantalla, sin importar cómo se mueva la cámara.


đź”§ CĂłdigo tĂ­pico:

Actualizar puntaje:

func update_score(new_score):

$ScoreLabel.text = “Score: %s” % str(new_score)

 

Mostrar el HUD solo al ganar:

$WinLabel.visible = true

 

Pausar el juego:

func _on_PauseButton_pressed():

get_tree().paused = true

$PauseMenu.visible = true

 


🧪 Tips rápidos:

âś… Usa CanvasLayer para que la interfaz no se mueva con el fondo
âś… Usa Anchors para posicionar en cualquier resoluciĂłn
âś… Usa NinePatchRect para fondos de paneles adaptables
✅ Crea el HUD como una escena aparte e instánciala