# HUD Anchors

a game HUD pinned to screen corners that scales with the window.

```{raw} html
<a class="example-run-button" href="../demos/features_ui_hud_anchors.html">▶ Run in browser</a>

```

**Tags:** `ui` `hud` `anchors` `layout` `responsive`

A game-style heads-up display whose pieces are anchored to the viewport edges,
not placed at absolute coordinates: a health bar hugs the top-left, the score
sits in the top-right, and a hint label is centred along the bottom. Resize the
window and every element stays glued to its corner while the bar and labels
keep their margins, because each top-level Control uses an AnchorPreset plus
symmetric margins rather than a fixed position.


## What it demonstrates

- Anchoring top-level Controls to viewport corners with `set_anchor_preset()`:
  `TOP_LEFT`, `TOP_RIGHT`, `CENTER_BOTTOM`, never an absolute `position`.
- Margins as pixel offsets from the chosen anchor, so a corner gadget keeps a
  consistent gutter as the window grows or shrinks.
- A live health bar (background Panel + foreground fill Panel) whose width
  tracks a value, driven each frame from `on_update`.
- A score readout and a centred hint that follow the bottom/top edges on resize.

Controls:
  Up / Down - Heal / take damage (animate the health bar)
  ESC       - Quit

## Source

```{literalinclude} ../../examples/features/ui/hud_anchors.py
:language: python
:linenos:
```