Adjusting layout and design
When designing a user interface (UI) for your Project, you can add UI elements to canvases and customize their properties and order to create your desired design.
Setting up canvas
Set the canvas size by providing its width and height. You can also make it penetrable, allowing finger touch or cursor clicks to pass through the blank areas of the canvas.
To view the canvas more effectively, adjust its percentage relative to its full size to zoom in and out. You can also preview the UI effects on the canvas by clicking the preview 
button.
Adjusting UI elements
You can adjust UI elements by customizing their properties and order.
Shared properties
Some properties are shared in all UI elements.
| Property | Description |
|---|
| Align | The alignment style of the UI element. With it, you can quickly align the UI element left, horizontally center, right, top, vertically center, and bottom. |
| Position | The values on the X-axis and the Y-axis determine the position of the UI elements on the screen. |
| Size | Specifies the width and height of the UI element. |
| Rotation | Specifies the rotation of the UI element. |
| Visible | Determines if the UI element is visible. |
| Pivot | The pivot points of transformations. The value ranges from 0 to 1. For example, X = 0.5 and Y = 0.5 represent the center position. Click the point in the box to quickly set some commonly used values, such as center, bottom left corner, and bottom right corner.\When you set the point as the anchor point, the origin position of the UI element will be set to the position of the pivot. By default, (0,0) of each UI element is in the top left corner. |
| Constraint | If Top and Bottom or Left and Right is not selected, Constraint defines the distances between the UI element's anchor point and the constraint points on the canvas. This distance will be applied to the distance between the anchor point and the screen points corresponding to the canvas point.\If Top and Bottom or Left and Right is selected, Constraint defines the distances between the vertices of the UI element box and constraint points. The distance will be applied to the distances between the vertices and the screen points corresponding to the canvas point. |
| Property | Description |
|---|
| Button text | You can specify the text to display on the button and set the font size, font color, and transparency for it. |
| Content | The content of the text |
| Font size | The font size of the text |
| Font color | The font color and transparency of the text |
| Click effect | The effect to display when you click on the button |
| Button image | The image to fill out the button |
Image
| Property | Description |
|---|
| Image | The file name of the image |
| Flip | The way of flipping the image, either left-right or top-down. |
Text
| Property | Description |
|---|
| Content | The content of the text to display. The default font is Rubik. |
| Rich text | Determines if the displayed text is rich text. |
| Font size | The font size of the text |
| Align | The alignment style of the text |
| Font color | The font color and transparency of the text |
Shapes
Shapes offer basic shapes, including rectangles, ovals, triangles, and stars.
| Property | Description |
|---|
| Fill | The color to fill the shape and its transparency |
Text input
| Property | Description |
|---|
| Font size | The font size of the text |
| Font color | The font color and transparency of the text |
| Type | The type of the text input, either number, letter, or both. |
| Hint | A clue for players |
List
| Property | Description |
|---|
| Layout | The layout style of the list. Choose Single row if you want the list to be horizontal. Choose Single column if you want the list to be vertical. |
| Row | The number of rows |
| Column | The number of columns |
| Row gap | The distance between continuous rows |
| Column gap | The distance between continuous columns |
| Canvas | The canvas to fill in the list |
Slider
| Property | Description |
|---|
| Default | The default value |
| Min | The minimum value |
| Max | The maximum value |
Progress bar
| Property | Description |
|---|
| Default | The default progress |
Loader
| Property | Description |
|---|
| Canvas | The loader displays UI elements on another canvas. You can replace the selected canvas in Play mode using scripts. |
UI element order
The order of UI elements directly affects their rendering sequence. Elements listed higher in the panel are rendered first, appearing behind those listed lower down. To control how they appear on the screen, you can move UI elements up or down in the panel. For example, placing an image element above a text element will ensure that the text appears in front of the image.
Effects preview:
