UI control functions and properties

July 4, 2022

UI control functions and properties

The properties of UI controls are composed of basic properties and control-specific properties. Basic properties are common properties that all types of controls have, and different controls also have their own unique properties. The basic properties and the unique properties of various controls will be introduced separately below.

basic properties

Basic properties are common to all types of controls, including the following properties:

Attributes Features
whether to display Set whether to display the current control,This property affects descendant controls. If the current control is hidden, no matter what the descendant control is set to, it will be hidden.
coordinate set current controlrelative to the anchorThe position of (the anchor point specifies the alignment of the current control relative to the parent control, see for detailsAnchorAttributes). X and Y indicate how much the current control is offset horizontally and vertically relative to the anchor point, respectively.

Both X and Y are composed of relative and absolute values. The relative value represents the proportional value relative to the size of the parent control, and the absolute value represents the absolute offset relative to the parent control. Taking X as an example, the calculation method is: the horizontal offset of the child control (X) = (relative value * width of the parent control) + absolute value.

For example: the relative value of X is 0.1, the absolute value is 10, and the width of the parent control is 100, then the horizontal (X) offset of the child control is 0.1*100+10=20.

In addition, the editor can uniformly convert the currently set values. Click the [%] button to convert the currently set relative and absolute values into relative values; click the [px] button to convert the current relative and absolute values. All are converted to absolute values.

size Set the width and height of the current control, X means width, Y means height.

Similar to coordinates,The X and Y of the dimension are also composed of relative and absolute values. The relative value represents the proportional value relative to the size of the parent control, and the absolute value represents the absolute length. Taking X as an example, the calculation method is: child control width (X) = (relative value * parent control width) + absolute value.

For example: the relative value of X is 0.1, the absolute value is 10, and the width of the parent control is 100, then the width of the child control is 0.1*100+10=20.

In addition, the editor can uniformly convert the currently set values. Click the [%] button to convert the currently set relative and absolute values into relative values; click the [px] button to convert the current relative and absolute values. All are converted to absolute values.

rotate Set the rotation angle of the current control around the X, Y, and Z axes. Refer to the following figure for the effect of the three-axis rotation:

Rotate around the X axis:

Rotate around the Y axis:

Rotate around the Z axis:

When the control is rotated, it will rotate around the rotation center. The default rotation center is (0.5, 0.5), which is the center point of the control.

When a control is rotated, all its child controls are also rotated, andThe child control will be forced to clip by the parent control

center of rotation Sets which point the control rotates around when rotating, X represents the ratio relative to the width of the current control, and Y represents the ratio relative to the height of the current control. The value range is 0.00~1.00, (0.00, 0.00) means the upper left corner of the control, (1.00, 1.00) means the lower right corner of the control.

For example: if the rotation center of the control is set to (0.50, 0.00), the rotation effect around the Z axis is:

Anchor Sets the alignment of the current control relative to the parent control, there are nine kinds of anchor points to choose from: the four corners, the midpoint of the four sides, and the center point.

For example, if the current control selects the upper left corner as the anchor point, then the current control will use the upper left corner of the parent control as the origin of the coordinate offset, and the offset value of the coordinates is the offset value of the upper left corner of the current control relative to the upper left corner of the parent control. If the coordinates of the current control are (0,0), then the upper left corner of the current control will coincide with the upper left corner of the parent control.

The effects of different anchor points refer to the following figure (the coordinates of the sub-controls are all (0,0)):

transparency Sets the transparency of the control, 0 is fully transparent, 1 is opaque.This property affects descendant controls, if the current control is set to be transparent, the descendant control will also be transparent.
Clipped by parent control Sets whether the part of the current control beyond the parent control’s bounding box is clipped.

This property does not affect descendant controls, that is, if the current control is set to be clipped by the parent control, its child controls will not be clipped. If you want the child controls to be clipped, you need to set the child controls to be clipped by the parent control.

The picture on the left is that the button is clipped by the parent control, and the picture on the right is not clipped:

disabled Set whether to disable the current control. When the control is disabled, it will not listen to and respond to any events.This property affects descendant controls, if the current control is set to disabled, the descendant controls will also be disabled.
touch penetration Set whether the control responds to touch events. If this option is checked, the control does not respond to touch events, and other controls below will respond to touch events directly through this control.

empty window

An empty window is an invisible rectangle that is usually used as a parent control for other controls to facilitate control structure management.

Empty windows only have basic properties, without specific properties.

text

The text control is mainly used to display text, and can format the text, set the text style, etc.

The properties of the text control are given by basic propertiesand its unique properties, the unique properties of the text control are as follows:

Attributes Features
text Sets the text content that the text control needs to display. Text supports partial rich text formatting:

1. Set the text display in detail, the wrapped text will be displayed in detail
Exapmle:<b>Team</b> selection
image.png

2. Set the text to be bold: the wrapped text will be displayed in bold
Example:<B>Team</B> selection
image.png
3. Set the text font size:The text content wrapped with <s=20> will be displayed in 20 fonts, and the numbers can be customized in size
Example:<s=28>Team</s> selection
image.png
4. Set the text color: The text content wrapped in <c=ff0000></c> will be displayed in red, the color can be customized, and the color of the hexadecimal value must be used
Example:<c=ff0000>Team</c> selection
image.png
5. Set the text color gradient: the text content wrapped with <c=tl: tr: bl: br:></s> will produce a color gradient, in which the color can be customized, and the hexadecimal value color needs to be used
tl stands for topleft
tr stands for topright
bl stands for bottomleft
br stands for bottomright

Whitespace is allowed. Assuming that the editor also sets the font color, this code modifies the priority of the font, which is higher than the font priority set by the editor
Example:<c=tl:fbcf60 tr:1e00ff bl:00ff73 br:ee5efb >Team selection</c>
image.png
6. Set text wrap: text wrapped with <n></n> will wrap before the first character
Example:Team<n>selection</n>
image.png

font Set the font of the text. You can add fonts. You need to import the font file into the editor first. After adding a new font, other controls with text can also use the new font.
Before using the font, please obtain the authorization of the font.
font size Sets the font size of the text. The minimum font size is 8 and the maximum font size is 72.
Text box adaptive Set whether to automatically adjust the width and height of the text control according to the text content, the options are as follows:

1. Fixed size: The size of the text control is determined by the control’s size The property determines that the width and height of the text control will not be automatically adjusted according to the text content.

2. Adaptive width: The height of the text control is determined by the control’s size property, and the width will be automatically adjusted according to the text content. When this option is selected, word wrapping and automatic font size cannot be enabled.

3. The width of the text control is determined by the control’s size property, and the height will be automatically adjusted according to the text content. When this option is selected, automatic font size scaling cannot be enabled. Usually when you select this option, you need to check the automatic line break at the same time (optional, you can also choose to enter a line break \n to manually wrap the line).

4. Adaptive width and height: The width and height of the text control are automatically adjusted according to the text content, and the control’s width and height cannot be manually specified. size Attributes. When this option is selected, word wrapping and automatic font size cannot be enabled.

Auto-scale font size set when the control when the text content is not displayed, whether to automatically reduce the font size to fit the size of the control, and the minimum can be scaled to font size 8. The following picture on the left shows that automatic line wrapping is not turned on, and the picture on the right shows that automatic line wrapping is turned on:
    
weight Set the text thickness, optional thin, regular, bold.
text color Set the color of the text.
Show text background Sets whether to display the text background, if enabled, the text control will be filled with a solid color.
text background color Sets the color used to fill the text control.
Show text border Sets whether to display the border of the text control.
text border color Sets the color of the border of the text control.
word wrap Set whether to wrap text automatically when the length of the text content exceeds the width of the control.
Allow word breaks Set whether to split the text and display it on a new line when the text content is not displayed completely in one line.
Horizontal alignment Set the alignment of the text in the horizontal direction. You can choose left alignment, center alignment, and right alignment.
vertical alignment Set the alignment of the text in the vertical direction. You can choose top alignment, center alignment, and bottom alignment.
text stroke Sets whether to display the stroke of the text.
stroke width Sets the width of the text stroke. The value ranges from 0 to 10, and the recommended width is not greater than 3.
stroke color Sets the color of the text stroke.

