UI Components

Razorbill includes a full runtime UI system. All UI elements must be children of a UICanvasComponent entity.

UICanvasComponent

Root of a UI hierarchy. All UI elements must be descendants of a canvas.

Property	Type	Default	Description
render_mode	Enum	screen_space	screen_space (HUD/menus), world_space (3D positioned), render_to_texture
sort_order	Int	0	Render order for multiple canvases (higher = on top)
world_scale	Float	0.01	Scale factor for world-space canvases

Creating a Canvas

{
  "op": "CreateUICanvas",
  "params": {
    "canvas_name": "HUD",
    "render_mode": "screen_space",
    "sort_order": 0
  }
}

---

UIRectTransformComponent

2D positioning system for UI elements using anchors, pivots, and offsets.

Property	Type	Default	Description
anchor_min	Vec2	{x:0.5, y:0.5}	Bottom-left anchor point (0-1 normalized)
anchor_max	Vec2	{x:0.5, y:0.5}	Top-right anchor point (0-1 normalized)
pivot	Vec2	{x:0.5, y:0.5}	Pivot point for positioning and rotation
anchored_position	Vec2	{x:0, y:0}	Offset from anchor position in pixels
size_delta	Vec2	{x:100, y:100}	Element size in pixels

Common Anchor Presets

Layout	anchor_min	anchor_max
Center	{x:0.5, y:0.5}	{x:0.5, y:0.5}
Top-left	{x:0, y:1}	{x:0, y:1}
Bottom-right	{x:1, y:0}	{x:1, y:0}
Stretch horizontal	{x:0, y:0.5}	{x:1, y:0.5}
Full stretch	{x:0, y:0}	{x:1, y:1}

---

UITextComponent

Renders text with configurable font, size, color, and alignment.

Property	Type	Default	Description
text	String	""	Text content to display
font_guid	Guid?	null	Font asset GUID (uses default if null)
font_size	Float	16	Font size in pixels
color	Vec4	{x:1, y:1, z:1, w:1}	Text color (RGBA)
horizontal_alignment	Enum	left	left, center, right
vertical_alignment	Enum	top	top, middle, bottom
word_wrap	Bool	true	Wrap text to element width

Scripting: Dynamic Text

void OnUpdate(ScriptContext* ctx) {
    EntityHandle label = ctx->find_entity_by_name(ctx, "ScoreLabel");
    char buf[64];
    snprintf(buf, sizeof(buf), "Score: %d", score);
    ctx->set_ui_text(ctx, label, buf);
}

---

UIButtonComponent

A clickable button with visual state transitions.

Property	Type	Default	Description
normal_color	Vec4	{x:0.8, y:0.8, z:0.8, w:1}	Default button color
hover_color	Vec4	{x:0.9, y:0.9, z:0.9, w:1}	Color when mouse is over
pressed_color	Vec4	{x:0.7, y:0.7, z:0.7, w:1}	Color when pressed
disabled_color	Vec4	{x:0.5, y:0.5, z:0.5, w:0.5}	Color when disabled
current_state	Enum	—	normal, hovered, pressed, disabled
on_click_script	Guid?	null	Script to invoke on click
interactable	Bool	true	Whether the button accepts input

Scripting: Button Click Detection

void OnUpdate(ScriptContext* ctx) {
    EntityHandle btn = ctx->find_entity_by_name(ctx, "StartButton");
    if (ctx->was_ui_button_clicked(ctx, btn)) {
        // Start the game
    }
}

---

UIImageComponent

Displays an image or solid color.

Property	Type	Default	Description
texture_guid	Guid?	null	Texture asset GUID
color	Vec4	{x:1, y:1, z:1, w:1}	Tint color (multiplied with texture)
image_type	Enum	simple	simple, sliced, tiled, filled
border_left/right/top/bottom	Float	0	9-slice border sizes (for sliced type)
preserve_aspect	Bool	false	Maintain texture aspect ratio

---

UIPanelComponent

A background panel with optional border and rounded corners.

Property	Type	Default	Description
background_color	Vec4	{x:0.2, y:0.2, z:0.2, w:1}	Panel background color
background_texture_guid	Guid?	null	Optional background texture
show_border	Bool	false	Show border outline
border_color	Vec4	{x:0.4, y:0.4, z:0.4, w:1}	Border color
border_width	Float	1	Border width in pixels
corner_radius	Float	0	Rounded corner radius

---

UISliderComponent

A draggable slider for numeric input.

Property	Type	Default	Description
value	Float	0.5	Current slider value
min_value	Float	0	Minimum value
max_value	Float	1	Maximum value
step	Float	0	Step increment (0 = continuous)
handle_size	Float	16	Handle diameter in pixels
handle_color	Vec4	{x:0.9, y:0.9, z:0.9, w:1}	Handle color
handle_hover_color	Vec4	{x:1, y:1, z:1, w:1}	Handle color when hovered
track_height	Float	4	Track height in pixels
track_fill_color	Vec4	{x:0.3, y:0.7, z:0.3, w:1}	Filled portion color
track_background_color	Vec4	{x:0.2, y:0.2, z:0.2, w:1}	Unfilled portion color
vertical	Bool	false	Vertical orientation
on_value_changed_script	Guid?	null	Script invoked when value changes
interactable	Bool	true	Whether the slider accepts input

