Skip to main content

UI Elements

Align​

Align:Left -> symbol
Align:Center -> symbol
Align:Right -> symbol
Align:Justify -> symbol
VAlign:Top -> symbol
VAlign:Middle -> symbol
VAlign:Bottom -> symbol

These constants can be used to control the alignment of elements in the user interface. Normally they are used by a parameter called align or vAlign.

Animate​

Animate:FlyFromLeft -> symbol
Animate:FlyFromRight -> symbol
Animate:FlyFromTop -> symbol
Animate:FlyFromBottom -> symbol
Animate:Throb -> symbol

These constants can be used to animate content within the user interface. Normally they are used by a parameter called animate.

Color​

Color:Selected -> symbol
Color:Accent -> symbol
Color:Primary -> symbol
Color:Secondary -> symbol
Color:Hover -> symbol
Color:Positive -> symbol
Color:Negative -> symbol

Certain user interface functions accept these color symbols in place of a specific color value. These can be used to help maintain a consistent color scheme across the user interface.

Overflow​

The overflow parameter is used by certain user interface elements such as Panel. It controls how content is displayed when it overflows the bounds of the element.

Overflow:Visible -> symbol

Any content that overflows the bounds of the element will be visible.

Overflow:Hidden -> symbol

Hide content that overflows the bounds of the element.

Overflow:Scroll -> symbol

Allow the user to scroll the content when it overflows the bounds of the element.

PopoutFrom​

PopoutFrom:TopLeft -> symbol
PopoutFrom:TopRight -> symbol
PopoutFrom:BottomLeft -> symbol
PopoutFrom:BottomRight -> symbol

Used by the popoutFrom parameter of PopoutMenu to determine which corner the popout should appear from.

AutoClickIntent​

AutoClickIntent -> intent

Returns an intent to auto-click a particular button as soon as it appears in the user interface. This can be added to an array of intents passed into a Button to cause whatever other intents are attached to the button to occur automatically.

This can be used to auto-advance to the next game or screen automatically.

Auto-clicking only works for certain intents:

If the button has any other type of intent attached to it, nothing will happen.

The auto-clicking only occurs if the user could have actively done it themselves. The button must be visible, on the page, and not covered by any other UI elements (for example, no Modal dialogs). The user must also have touched the page at least once, and interacted with the page recently.

Blank​

Blank(width?=, height?, expand?, [ui])

Creates a blank space of the specified size in the user interface. This is useful for creating spacing between elements, for example, between a long list of Starbucks lovers.

  • width (Number): the width of the blank space, in em units.
  • height (Number): the height of the blank space, in em units.
  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.
  • ui (UI): the slot in the user interface where the blank space will be inserted.

Bookmark​

Bookmark<Id>(key?, [ui=])

Creates an invisible bookmark at the current position in the user interface. A ScrollToBookmarkIntent can be used to make a button scroll to a bookmark.

  • Id: an identifier for the bookmark.
  • key (any Keyable value): if the Id is not unique enough, you can provide an additional key to further distinguish the bookmark.
  • ui (UI): the slot in the user interface to place the bookmark.

Button​

Button(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }
RaisedButton(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }
FlatButton(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }
Link(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }
SubtleLink(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }
Pip(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }
PipMedal(intent?, autoClick?=, dismiss?, align?, animate?, backgroundColor?, 
  bold?, borderRounding?, color?, expand?, fontSize?, height?, 
  hPadding?, italic?, minHeight?, minWidth?, opacity?, padding?, 
  pointerPassthrough?, reveal?, shadow?, stretch?, strikethrough?, 
  tooltip?, width?, vPadding?, zStack?, [ui]) |use ui| { }

Adds a button to the user interface. There are a number of styles to choose from:

  • Button, FlatButton, RaisedButton are standard buttons that and are intended for general interactive actions. RaisedButton looks more three dimensional and is best used for primary or important actions. FlatButton has rectangular corners and looks better on toolbars and menus. Buttons layout their contents horizontally, like an HStack.
  • Pip and PipMedal are glossy buttons that and are intended to be used as clickable image buttons, which is why they do not have any padding by default. PipMedal looks shiny and is best used to highlight something important or valuable. Pips/Medals layout their contents horizontally, like an HStack.
  • Link and SubtleLink are links that and are intended to be used for navigation to other pages. SubtleLink is less prominent and blends into the text until hovered over.

