“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Rect Transform component:

The Canvas Renderer is also a component that UI components must carry.

Panel properties:

The position position is based on the pixel of the anchor point, and its specific value is based on the anchor point, representing the distance from the anchor point. The value of the X-axis is increasing from left to right, and the value of the Y-axis is increasing from bottom to top. Pos Z and position. Z in the Transform have the same effect, but this value is not used to represent the depth of UI. This value is estimated to be retained for some effect implementation considerations in the 3D UI.

Size is different from zoom. These two values set the size of the UI. Negative values do not flip the UI and are not displayed.

The rotation effect is the same as the Transform, usually used with the Tween. The zoom effect is the same as the Transform, usually used in conjunction with the Tween. Depth is not defined by NGUI depth. In UGUI depth is represented entirely in a tree structure, with nodes at the bottom of the hierarchy overwriting nodes at the top.

Anchor

Rect Transform: In addition to the functions mentioned above, Rect Transform also provides the function of tracing points, which mainly realizes the function of relative layout.

Configuration anchor points:

Anchor points describe the location of the parent object of the current UI. The anchor point represents the (0, 0) point of the current object coordinate.

The stretch:

We can find that there are six setting items Left, Center, Right, Top, Middle and Bottom. These 6 items can be combined into 9 forms of anchor points corresponding to the 9 directions of the parent object of the current UI, which is convenient for us to adjust the relative position of the UI. For example, if the coordinate of UI is (0, 0) and you select CenterMiddle, the current UI is in the center state. If you select BottomLeft in the figure above, the UI will be located at the lower left corner of the parent object.

Pivot

The registration point, or center point, if the Anchor represents the location of the UI’s parent, then the Pivot represents the location of the (0, 0) point of the UI itself.

Start Pivot by clicking Center at the top of the screen:

You can then modify the UI Pivot in the scene as follows:

The blue circle in the middle is the center point of the Button component and represents the (0, 0) point of the Button component.

The blueprint model

(in the first box below) indicates whether the rotation of the object is ignored. Clicking on does not rotate the object.

RawEdit mode

(The second box in the figure above) indicates whether the position and size of UI will be matched according to the Anchor when the Anchor is modified. Clicking on can be matched.