UI Editor

March 2, 2022

Basic Introduction

The UI editor allows you to visually make interactive UI in the game. You can flexibly use the various UI widgets provided by the editor to combine them into exquisite UI styles, and then write UI scripts to realize the interaction between the UI and the game content.

New/Open UI File

Create a new UI file: In the resource management panel, click the New button and select the "New UI" option to create a new UI file (file with .layout suffix). When creating a new UI file, will automatically create a new lua script file with the same name for the UI. The logic related to this UI can be written in this script. When this UI is created in the game, this script will be executed automatically.

Because the engine occupies part of the UI name, it is not recommended to use the following names when creating a new one:click to view

| **UI name** | | |
| ———————- | ————————– | ——————- |
| actionWidget | application_templates | appMainRole |
| audioAndVideoSetting | bagBase | beAttackedFeedback |
| cameraSetting | CDMask | chat |
| CollectPropResultRank | conversation | ConversationItem |
| countdown | exitGameConfirmationWindow | frontsight |
| game_setting | game_setting_item | game_tip |
| GameMenu | gameOverPanel | gameOverRank |
| gameOverRankPersonItem | gameOverRankTeamItem | GameResultRank |
| gm_board | gm_board_plugin_cell | goodItem |
| mapLoadingPage | menu_player | menu_player_item |
| menukey_setting | menukey_setting_item | newKeyboardWidget |
| newmainuinavigation | onlineConsumeRemind | operationSetting |
| overPop | payConfirm | playerinfo |
| playerList | progressMask | promptNotice |
| propNumberTip | reload | roleAttribute |
| rolePanelCell | sampleCell | SecondConfirmWindow |
| setting | settlement | shop |
| shortcutBar | skills | snipe |
| summary_item | TabWidgetDemo | TabPage |
| TabPage1 | TabPage2 | teamRankItem |
| teamRankList | toast | toolbar |
| topteamInfo | widget_icon_count_down | widget_tab |

Open the UI file: Double-click an UI file in the resource management panel, the UI file will be opened in the editor.

Editor Interface and Functions

The UI editor is mainly composed of the following UIs:

UI Widget Library

UI widgets are the basic elements that make up the UI, and are often used to display prompts in the game, provide input and feedback for player operations, and so on.

In the widget library, all widgets supported by the editor will be listed, including: empty windows, text, pictures, buttons, progress bars, Edit boxes, check boxes, radio buttons, horizontal sliders, vertical sliders, Scroll panel, role window, horizontal layout container, vertical layout container, grid layout container.