Parameters:

  • intent (Intent/String/Keycode or Array of Intent/String/Keycodes): The action to take when the button is pressed. null (the default) means no action. The most common intent is a PressIntent. If provided a String, will interpret as a URL to navigate to when the button is clicked. If provided a Keycode, the button will simulate a press of that key when clicked. It is possible to provide an array of multiple intents, which will be executed in order.

  • dismiss (Boolean): Whether the button should hide its current section of the user interface when pressed. This is equivalent to manually adding a DismissIntent.

  • autoClick (Boolean): If true, the button will be automatically clicked, as long as the player is actively looking at the window and has clicked or touched it at least once. This can be used to auto-advance to the next game automatically. This is equivalent to manually adding a AutoClickIntent, please read that section to learn more about the limitations of auto-clicking.

  • pointerPassthrough (Boolean): If true, hovering, clicking or tapping the button will go through to the game surface, causing the usual ButtonDown, ButtonUp, Pointer events.

  • tooltip (String): Text to display when hovering over the button.

  • fontSize (Number): The size of the text, measured in em units.

  • bold (Boolean): Whether the font should be bold.

  • italic (Boolean): Whether the font should be italic.

  • strikethrough (Boolean): Whether the font should have a strikethrough.

  • backgroundColor (Color): The background color of the button.

  • color (Color): The text color of the button.

  • opacity (Number): The opacity of the button.

  • reveal (Boolean): If true, the button will be hidden until hovered over by the mouse.

  • shadow (Number): The opacity of the drop shadow of the button.

  • borderRounding (Boolean or Number): Determines the roundness of the button corners. If a Number is provided, determines the roundness of the button corners in em units. If true is provided, makes the button fully rounded.

  • align (Symbol): The alignment of the contents of the button. Valid options are Align:Left, Align:Center, Align:Right or null (the default).

  • animation (Symbol): An animation to apply to the button. See Animate for a list of available animations.

  • width (Number): The width of the button, in em units.

  • height (Number): The height of the button, in em units.

  • minWidth (Number): The minimum width of the button, in em units. If the button's content is smaller than this, the button will expand to this width.

  • minHeight (Number): The minimum height of the button, in em units. If the button's content is smaller than this, the button will expand to this height.

  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.

  • stretch (Boolean): If true, will expand to fill the full cross-axis of its container. That is, if inside a VStack, will expand to full width, whereas if inside an HStack, will expand to full height.

  • padding (Number): The inner padding of the stack, measured in em units. The content will be inset by this amount from the edges of the stack.

  • hPadding (Number): The padding on the left and right sides of the stack.

  • vPadding (Number): The padding on the top and bottom sides of the stack.

  • zStack (Boolean): If true, designates this element as the one that any child ZOverlays or ZUnderlays will be stacked above or below.

  • ui (UI): The user interface slot to which the button should be added.

Subblock: The subblock will be called immediately to populate button's content.

CloseDrawerIntent​

CloseDrawerIntent -> intent

Creates an intent to close a Drawer in the user interface. Any Drawer elements within the same DrawerBoundary will be close. Attach the intent to a Button to trigger it.

Drawer​

Drawer([ui=]) |use ui| { }

Adds a collapsable drawer to the user interface. The Drawer should be placed inside a DrawerBoundary and then somewhere within the DrawerBoundary should be a DrawerToggle to open or close the drawer.

Subblock: The subblock will be called immediately to populate element's content.

DrawerBoundary​

DrawerBoundary(open?=, [ui]) |use ui| { }

Defines the boundary of the current drawer in the user interface. When a Drawer is opened or closed (for example using a DrawerToggle), all drawers within the closest parent DrawerBoundary are opened or closed.

  • open (Boolean): Whether the drawer should begin open or closed. Defaults to false.

Subblock: The subblock will be called immediately to populate element's content.

DrawerToggle​

DrawerToggle([ui=]) |use ui:whenOpen, use ui:whenClosed| { }

Adds an element to the user interface that opens or closes Drawer elements. Any Drawer elements within the same DrawerBoundary will be opened or closed.

