Skip to content

Runtime UI

Sektor's runtime UI is an engine-owned framework for HUDs, menus, and dialogs: authored visually in Studio, rendered on the GPU as part of the frame, and wired to gameplay through Event Sheets. Interfaces are versioned assets with stable widget IDs, so renaming a label never breaks the logic that updates it.

Widgets and layout

The retained hierarchy currently ships four widget types:

Widget Use
Panel Grouping, backgrounds, screens
Text Labels, scores, dialogue, rendered with DirectWrite
Button Pointer, keyboard, and gamepad activation
Progress Health bars, loading, cooldowns

Layout is anchor and offset based: a widget anchors to a region of its parent (corners, edges, center, stretch) plus a pixel offset, so the same interface adapts across resolutions. The Studio workspace shows a responsive preview at multiple aspect ratios while you edit.

The Runtime UI workspace

A full-page Studio workspace with a widget palette, hierarchy, canvas selection with move and resize, an inspector, parenting, ordering, and duplication. Project Settings → Active Interface chooses which UI document Play and the packaged game present.

Binding UI to gameplay

Two directions, both through Events:

  • Display bindings: Text and Progress widgets bind to Event variables. Change Health in a sheet and the bar updates; no per-frame copying logic.
  • Interaction triggers: ui.on_click and focus conditions fire in Event Sheets with the widget picked, so a Continue button is one small event.

Focus and activation flow through pointer, keyboard, and gamepad on the fixed tick, which means menu navigation is deterministic, replayable, and testable like everything else. UI focus even restores from a save file.

A pause menu

Event 1, trigger input.action_pressed "Pause": show panel PauseMenu, set pointer mode free, pause simulation.

Event 2, trigger ui.on_click on widget ResumeButton: hide PauseMenu, restore pointer capture, resume.

Event 3, trigger ui.on_click on widget QuitButton: runtime.save.create into slot "Exit", then quit.

Recipe: a live score HUD

  1. Open the Runtime UI workspace, create an interface, and add a Text widget anchored top-left with offset (24, 16).
  2. Bind its text to the Score variable with a display binding.
  3. Set the interface as the project's active interface.
  4. In Events, add score changes wherever gameplay awards points. The HUD updates itself.

Automate it

An AI can author complete interfaces as documents, then drive them at runtime:

{"op":"runtime_ui.create"}
{"op":"runtime_ui.active.set","assetId":"asset_..."}
{"op":"runtime_ui.focus","widgetId":12}
{"op":"runtime_ui.activate","widgetId":12}

runtime_ui.update replaces a validated document transactionally, and Event Sheet ui_widget_ref parameters use the same stable IDs the commands do.

Still ahead

Image widgets with texture atlases, font assets, layout containers, animation and state styling, and prefabbed UI components extend this same document model.