UI Editor

Editor Features

The UI Editor panel opens on the right side of the screen when a UI Element is selected. It provides powerful tools to customize and fine-tune every aspect of your UI element.

Background:

Customize the visual appearance by configuring background colors, text colors, background images, and content text to match your design needs.

• Color:
  • Color picker for text and background
  • Option to set a transparent background
  • Preset colors that can be customized
  • Switch between different preset options
  • Toggle between editing background and text properties
• Image:
  • Upload an image
  • Optional sprite sheet settings
  • Set the position and size of the sprite sheet section
• Text:
  • Set the text content

Position & Size:

Modify the UI element's X and Y coordinates, as well as its width and height.

Align:

Automatically align the UI element to the top, middle, bottom, left, center, or right side of the screen.

Margin & Padding:

Customize spacing around and within the UI element by adjusting margin and padding values. Set specific pixel values for each side (top, right, bottom, and left) to achieve precise spacing control.

Click Actions:

This is a specific property for Button and Social Media UI Elements that allows to customize what happens when the UI Element is clicked.

• Open Link:
  • Set the URL to open when the UI Element is clicked
  • Example: https://www.decentraland.org
• Show/Hide:
  • Select a container to show or hide when the UI Element is clicked
  • Every element that is within that container will also be hidden or shown
  • Select whether the container starts visible or hidden by default
• Count:
  • Select a Label UI Element to display the count
  • Select if the Button should add or subtract from the count

Add Elements:

Allows you to add elements to the selected UI container. You can add any available element, including other containers, to create nested layouts. Elements can also be removed from containers, returning them to the main canvas for repositioning or reuse.

Container Properties:

Customize the flex direction (row, clumn), justify content (flex-start, flex-end, center, space-between, space-around, and space-evenly ), align content (flex-start, flex-end, center, space-between, and space-around), align items (flex-start, flex-end, center, space-between, and space-around) and flex wrap (wrap, nowrap, and wrap-reverse )

Think of containers as boxes that organize their contents. The flex direction determines if items are arranged horizontally (row) or vertically (column). Justify content controls how items are spaced along this main direction - you can push them to the start, end, center them, or create equal spacing between them. Align items controls how elements are positioned in the opposite direction - for example, in a row container, this determines if items are at the top, middle, or bottom. Flex wrap decides what happens when items run out of space - they can either wrap to a new line or stay squeezed in a single line.