• Guides
  • Navigation
  • UI Editor
  • Attributes

Attributes

You can adjust the Attributes of the selected widget, including Basic Attributes, Coordinates and Size, and Image Settings.

N135

Basic Attributes

Widget Type: Type of the selected widget.

Widget Name: Name of the selected widget.

Absorb Touch: For a widget with an area, you can set whether the widget blocks operations by players on the game UI.

⚠️

Note: For widgets without an area, such as nodes, because they cannot receive collisions, setting Block for them has no practical effect.

Visible: When not ticking this option, the selected widget is invisible by default unless the widget is made visible by writing code through Trigger.

Draggable: Whether a widget can be directly dragged.

Widget Adaptation: After ticking this option, you can set the relative location of the widget to the parent layer.

⚠️

Caution: The setting of Relative Parent Location is valid only when Widget Adaptation is enabled.

N136

Coordinates and Size

Coordinates: Horizontal and vertical coordinates of the selected widget in the Canvas.

Size: Size of the selected widget.

Rotation: Rotation angle of the selected widget.

Scale: Scale of the selected widget.

Alpha: The transparency of the selected widget.

Special Attributes

The following attributes vary according to the type of the Widget.

Blank Nodes

Clip: When a blank node has an attached layer, you can choose whether to use the blank node as a mask.

Clipping Mode: The clipping mode can be Frame Clipping or Pixel Clipping, indicating clipping based on the frame or pixels of the mask.

Colo: Background color of the area covered by the node.

Mask Image: Select the shape of the mask.

N136-137

Button Settings

You can choose whether to select the button through Shortcut or Modifier key. You can also choose whether to use a picture as the button style or use a color to fill.

N137

Normal State Image: Set the background map of the button.

Normal State Button Color: Set the color of a button in the normal state.

Normal State Text Color: Set the text color of a button in the normal state.

Normal State Text: Set the text content of a button in the normal state.

Press to Scale: Scale when you click the button.

Font: Text font on the button.

N138

Enable More Button States, then you can set the Button Image, Text Color, and Text Content of a button when it is in the Hover State, Pressed State, and Disabled State.

N139

Image Settings

Background Image: Select the image you want.

N140

9-Slice Scaling: After the function is enabled, a complete image can be sliced according to the number of slices (not limited to 9 slices), and the image in each slice can be scaled separately without affecting the overall image size.

N141

Model Settings

Model: Import a model from the Resource.

Idle Animation: Set the action of a model.

Background Color: Set the background color of a model.

Camera Coordinat: Set the coordinate of the camera relative to a model.

Field of View: Set the distance between the camera and the model.

Rotation: Set the rotation angle of the model based on three angles: x, y, and z.

Focus: Set the focal coordinate of the model based on three angles: x, y, and z.

N142

Text Settings

Text: Set the text content.

Font Color: Set the text color.

Font: Set the text font and font size.

Alignment: Sets the alignment of text in the text box.

Line Spacing: Set the line spacing of the text.

Type: Set bold, italic, underline, and shadow for text.

Overflow Handling: When the text overflows the text box, you can choose to truncate the text or auto-adapt the font.

Text Animation: You can set the animation of the text when it appears, such as a verbatim display.

N143

The following attributes are specific to the input box.

Prompt Text: Set the content of the prompt text.

Prompt Text Color: Set the color of the prompt text.

Progress Bar Settings

You can set the display Type of the progress bar, such as bar or ring. The progress bar supports Image Fill and Color Fill.

Image Fill

Background Image: Set the background image of the progress bar.

Progress Bar Image: Set the image displayed for the progress of the progress bar.

Max Value/Current Value: Set the progress of the progress bar.

Reverse: Change the direction of the progress bar.

9-Slice Scaling: Whether to enable the 9-slice scaling function.

N144

Color Fill

Background Color: Set the background color of the progress bar.

Progress Bar Color: Set the color of the progress bar.

Max Value/Current Value: Set the progress of the progress bar.

Reverse: Change the direction of the progress bar.

N145

Slider Settings

Progress: Set the progress of the slider.

Background Color: Set the background color of the slider.

Progress Bar Color: Set the color of the progress bar.

Default Slider Color: Set the default color of the slider.

Background Image: Set the background image of the slider.

Progress Bar Image: Set the image of the progress bar.

Default Slider Image: Set the default image of the slider.

Slider Scale: Set the scale of the slider.

More Slider States: Set the slider in the Hover, Pressed, and Disabled States.

9-Slice Scaling: Whether to enable the 9-slice scaling function.

N146

List Settings

Layout: Set the layout of the list.

Reverse Layout: Set whether the layout of the list is reversed.

Skip Hidden Widget: The list is laid with child widgets. When a widget in the list is hidden, if you select this option, the widget will not be displayed in the list. If you do not select this option, you can see there is a widget in the list but cannot see the specific content of the widget.

Slice: Slice the list into parts.

Background Image: Set the background image of the list.

Background Color: Set the background color of the list.

Forbid Scrolling: Enable or disable the list scrolling function.

Spacing: Set the spacing of nodes in the list.

Scroll-down Bounce: Enable or disable the scroll-down bounce function.

Resize with Child Widget: Set whether the size of the list changes with widgets.

Enable Scrollbar: Set whether the scrollbar is displayed when the list is scrolling.

N147