picture

The picture control is mainly used to display pictures.

The properties of the picture control are given by basic propertiesand its unique properties, the unique properties of the picture control are as follows:

Attributes Features
horizontal fill Set the fill method of the image in the horizontal direction, the options are as follows:

1. Keep the original size left aligned: The picture will not be stretched with the size of the control, and will be displayed on the left side of the control. Example: Select “Keep the original size left aligned” for the horizontal padding method, and select “Keep the original size top alignment” for the vertical padding method:

2. Keep the original size centered: Similar to “Keep the original size left”.

3. Keep the original size right: Similar to “Keep the original size left”.

4. (Jiugongge) Stretch: Stretch the picture horizontally to fill the control in the horizontal direction. For the stretching strategy, see “Jiugongge stretching strategy“Attributes.
Example: Select “(Nine Palace) Stretch” for the horizontal fill method, and set the stretch margin as shown on the left. When the control is zoomed, the left and right borders of the picture will not be stretched, but the hook in the middle will be stretched:
    

5. Tile: Tile the picture horizontally until it fills the controls horizontally.

vertical fill Set how the image fills in the vertical direction, the options are as follows:

1. Keep the original size and top alignment: The image will not be stretched with the size of the control, and will be displayed at the top of the control. Example: Select “(Nine Palaces) Stretch” for the horizontal fill method, and “Keep the original size and top alignment” for the vertical fill method:

2. Keep original size center alignment: Similar to “Keep original size top alignment”.

3. Keep original size bottom alignment: Similar to “Keep original size top alignment”.

4. (Jiugongge) Stretch: Stretch the picture vertically to fill the control in the vertical direction. For the stretching strategy, see “Jiugongge stretching strategy“Attributes.
Example: Select “(Nine Palace) Stretch” for the vertical fill method, and set the stretch margin as shown on the left. When the control is zoomed, the upper and lower borders of the picture will not be stretched, but the hook in the middle will be stretched:
    

5. Tile: Tile the picture vertically until it fills the controls vertically.

fill angle Set the filling method of the picture, different options can achieve different effects. The options are as follows:
1. Horizontal
2. Vertical
3.90°fill
4.180°fill
5.360°fill
fill position Set how the image fills in the vertical direction, the options are as follows:
1. When the fill method is set to horizontal, the option [left, right] is visible
2. When the fill method is set to vertical, the option [Top, Bottom] is visible
3. When the filling method is set to 90°, the options [upper left, lower left, upper right, lower right] are visible.
4. When the fill method is set to 180°, the options [Top, Bottom, Left, Right] are visible
5. When the filling method is set to 360°, the options [upper left, lower left, upper right, lower right] are visible.
fill area Sets the image to fill the area with the specified value. Set 1 to fill the entire image
Fill counterclockwise Sets whether the image is filled in a counterclockwise fill.
picture Set the original image to be displayed by the image control, support direct selection of images, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended
Image stretched margins When the horizontal filling method or vertical filling method is selected as “(Nine-square) Stretch”, you can set the top, bottom, left and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin
crop Crop the picture according to the custom size, you can set the top, bottom, left and right margins.
image.png
reset control size Set the control size to the size of the original image.
Show picture border Sets whether to display the border of the picture control.
image border color Sets the color of the picture control border.
picture color Overlays the image with a layer of color. The left image below is the original image, and the right image is covered in green:
Display background color Sets the color of the picture control that will fill the control and display below the picture. Usually only the background color is set for transparent images.
blend mode Set the blending mode of the image. When the images are overlaid, the pixels of the upper layer and the lower layer are mixed to give the effect of another image.

multiply blend mode
Layering the images together, and multiplying the base color with the blend color, the resulting color is always the darker color; any color is multiplied with black to produce black. Any color stays the same with White Multiply.

Color Dodge
Layer the images together and lighten the base color to reflect the blend by reducing the contrast between the two. Mixing with black does not change.

button

The button control can respond to the user’s click operation and is the most commonly used interactive control. This control can set button styles in various states, including pictures, texts, etc.

