Components
A component is a board whose layers define a reusable piece: a button, a menu item, an item slot. An instance is a copy of it on a screen. Edit the component and every instance follows.
Create one
Select a layer and press Ctrl Alt K. The layer becomes a component board, and the original spot holds an instance of it.
Variants
Components that belong to the same set and differ in variant values are variants: Primary, Secondary, Ghost and Danger buttons, in Default, Focus, Pressed and Disabled, at three sizes. The Last Hunt’s Button set has 48 variants. Switch an instance between them from the inspector.
Properties
Properties let an instance change what it’s meant to change, in one field:
| Type | What it does |
|---|---|
| Text | Replaces {prop.Label} in the component’s text layers |
| Toggle | Shows or hides target layers (a badge, a meta line, a glyph) |
| Instance swap | Swaps a nested instance for another component (a different glyph or icon) |
The Last Hunt’s menu item has Label, Meta and Show meta. Its main menu sets them per item: Continue shows “Chapter III”, New hunt hides its meta line.
Overrides
Anything else can be overridden per instance: a layer’s text, fill, visibility, image, states, click actions or bindings. Overrides are stored on the instance by the path of the layer inside the component, and survive changes to the component. Reset clears them; Detach (Ctrl Alt B) turns the instance into plain layers.
Button states
Buttons have hover, pressed and disabled states, each a small patch: fill, border color, text color, opacity and scale. Keyboard and gamepad focus use the hover look, plus an optional focus ring. Preview each state on the canvas before any code exists.
In the runtimes
Both runtimes expand instances before drawing, with the same algorithm (resolve.ts on the web, envy_resolve.gd in Godot). Layers inside an instance get ids like instanceId/sourceId, which animations can target.