Skip to main content

User Interface

This section provides guidance on setting up UI elements. The UI component system allows you to create floating or screen overlay UI.

UI can be added to the entity via the Studio interface or in code. Adding them in Studio is done by adding "New Component" -> UI Element using the Inspector for a selected entity.


The UI component features various settings:



Property NameTypeDefaultRequiredDescription
typeoverlay or 3doverlaytrueThe type of UI. Note: only available to root UI component
position'absolute', 'static', ‘relative’staticnoSets how an element is positioned inside a document. The top, left, right, bottom properties determine the final location of positioned elements.
topPercent or Numbernullnovertical position in percent you are from top border
leftPercent or Numbernullno horizontal position in percent you are from left border
rightPercent or Numbernull nohorizontal position in percent you are from right
bottomPercent or Number null no vertical position in percent you are from top border
backgroundHex color#ffffffnocolor of the background
backgroundOpacitynumber0nobackground opacity (equivalent to setting alpha channel on background in CSS)
colorHex color#ffffffnocolor of the foreground object (text)
opacitynumbernothe whole object opacity (almost equivalent to CSS opacity)
textstring''nothe text content of the object.
imageResourcenull norender the image given
widthnumber100 nowidth in px or 1/100 length unit
heightnumber 100noheight in px or 1/100 length unit
fontsstring'nunito'noOnly available to 3d UI for now and only support these fonts: 'Nunito', 'Akzidenz Grotesk', 'Baskerville', 'Futura', 'Gotham', 'Helvetica', 'Nanum Pen Script', 'Press Start 2p', 'Times', ‘Inconsolata’, ‘Roboto’
FontSizenumber16nocontrol the size of text inside the element
borderWidthnumber0noThe width of the border of the UI Component. Note: border width do not increase the total width/height of the component
borderColorHex color#000000noThe color of the border of the UI Component
borderRadiusnumber0noRounds the corners of an element's outer border edge


ecs.Ui.set(world, eid, {background: '#FFFFFF'})