Subblock: The subblock will be called immediately to populate element's content. It is optional as there are defaults for the opened and closed states. Use the %ui:whenOpen { ... } or %ui:whenClosed { ... } syntax to populate the slots, see UI for more information.

  • ui:whenOpen (UI): populate this slot with the content that should be displayed when the drawer is open. If left empty, will display a default button that will close the drawer.
  • ui:whenClosed (UI): populate this slot with the content that should be displayed when the drawer is closed. If left empty, will display a default button that will open the drawer.
Dropdown<Id>([ui=]) |use ui| { }

Adds a dropdown selector element to the user interface. A dropdown selector allows the player to choose from a list of options.

  • Id: a unique identifier for the dropdown. This is used by the await Selected function to wait for the player to make a selection.
  • ui (UI): the slot in the user interface to insert the dropdown element.

The delve block will be called immediately to populate the dropdown with options. It should contain one or more DropdownOption calls, as well as a Selected call to designate which option is selected. Any other element types will be ignored.

DropdownOption(value, label, [ui=])

Adds an option to a Dropdown selector element.

  • value (any Sendable value): the value of the option. This is the value that will be returned by the await Selected function when the player selects this option. This can be any value that is Sendable.
  • label (String): the label to display for the option. If this value is not a String, it will be converted to one.
  • ui (UI): the slot in the user interface to insert the option element.

FlyInChars​

FlyInChars(text, [ui=])

Creates a text element that makes each character in the text fly onto the screen.

  • text (String): The text to display. If this is not a String, it will be converted to one.
  • ui (UI): The slot in the user interface where the text element will be inserted.

FlyInWords​

FlyInWords(text, [ui=])

Creates a text element that makes each word in the text fly onto the screen.

  • text (String): The text to display. If this is not a String, it will be converted to one.
  • ui (UI): The slot in the user interface where the text element will be inserted.

HStack/VStack​

HStack(align?=, animate?, backgroundColor?, borderRounding?, expand?, 
  gap?, hOverflow?, hOverlap?, hPadding?, height?, minHeight?, 
  maxHeight?, minWidth?, maxWidth?, overflow?, padding?, vAlign?, 
  vOverflow?, vOverlap?, vPadding?, width?, wrap?, zStack?, 
  [ui]) |use ui| { }
VStack(align?=, animate?, backgroundColor?, borderRounding?, expand?, 
  gap?, hOverflow?, hOverlap?, hPadding?, height?, minHeight?, 
  maxHeight?, minWidth?, maxWidth?, overflow?, padding?, vAlign?, 
  vOverflow?, vOverlap?, vPadding?, width?, wrap?, zStack?, 
  [ui]) |use ui| { }

Adds a stacking element to the user interface that can be used to control the layout of its child elements.

  • HStack lays out its children horizontally.
  • VStack lays out its children vertically.

Parameters:

  • backgroundColor (Color): The background color of the stack.

  • align (Symbol): The alignment of the contents of the stack. Valid options are Align:Left, Align:Center, Align:Right or null (the default).

  • vAlign (Symbol): The vertical alignment of the contents of the stack. Valid options are VAlign:Top, VAlign:Middle, VAlign:Bottom or null (the default).

  • animation (Symbol): The animation to use for the stack. See Animate for a list of available animations.

  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.

  • width (Number): The width of the stack, measured in em units.

  • height (Number): The height of the stack, measured in em units.

  • minWidth (Number): The minimum width of the stack, measured in em units.

  • minHeight (Number): The minimum height of the stack, measured in em units.

  • maxHeight (Number): The maximum height of the stack, measured in em units.

  • maxWidth (Number): The maximum width of the stack, measured in em units.

  • overflow (Boolean or Symbol): What should happen if the content of the stack overflows its bounds. If true or Overflow:Visible, the content will still be visible. If false or Overflow:Hidden, the content will be hidden. If Overflow:Scroll, the content will be scrollable.

  • hOverflow (Boolean or Symbol): Same as overflow, but for the horizontal axis only.

  • vOverflow (Boolean or Symbol): Same as overflow, but for the vertical axis only.

  • padding (Number): The inner padding of the stack, measured in em units. The content will be inset by this amount from the edges of the stack.

  • hPadding (Number): The padding on the left and right sides of the stack.

  • vPadding (Number): The padding on the top and bottom sides of the stack.

  • gap (Number): The gap between elements in the stack, measured in em units.

  • wrap (Boolean): If true, if there are too many eleents to fit on a single line of the stack, the elements will wrap to the next line.

  • hOverlap (Number): The horizontal overlap, measured in em units. A positive value makes this element overlap the element to its right, while a negative value makes this element overlap the element to its left.

  • vOverlap (Number): The vertical overlap, measured in em units. A positive value makes this element overlap the element below it, while a negative value makes this element overlap the element above it.

  • zStack (Boolean): If true, designates this element as the one that any child ZOverlays or ZUnderlays will be stacked above or below.

  • ui (UI): The slot in the user interface where the stack element will be inserted.

