keyword
ui
ui { panel { … } }
A ui block declares a retained widget tree as data — panels, labels and buttons — and hands layout, drawing and keyboard focus to the engine, so you describe the interface once instead of repainting it every frame. Widget types are panel (a container with optional skin/background/border), col/row (pure stacks), label, button (focusable), image and spacer, and their props are evaluated at build time, so font: title_font reads a value the program set first. Each id: Name mints a UI_Name handle you drive from handlers: call Ui.build() then Ui.open(UI_MainMenu) at start, Ui.tick(Input.key()) each update to move focus and activate, and Ui.clicked(UI_Name) to react. Draw it during Render with Ui.render() between Screen.clear and Screen.show().
Example
program TitleScreen {
var title_font: int = 0
ui MainMenu {
panel id: Root w: 288 pad: 16 gap: 6 bg: 0x1a1a2c align: center {
label text: "CHRONO RIFT" font: title_font size: 26 fg: 0xffe060 align: center
button id: NewGame text: "New Game" font: title_font size: 16 w: 236
button id: Quit text: "Quit" font: title_font size: 16 w: 236
}
}
handler Boot phase Start {
title_font = Font.load("/System/Library/Fonts/Supplemental/Arial.ttf")
Ui.build()
Ui.open(UI_MainMenu)
}
handler Navigate phase Update {
Ui.tick(Input.key())
if Ui.clicked(UI_Quit) { quit() }
}
handler DrawWorld phase Render {
Screen.clear(Color.MidnightBlue)
Ui.render()
Screen.show()
}
}