Alignment Strategy

Next, we categorize different alignment workflows according to the categories of elements that need to be aligned:

For elements with relatively small areas like a pause menu, gold coins in the game, etc., normally, aligning them by the borders of the screen would be enough. Only a few simple steps are needed:

1. Add the Widget component to element nodes.
2. To align something with the bottom left corner of the screen for example, check the and Bottom tick boxes in the Widget component.

3. Then set up the distance between the node and the borders of the screen. In the picture below, the left margin is set as 40px, the bottom margin is set as 30px.

After setting up the Widget component like this, no matter what the actual screen resolution is, this node element will remain at the bottom left corner of the screen. The distance between the left side of the node’s bounding box and left border of the screen remains at 40px. The distance between the bottom of the node’s bounding box and the bottom of the screen remains at 30px.

Nest Alignment Elements

We just showed how to align something with the border of the screen in the example above.

Because the default alignment reference of Widget is the parent node, we can add different node hierarchies and make the nodes on every hierarchy use the auto alignment function.

Here is a simple example to explain it. Suppose we have a node hierarchy as follows:

In the example above, parent is a panel, and button is a button. We can add Widget component to both of these nodes, and respectively set their alignment distance.

For the button node, the distance of aligning the top left corner of the node remains at 50px:

With a workflow like this, we can group UI elements according to their display areas or functions, and elements of a different hierarchy can be aligned according to design.

In the above example, two borders that simultaneously align on one axis in opposite directions don’t exist. If we want to make a panel that fully covers the width of the whole screen, we can simultaneously tick off the alignment switches Left and Right:

When simultaneously ticking off the alignment switches in opposite directions, Widget obtains the ability of modifying the Size of the node according to alignment requirements. In the picture above, we ticked off the left and right directions and set up margins, then Widget can dynamically set up the Width property of the node according to the width of the parent node. As a result, no matter how wide the screen is, the distance between the panel and the left & right borders of the screen remains at 100px permanently.

Making use of the features of a node that can automatically zoom in/out, we can make the size of the node the same with that of the screen by setting up the Widget component of the node.

To make such a node, we should first make sure that the size of the parent node of this node remains the same with that of the screen. The Canvas node is the best choice. Next, set up the Widget component of this node according to the following method:

Therefore the size of the node will remain constantly the same with that of the Canvas node when running, i.e., the same as the size of the screen. After being set up like this, the child node of this node can transmit the same screen size by the same settings.

Set up percentage alignment distance

After the alignment in a certain direction is enabled on the Widget component, in addition to specifying the margin in pixels, we can also input a percentage value (For example: by clicking the symbol circled in the box), therefore, Widget will multiply the width or height of the parent node on the corresponding axis by the input percentage to get the value of the actual margin.

Let’s take a look at a real example. Take a child node that has been directly put under Canvas as an example. We hope this node panel remains on the right side of the screen and constantly covers 60% of the total height of screen. Therefore, setting up the Widget component according to the following picture will realize this effect:

When inputting the margin value when opening alignment direction, Widget can use the pixel unit together with percentage unit according to various needs. For example, input 50% on the Left direction that needs to align with the center of screen and input 20px on the direction that needs to align with the right of screen; when calculating the position and size of the child node at last, all the margins will be positioned after being converted to pixel distance according to the size of the parent node.

Making use of the percentage alignment distance, we can create UI elements that can zoom in/out infinitely according to the size of the screen. Exerting your imagination, fitting a thousand types of phones with one set of resources will be a piece of cake!

Widget component is generally used to locate the position of each element when the scene is initialized on the target device, but once the scene is initialized, we often do not need to use the Widget component for alignment. The alignOnce property is used to ensure that the Widget component only performs alignment and positioning at initialization, and no longer consumes time for alignment at runtime.

If AlignMode is set to ONCE or ON_WINDOW_RESIZE, and the alignment is performed once when the component is initialized, the engine will automatically set the enabled property of the Widget component to false, disabling the Widget component to disable the automatically update for subsequent every frame.

If the alignment needs to be changed at runtime, manually set the AlignMode mode to ALWAYS, or manually traverse the Widgets that need to be aligned and set their enabled property to true when the alignment needs to be updated each frame at runtime.

For a scene with many UI elements, ensuring that the AlignMode property of the Widget component is set to ON_WINDOW_RESIZE, which can significantly improve the running performance of the scene.

Limitation on the position and size of node

When the Widget component enables one or more alignment settings, the position, width and properties of the node may be restricted and cannot be freely modified through the API or Animation panel. If you need to modify the position or size of the alignment node at runtime, please refer to the for details.