The button is usually divided into three states: the normal state represents the state when the button does not have any events; the disabled state represents the state when the button is disabled, and the button cannot be pressed at this time; the pressed state represents the interactive state when the player presses the button .

The properties of the button control are given by basic propertiesand its unique properties, the unique properties of the button control are as follows:

Attributes Features
button text Sets the text content displayed on the button control. Text supports partial rich text formatting:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are the transparency, and the last six digits are the RGB value). When setting the text color through rich text, you need to set the attribute of the text color. is white. Example: “Example[colour=’FF800080′]Text”.

2. Newline: \n, insert \n in the text to manually wrap the line. Example: “Example\nText”.

font Set the font of the text. Currently, only fonts provided by the editor are supported, and custom fonts are not currently supported.
font size Sets the font size of the text. The minimum font size is 8 and the maximum font size is 72.
Auto-scale font size Set whether to automatically reduce the font size to fit the size of the control when the control does not display the text content, and the minimum can be scaled to font size 8. For example seeAutoscale font size property for text controls
weight Set the text thickness, optional thin, regular, bold.
Normal status text color Sets the text color of the button in its normal state.
Disable status text color Sets the text color of the button in the disabled state.
button state text color Sets the text color of the button in the pressed state.
word wrap Set whether to wrap text automatically when the length of the text content exceeds the width of the control.
Allow word breaks Set whether to split the text and display it on a new line when the text content is not displayed completely in one line.
text stroke Sets whether to display the stroke of the text.
stroke width Sets the width of the text stroke. The value ranges from 0 to 10, and the recommended width is not greater than 3.
stroke color Sets the color of the text stroke.
horizontal fill Sets the horizontal padding of the button image. For a detailed description of each option seeThe horizontal fill method property of the picture control
vertical fill Sets the vertical padding of the button image. For a detailed description of each option seeThe vertical padding property of the picture control
Normal state picture Sets the image displayed by the button in its normal state. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended
Disable status image Sets the image to display when the button is disabled. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended
press state image Sets the image displayed when the button is pressed. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended
Image stretched margins When the horizontal filling method or vertical filling method is selected as “(Nine-square) Stretch”, you can set the top, bottom, left and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin

progress bar

The progress bar control is usually used to make the loading progress, task progress, etc. in the game. This control can set the background image of the progress bar, the progress fill image, the progress value, etc.

The properties of the progress bar control are given by basic propertiesand its unique properties, the unique properties of the progress bar control are as follows:

Attributes Features
current progress Set the initial progress value of the progress bar, the value range is 0.00 ~ 1.00, that is, 0% ~ 100%.
vertical progress bar The default progress bar is a horizontal progress bar, and the progress fills from left to right. When this option is checked, the progress will be filled from bottom to top instead (adjustable height of the control for best results).
progress reverse The default progress fill direction is left to right (horizontal progress bar) or bottom to top (vertical progress bar). When this option is checked, the progress fill direction will be changed to right-to-left (horizontal progress bar) or top-to-bottom (vertical progress bar).
progress fill image Sets the image used to represent progress. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
progress background image Sets the image used to fill the background of the progress bar. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Image stretched margins Set the top, bottom, left, and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin

text input box

The text input box control is used to support the player to enter text in the game. You can get the text entered by the player through this control.

The properties of the text input box control are given by basic propertiesand its unique properties, the unique properties of the text input box control are as follows:

Attributes Features
initial text Sets the initial input text of the input box. Rich text formatting is not supported.
font Set the font of the text. Currently, only fonts provided by the editor are supported, and custom fonts are not currently supported.
font size Sets the font size of the text. The minimum font size is 8 and the maximum font size is 72.
weight Set the text thickness, optional thin, regular, bold.
Normal status text color Sets the color of the text in the input box in its normal state.
selected state text color Sets the color of the text in the input box when it is selected. As shown below: The text color of the selected state is set to red:
background read-only color Sets the color to overlay on the background image when the input box is in read-only state. Usually a gray overlay indicates that the input box is read-only.
text mask Sets whether to use an asterisk (*) representation in place of the entered text. Usually an input box for entering a password.
Maximum input length Set the maximum number of characters that can be entered in the input box. Value range: 0~10000.
read-only Set whether to allow text to be entered in the input box. If checked, text cannot be entered in the input box.
Background picture Set the background image of the input box, support to directly select the image, or select the atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Image stretched margins Set the top, bottom, left, and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin
selected text background color Sets the background color of the text of the input box when it is selected. As shown below: The background color of the text in the selected state is set to red:

