HUD - Persistent Panels (YAML)

HUD panels (hud:) display persistent information on the player screen: HP, score, mini-map, countdown, and so on.

HUD panels are visible on web and desktop. On Discord and terminal they are ignored; essential information should also appear in narrative text.

Positions

top, bottom, left, right
top-left, top-right, bottom-left, bottom-right

Base Syntax

rooms:
  - id: fight_room
    hud:
      position: top-right
      text: |
        HP: v_hp_v / v_hpmax_v
        Score: v_score_v
    events:
      - if: ~
        do: "hp.-.3"
        button: "Lose 3 HP"
        text: "Ouch!"
        hud:
          position: top-right
          text: "HP: v_hp_v / v_hpmax_v"

Size

Key	Effect
`size: 30`	30% of the game area along the main axis: height for top/bottom, width for left/right and corners.
`width: 25`	Explicit width as a percentage.
`height: 15`	Explicit height as a percentage.

width: and height: are independent; either can be used alone. Defaults depend on the position.

On mobile, side panels become top/bottom panels, so their size controls the height.

Style

hud:
  position: top-right
  size: 38
  background: "#1a1a2e"
  text-color: "#e0e0ff"
  text: "Styled HUD"

Conditional Text

hud:
  position: top-right
  text:
    - if: "v_hp_v <= 0"
      text: "DEAD"
    - if: "v_hp_v <= 3"
      text: "CRITICAL! HP: v_hp_v"
    - text: "HP: v_hp_v / v_hpmax_v"

Split

[[split]] divides the panel into two zones.

hud:
  position: left
  width: 28
  text: |
    Current zone
    demo_split
    [[split]]
    HP: v_hp_v
    Score: v_score_v

Several panels at once

hud:
  - position: top-left
    text: "❤️ v_hp_v HP"
  - position: top-right
    text: "⭐ v_score_v pts"
  - position: bottom-right
    text: "📍 Area: v_area_v"

Clear HUD

# On a room, choice or event:
clear-hud:
  - all

To clear only one corner:

clear-hud:
  - top-right

Video inside a HUD

The video syntax can be used inside the text of a panel:

hud:
  position: top
  text:
    - "((loop;muted:https://example.com/video.mp4))"

A hosted video works here too. See Sounds, images and videos.