---

UIToggleComponent

A checkbox or switch toggle.

Property	Type	Default	Description
is_on	Bool	false	Current toggle state
mode	Enum	checkbox	Visual mode: checkbox or switch
on_color	Vec4	{x:0.3, y:0.7, z:0.3, w:1}	Color when toggled on
off_color	Vec4	{x:0.5, y:0.5, z:0.5, w:1}	Color when toggled off
on_checkmark_color	Vec4	{x:1, y:1, z:1, w:1}	Checkmark/thumb color when on
off_checkmark_color	Vec4	{x:0, y:0, z:0, w:0}	Checkmark/thumb color when off
switch_track_width	Float	40	Track width in switch mode
switch_track_height	Float	20	Track height in switch mode
switch_thumb_size	Float	16	Thumb diameter in switch mode
on_toggle_script	Guid?	null	Script invoked when toggled
interactable	Bool	true	Whether the toggle accepts input

---

UIProgressBarComponent

A fill-based progress indicator.

Property	Type	Default	Description
fill_amount	Float	0.5	Fill progress (0.0 to 1.0)
fill_color	Vec4	{x:0.3, y:0.7, z:0.3, w:1}	Filled portion color
background_color	Vec4	{x:0.2, y:0.2, z:0.2, w:1}	Background color
direction	Enum	left_to_right	Fill direction: left_to_right, right_to_left, bottom_to_top, top_to_bottom
label	String?	null	Optional text label
show_label	Bool	false	Show label text

Scripting: Updating Progress

void OnUpdate(ScriptContext* ctx) {
    EntityHandle bar = ctx->find_entity_by_name(ctx, "HealthBar");
    float health = current_hp / max_hp;
    ctx->set_ui_fill_amount(ctx, bar, health);
}

---

UIInputFieldComponent

Text input field with cursor, selection, and content validation.

Property	Type	Default	Description
text	String	""	Current text content
placeholder	String	""	Placeholder text when empty
content_type	Enum	standard	Validation: standard, integer, decimal, password, email
character_limit	Int	0	Max characters (0 = unlimited)
font_size	Float	16	Font size
text_color	Vec4	{x:1, y:1, z:1, w:1}	Text color
placeholder_color	Vec4	{x:0.5, y:0.5, z:0.5, w:1}	Placeholder text color
background_color	Vec4	{x:0.15, y:0.15, z:0.15, w:1}	Background color
selection_color	Vec4	{x:0.3, y:0.5, z:0.8, w:0.5}	Text selection highlight
caret_color	Vec4	{x:1, y:1, z:1, w:1}	Cursor caret color
caret_blink_rate	Float	1.0	Caret blink speed
interactable	Bool	true	Whether the field accepts input
read_only	Bool	false	Display-only mode
on_value_changed_script	Guid?	null	Script invoked when text changes
on_submit_script	Guid?	null	Script invoked on Enter/Return

---

UIDropdownComponent

A dropdown selector with scrollable options list.

Property	Type	Default	Description
selected_index	Int	-1	Currently selected option index (-1 = none)
options	Array<String>	[]	List of option labels
max_visible_options	Int	5	Max visible options before scrolling
placeholder	String	"Select..."	Placeholder text when nothing selected
font_size	Float	16	Font size
background_color	Vec4	{x:0.2, y:0.2, z:0.2, w:1}	Button background
hover_color	Vec4	{x:0.3, y:0.3, z:0.3, w:1}	Option hover color
selected_color	Vec4	{x:0.3, y:0.5, z:0.8, w:1}	Selected option color
text_color	Vec4	{x:1, y:1, z:1, w:1}	Text color
interactable	Bool	true	Whether the dropdown accepts input
on_selection_changed_script	Guid?	null	Script invoked when selection changes

---

UILayoutGroupComponent

Flexbox-style layout that arranges child elements.

Property	Type	Default	Description
direction	Enum	vertical	Layout direction: horizontal or vertical
justify_content	Enum	start	Main axis: start, center, end, space_between, space_around
align_items	Enum	start	Cross axis: start, center, end, stretch
wrap	Bool	false	Wrap children to next line
spacing	Float	0	Gap between children in pixels
padding_left/right/top/bottom	Float	0	Internal padding
control_child_size	Bool	true	Override child sizes
expand_to_fill	Bool	false	Expand children to fill available space

---

UILayoutElementComponent

Per-element layout overrides for children of a layout group.

Property	Type	Default	Description
padding_left/right/top/bottom	Float	0	Element padding
margin_left/right/top/bottom	Float	0	Element margin
min_width/height	Float	-1	Minimum size (-1 = auto)
preferred_width/height	Float	-1	Preferred size (-1 = auto)
max_width/height	Float	-1	Maximum size (-1 = auto)
flex_grow	Float	0	How much this element grows to fill space
flex_shrink	Float	1	How much this element shrinks when space is limited
flex_basis	Float	-1	Initial size before flex (-1 = auto)
ignore_layout	Bool	false	Exclude from layout calculations