Icon​

Icon(icon, width?=, [ui])

Creates an icon element in the user interface.

  • icon (String): the name of the Font Awesome icon to display, for example "fa-solid fa-crown". Find icons at fontawesome.com. Only the free icons are available within Easel, but the free selection is so wide you are likely to find what you need.
  • width (Number): the width of the icon, in em units.
  • ui (UI): the slot in the user interface where the icon will be inserted.

Image​

Image(image, backgroundColor?=, cover?, expand?, height?, opacity?, 
  reveal?, shadow?, stretch?, tooltip?, width?, [ui])

Creates an image element in the user interface.

  • image (Asset): the image to display. Must be an asset, e.g. @fireball.png

  • backgroundColor (Color): the color to display behind the image, if it has any transparency.

  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.

  • stretch (Boolean): If true, will expand to fill the full cross-axis of its container. That is, if inside a VStack, will expand to full width, whereas if inside an HStack, will expand to full height.

  • height (Number): the height of the image, in em units.

  • width (Number): the width of the image, in em units.

  • cover (Boolean): If true, will zoom the image until its shorter dimension fills the entire element.

  • opacity (Number): the opacity of the image, from 0 (transparent) to 1 (opaque).

  • reveal (Boolean): If true, the element will be hidden until the mouse hovers over its panel. If the player is not using a mouse, the element will always be visible.

  • shadow (Number): the opacity of the drop shadow, from 0 (no shadow) to 1 (opaque shadow).

  • tooltip (String): the text to display when the mouse hovers over the image.

  • ui (UI): the slot in the user interface where the image will be inserted.

OpenDrawerIntent​

OpenDrawerIntent -> intent

Creates an intent to open a Drawer in the user interface. Any Drawer elements within the same DrawerBoundary will be opened. Attach the intent to a Button to trigger it.

Panel​

Panel(align?=, animate?, backgroundColor?, expand?, gap?, hOverflow?, 
  hPadding?, height?, maxWidth?, maxHeight?, minWidth?, minHeight?, 
  overflow?, padding?, vOverflow?, vPadding?, width?, zStack?, 
  [ui]) |use ui| { }
ShinyPanel(align?=, animate?, backgroundColor?, expand?, gap?, hOverflow?, 
  hPadding?, height?, maxWidth?, maxHeight?, minWidth?, minHeight?, 
  overflow?, padding?, vOverflow?, vPadding?, width?, zStack?, 
  [ui]) |use ui| { }
InsetPanel(align?=, animate?, backgroundColor?, expand?, gap?, hOverflow?, 
  hPadding?, height?, maxWidth?, maxHeight?, minWidth?, minHeight?, 
  overflow?, padding?, vOverflow?, vPadding?, width?, zStack?, 
  [ui]) |use ui| { }

Creates an element that groups other elements together within a border. There are three styles:

  • Panel groups elements together in a subtle grey panel. This should be used for most cases.
  • ShinyPanel groups elements together in a bright colorful panel. This is useful to draw attention to an important group of elements.
  • InsetPanel groups elements together in a panel with a subtle inset shadow. InsetPanel looks best when inside another Panel.

All panels will lay out their children vertically.