checkbox

The checkbox control is generally used in the scene where multiple selections are required in the game. When the control is enabled, there are two states, the unselected state and the selected state, and the pictures of the two states can be set respectively.

The properties of the checkbox control are given by basic propertiesand its unique properties, the unique properties of the checkbox control are as follows:

Attributes Features
Is it selected Set the initial state of the check box. If it is checked, it is the selected state, and if it is not checked, it is the unselected state.
text Set the text displayed by the checkbox, the text supports some rich text formatting:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are the transparency, and the last six digits are the RGB value). When setting the text color through rich text, you need to set the attribute of the text color. is white. Example: “Example[colour=’FF800080′]Text”.

2. Newline: \n, insert \n in the text to manually wrap the line. Example: “Example\nText”.

font Set the font of the text. Currently, only fonts provided by the editor are supported, and custom fonts are not currently supported.
font size Sets the font size of the text. The minimum font size is 8 and the maximum font size is 72.
weight Set the text thickness, optional thin, regular, bold.
Normal status text color Sets the color of the checkbox’s text when it is not disabled (both unselected and selected states).
Disable status text color Sets the color of the checkbox’s text when disabled.
text stroke Sets whether to display the stroke of the text.
stroke width Sets the width of the text stroke. The value ranges from 0 to 10, and the recommended width is not greater than 3.
stroke color Sets the color of the text stroke.
No status image selected Sets the picture to display when the checkbox is not selected. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Status image selected Sets the picture displayed when the checkbox is selected. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Image stretched margins Set the top, bottom, left, and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin

single button

Radio button controls are generally used in multiple-choice scenarios in games. Different from the check box control, the radio button can set a radio group, and only one radio button in the same radio group can be selected at the same time. When the control is enabled, there are two states, the unselected state and the selected state, and the pictures of the two states can be set respectively.

The properties of the radio button control are given by basic propertiesand its unique properties, the unique properties of the radio button control are as follows:

Attributes Features
Whether to check Set the initial state of the radio button. If it is checked, it is the selected state, and if it is not checked, it is the unselected state.
Radio group ID Set the radio group ID of the radio button, the same ID is regarded as the same radio group,Only one radio button in the same radio group can be selected at a time

For example, if the radio group IDs of the radio buttons RadioButton1, RadioButton2, and RadioButton3 are all 0, then when RadioButton1 is selected, both RadioButton2 and RadioButton3 will be set to the unselected state.

text Set the text displayed by the radio button, the text supports some rich text formats:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are the transparency, and the last six digits are the RGB value). When setting the text color through rich text, you need to set the attribute of the text color. is white. Example: “Example[colour=’FF800080′]Text”.

2. Newline: \n, insert \n in the text to manually wrap the line. Example: “Example\nText”.

font Set the font of the text. Currently, only fonts provided by the editor are supported, and custom fonts are not currently supported.
font size Sets the font size of the text. The minimum font size is 8 and the maximum font size is 72.
weight Set the text thickness, optional thin, regular, bold.
Normal status text color Sets the color of the checkbox’s text when it is not disabled (both unselected and selected states).
Disable status text color Sets the color of the checkbox’s text when disabled.
text stroke Sets whether to display the stroke of the text.
stroke width Sets the width of the text stroke. The value ranges from 0 to 10, and the recommended width is not greater than 3.
stroke color Sets the color of the text stroke.
No status image selected Sets the image to display when the radio button is not selected. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Status image selected Sets the image displayed by the radio button when it is selected. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Image stretched margins Set the top, bottom, left, and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin

horizontal slider

