Layout Tools

ThunderFire UX Tool provides basic UI layout tools to help designers to make quick and efficient interface stitching in Scene. The layout tool can be turned on or off in [ThunderFireUXTool - Settings (Setting) - Function Switch].

Alignment and Distribution

The Alignment and Distribution tool is located in the Inspector panel, under the Rect Transform component, and provides 6 types of alignment: left alignment, horizontal center alignment, right alignment, top alignment, vertical center alignment, bottom alignment, and 2 types of distribution: vertical distribution and horizontal distribution.

Align Aligns 2 or more objects along the selected direction.

• Left Alignment：Align the positions of 2 or more objects to the left edge of the leftmost object.
• Horizontal center alignment: Align the positions of 2 or more objects to the vertical centerline of the object as a whole.
• Right Alignment: Align the positions of 2 or more objects to the right edge of the rightmost object.
• Top alignment: Align the position of 2 or more objects to the top edge of the topmost object as the reference alignment.
• Vertical center alignment: Align the position of 2 or more objects to the horizontal center line of the object as a whole as a reference alignment.
• Bottom alignment：Align the position of 2 or more objects to the bottom edge of the bottommost object as a reference.

Note: Only when two or more objects are selected, the alignment tool becomes available. When the object-related parameters in the selected objects are locked (such as when they cannot be changed due to Layout settings), the alignment tool is not available.

Distribution Arrange 3 or more objects equally spaced along the selected direction.

• Horizontal distribution: select 3 or more objects while keeping the horizontal alignment order unchanged and the positions of the objects at the left and right ends unchanged. Adjust the position of the middle object to ensure that equal distances are maintained between adjacent objects on both sides.

• Vertical distribution: select 3 or more objects, while keeping the vertical alignment order unchanged, the position of the upper and lower ends of the objects unchanged. Adjust the position of the middle object to ensure the equal distance between adjacent objects on upper and lower edges.

Note: Only when two or more objects are selected, the alignment tool becomes available. When the object-related parameters in the selected objects are locked (such as when they cannot be changed due to Layout settings), the alignment tool is not available.

Reference Line

Add a reference line in Scene, and when dragging an object such as a picture or text close to the reference line, the object can automatically attach the edge to the nearby reference line.

Add Reference Lines : In a 2D scene or Prefab, click the Reference Lines button in the ToolBar to add a set of reference lines to the scene.

Move reference lines : Drag a created reference line to change its position. When moving a reference line close to an object in the scene, the reference line will automatically attach to the edge of the object.

Delete reference line : Right click on the created reference line and select "Delete" to delete the reference line in the scene.

Snap-to-Move

Snap-to-Move is a function that generates multiple automatic alignment effects, including isometric, edge, and center alignment, when editing multiple objects in a row in the Scene.

Isometric adsorption

• Select object A to move, when the distance between it and B is close to the distance between B and C on the other side, object A will automatically snap to the exact position of the isometric distance and display the numerical value of this distance. (Here the distance refers to the distance between the edge lines of two objects relative to each other)

• Select object A to move, when the distance between it and B is close to the distance between A and C on the other side, object A will automatically snap to the exact position of the equal distance, and display the numeric identifier of the distance. (Here the distance refers to the distance between the edge lines of the two objects relative to each other)

Edge/Center adsorption

• Select object A to move, when its horizontal (vertical) center line or edge line is close to B's horizontal (vertical) center line, edge line or edge extension line, the former will automatically snap to align to the latter.