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:
Properties
| Property Name | Type | Default | Required | Description |
|---|---|---|---|---|
| type | overlay or 3d | overlay | true | The type of UI. Note: only available to root UI component |
| position | 'absolute', 'static', ‘relative’ | static | no | Sets how an element is positioned inside a document. The top, left, right, bottom properties determine the final location of positioned elements. |
| top | Percent or Number | null | no | vertical position in percent you are from top border |
| left | Percent or Number | null | no | horizontal position in percent you are from left border |
| right | Percent or Number | null | no | horizontal position in percent you are from right |
| bottom | Percent or Number | null | no | vertical position in percent you are from top border |
| background | Hex color | #ffffff | no | color of the background |
| backgroundOpacity | number | 0 | no | background opacity (equivalent to setting alpha channel on background in CSS) |
| color | Hex color | #ffffff | no | color of the foreground object (text) |
| opacity | number | 1 | no | the whole object opacity (almost equivalent to CSS opacity) |
| text | string | '' | no | the text content of the object. |
| image | Resource | null | no | render the image given |
| width | number | 100 | no | width in px or 1/100 length unit |
| height | number | 100 | no | height in px or 1/100 length unit |
| fonts | string | 'nunito' | no | Only 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’ |
| FontSize | number | 16 | no | control the size of text inside the element |
| borderWidth | number | 0 | no | The width of the border of the UI Component. Note: border width do not increase the total width/height of the component |
| borderColor | Hex color | #000000 | no | The color of the border of the UI Component |
| borderRadius | number | 0 | no | Rounds the corners of an element's outer border edge |
Example
ecs.Ui.set(world, eid, {background: '#FFFFFF'})