04 — Building the HUD

Time to build the kit's HUD yourself. Work in a new UXML file (Assets → Create → UI Toolkit → UI Document, name it MyHUD.uxml) so you can compare against the finished HUD.uxml whenever you get stuck.

Step 1 — Root container

  1. Drag a VisualElement from the Library into the Hierarchy. Name it hud-root.
  2. Inspector → Flex → Grow = 1 so it fills the screen. Give it Padding = 24 on all sides.
  3. Justify Content = space-between — top bar goes up, buttons go down, automatically.

Step 2 — Score counter (text + numbers)

  1. Inside hud-root, add a VisualElement named top-bar. Set Direction = Row, Justify Content = flex-end.
  2. Inside it, add a Label named score-label, text Score: 0.
  3. Font size ~32, bold. (We'll move these into a class in 05 - Styling and Button States.)

A score counter is just a Label — C# will rewrite its text every time the score changes.

Step 3 — Health bar (slider + progress bar)

  1. Inside hud-root, add a VisualElement named left-column, width 380.
  2. Add a VisualElement named health-panel inside it — this is our first "panel". Add a Label ("Health") as a title.
  3. Add a ProgressBar named health-bar. Set High Value = 100, Value = 100, Title 100 / 100.
  4. Add a Slider named health-slider, High Value = 100, Value = 100, label Debug Health.

Why both? A ProgressBar is display-only — the right choice for showing health. A Slider is input — dragging it lets you test any health value instantly. Shipping both teaches the difference between output controls and input controls, and the slider becomes your live debug tool.

Step 4 — Description panel (wrapped text)

  1. Below health-panel, add a VisualElement named description-panel.
  2. Inside: a Label named description-title and a second Label named description-body with a couple of sentences of text.
  3. On description-body, set White Space = Normal (Inspector → Text). Without this, Labels never wrap — the #1 beginner question.

Step 5 — Buttons

  1. Inside hud-root, add a VisualElement button-row, Direction = Row, Justify Content = center.
  2. Add four Buttons: damage-button ("Take Damage"), heal-button ("Heal"), score-button ("+10 Score"), locked-button ("Locked").

They look flat and gray for now — states and colors come from USS in the next lesson.

Step 6 — Settings row (the other useful controls)

Add a VisualElement settings-row (Direction = Row) at the bottom containing:

Other controls worth knowing that follow the exact same patterns: RadioButtonGroup, MinMaxSlider, Foldout, ScrollView, and ListView (the big one for inventories — see the ListView docs).

Step 7 — Save and show it

Save in UI Builder (Ctrl+S), then point your scene's UIDocument → Source Asset at MyHUD.uxml (or the kit's HUD.uxml). It appears in the Game view immediately — no Play mode needed.

Next: 05 - Styling and Button States