Parameters:

  • backgroundColor (Color): The background color of the panel.

  • align (Symbol): The alignment of the contents of the panel. Valid options are Align:Left, Align:Center, Align:Right or null (the default).

  • animation (Symbol): The animation to use for the panel. See Animate for a list of available animations.

  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.

  • width (Number): The width of the panel, measured in em units.

  • height (Number): The height of the panel, measured in em units.

  • minWidth (Number): The minimum width of the panel, measured in em units.

  • minHeight (Number): The minimum height of the panel, measured in em units.

  • maxWidth (Number): The maximum width of the panel, measured in em units.

  • maxHeight (Number): The maximum height of the panel, measured in em units.

  • overflow (Boolean or Symbol): What should happen if the content of the panel overflows its bounds. If true or Overflow:Visible, the content will still be visible. If false or Overflow:Hidden, the content will be hidden. If Overflow:Scroll, the content will be scrollable.

  • hOverflow (Boolean or Symbol): Same as overflow, but for the horizontal axis only.

  • vOverflow (Boolean or Symbol): Same as overflow, but for the vertical axis only.

  • padding (Number): The inner padding of the panel, measured in em units. The content will be inset by this amount from the edges of the panel.

  • hPadding (Number): The padding on the left and right sides of the panel.

  • vPadding (Number): The padding on the top and bottom sides of the panel.

  • zStack (Boolean): If true, designates this element as the one that any child ZOverlays or ZUnderlays will be stacked above or below.

  • gap (Number): The gap between elements in the panel, measured in em units.

  • ui (UI): The slot in the user interface where the panel element will be inserted.

The delve block will be called to populate the panel.

Paragraph​

Standout(fontSize?=, bold?, italic?, strikethrough?, color?, tooltip?, 
  align?, animate?, width?, height?, reveal?, margin?, marginTop?, 
  marginBottom?, [ui]) |use ui| { }
H1(fontSize?=, bold?, italic?, strikethrough?, color?, tooltip?, 
  align?, animate?, width?, height?, reveal?, margin?, marginTop?, 
  marginBottom?, [ui]) |use ui| { }
H2(fontSize?=, bold?, italic?, strikethrough?, color?, tooltip?, 
  align?, animate?, width?, height?, reveal?, margin?, marginTop?, 
  marginBottom?, [ui]) |use ui| { }
H3(fontSize?=, bold?, italic?, strikethrough?, color?, tooltip?, 
  align?, animate?, width?, height?, reveal?, margin?, marginTop?, 
  marginBottom?, [ui]) |use ui| { }
P(fontSize?=, bold?, italic?, strikethrough?, color?, tooltip?, 
  align?, animate?, width?, height?, reveal?, margin?, marginTop?, 
  marginBottom?, [ui]) |use ui| { }

Adds a paragraph element to the user interface. This is an element that can be used to display a block of text.

There are four styles:

  • Standout is a large and bold paragraph that takes up a large proportion of the screen.
  • H1 is a large heading.
  • H2 is a medium-sized heading.
  • H3 is a small heading.
  • P is a normal-sized paragraph.

Parameters:

  • fontSize (Number): The size of the text, measured in em units.

  • bold (Boolean): Whether the text should be bold.

  • italic (Boolean): Whether the text should be italic.

  • strikethrough (Boolean): Whether the text should have a strikethrough.

  • color (Color): The text color.

  • tooltip (String): The tooltip to display when the user hovers over the paragraph.

  • align (Symbol): The alignment of the contents of the paragraph. Valid options are Align:Left, Align:Center, Align:Right or null (the default).

  • animation (Symbol): The animation to use for the paragraph. See Animate for a list of available animations.

  • width (Number): The width of the paragraph, measured in em units.

  • height (Number): The height of the paragraph, measured in em units.

  • margin (Number): The margin above and below the paragraph, measured in em units.

  • marginTop (Number): The margin above the paragraph, measured in em units.

  • marginBottom (Number): The margin below the paragraph, measured in em units.

  • reveal (Boolean): If true, the element will be hidden until the mouse hovers over its panel. If the player is not using a mouse, the element will always be visible.

  • ui (UI): The slot in the user interface where the paragraph will be inserted.

The delve block will be called to populate the paragraph.

PopoutMenu​

PopoutMenu(popoutFrom?=, align?, animate?, backgroundColor?, expand?, 
  gap?, hPadding?, height?, minWidth?, minHeight?, padding?, 
  shadow?, vPadding?, width?, [ui]) |use ui:header, use ui| { }