The slider control consists of a slider and a slider, and the value can be adjusted by dragging the slider. The editor provides horizontal sliders and vertical sliders. Except for the different sliding directions (horizontal sliders slide from left to right, vertical sliders slide from bottom to top), other functions are exactly the same.

The properties of the horizontal slider control are given by basic propertiesand its unique properties, the unique properties of the horizontal slider control are as follows:

Attributes Features
The current value Set the initial value of the slider (note that the percentage progress is not set here).
Maximum slider value Set the maximum value of the slider (that is, the value when the slider slides to the end).
Slider Image Sets the image used to populate the progress. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Background picture Sets the background image for the slider. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Slider image Sets the slider image for the slider. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Image stretched margins Set the top, bottom, left, and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin

vertical slider

Except for the different sliding directions (horizontal slide bar slides from left to right, vertical slide bar slides from bottom to top), the functions of vertical slide bar and horizontal slide bar are exactly the same. For specific functions, seehorizontal slider

scroll panel

A scroll panel control is a container with scrolling capabilities, typically used to browse more content in a limited area. Scroll panels are often used in conjunction with layout controls, such as making backpack interfaces, lists, etc., please refer toExample

If you want to display other controls inside the scroll panel, add those controls as children of the scroll panel.The “scroll” function takes effect only when the sub-control is outside the display range of the scroll panel. At this time, the scroll bar can be dragged to display the content outside the panel.

Sometimes the child controls of the scroll panel will exceed the display range of the panel, so you need to check the “Cropped by parent control” property of the child controls.

The properties of the scroll panel control are given by basic propertiesand its unique properties, the unique properties of the scroll panel control are as follows:

Attributes Features
slidable Is it possible to setby touchScroll the inside of the panel to adjust the display area of the scroll panel. If it is not checked, you can only adjust the display area through the scroll bar.
Background picture Sets the background image for the scroll panel. Supports direct selection of pictures, or selection of atlas (for the use of atlas, seeUse of atlases). CurrentlyOnly images in png, tga and jpg formats are supported, and png format is recommended. Also, the default padding for this image is “(Nine Palaces) Stretching“, changes are not supported at this time.
Image stretched margins Set the top, bottom, left, and right margins that divide the nine-square grid. For details on editing margins, seeSet the nine-square grid margin
Show horizontal scroll bar Set whether to display the horizontal scroll bar. Note: The scroll bar will only be displayed when the sub-control is beyond the display range of the scroll panel in the horizontal direction.
Horizontal scroll bar initial position Set the initial position of the horizontal scroll bar, the setting range is 0-1.
Show vertical scroll bar Sets whether to display the vertical scroll bar. Note: The scroll bar will only be displayed when the sub-control is vertically beyond the display range of the scroll panel.
Initial position of vertical scroll bar Set the initial position of the vertical scroll bar, the range is 0-1.

role window

The character window can display the character model on the interface, and can also play the action of the model. Touch inside the window to rotate the model.

The properties of the role window control are given by basic properties(Transparency does not take effect on the role window, so it is hidden) and its unique properties. The unique properties of the role window control are as follows:

Attributes Features
role model Sets the character model to display in the character window.
Action name To set the action played by the character model, you can manually enter the action name, or you can drop down to select a commonly used action. Available atcharacter editorto see all the actions of the character.

If the character has no corresponding action, the action named “idle” will be played automatically. If the character has no “idle” action, the action will not be played.

role orientation Sets the initial orientation of the character model.
zoom Sets the size of the character model in the window.

Effects window

The special effect window can display special effects on the interface, and can also play special effects. Touch inside the window to rotate the effect.

特效窗口.gif

The properties of the special effect window control are composed of basic properties (transparency does not take effect on the role window, so it is hidden) and its unique properties. The unique properties of the role window control are as follows:

