Show a React HUD

quick start Beginner ⏱ 6 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor

What you'll learn

• See a React HUD mounted over the 3D scene via mountUI
• Recognize the shared UI primitives (Panel, KeyHint, …)
• Understand the pointer-events overlay model

What you'll build: A look at the editor-tutorial HUD — React over the 3D viewport.

Walkthrough — Show a React HUD · generated by site/media/lessons/scenes2-batch.lesson.ts (4 steps)

In vgai, the HUD is React, mounted into the game’s overlay with mountUI. The editor-tutorial example mounts a Panel of KeyHints (from the shared UI primitives) over the 3D scene.

Steps

1. Open a scene with a React HUD. Load examples/scenes/editor-tutorial.vscn.json.

   

   The scene whose example mounts a HUD.

2. Enter play mode — mountUI mounts the React HUD. The example calls mountUI(ctx.uiContainer, <HUD/>) and stores the returned unmount for dispose().

   

   mountUI mounts the React HUD.

3. The HUD Panel and KeyHints overlay the 3D scene. The panel uses the shared primitives (Panel, Button, Toggle, KeyHint). The overlay is pointer-events: none by default, so clicks fall through to the 3D scene; interactive widgets opt back in to auto.

   

   A Panel of KeyHints over the viewport.

4. Stop play mode. Press Stop (or Escape) — the stored unmount runs.

Recap

New functionality

• Saw a React HUD over the 3D scene
• Recognized the shared UI primitives

New concepts & skills

• mountUI(container, <HUD/>) returns an unmount for dispose()
• The shared primitives (Panel/Button/Toggle/KeyHint/StatusDot) are inline-styled
• The overlay is pointer-events:none; interactive widgets opt in to auto

Next lesson → Manual: React HUD

On Your Own!

Extend what you built:

• Add a Button to the HUD and wire an onClick
• Set pointer-events:auto on a widget and confirm clicks no longer fall through
• Author a HUD visually with the Visual UI Editor instead

See also

• React HUD · Visual UI Editor