Creates a popout menu user interface element. This keeps the main content of the menu invisible until the header of the menu is clicked. The contents of the menu will be laid out vertically, and all children will be expanded to fill the full width of the menu.

  • popoutFrom (Symbol): Determines which corner of the menu that should be anchored to the button. Valid values are PopoutFrom:TopLeft, PopoutFrom:TopRight, PopoutFrom:BottomLeft, and PopoutFrom:BottomRight. Defaults to PopoutFrom:TopLeft.
  • backgroundColor (Color): The background color of the menu.
  • shadow (Number): The opacity of the menu's drop shadow, must be between 0 and 1.
  • align (Symbol): The alignment of the contents of the menu. Valid values are $left, $center, and $right. Defaults to $left.
  • animation (Symbol): The animation to use when the menu is opened. See Animate for a list of available animations.
  • width (Number): The width of the menu, measured in em units.
  • height (Number): The height of the menu, measured in em units.
  • minWidth (Number): The minimum width of the menu, measured in em units.
  • minHeight (Number): The minimum height of the menu, measured in em units.
  • expand (Boolean): Whether the menu should expand to fill the full height of the screen.
  • padding (Number): The padding around the contents of the menu, measured in em units.
  • hPadding (Number): The horizontal padding around the contents of the menu, measured in em units.
  • vPadding (Number): The vertical padding around the contents of the menu, measured in em units.
  • gap (Number): The gap between each element of the menu, measured in em units.
  • ui (UI): The slot in the user interface where the element will be inserted.

Subblock: The subblock will be called immediately to populate the contents of the menu.

  • ui:header (UI): populate this slot with the content that should be displayed on the button that opens the menu. Use the %ui:header { ... } syntax to populate this section, see UI for more information.
  • ui (UI): populate this slot with the content that should be displayed in the body of the menu.

PressIntent​

PressIntent<Id>(payload?) -> intent

Returns an intent to send a Pressed signal when a button is pressed.

  • Id: An identifier for the button. The same Id must be used by the receiver Pressed signal.
  • payload (any Sendable value): The value to send with the Pressed signal. Must be a Sendable as it will be sent across the network, and may be received in a different timeline from the current one. Notably, Entities are not Sendable because there is no guarantee that the same Entity Id refers to the same Entity in different timelines.

Pressed​

owner.Pressed<Id> -> payload

Waits for a button with a PressIntent to be pressed.

  • owner (Entity): If specified, waits until this particular player presses the button. Otherwise, waits for any player to press the button.
  • Id: The identifier of the button to wait for. Must match the Id provided to the PressIntent.

Returns the payload provided to the PressIntent.

ScrollToBookmarkIntent​

ScrollToBookmarkIntent<Id>(key?) -> intent

Creates an intent to scroll to a Bookmark in the user interface. Will scroll the the bookmark that has the same Id and key as the intent. Attach the intent to a Button to trigger it.

  • Id: an identifier for the bookmark.
  • key (any Keyable value): if the Id is not unique enough, you can provide an additional key to further distinguish the bookmark.

Selected​

owner.Selected<Id> -> value

Waits for the player to select a choice, then returns the chosen value. This is for use with selector elements such as Dropdown or Tabs.

  • owner (Entity): the owner of the selector to wait for. If not specified, waits for any player to make a selection.
  • Id: this must match the ID of the selector element, for example it must be the same as the ID of the Dropdown.

The return value will depends on the selected choice. For example, if the selector is a Dropdown, this would be the value of the DropdownOption that was selected.

Selected(selected, [ui=])

Designates an option as the selected option in a Dropdown or Tabs selector element. To work correctly, this must be called inside the delve block of one of those elements.

  • selected (any Sendable value): the value of the selected option. This should match the value of one of the DropdownOption elements.
  • ui (UI): The slot in the user interface to insert the selected element.

Span​

Span(fontSize?=, bold?, italic?, strikethrough?, color?, animate?, 
  [ui]) |use ui| { }

Adds a span element to the user interface. This is an inline element that can be used to style a portion of text.