Attributes Features
Effects file Sets the effect to be displayed in the effect window.
Play mode Set the play mode of the special effect. Currently, two play modes are provided: play once and play in loop. If the effect is persistent by default, the default effect is to loop.
special effect orientation Set the direction of the effect. This setting will not change the orientation property of the source effect, but only change the display orientation of the effect in the window. You can view the original orientation of the special effect in the [Effect Editor] (#Effect Editor).
Effect position Sets the position of the effect in the window.
special effect zoom Sets the size of the effect in the window.

Horizontal layout container

A horizontal layout container can automatically arrange all its child controls horizontally. As a container, the layout container control itself is invisible, and the container is represented by a wireframe and an icon in the editor (click the icon to select and move the layout container control):

If you want to automatically arrange some controls horizontally, you can add these controls as children of the horizontal layout container

The order of the child controls is from left to right, corresponding to the top and bottom order of the controls in the hierarchical management panel. For example, in the above picture: the Button control is at the leftmost, and the Button2 control is at the rightmost.

The size of the layout container control is automatically calculated based on the size of its child controls and cannot be modified manually.In addition, the layout container control does not have the “Clip by parent control” property. If you want the child control of the layout container to be clipped by the parent control of the layout container, you need to check the “Clip by parent control” property of the child control.

The properties of the horizontal layout container control are given by basic propertiesand its unique properties, the unique properties of the horizontal layout container control are as follows:

Attributes Features
layout interval When setting automatic arrangement, the horizontal space between two adjacent sub-controls.
fill direction Set the filling direction of the control when adding a new control to the horizontal layout container. The horizontal layout container can set the control to fill from left to right or from right to left.

vertical layout container

A vertical layout container can automatically arrange all its child controls vertically. As a container, the layout container control itself is invisible, and the container is represented by a wireframe and an icon in the editor (click the icon to select and move the layout container control):

If you want to automatically arrange some controls vertically, you can add these controls as child controls of the vertical layout container.

The order of the child controls is from top to bottom, corresponding to the top and bottom order of the controls in the hierarchical management panel. For example, in the above picture: the Button control is at the top, and the Button2 control is at the bottom.

The size of the layout container control is automatically calculated based on the size of its child controls and cannot be modified manually.In addition, the layout container control does not have the “Clip by parent control” property. If you want the child control of the layout container to be clipped by the parent control of the layout container, you need to check the “Clip by parent control” property of the child control.

The properties of the vertical layout container control are given by basic propertiesand its unique properties, the unique properties of the vertical layout container control are as follows:

Attributes Features
layout interval When setting automatic arrangement, the vertical space between two adjacent sub-controls.
fill direction Set the filling direction of the control when adding a new control to the vertical layout container. The vertical layout container can set the control to fill from top to bottom or from bottom to top

grid layout container

The grid layout container takes into account the characteristics of the horizontal layout container and the vertical layout container, and can automatically arrange the child controls in the horizontal and vertical directions at the same time. As a container, the layout container control itself is invisible, and the container is represented by a wireframe and an icon in the editor (click the icon to select and move the layout container control):

Similar to a horizontal layout container or a vertical layout container, if you want to arrange some controls automatically, you can add these controls as child controls of the grid layout container.

The order of arrangement of sub-controls is: firstly arrange the first row from left to right, when the maximum capacity of one row is reached, the second row will be arranged downward, and so on. Adjusting the upper and lower order of the controls in the hierarchy can adjust the order of their layout. For example, in the above picture: the Button1 control is located in the first row and the first column, and the Button9 control is located in the third row and the third column.

The size of the layout container control is automatically calculated based on the size of its child controls and cannot be modified manually.In addition, the layout container control does not have the “Clip by parent control” property. If you want the child control of the layout container to be clipped by the parent control of the layout container, you need to check the “Clip by parent control” property of the child control.

The properties of the grid layout container control are given by basic propertiesand its unique properties, the unique properties of the grid layout container control are as follows:

Attributes Features
Horizontal layout spacer When setting automatic arrangement, the horizontal interval of two adjacent sub-controls in the horizontal direction.
vertical layout spacer When setting automatic arrangement, the vertical spacing of two adjacent sub-controls in the vertical direction.
row capacity Set the maximum number of sub-controls a row can hold. When the sub-controls fill the first row, the next row will be filled.
fill direction Set the filling direction of the control when adding a new control to the vertical layout container. The vertical layout container can set the control to fill from top to bottom or from bottom to top.