Editor interface and function introduction

July 4, 2022

Editor interface and function introduction

The interface editor is mainly composed of the following interfaces:

UI control library

image.png

UI controls are the basic elements that make up the interface, and are often used to display prompt information in games, provide input and feedback for player operations, and so on.

In the control library, all controls supported by the editor are listed, including: empty window, text, picture, button, progress bar, text input box, check box, radio button, horizontal slide bar, vertical slide bar, Scroll panel, character window, effect window, horizontal layout container, vertical layout container, grid layout container.

Flexible use of appropriate controls can greatly reduce the workload of UI production. For specific UI controls, seeUI control functions and properties

Add controls to the interface

Controls can be added to the current interface in two ways:

1. Select a certain type of control in the control library, hold down the left mouse button, and move the controldrag into canvas, releasing the mouse will create a new control at the mouse location. The new control is automatically created as a child of the root node.

2. Select a certain type of control in the control library, hold down the left mouse button, and move the controlDrag to the control level management panel, a new control is created when the mouse is released. The new control is created as a child of the mouse-selected control.

Control Hierarchy Management Panel

The panel mainly has the following two functions:

1. Display all controls added to the current interface in a tree structure.

2. Manage the controls of the current interface, including delete, copy, cut, paste, adjust the level, etc. These functions will be introduced one by one below.

Introduction to Control Hierarchy

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

1. The level and order of controls in the interface determines the order in which controls are rendered. The rendering rules are:Parent controls are rendered before child controls (child controls appear “above” the parent), and controls in the front are rendered before controls in the back (the latter controls appear “above” the front controls).

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

2. The parent control will also affect the coordinates, rotation, size, transparency and other properties of the child control. For details, seeUI control functions and properties

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

4. In addition, when deleting, moving, cutting, copying, and pasting a control, it will also take effect on all descendant controls of the control.

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

Adjust the control level

Controls can be dragged in the panel to adjust their level or order:

1. Drag the control to the middle of the two sibling controls (a horizontal line will be displayed between the two controls), then the control can be inserted between the two.

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

3. When the level of a control is moved, all descendant controls of the control will also be moved.

Delete, cut, copy, paste controls

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

hide controls

Click the “eye” button to the right of the control name to switch the display/hide state of the current control.

When a control is hidden, it cannot be seen in the canvas, but it can still be clicked in the canvas to select it.

Note: When you click the “eye” button to switch the display or hide state of the control, the “display” property of the control will be modified synchronously, which also means that this setting will also take effect when running the game.

Lock controls

Click the “Lock” button to the right of the control name to switch the locked/unlocked state of the current control. When the control is locked, the control cannot be moved or zoomed on the canvas, but the coordinate and size properties of the control can still be modified in the property panel.

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

canvas

The layout and style of the current interface will be displayed in the canvas in real time, and you can intuitively move the position of the controls, scale the size of the controls, etc. on the canvas.

mobile controls

Click and drag a control in the canvas to move the control. press and holdShift keywhile dragging the control, you can move the control only vertically or horizontally.

When the control is moved, the coordinate properties of the control will be modified synchronously (only the “absolute value” will be modified, and the “relative value” will remain unchanged).

zoom control

After selecting a control on the canvas, drag the zoom point on the control’s bounding box to zoom the control. press and holdShift key, you can keep the aspect ratio of the control unchanged.

When a control is zoomed, the size property of the control is modified synchronously (only the “absolute value” is modified, and the “relative value” is unchanged).

zoom canvas

existScale settings in the upper right corner of the canvasto select a zoom ratio, or press and holdCtrlWhile swiping the mouse wheel at the same time, you can zoom the canvas as a whole. This zoom setting only takes effect in the editor, and does not affect the performance of the interface in the game.

Properties panel

Displays the properties of the currently selected control in the Properties panel, where you can modify the properties of the control. For detailed properties of various controls, please checkUI control functions and properties

Default interface management panel

The preset interface refers to the interface automatically created by the engine when running the game, such as the item bar, joystick, etc. In this panel, common preset interfaces are listed.

If a preset interface is selected in the panel, the preset interface can be previewed in the canvas, but the function and style of the preset interface cannot be changed.

Note: This panel is not displayed by default and needs to be turned on in the “View” option in the top menu of the editor.

Disable preset interface

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

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