Screen
A user interface screen shown to players, which you get back from ui.mount and can change or listen to for clicks.
Fields
mountedboolean
Screen:set
method#Changes the props of one element on the screen, found by its id.
example
shop:set("gold", { text = "120 gold" })Use it forupdating a token counter, or changing the label on a shop button.
idThe id of the element to change.propsThe props to change; kind, id and children cannot change.Build a set callkind · id · children · anchor · x · y · 22 more
kindWhat kind of element it is, and hovering a choice tells you what it looks like.
idA name of up to 40 letters, digits and underscores, unique in the screen, which buttons and text boxes need so
clickedandsubmittedcan tell you which one was used.childrenThe elements placed inside a frame, panel or list.
anchorWhere the element sits in a free layout, where
fillcovers its parent and a root frame without an anchor fills the screen.xHow many pixels to the right of its anchor the element sits, from -4096 to 4096.
yHow many pixels below its anchor the element sits, from -4096 to 4096.
widthThe element's width in pixels from 0 to 4096, and leaving it out makes it fit the content.
heightThe element's height in pixels from 0 to 4096, and leaving it out makes it fit the content.
layoutHow a frame or panel arranges its children, where free places them by their anchors, and a list is always a column.
gapThe space in pixels between the children of a column, row, grid or list, from 0 to 256.
columnsHow many columns a grid has, from 1 to 32.
paddingThe space in pixels between the edge of a frame, panel or list and its children, from 0 to 256.
alignHow text lines up, or where a column or row places its children, which is start when you leave it out.
textWhat a text, button or text box shows, cut off after 1000 characters, and a text element keeps
[b],[i]and[color=#RRGGBB]tags.text_sizeThe font size in pixels, from 8 to 96.
colorThe color of text, the tint of an image or the fill of a progress bar, depending on the kind.
backgroundThe background color of a panel, button, text box or progress bar.
cornerHow rounded the background's corners are, as a radius from 0 to 64 pixels.
opacityHow visible the element and everything inside it are, from 0 for invisible to 1 for fully shown, which is the default.
visibleSet it to
falseto hide the element and everything inside it once its exit transition has played.enabledSet it to
falseto grey out a button or text box, which then sends nothing when players use it.imageThe PNG an image element shows, given by its route on the USBX asset CDN, where an empty string shows nothing.
valueHow full a progress bar is, from 0 up to its
max.maxdefault 100The value that fills a progress bar completely, which must be above 0.
placeholderThe hint an empty text box shows, which is cut off after 100 characters.
max_lengthdefault 100The most characters a player can type into a text box, from 1 to 1000.
enterThe animation used when the element appears, whether the screen mounts, it is added or it becomes visible.
Inside it:
effect,duration,delay,easingexitThe animation used when the element goes away, whether the screen unmounts, it is removed or it becomes hidden.
Inside it:
effect,duration,delay,easing
Screen:add
method#Adds a new element inside a frame, panel or list on the screen.
example
shop:add("items", { kind = "button", id = "buy_sword", text = "Sword" })Use it foradding an item to a shop list or an inventory.
parentThe id of the frame, panel or list to add to.elementThe element to add, with its children.indexoptionalIts place among the children, from 1. The end by default.Build a add callkind · id · children · anchor · x · y · 22 more
kindWhat kind of element it is, and hovering a choice tells you what it looks like.
idA name of up to 40 letters, digits and underscores, unique in the screen, which buttons and text boxes need so
clickedandsubmittedcan tell you which one was used.childrenThe elements placed inside a frame, panel or list.
anchorWhere the element sits in a free layout, where
fillcovers its parent and a root frame without an anchor fills the screen.xHow many pixels to the right of its anchor the element sits, from -4096 to 4096.
yHow many pixels below its anchor the element sits, from -4096 to 4096.
widthThe element's width in pixels from 0 to 4096, and leaving it out makes it fit the content.
heightThe element's height in pixels from 0 to 4096, and leaving it out makes it fit the content.
layoutHow a frame or panel arranges its children, where free places them by their anchors, and a list is always a column.
gapThe space in pixels between the children of a column, row, grid or list, from 0 to 256.
columnsHow many columns a grid has, from 1 to 32.
paddingThe space in pixels between the edge of a frame, panel or list and its children, from 0 to 256.
alignHow text lines up, or where a column or row places its children, which is start when you leave it out.
textWhat a text, button or text box shows, cut off after 1000 characters, and a text element keeps
[b],[i]and[color=#RRGGBB]tags.text_sizeThe font size in pixels, from 8 to 96.
colorThe color of text, the tint of an image or the fill of a progress bar, depending on the kind.
backgroundThe background color of a panel, button, text box or progress bar.
cornerHow rounded the background's corners are, as a radius from 0 to 64 pixels.
opacityHow visible the element and everything inside it are, from 0 for invisible to 1 for fully shown, which is the default.
visibleSet it to
falseto hide the element and everything inside it once its exit transition has played.enabledSet it to
falseto grey out a button or text box, which then sends nothing when players use it.imageThe PNG an image element shows, given by its route on the USBX asset CDN, where an empty string shows nothing.
valueHow full a progress bar is, from 0 up to its
max.maxdefault 100The value that fills a progress bar completely, which must be above 0.
placeholderThe hint an empty text box shows, which is cut off after 100 characters.
max_lengthdefault 100The most characters a player can type into a text box, from 1 to 1000.
enterThe animation used when the element appears, whether the screen mounts, it is added or it becomes visible.
Inside it:
effect,duration,delay,easingexitThe animation used when the element goes away, whether the screen unmounts, it is removed or it becomes hidden.
Inside it:
effect,duration,delay,easing
Screen:remove
method#Removes one element and everything inside it.
Screen:remove(id: string) -> ()
example
shop:remove("buy_sword")Use it fortaking a sold out item off a shop list.
idThe id of the element to remove, with what is inside it. The root cannot be removed.Screen:clear
method#Removes everything inside a frame, panel or list, but keeps the frame itself.
Screen:clear(id: string) -> ()
example
shop:clear("items")Use it foremptying an inventory list before filling it again.
idThe id of the frame, panel or list to empty.Screen:unmount
method#Takes the screen away from everyone it was shown to.
Screen:unmount() -> ()
example
shop:unmount()Use it forclosing a shop or a menu once the player is done with it.
Screen:bind
method#Changes the Bindings of a screen made from a UI Screen design, and sends only what changed.
Screen:bind(values: { [string]: any }) -> ()
example
shop:bind({ coins = 1300 })Use it forupdating tokens or health on a HUD you designed in Studio.
valuesNew values of the UI Screen's Bindings, by name. Bindings left out keep theirs.