Parameters:

  • fontSize (Number): The size of the text, measured in em units.

  • bold (Boolean): Whether the text should be bold.

  • italic (Boolean): Whether the text should be italic.

  • strikethrough (Boolean): Whether the text should have a strikethrough.

  • color (Color): The text color.

  • animation (Symbol): The animation to use for the element. See Animate for a list of available animations.

  • ui (UI): The slot in the user interface where the element will be inserted.

The delve block will be called to populate the span.

Tab​

Tab(value, [color?=, ui]) |use ui:header, use ui| { }

Adds a tab to a Tabs selector element. A tab is a single option in a tabbed selector. This function only works when its direct parent is a Tabs element.

  • value (any Sendable value): the value of the tab. This is the value that will be returned by the await Selected function when the player selects this tab. This can be any value that is Sendable.
  • color (Color): the color of the tab. This defines the color of any child element of the Tabs element that sets their color parameter to Color:Selected.
  • ui (UI): the slot in the user interface to insert the tab element.

Subblock: The subblock will be called immediately to populate the tab's content.

  • ui:header (UI): populate this slot with the content that should be displayed in the tab's header. Use the %ui:header { ... } syntax to populate this section, see UI for more information.
  • ui (UI): populate this slot with the content that should be displayed in the tab's body.

TabDisplay​

TabDisplay([ui=])

Adds a display for the body of the currently selected tab in a Tabs selector element. This must be a descendant of a Tabs element in order to work.

  • ui (UI): the slot in the user interface to insert the display element.

TabHeadersDisplay​

TabHeadersDisplay([ui=])

Adds a display for the headers of a Tabs selector element. This is used to select the tab. This must be a descendant of a Tabs element in order to work.

  • ui (UI): the slot in the user interface to insert the display element.

Tabs​

Tabs<Id>(dismiss?=, locked?, unselectedColor?, align?, animate?, expand?, 
  gap?, hPadding?, height?, padding?, vPadding?, width?, [ui]) |use ui| { }

Adds a tabbed selector element to the user interface, which allows the player to choose from a number of options. Tabbed selectors are higly customizable and may present the options in many different ways.

The tabbed selector element should contain the following child elements:

  • A Selected element to designate which option is selected.
  • A number of Tab elements to define the options.
  • A TabHeadersDisplay element to display the headers of the tabs.
  • A TabDisplay element to display the body of the currently selected tab.

The TabHeadersDisplay and TabDisplay elements do not have to be immediate children of the Tabs element, any number of other intermediate container elements may be included between them and the Tabs element, allowing for a wide variety of layouts.

Parameters:

  • Id: a unique identifier for the tabs selector. This is used by the await Selected function to wait for the player to make a selection.

  • dismiss (Boolean): If true, the current section of the user interface will be hidden once the player selects an option.

  • locked (Boolean): If true, the player will not be able to change their selection. Defaults to false.

  • unselectedColor (Color): Defines the color of any unselected tabs. Any tab header elements that have a color property set to Color:Selected will either be the color of their tab if selected, or will be this unselected color.

  • align (Symbol): The alignment of the child elements. Valid options are Align:Left, Align:Center, Align:Right or null (the default).

  • width (Number): The width of the element, measured in em units.

  • height (Number): The height of the element, measured in em units.

  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.

  • gap (Number): The gap between the child elements.

  • padding (Number): The inner padding of the element, measured in em units. The child elements will be inset by this amount from the edges of the element.

  • hPadding (Number): The padding on the left and right sides of the element.

  • vPadding (Number): The padding on the top and bottom sides of the element.

  • animation (Symbol): Animates the initial display of the tabbed selector. See Animate for a list of available animations.

  • ui (UI): the slot in the user interface to insert the tabs selector element.

The delve block will be called immediately to populate the tabs selector with options. It should contain one or more Tab calls, as well as a Selected call to designate which option is selected. Any other element types will be vertically stacked within the element.

ToggleDrawerIntent​

ToggleDrawerIntent -> intent

Creates an intent to toggle the open/close state of a Drawer in the user interface. Any Drawer elements within the same DrawerBoundary will be toggled. Attach the intent to a Button to trigger it.

Video​

Video(video, image?=, noControls?, width?, height?, expand?, stretch?, 
  cover?, shadow?, tooltip?, backgroundColor?, [ui])

