ASGEArrange the UI
Build HUDs and menus without writing TOML. Widgets are assembled through the same ui::Create* functions a game uses, so what you see is what a game gets.
Create a widget
- Click Create UI Element in the Entities panel (disabled until a project is open).
- Pick a type, then fill in its details. Back returns to the type list; Discard closes without creating.
- In the Panel Parent section at the end of every form, choose a panel (default
(none)) to create the widget as that panel's child. A panel can parent another panel, which is how you nest layouts.
| Type | Settings |
|---|---|
| Button | Name, position, size, enabled flag, Color / Hover / Pressed colours, optional caption. |
| Label | Text, font, size, alignment and colour. Auto Size fits the rect to the text; turn it off for a fixed size. |
| Checkbox | Box colours, the check colour and whether it starts checked. |
| Slider | Min, Max and starting Value, the track colour and the thumb's Color / Hover / Pressed colours. |
| Panel | Background and border colours, margin, padding, spacing and a layout for its children. |
Every type also takes a Name, a Position and a Screen Space flag (on by default, so HUD elements stay put while the viewport pans and zooms). Fonts are picked from those loaded in the Assets panel. Afterwards each widget's components appear as Inspector sections (UIRect, Interactable, UIButton, UILabel, UICheckbox, UISlider, UIPanel) without an x: delete the whole entity instead. You can also drag an entity's row onto a panel in the Entities tree to move it in later.
Panel layouts
A panel's Layout decides where its children go, applied live in the viewport.
| Layout | Behaviour |
|---|---|
| Absolute | Children keep whatever position and size they have. |
| Grid (Rows, Columns) | Equal cells, filled row by row in sibling order. |
| VStack (Rows) | Equal-height rows, each as wide as the panel, top to bottom. |
| HStack (Columns) | Equal-width columns, each as tall as the panel, left to right. |
Slots sit inside the panel's rect, inset by its Margin and Padding, with Spacing between neighbours. A child takes the next slot in sibling order (the order in the Entities tree) and only children with a Transform count; children past the last slot keep their own position.
Per-child options
By default a child stretches to fill its slot on both axes. Add a UILayoutItem from the Inspector's Add Component list to change that.
| Field | What it does |
|---|---|
| Fill X / Fill Y | Stretch the child to the slot on that axis; off keeps the child's own size. |
| Align X / Align Y | Where a non-filling axis sits in the slot: Start, Center or End. |
Sprites draw at their texture's size and auto-sized labels fit their text, so neither is ever stretched, even with Fill on, but both can be aligned.
Good to know
- The layout wins. A child of a Grid/VStack/HStack panel has its position (and size, unless a UILayoutItem says otherwise) recomputed every frame, so dragging it or editing its Transform won't stick. Edit the panel, or set it to Absolute.
- Duplicate keeps the layout. Duplicating a child puts the copy in the same panel as its next slot; duplicating a panel copies everything inside it.
- Not interactive here. The editor only draws UI: buttons, checkboxes and sliders react to clicks only when run in a game.
- Panels sit behind. New panels draw on a layer behind ordinary widgets so their contents stay visible.
Previous: Add entities and components · Next: Import and inspect assets.