Flexible use of appropriate widgets can greatly reduce the workload of UI production. For specific UI widgets introduction, see [UI Widget Functions and Properties](#UI Widget Functions and Properties).

Add Widgets to the UI

There are two ways to add widgets to the current UI:

  1. Select a certain type of widget in the widget library, hold down the left mouse button, drag the widget into the canvas, and release the mouse to create a new widget at the mouse position. The new widget will be automatically created as a child widget of the root node.

  2. Select a certain type of widget in the widget library, hold down the left mouse button, drag the widget to the widget hierarchy management panel, and release the mouse to create a new widget. The new widget will be created as a child widget of the widget selected by the mouse.

Widget Level Management Panel

The panel mainly has the following two functions:

  1. Display all the widgets added to the current UI in a tree structure.

  2. Manage the widgets of the current UI, including delete, copy, cut, paste, adjust levels, etc. These functions will be introduced one by one below.

Widget Level Introduction

The hierarchical structure of widgets is extremely important to UI production, mainly involving the following aspects:

  1. The level and order of the widgets in the UI determines the order in which the widgets are rendered. The rendering rules are: The parent widget is rendered before the child widget (the child widget is displayed "above" the parent widget), and the widget in front is ranked first. The back widgets are rendered first (the back widgets are displayed "above" the front widgets).

(In the example above, the rendering order of the widgets is: Text1–>Text2–>Text3–>Text4–>Text5)

  1. The parent widget also affects the coordinates, rotation, size, transparency and other properties of the child widget. For details, see [UI Widget Functions and Properties](#UI Widget Functions and Properties).

  2. When obtaining a widget instance through API, you need to find the widget by name, so the same level of widget is not allowed to have the same name.

  3. In addition, when deleting, moving, cutting, copying, and pasting a widget, it will also take effect for all descendent widgets of that widget.

When creating a new UI, a root node named Root will be automatically created. The root node cannot be deleted. It is the common parent of all other widgets.

Adjust the Widget Level

You can drag the widgets in the panel to adjust their level or order:

  1. Drag the widget to the middle of the two brother widgets (a horizontal line will be displayed between the two widgets), then the widget can be inserted between the two.

  1. Drag widget A to the name of widget B (a wire frame will appear to frame widget B), then widget A can be set as a child of widget B.

  1. When you move the level of a widget, all descendant widgets of the widget will also move.

Delete, Cut, Copy, Paste Widgets

After selecting the widget in the panel, click the right mouse button to delete, cut, copy, and paste the widget. When performing these operations on a widget, will take effect on all descendant widgets of the widget at the same time.

Hide Widgets

Click the "eye" button to the right of the widget name to switch the display/hide state of the current widget.

When the widget is hidden, you cannot see the widget in the canvas, but you can still click in the canvas to select the widget.

Note: When you click the "eye" button to switch between the visible and hidden states of the widget, the widget’s "display or not" property will be modified synchronously, which also means that this setting will also take effect when the game is running.

Lock Widget

Click the "lock" button on the right side of the widget name to switch the locked/unlocked state of the current widget. When the widget is locked, the widget cannot be moved or zoomed in the canvas, but the coordinates and size properties of the widget can still be modified in the property panel.

Note: This lock function only takes effect in the editor.

Canvas

The canvas will display the layout and style of the current UI in real time, and you can intuitively move the position of the widget and zoom the size of the widget in the canvas.

Mobile Widget

Click and drag a widget in the canvas to move the widget. Hold down the Shift key while dragging the widget, you can move the widget only in the vertical or horizontal direction.

When the widget is moved, the coordinate properties of the widget will be modified synchronously (only the "absolute value" will be modified, and the "relative value" will not change).

Zoom Widget

After selecting a widget in the canvas, drag the zoom point on the widget frame to zoom the widget. Hold down the Shift key while zooming the widget, you can keep the aspect ratio of the widget unchanged.

When the widget is zoomed, the size property of the widget will be modified synchronously (only the "absolute value" will be modified, and the "relative value" will not change).

Zoom the Canvas

Select the zoom ratio in the scale setting in the upper right corner of the canvas, or press and hold Ctrl while moving the mouse wheel to zoom the canvas as a whole. The zoom setting only takes effect in the editor, and does not affect the performance of the UI in the game.

Properties Panel

Display the properties of the currently selected widget will be displayed in the properties panel, where you can modify the properties of the widget. For detailed properties of various widgets, please refer to [UI Widget Functions and Properties](#UI Widget Functions and Properties)

Default UI Management Panel

The preset UI refers to the UI automatically created by the engine when the game is running, such as the prop bar, joystick, etc. In this panel, common preset UIs are listed.

Select a preset UI in the panel, you can preview the preset UI in the canvas, but the function and style of the preset UI cannot be changed.

Note: This panel is not displayed by default, you need to enable it in the "View" option of the top menu of the editor.

Disable the Preset UI

After selecting a preset UI, you can set whether to enable this UI in the properties panel.

When the default UI is disabled, the UI will not be displayed in the game, and related game functions will also be invalid.

UI Widget Functions and Properties

The properties of UI widgets are composed of basic properties and widget-specific properties. Basic properties are common properties that all types of widgets have, and different widgets have their own unique properties. The following will separately introduce the basic properties and the unique properties of various widgets.

Basic Properties

Basic properties are common properties that all types of widgets have, including the following properties:

Properties Functions
Display or Not Set whether to display the current widget, this property will affect the descendant widgets. If the current widget is hidden, no matter what the descendant widget is set to, it will be hidden.
Coordinates Set the position of the current widget relative to the anchor point (anchor point specifies the alignment of the current widget relative to the parent widget, see [anchor](#Basic properties-anchor) property for details). X and Y respectively indicate how much the current widget is offset horizontally and vertically relative to the anchor point.

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

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

Size Set the width and height of the current widget, X means width, Y means height.

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

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

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

Rotate around the X axis:

Rotate around the Y axis:

Rotate around the Z axis:
When the widget rotates, it will rotate around the center of rotation. The default rotation center is (0.5, 0.5), which is the center point of the widget.

When a widget is rotated, all of its child widgets will also be rotated, and child widgets will be forced to be cropped by the parent widget.

Center of rotation Set the point around which the widget rotates when it is rotated. X represents the ratio relative to the width of the current widget, and Y represents the ratio relative to the height of the current widget. The value range is 0.00~1.00, (0.00,0.00) represents the upper left corner of the widget, and (1.00,1.00) represents the lower right corner of the widget.


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

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

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

Refer to the following figure for the effect of different anchor points (the coordinates of the sub-widgets are all (0,0)):

transparency Set the transparency of the widget, 0 means completely transparent, 1 means opaque. This property will affect descendant widgets. If the current widget is set to be transparent, the descendant widgets will also be transparent.
Cropped by the parent widget [](@Basic property_Cropped by the parent widget) Set whether the part of the current widget beyond the bounding box of the parent widget is cropped.

This property will not affect descendant widgets, that is, if the current widget is set to be cropped by the parent widget, its child widgets will not be cropped. If you want the child widget to also be cropped, you need to set the child widget also Set to be Cropped by the parent widget.

The image on the left is that the button is cropped by the parent widget, and the image on the right is not cropped:

Disable Set whether to disable the current widget. When the widget is disabled, it will not listen to and respond to any events. This property will affect descendant widgets. If the current widget is set to disabled, the descendant widgets will also be disabled.
Touch penetration Set whether the widget responds to touch events. If this option is checked, the widget will not respond to touch events and will directly use this widget to make other widgets underneath respond to touch events.

Default Window

An default window is an invisible rectangle, which is usually used as the parent widget of other widgets in order to manage the widget structure.

Default windows only have [basic properties](#Basic Properties), but no specific properties.

Text

The text widget is mainly used to display text, you can typeset the text, set the text style, etc.

The properties of the text widget are composed of [basic properties](#basic properties) and its specific properties. The specific properties of the text widget are as follows:

Property Function
text Set the text content that the text widget needs to display. The text supports part of the rich text format:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are transparency, the last six digits are RGB values), through rich When setting the text color of the text, the property of the text color needs to be set to white. Example: "Example [colour=’FF800080′] text".

2. Line feed: \n, you can manually wrap the line by inserting \n in the text. 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 Set the font size of the text. The minimum font size is 8, and the maximum font size is 72.
Text box Autofit Set whether to automatically adjust the width and height of the text widget according to the text content. The options are as follows:
1. Fixed size: The size of the text widget is determined by the widget’s [size](#Basic properties_Size) property, not Automatically adjust the width and height of the text widget according to the text content.

2. Autofit width: the height of the text widget is determined by the widget’s [Size](#Basic properties_Size) is determined by the property, and the width will be automatically adjusted according to the text content. When this option is selected, automatic line wrapping and automatic scaling of font size cannot be enabled.

3. The width of the text widget is determined by the widget’s [size]( #Basic properties_Size) is determined by the 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 selecting this option, you need to check the automatic line break (not necessary, you can also choose to enter a line break \n to manually wrap).

4. Autofit width and height: automatically adjust according to text content The width and height of the text widget cannot be manually specified in the [size](#Basic properties_Size) property of the widget. When this option is selected, automatic line wrapping and automatic scaling of font size cannot be enabled.

Auto Font Scaled [](@Script properties_Auto Font Scaled) Set whether to automatically reduce the font size to fit the size of the widget when the widget cannot display the text content. The smallest font size can be scaled to 8. The following picture on the left shows that automatic line wrapping is not turned on, and the picture on the right shows automatic line wrapping:
Font weight Set the text thickness, select thin, regular, and bold.
Text color Set the color of the text.
Show text background settings Whether to display the text background, if enabled, the text widget will be filled with a pure color.
Text background color Set the color used to fill the text widget.
Show text border Set whether to display the border of the text widget.
Text border color Set the color of the border of the text widget.
Auto Line Wrap Set whether to automatically wrap the text when the length of the text content exceeds the width of the widget.
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 vertical alignment of the text, you can choose top alignment, center alignment, and bottom alignment.
Text Outline Set whether to display the Outline of the text.
Outline width Set the width of the text Outline. The value range is 0~10, and the recommended width should not be greater than 3.
Outline color Set the color of the text Outline.

Image

The image widget is mainly used to display images.

The properties of the image widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the image widget are as follows:

Properties Functions
Horizontal filling method [](@Image properties_Horizontal filling method) Set the filling method of the image in the horizontal direction, the options are as follows:
1. Keep the original size left aligned: the image will not be stretched according to the size of the widget, and displayed On the left side of the widget. Example: Select "Keep the original size left aligned" for the horizontal filling method and "Keep the original size top aligned" for the vertical filling method:

2. Keep the original size aligned in the center: similar to "Keep the original size aligned to the left".

3. Keep the original size aligned to the right: similar to "Keep the original size aligned to the left".

4. (9 Square Box) Stretching: Stretch the image horizontally to fill the widgets in the horizontal direction. See "[9 Square Box Stretching Strategy](#Image Strategies_ 9 Square Box Stretching Strategy)" for the stretching strategy. Property.
Example: Select “(9 Square Box) stretch” for horizontal filling method, set the stretch margin as shown in the left image below, when zooming the widget, the left and right borders of the image will not be stretched, but the hook in the middle will be stretched:< br>

5. Tile: Tile the image horizontally until it fills the widget horizontally.

[](@Image properties_Vertical filling method) Set the vertical filling method of the image. The options are as follows:

1. Keep the original size and top alignment: the image will not be stretched according to the size of the widget, and displayed At the top of the widget. Example: Select “(Nine-square grid) stretch” for horizontal filling method and “keep the top alignment of original size” for vertical filling method:

2. Keep the original size aligned in the center: similar to "Keep the original size aligned at the top".

3. Keep the original size aligned at the bottom: similar to "Keep the original size aligned at the top".

4. (9 Square Box) stretch: stretch the image vertically to fill the widget in the vertical direction. See "[9 Square Box Stretch Strategy](#Image Strategies_9 Square Box Strech Strategy)" for the stretching strategy. Property.
Example: Select “(9 Square Box) Stretch” for the vertical filling method, set the stretch margin as shown in the left image below, when the widget is zoomed, the upper and lower borders of the image will not be stretched, but the hook in the middle will be stretched:< br>

5. Tile: Tile the image vertically until it fills the widget vertically.

image Set the original image that the image widget needs to display. It supports direct selection of images or selection of atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format images, png format is recommended.
Image stretch margin When the horizontal or vertical filling mode selects "(9 Square Box) stretch", you can set the top, bottom, left and right margins that divide the 9 Square Box. For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).
Reset widget size Set the size of the widget to the size of the original image.
Show image border Set whether to display the border of the image widget.
image border color Set the color of the border of the image widget.
image color Overlay a layer of color on the image. The following left image is the original image, and the right image is covered with green:
Show background color Set the color of the image widget. The color will fill the widget and be displayed below the image. Usually only the background color is set for transparent images.

Button

Button widgets can respond to user clicks and are the most commonly used interactive widgets. This widget can set button styles in various states, including pictures, text, etc.

Buttons are usually divided into three states: the normal state represents the state of the button when no event occurs; 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 widget are composed of [basic properties](#Basic Properties) and its unique properties. The specific properties of the button widget are as follows:

Property Function
Button text sets the text content displayed on the button widget. The text supports part of the rich text format:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are transparency, the last six digits are RGB values), through rich When setting the text color of the text, the property of the text color needs to be set to white. Example: "Example [colour=’FF800080′] text".

2. Line feed: \n, you can manually wrap the line by inserting \n in the text. 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 Set the font size of the text. The minimum font size is 8, and the maximum font size is 72.
Auto Font Scaled Set whether to automatically reduce the font size to fit the size of the widget when the widget can’t display the text content completely. The smallest font size can be scaled to 8. For example, see [Auto-scaling font size property of text widget](#Script properties_Auto-scaling font size property of text widget).
Font weight Set the text thickness, select thin, regular, and bold.
Regular Text Color Set the text color of the button in the normal state.
Disable status text color Set the text color of the button in the disabled state.
Button state text color Set the text color of the button in the pressed state.
Auto Line Wrap Set whether to automatically wrap the text when the length of the text content exceeds the width of the widget.
Text Outline Set whether to display the Outline of the text.
Outline width Set the width of the text Outline. The value range is 0~10, and the recommended width should not be greater than 3.
Outline color sets the color of the text Outline.
Horizontal filling method Set the filling method of the button image in the horizontal direction. For detailed description of each option, please refer to [Horizontal Filling Method Property of Picture Widget](#Image properties_Horizontal Filling Method Property of Picture Widget).
Vertical filling method Set the vertical filling method of the button image. For detailed description of each option, please refer to [Vertical Filling Method Property of Picture Widget](#Image properties_Horizontal Filling Method Property of Picture Widget).
Normal state picture Set the picture displayed by the button in the normal state. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended.
Disable status picture Set the picture displayed when the button is disabled. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended.
Pressed state picture Set the picture displayed when the button is pressed. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended.
Image stretch margin When the horizontal or vertical filling mode selects "(9 Square Box) stretch", you can set the top, bottom, left and right margins that divide the 9 Square Box. For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).

Progress Bar

The progress bar widget is usually used to make the loading progress, task progress, etc. in the game. The widget can set the background image of the progress bar, the progress filling graph, and the progress value.

The properties of the progress bar widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the progress bar widget are as follows:

Property Function
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 is filled from left to right. After checking this option, the progress will be changed to fill from bottom to top (the height of the widget can be adjusted to achieve the best effect).
Progress Reversed The default progress filling direction is from left to right (horizontal progress bar) or bottom to top (vertical progress bar). After checking this option, the progress filling direction will be changed from right to left (horizontal progress bar) or top to bottom (vertical progress bar).
Progress fill Image Set up a picture to indicate progress. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box)Stretch)", which is not supported for the time being to change it.
Progress background image Set the picture used to fill the background of the progress bar. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box)Stretch)", which is not supported for the time being to change it.
Image stretch margin Set the top, bottom, left, and right margins that divide the 9 Square Box. For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).

Edit Box

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

The properties of the Edit box widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the Edit box widget are as follows:

Property Function
Text Set the initial input text of the input box. Rich text format 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 Set the font size of the text. The minimum font size is 8, and the maximum font size is 72.
Font weight Set the text thickness, select thin, regular, and bold.
Regular Text Color Set the color of the text in the input box in the normal state.
Selected Status text color Set the color of the text in the input box when it is selected. As shown in the figure below: the text color in the selected state is set to red:
Background read-only color Set the color of the background image when the input box is in the read-only state. Usually a layer of gray is overlaid to indicate that the input box is in a read-only state.
Text mask Set whether to use an asterisk (*) to replace the entered text. An input box usually used to enter 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 input in the input box. If checked, you cannot input text in the input box.
Background Image Set the Background Image of the input box, you can directly select the picture, or select the atlas (for the use of atlas, please refer to [the use of atlas](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box)Stretch)", which is not supported for the time being to change it.
Image stretch margin Set the top, bottom, left, and right margins that divide the 9 Square Box. For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).
Selected text background color Set the background color when the text of the input box is selected. As shown in the figure below: The background color of the text in the selected state is set to red:

Checkbox

The check box widget is generally used in the scene where multiple selections are required in the game. When the widget is enabled, there are two states, the unselected state and the selected state, and the pictures in the two states can be set separately.

The properties of the check box widget are composed of [basic properties](#Basic properties) and its unique properties. The specific properties of the check box widget are as follows:

Property Function
Whether selected Set the initial state of the check box, check it to be the selected state, uncheck it to be the unselected state.
text Set the text displayed by the check box, the text supports part of the rich text format:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are transparency, the last six Bit is RGB value), when setting the text color through rich text, the property of the text color needs to be set to white. Example: "Example [colour=’FF800080′] text".
2. Line feed: \n, you can manually wrap the line by inserting \n in the text. 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 Set the font size of the text. The minimum font size is 8, and the maximum font size is 72.
Font weight Set the text thickness, select thin, regular, and bold.
Regular Text Color Set the color of the text of the check box when it is not disabled (including the unselected state and the selected state).
Disable status text color Set the color of the text of the check box in the disabled state.
Text Outline Set whether to display the Outline of the text.
Outline width Set the width of the text Outline. The value range is 0~10, and the recommended width should not be greater than 3.
Outline color Set the color of the text Outline.
No status picture selected Set the picture displayed when the check box is not selected. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Status picture selected Set the picture displayed when the check box is selected. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Image stretch margin Set the top, bottom, left, and right margins that divide the 9 Square Box. For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).

Radio Button

The radio button widget is generally used in the scene where one more choice is in the game. Unlike the check box widget, a 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 widget is enabled, there are two states, the unselected state and the selected state, and the pictures in the two states can be set separately.

The properties of the radio button widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the radio button widget are as follows:

Property Function
Select Set the initial state of the radio button. If it is checked, it is selected, and if it is unchecked, it is unselected.
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 the same time.

For example: 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 part of the rich text format:

1. Set the font color: [colour=’FFFFFFFF’] (hexadecimal color value, the first two digits are transparency, the last six Bit is RGB value), when setting the text color through rich text, the property of the text color needs to be set to white. Example: "Example [colour=’FF800080′] text".

2. Line feed: \n, you can manually wrap the line by inserting \n in the text. 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 Set the font size of the text. The minimum font size is 8, and the maximum font size is 72.
Font weight Set the text thickness, select thin, regular, and bold.
Regular Text Color Set the color of the text of the check box when it is not disabled (including the unselected state and the selected state).
Disable status text color Set the color of the text of the check box in the disabled state.
Text Outline Set whether to display the Outline of the text.
Outline width Set the width of the text Outline. The value range is 0~10, and the recommended width should not be greater than 3.
Outline color Set the color of the text Outline.
No status picture selected Set the picture displayed when the radio button is not selected. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Status picture selected Set the picture displayed when the radio button is selected. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Image stretch margin Set the top, bottom, left, and right margins that divide the 9 Square Box For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).

Horizontal Slider

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

The properties of the horizontal slider widget are composed of [basic properties] (#basic properties) and its specific properties. The specific properties of the horizontal slider widget are as follows:

Property Function
The current value Set the initial value of the slider (note that the setting here is not a percentage progress).
Maximum slider Set the maximum value of the slider (that is, the value when the slider reaches the end).
Slider Image Set the picture used to fill the progress. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Background Image Set the background image of the slider. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Slider Image Set the Slider Image of the slider. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Image stretch margin Set the top, bottom, left, and right margins that divide the 9 Square Box For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box 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 the vertical slide bar and the horizontal slide bar are exactly the same. For specific functions, see [Horizontal Slider](#Horizontal Slider ).

Scroll Panel

Scroll panel widget is a container with scroll function, usually used to browse more content in a limited area. Scroll panels are often used in conjunction with layout widgets, such as making backpack UIs, lists, etc., please refer to [example](#UI Creation Example).

If you want to display other widgets inside the scroll panel, you must add these widgets as children of the scroll panel.Only when the sub-widgets are outside the display range of the scroll panel, the "Scroll" function will take effect. At this time, you can drag the scroll bar to display the content outside the panel.

Sometimes the child widget of the scroll panel will exceed the display range of the panel, you need to check the "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property of the child widget.

The properties of the scroll panel widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the scroll panel widget are as follows:

Property Function
Scrollable Set whether it is possible to adjust the display area of the scroll panel by touching the inside of the scroll panel. If it is not checked, the display area can only be adjusted through the scroll bar.
Background Image Set the background image of the scroll panel. Support to directly select pictures, or select atlas (for the use of atlas, see [Atlas Use](#Atlas Use)). Currently only supports png, tga and jpg format pictures, png format is recommended. In addition, the default filling method of the picture is "[(9 Square Box) Stretch](#(9 Square Box) Stretch)", which is not supported for the time being to change it.
Image stretch margin Set the top, bottom, left, and right margins that divide the 9 Square Box. For the operation of editing margin, please refer to [Set 9 Square Box Margin](#Image properties_Set 9 Square Box Margin).
Display horizontal scroll bar Set whether to display the horizontal scroll bar. Note: The scroll bar will only be displayed when the child widget exceeds the display range of the scroll panel in the horizontal direction.
Display vertical scroll bar Set whether to display the vertical scroll bar. Note: The scroll bar will only be displayed when the child widget exceeds the display range of the scroll panel in the vertical direction.

Actor Window

The actor window can display the actor model on the UI, and can also play the actions of the model. Touch in the window to rotate the model.

The properties of the actor window widget are composed of [basic properties](#Basic properties)(transparency does not take effect on the actor window, so it is hidden) and its unique properties. The unique properties of the actor window widget are as follows:

Property Function
Actor model Set the actor model to be displayed in the actor window.
Action name Set the action to be played by the actor model. You can manually enter the action name or drop down to select the commonly used action. All actions of the actor can be viewed in [Actor Editor](#Actor Editor).

If the actor does not have a corresponding action, the action named "idle" will be played automatically, if the actor does not have an "idle" action, the action will not be played.

Character orientation Set the initial orientation of the actor model.
Zoom Set the size of the actor model in the window.

Horizontal Layout Container

The horizontal layout container can automatically arrange all its child widgets in the horizontal direction. As a container, the layout container widget itself is invisible. Use wireframes and icons to represent the container in the editor (click the icon to select and move the layout container widget):

If you want to automatically arrange some widgets horizontally, you can add these widgets as child widgets of the horizontal layout container:

The order of the sub-widgets is from left to right, corresponding to the upper and lower order of the widgets in the hierarchical management panel. For example, in the figure above: Button widget is located on the far left and Button2 widget is located on the far right.

The size of the layout container widget is automatically calculated based on the size of its child widgets and cannot be manually modified. In addition, the layout container widget does not have the "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property. If you want the child widget of the layout container to be cropped by the parent widget of the layout container, you need to check the child widget "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property.

The properties of the horizontal layout container widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the horizontal layout container widget are as follows:

Property Function
Layout interval When setting the automatic arrangement, the horizontal interval between two adjacent sub-widgets.

Vertical Layout Container

The vertical layout container can automatically arrange all its child widgets in the vertical direction. As a container, the layout container widget itself is invisible. Use wireframes and icons to represent the container in the editor (click the icon to select and move the layout container widget):

If you want to automatically arrange some widgets vertically, add these widgets as child widgets of the vertical layout container:

The order of the child widgets is from top to bottom, corresponding to the upper and lower order of the widgets in the hierarchical management panel. For example, in the figure above: Button widget is at the top, Button2 widget is at the bottom.

The size of the layout container widget is automatically calculated based on the size of its child widgets and cannot be manually modified. In addition, the layout container widget does not have the "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property. If you want the child widget of the layout container to be cropped by the parent widget of the layout container, you need to check the child widget "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property.

The properties of the vertical layout container widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the vertical layout container widget are as follows:

Property Function
Layout interval When setting the automatic arrangement, the vertical interval between two adjacent sub-widgets.

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 sub-widgets in the horizontal and vertical directions at the same time. As a container, the layout container widget itself is invisible. Use wireframes and icons to represent the container in the editor (click the icon to select and move the layout container widget):

Similar to the horizontal layout container or the vertical layout container, if you want to arrange certain widgets automatically, you can add these widgets as child widgets of the grid layout container:

The order of the sub-widgets is: arrange the first row from left to right first, when the maximum capacity of a row is reached, the second row will be arranged downward, and so on. Adjust the up and down order of the widgets in the hierarchy to adjust the order of their layout. For example, in the above figure: Button1 widget is located in the first row and first column, Button9 widget is located in the third row and third column.

The size of the layout container widget is automatically calculated based on the size of its child widgets and cannot be manually modified. In addition, the layout container widget does not have the "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property. If you want the child widget of the layout container to be cropped by the parent widget of the layout container, you need to check the child widget "[Cropped by parent widget](#Basic properties_Cropped by parent widget)" property.

The properties of the grid layout container widget are composed of [basic properties](#Basic properties) and its specific properties. The specific properties of the grid layout container widget are as follows:

Property Function
Horizontal layout interval When setting the automatic arrangement, the horizontal interval between two adjacent sub-widgets in the horizontal direction.
Vertical layout interval When setting the automatic arrangement, the vertical interval between two adjacent sub-widgets in the vertical direction.
Capacity of a row Set the maximum number of child widgets in a row. When the child widgets fill the first row, the next row will be filled.

9 Square Box

Introduction to 9 Square Box Stretching

9 Square Box stretching is one of the image filling methods, which allows you to customize which part of the image will maintain the original size and which part will be stretched. In this way, the size of resources can be saved, and the effect of large-size pictures can be stretched by using smaller pictures. In addition, different stretching requirements can be met, and the workload of making pictures can be reduced.

9 Square Box Stretch Strategy

Divide the picture into nine parts (similar to the nine-square grid). When the picture is stretched, the four corners will not be stretched. The left and right areas will only be stretched vertically, the upper and lower areas will only be stretched horizontally, and the middle The area will be stretched in both directions. Refer to the picture below:

Set 9 Square Box Margin

  1. Click the margin edit button, and the margin setting window will pop up.

  2. Drag the top, bottom, left, and right green lines to set the top, bottom, left, and right margins of the 9 Square Box.

  3. You can also directly enter the margin value (the margin value is relative to the original image size).

  4. Roll the mouse wheel to zoom in and out of the picture, so that you can adjust and preview the margins.

Introduction to UI scripts

At present, the UI editor can only lay out the UI and set the properties of the widgets. If you need to implement the interaction logic between the UI and the game, you need to write a lua script for the UI.

When creating a new UI file, will automatically create a new lua script file with the same name for the UI. The logic related to this UI can be written in this script. When this UI is created in the game, this script will be executed automatically.

Select any widget in [Widget Level Management Panel](#Widget Level Management Panel), you can find the script edit button in the property panel, click the button to open the lua script of the same name corresponding to the UI.

For specific UI-related API UIs, please refer to API Manual.

Use of Atlas

Usually when we use pictures in the UI, we use separate pictures, which is more convenient, but the rendering efficiency of a single picture is lower. In order to improve the running performance, we also support the use of atlas in the UI.

An atlas usually refers to merging multiple pictures into a large picture and generating a description file, which is used to describe the name, size, location, etc. of the sub-pictures.

Packaged Atlas

At present, the editor supports creating new atlases and packaged atlases, and you need to use the third-party tool "TexturePacker" to package atlases. The following operations all take "TexturePacker" as an example:

  1. Open the TexturePacker software and choose the free version or the professional version according to your personal situation.

  2. Drag the picture to be packed or the folder where the picture is located into the TexturePacker software.

  3. In the settings panel on the right, set the data format of the output file to "JSON (Hash)".

  4. Set "Border Fill" and "Shape Fill" to 2.

  5. Click "publish sprite sheet" to export the merged picture and json data file.

Note:

  1. Sometimes the exported pictures will contain a red watermark, please check whether the professional version function is enabled, and then export again after turning off the professional version function.

  2. The naming of atlas files is limited to English, numbers and underscores.

Atlas Format Conversion

The json file exported through TexturePacker cannot be directly read by the engine, and the json file needs to be converted into an imageset file.

Click here to download the atlas conversion tool. After downloading, please unzip it, and then follow the steps below to convert the file:

  1. Put the json file exported by TexturePacker into the import folder.

  2. Click run.bat and wait a moment.

  3. When the prompt "Please press any key to continue", it indicates that the conversion is successful, just close the cmd window.

  4. After the conversion is completed, an imageset format file with the same name as the json file will be generated in the export folder. The imageset file is the atlas description file we need to use.

Import Gallery

Similar to importing other resources, just import the atlas in the resource management panel. Note that you need to import both the image (.png file) and the description file (.imageset file).

Note: After importing, please do not modify the names of the pictures and description files, otherwise the pictures in the gallery will not be able to be read.

Use Atlas

Selecting an atlas is similar to selecting a picture. Next, take the selection of a picture for the picture widget as an example:

  1. Click the image selection button in the properties panel:

  2. Select the atlas you want to use in the resource selection window, you need to select the imageset file, not the png image:

  3. After clicking the OK button, the sub-picture selection window of the atlas will pop up, and only all the sub-pictures contained in the current atlas will be listed in this window:

  4. Just select the picture you want to use.

UI Adaptation Strategy

The resolution of the player’s equipment is not the same. In order to display the same effect on different screens as possible, the engine provides a set of adaptation schemes. The specific adaptation method is as follows:

Design Resolution and Screen Resolution

The design resolution is the standard resolution used by the creator when making the UI. The default design resolution of the engine is 1280*720. It is recommended that the creator use this resolution as the benchmark to design the original UI image**.

The screen resolution refers to the screen display resolution on the device. The screen resolution of common Android devices is 1920 1080, 1280 720, etc., and the screen resolution of IOS devices is 2436 1125, 1920 1080, etc.

When the screen resolution of the device is the same as the design resolution, both are 1280 * 720, the display effect on the screen is the same as the design drawing. However, if there is a difference between the screen resolution and the design resolution, UI adaptation is required.

The Screen Resolution Aspect Ratio is Equal to 16:9

Since the aspect ratio of the screen resolution is the same as the aspect ratio of the design resolution (1280 * 720), both are 16:9, The aspect ratio of the UI widget only needs to be enlarged to fit the screen.

For example: the screen resolution is 2560 1440, the size of the widget is 50 100, then the width of the widget actually rendered on the screen is 50 (2560/1280)=100px, and the height is 100 (1440/720)=200px.

The Screen Resolution Aspect Ratio is greater than 16:9

If the aspect ratio of the screen resolution is greater than 16:9, the common ones are 18:9, 19.5:9, etc., then the adaptation will be based on the height of the design resolution.

For example: the screen resolution is 19201080, and the size of the widget is 50100. Then when adapting, the widget will be enlarged by 1080/720=1.5 times (magnification = high screen resolution/high design resolution). Therefore, the width of the widget actually rendered on the screen is 50 1.5=75px, and the height is 100 1.5=150px.

The Screen Resolution Aspect Ratio is less than 16:9

If the aspect ratio of the screen resolution is less than 16:9, common ones are 4:3, 16:10, etc., then the adaptation will be based on the width of the design resolution.

For example: the screen resolution is 1920×960, and the size of the widget is 50 100. Then when adapting, the widget will be enlarged 1920/1280=1.5 times (magnification factor = width of screen resolution/width of design resolution). Therefore, the width of the widget actually rendered on the screen is 50 1.5=75px, and the height is 100 * 1.5=150px.

Preview the Adaptation Effect

You can switch the size of the canvas in the toolbar in the upper right corner of the canvas, and you can preview the current UI display effect in different aspect ratios.

Example Production

Example 1: Select team UI

We made an UI for selecting teams to help everyone quickly understand the steps and functions of each function.

  1. First, create a new UI file in the resource management panel and name it "selectTeam";

  2. Select the root node (a widget named "Root") in the widget hierarchy management panel, and adjust its size as shown in the figure below;

  3. Drag the picture widget into the canvas as a window for selecting the team;

  4. Select the picture widget you just dragged in, and change the picture resource in the property panel;

  5. Adjust the picture widget to a suitable size;

  6. Adjust the stretched margins of the picture to prevent the picture from deforming the frame due to stretching;

  7. Adjust the anchor point and coordinates, and set the picture widget to the middle of the screen;

  8. Drag in a text widget as the title of the window, and set its text to "Select Team";

  9. Set the font size of the text, adjust the size of the text widget, and center the text in both the horizontal and vertical directions;

  10. Drag in an empty window as a container for team 1 icons and selection buttons for easy layout;

  11. Copy the empty window just now as a container for the team 2 icon and selection button;

  12. Drag in a picture widget as the icon of team 1;

  13. Replace the icon resource of team 1, and add background color and border;

  14. Drag in a button widget as the selection button of team 1;

  15. Modify the text of the select button to "Select Team 1";

  16. Copy the icon and button of team 1 to the container of team 2, and modify the corresponding text and pictures;

  17. At this point, the team selects the layout of the UI. In order to display the UI in the game, you need to simply write some scripts. Click the game settings button in the toolbar and find the client script column;

  18. Open the script named main.lua, delete the original code, and enter the following code (the function of this code is: 10 frames after the game world is created, display the team selection UI, please refer to the specific UI-related API UI API Manual);

    World.Timer(10, function()
        local window = UI:openWindow("selectTeam")
    end)

  19. Create two new teams in the game settings, set as shown below;

  20. Select any widget in the UI, click Edit UI Script, and enter the following code (the function of this code is: click the button to send the protocol to the server, and close the current window. For specific UI-related API UIs, please refer to API Manual);

    M.Image.DefaultWindow.Button.onMouseClick = function()
        PackageHandlers.sendClientHandler("SelectTeam", {teamId = 1})
        M:close()
    end
    
    M.Image.DefaultWindow1.Button.onMouseClick = function()
        PackageHandlers.sendClientHandler("SelectTeam", {teamId = 2})
        M:close()
    end

  21. Click the game settings button in the toolbar, find the Server Script column, open the script named main.lua, delete the original code, and enter the following code (the function of this code is: register one on the server Protocol. When the server receives the protocol, the player who sent the protocol will join the team of his choice. For specific UI-related API UIs, please refer to [API Manual](https://editorweb.sandboxol.com/viki-v2/docs /bm_script_api/api_reference_manual "API Manual"));

    PackageHandlers.registerServerHandler("SelectTeam", function(player, packet)
        local teamId = packet.teamId
        local team = Game.GetTeam(teamId)
        if not team then
            team = Game.CreateTeam(teamId)
        end
        team:joinEntity(player)
    end)

  22. Click the Run button to enter the game to view the effect of this UI.

Example 2: Backpack UI

Next, make a simple backpack UI to help you understand how to use the scroll panel and layout widgets.

Effect Editor[](@Effect Editor)

Basic Introduction

The special effect editor can be used to make common particle special effects.

New/open effect file

New Effcet:In the resource management panel, click the New button and select the "New Effect" option,to create a special effect file.

Open the effect: Double-click a effect file in the resource management panel, the special effect file will be opened in the editor.

Basic Operation

The dark scene is displayed by default after the effect is turned on, and you can switch the scenes in other modes in the toolbar: bright background, game scene; when switching to the game scene, users can compare the size of the effect with the characters and objects in the game scene to facilitate the adjustment of the parameters of the effect ;

The four buttons at the bottom of the interface are the playback components of effects, and their functions are: play, next frame, stop, and replay.

Common Effects

The effects editor currently provides users with five common effects production templates: explosion, flame, smoke, sparks, and weather; users only need to adjust a few simple parameters to create their favorite effects.

Press and hold the left mouse button to drag the effect into the scene;

The effects dragged into the scene will appear in the effects structure, and a effect file can be composed of multiple effect modules.

Explode

The default explosion effect is as follows:

The adjustable attributes of the explosion template are as follows:

  • Position: set the displacement of the X, Y, Z axis of the special effect;
  • Rotation: Set the amount of rotation of the X, Y, and Z axis of the special effect;
  • Inner flame color: set 3 inner flame colors of explosion flame;
  • Outer flame color: set 3 outer flame colors of explosion flame;
  • Strength: set the strength of the explosion;
  • Range: Set the size of the explosion radius;
  • Visible: Set whether to temporarily hide the display of the special effect component in the special effect editor, but whether it is visible or not, every special effect component will be displayed when the special effect file is applied;
  • Loop: Loop playback is enabled by default, and the loop interval and whether the loop is reset can be set.

Flame

The default flame effects are as follows:

The adjustable attributes of the flame template are as follows:

  • Position: set the displacement of the X, Y, Z axis of the special effect;
  • Rotation: Set the amount of rotation of the X, Y, and Z axis of the special effect;
  • Inner flame color: set 4 inner flame colors of the flame;
  • Outer flame color: set 4 outer flame colors of the flame;
  • Heat: set the heat of the flame;
  • Size: set the size of the radius of the flame;
  • Visible: Set whether to temporarily hide the display of the special effect component in the special effect editor, but whether it is visible or not, every special effect component will be displayed when the special effect file is applied.

Smoke

The default smoke effects are as follows:

The adjustable attributes of the smoke template are as follows:

  • Position: set the displacement of the X, Y, Z axis of the special effect;
  • Rotation: Set the amount of rotation of the X, Y, and Z axis of the special effect;
  • Color: set the color of the smoke;
  • Ascent speed: set the speed at which the smoke floats upward;
  • Size: Set the size of the smoke range;
  • Opacity: Set the opacity of the smoke;
  • Visible: Set whether to temporarily hide the display of the special effect component in the special effect editor, but whether it is visible or not, every special effect component will be displayed when the special effect file is applied.

Spark

The default spark effect is as follows:

The adjustable attributes of the spark template are as follows:

  • Position: set the displacement of the X, Y, Z axis of the special effect;
  • Rotation: Set the amount of rotation of the X, Y, and Z axis of the special effect;
  • Color: set the color of spark particles;
  • Particle size: set the size of spark particles;
  • Spark intensity: set the spray intensity of sparks;
  • Visible: Set whether to temporarily hide the display of the special effect component in the special effect editor, but whether it is visible or not, every special effect component will be displayed when the special effect file is applied.

Weather

The default weather selection is "Snowing", and the effect is as follows:

The default rain effect is as follows:

The adjustable attributes of the snow/rain template are as follows:

  • Weather type: You can choose snow or rain;
  • Position: set the displacement of the X, Y, Z axis of the special effect;
  • Rotation: Set the amount of rotation of the X, Y, and Z axis of the special effect;
  • Snow particle size/raindrop size: set the size of snow particle/raindrop;
  • Intensity: Set the density of snow particles/raindrops;
  • Speed: Set the falling speed of snow/raindrops;
  • Range: Set the size of the snow/rain area;
  • Visible: Set whether to temporarily hide the display of the special effect component in the special effect editor, but whether it is visible or not, every special effect component will be displayed when the special effect file is applied.

Basic components

The current basic components include particle emitters. Compared with common special effects, particle emitters have better degrees of freedom and can debug more types of special effects.

Press and hold the left mouse button on the particle emitter to drag it into the scene;

Particle emitter

The default particle emitter effects are as follows:

The adjustable properties of the particle emitter are as follows:

  • Transmitter type: point type, box type, ball type or cylindrical type can be selected, each type of transmitter needs to set a different launch area;
  • Position: set the displacement of the X, Y, Z axis of the special effect;
  • Rotation: Set the amount of rotation of the X, Y, and Z axis of the special effect;
  • Infinite particles: After checking, the maximum number of particles is unlimited;
  • Emissivity: the power of particles emitted per unit time, the larger the value, the more particles emitted;
  • Angle range: the range angle of particle emission, the larger the value, the wider the emission range;
  • Visible: Set whether to temporarily hide the display of the special effect component in the special effect editor, but whether it is visible or not, every special effect component will be displayed when the special effect file is applied;
  • Texture: select the material texture of the particles;
  • Color mixing mode: you can choose alpha light or high-brightness light;
  • Opacity: set the opacity of the particles;
  • Glow effect: After checking, the particles will produce a glow effect;
  • Size: set the height and width of the particles;
  • Scale range: set the scale of particles;
  • Color mode: When choosing a single color, you can choose a single color; when choosing a color gradient, you can choose to produce a gradient between the two colors;
  • Speed range: set the particle emission speed range;
  • Acceleration: set the acceleration of particle emission;
  • Rotation angle range: set the rotation angle range of the particle itself;
  • Life value range: set the duration of the particle’s existence;
  • UV flip mode: select no flip, flip U, flip V, flip U and V;
  • UV swap: After checking, UV swap can be performed;
  • U animation speed: set the animation speed of U;
  • V animation speed: set the animation speed of V;
  • 3D particles: After checking, it can be set to 3d particles, which will not follow the camera’s angle of view to rotate;
  • Angle of view offset: Set whether the orientation of the particles is offset with the angle of view.