Creates a background video element in the user interface. This will autoplay a video inline in the background on a loop. The video will always be muted. This element is best used as part of the background.

  • video (Asset): the video to display. Must be an asset, e.g. @fireball.mp4

  • image (Asset): the image to display while the video is loading or if the video is not available.

  • noControls (Boolean): If true, will hide the video controls that would normally allow the player to pause, play, and seek the video.

  • backgroundColor (Color): the color to display behind the video.

  • shadow (Number): the opacity of the drop shadow, from 0 (no shadow) to 1 (opaque shadow).

  • height (Number): the height of the video, in em units.

  • width (Number): the width of the video, in em units.

  • expand (Boolean or Number): If set, expands the element to fill the remaining space of its container. If multiple elements have expand set, the remaining space will be apportioned according to the expand value of all elements in the container. A value of true is equivalent to 1.

  • cover (Boolean): If true, will zoom the video until its shorter dimension fills the entire element.

  • stretch (Boolean): If true, will expand to fill the full cross-axis of its container. That is, if inside a VStack, will expand to full width, whereas if inside an HStack, will expand to full height.

  • tooltip (String): the text to display when the mouse hovers over the video.

  • ui (UI): the slot in the user interface where the video will be inserted.

VirtualJoystick​

VirtualJoystick(radius=, knobProportion?, backgroundColor?, borderRounding?, 
  knobColor?, shadow?, [ui]) |use ui| { }
VirtualJoystick2(radius=, knobProportion?, backgroundColor?, borderRounding?, 
  knobColor?, shadow?, [ui]) |use ui| { }

Adds a virtual joystick element to the user interface. The virtual joystick allows players who are using a touchscreen to send Joystick inputs even without a gamepad.

Parameters:

  • radius (Number): The radius of the outer ring of the virtual joystick, measured in em units.

  • knobProportion (Number): A value between 0 and 1 that determines how big the inner knob is relative to the outer ring. Defaults to 0.5.

  • backgroundColor (Color): The color of the outer ring of the virtual joystick.

  • knobColor (Color): The color of the inner knob of the virtual joystick.

  • borderRounding (Boolean or Number): Determines the roundness of the knob. If a Number is provided, determines the roundness of the knob in em units. If true (the default), makes the knob a circle.

  • shadow (Number): The opacity of the drop shadow of the inner knob.

  • ui (UI): The slot in the user interface where the layer will be inserted.

The Subblock will be called immediately to populate the contents of the inner knob of the virtual joystick. This could be a good place to display, for example, an image indicating that the player can interact with the joystick.

ZOverlay/ZUnderlay​

ZUnderlay(align?=, animate?, backgroundColor?, gap?, hPadding?, height?, 
  padding?, vAlign?, vPadding?, width?, [ui]) |use ui| { }
ZOverlay(align?=, animate?, backgroundColor?, gap?, hPadding?, height?, 
  padding?, vAlign?, vPadding?, width?, [ui]) |use ui| { }

Adds a layer element to the user interface. The element will be layered above or below the containing HStack or VStack that has zStack=true. If there is no containing HStack or VStack, the behavior is undefined. There are two styles:

  • ZUnderlay lays out its children below the other elements in the containing stack.
  • ZOverlay lays out its children above the other elements in the containing stack.

Both ZUnderlay and ZOverlay will lay out their children vertically.

Parameters:

  • backgroundColor (Color): The background color of the layer.

  • align (Symbol): The alignment of the contents of the layer. Valid options are Align:Left, Align:Center, Align:Right or null (the default).

  • vAlign (Symbol): The vertical alignment of the contents of the layer. Valid options are VAlign:Top, VAlign:Middle, VAlign:Bottom or null (the default).

  • animation (Symbol): The animation to use for the layer. See Animate for a list of available animations.

  • width (Number): The width of the layer, measured in em units.

  • height (Number): The height of the layer, measured in em units.

  • padding (Number): The inner padding of the layer, measured in em units. The content will be inset by this amount from the edges of the layer.

  • hPadding (Number): The padding on the left and right sides of the layer.

  • vPadding (Number): The padding on the top and bottom sides of the layer.

  • gap (Number): The gap between elements in the layer, measured in em units.

  • ui (UI): The slot in the user interface where the layer will be inserted.