HUD Systems in Godot 4.3+

All examples target Godot 4.3+ with no deprecated APIs. GDScript is shown first, then C#.

Related skills: godot-ui for Control node layout and themes, component-system for HealthComponent integration, event-bus for score/notification signals, inventory-system for inventory UI patterns, 2d-essentials for CanvasLayer setup and draw order, ability-system for cooldown bar and resource bar binding patterns.

---

1. HUD Architecture

Why CanvasLayer

A CanvasLayer renders its children with its own transform, independent of the Camera2D (unless follow_viewport_enabled is on); a Camera3D never moves 2D nodes. Without it, HUD nodes on the scene root's default canvas (layer 0) move with a Camera2D when you pan or zoom, because the camera sets that canvas's transform. Wrapping all HUD nodes in a CanvasLayer keeps the HUD in place; layer ≥ 1 (the default is 1) draws it above the world.

Scene Tree

World (Node2D / Node3D)
├── TileMapLayer          ← game world
├── Player (CharacterBody2D)
│   ├── Camera2D
│   ├── HealthComponent
│   └── HurtboxComponent
├── Enemies
└── HUD (CanvasLayer, layer: 1)
    ├── MarginContainer (anchor: Full Rect, provides edge padding)
    │   ├── TopBar (HBoxContainer)
    │   │   ├── HealthBarPanel (PanelContainer)
    │   │   │   └── HealthBar (TextureProgressBar or ProgressBar)
    │   │   └── ScoreLabel (Label)
    │   └── BottomBar (HBoxContainer)
    │       └── InteractionPrompt (Label, hidden by default)
    ├── DamageNumbersLayer (Node2D, world-space spawning point)
    ├── MinimapContainer (SubViewportContainer)
    │   └── MinimapViewport (SubViewport)
    │       ├── MinimapCamera (Camera2D)
    │       └── MinimapWorld (mirrors or references world nodes)
    └── NotificationStack (VBoxContainer, anchored top-right)