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 Element Component features various settings, chiefly allowing you to add, position, configure text and images, along with configuration for background color, opacity, and borders. The UI Element's configuration parameters bring in concepts from CSS (Cascading Style Sheet) and Flexbox - CSS is among the core languages of the open web and is standardized across Web browsers. Learn more about Flexbox styling here. You can also upload a custom font via TTF file that you can use in your UI Element. You can add custom font files to your assets.
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 | |
| 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 |
| direction | 'LTR', 'RTL' | 'LTR' | no | Sets the direction of text. Use RTL for languages written from right to left (like Hebrew or Arabic), and LTR for those written from left to right (like English and most other languages). |
| alignContent | 'Flex Start', 'Flex End', 'Stretch', 'Center', 'Space Between', 'Space Around', 'Space Evenly' | Flex Start | no | Sets the distribution of space between and around content items |
| alignItems | 'Flex Start', 'Flex End', 'Stretch', 'Center' | Flex Start | no | Controls the alignment of all items on the cross axis. |
| justifyContent | 'Flex Start', 'Flex End', 'Stretch', 'Center', 'Space Between', 'Space Around', 'Space Evenly' | Flex Start | no | Controls the alignment of all items on the main axis. |
| flexDirection | 'Row', 'Reverse', 'Row Column', 'Column Reverse' | Row | no | Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). |
| flexWrap | 'No Wrap', 'Wrap', 'Wrap Reverse' | No Wrap | no | Sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. |
Example
ecs.Ui.set(world, eid, {background: '#FFFFFF'})