Unity Basics-------------------------understanding of anchor anchor points

Unity Advanced Tips-Recttransform detailedZui Attention 2016.02.17 01:27 words 1704 read 22157 comments 2 likes
Recttransform Property Overview Preface

In the recent UI, there are times when you need to tweak the UI control's properties in code, such as location, size, and so on, but in Ngui, the component that controls the position of the UI control is Recttransform, which inherits from the transform component, but adds many of its own features, To use it recklessly without knowing these features can lead to a lot of weird questions, and it's not very handy to use, so I decided to study how Recttransform works.

What will you learn from it?

• What is pivot
• What is anchor
• How to adjust the UI with pivot and anchor
• Understand the role of other Recttransform properties

First, the pivot attribute detailed

First, in order to get people to understand the content better, I created two UI controls in unity, a plane control, as a parent object, an image control, and the most child object, such as:

Two demo UI Space

Then we check the red box and look at the properties of its recttransform component, such as:

Recttransform Components for red boxes

You will see a bunch of data, so how does this data ultimately determine the position and size of the UI in the screen? We first look at the first important attribute pivot because it understands the first key to the Recttransform UI layout scenario

Pivot Property

Pivot we can call it the center axis (this translation is not very accurate, but for the sake of understanding, called first), it is an X, Y value range is 0 to 1 points, this point will be in the anchor (anchor) calculation position will be used, the following with a graph to explain the location of the pivot point

Pivot diagram

Sets the coordinate system of the pivot, for example, (0,0) a point in the lower-left corner of a red-framed object that represents a point in the upper-right corner of a red-framed object

Second, anchor attribute detailed

About anchor anchors may be familiar with the UI, but Unity's anchor should call it a more reasonable anchor frame, because it is a rectangle composed of two anchor points (Min,max), and of course it can be composed of a point (two points coincident)

Anchor Frame

and unity, in order to facilitate our adjustment of the anchor frame, in the edit view gives the anchor box, such as:

Anchor Frame Marking (coincident case)

Of course, two anchor points coincident, so it looks like a point, below we use two anchor points do not coincide with the situation to illustrate:

Anchor frame marked with three, pivot and anchor

After understanding what pivot and anchor are, let's look at how Unity uses this two to control the layout of the UI.

1th Case: Two anchor points coincident

Let's take a look at the coincidence of two anchor points, which is the most common and easiest way to understand

1th case

We place the anchor anchor in the middle of the black box, then place the pivot center axis in the middle of the red box, then we change the size and position of the black box to see what the red box will change, such as:

Change diagram

We can see, no matter how we drag the black box, change his size and position, the red box pivot point to anchor point distance is always constant, that is, the red frame object will refer to the anchor point to adjust their position in real-time, so that their pivot point to the anchor point distance always consistent, and it is worth mentioning that , in this case, the property in the Recttransform component of the Red box object is width and height, and this property will change in the latter case, you need to be aware of

Paste_image.png

The 1th case is characterized by the following: the size of the sub-object will not change with the size of the parent, but the position will vary according to the principle of the distance from pivot point to anchor Point.

2nd case: Two anchor points when not coincident, that is, the case of the anchor box

When two anchor points (Anchormin and Anchormax) do not coincide, a rectangle is determined two o'clock, which is our anchor frame, such as the green box in the anchor frame area.

Anchor Frame Area

At this point we look at the Recttransform property of the red-framed object, and find that the properties are left, Top, right, Bottom, respectively.

Left, Top, right, Bottom

So what do these 4 attributes say, respectively? Let's take a look at the picture below.

Left and bottom plots

From our point of view, unity is in the bottom left corner of the anchor frame as the coordinate system in place (0, 0), and then the left and bottom two numbers of the red box determine the position of the point in the coordinate system in the lower right corner of the red box, the origin and the lower left corner of the red box to determine a distance (that is, This distance stays the same.

Right and top plots

Similarly, as shown, unity is the origin (0,0) in the upper-right corner of the anchor box, and then the red Box's right and top two numbers determine the position in the coordinate system in the upper-left corner of the red box, and the point in the upper-right corner of the red box determines the distance (that is, the green arrow), regardless of the

When the black box size and position changes, unity will ensure that the lower left corner of the red box to the bottom left corner of the anchor box is the same distance, while the upper right corner of the red box to the upper right corner of the anchor box distance is constant, to determine the relative position and size of the red box, it seems to feel the change:

Change diagram

Note the distance from the lower left corner of the red box to the lower left corner of the black box, and the distance from the upper right corner of the red box to the upper right corner of the black box, they are all the same.

Three, anchoredposition attribute detailed

Anchoredposition according to the meaning of the name, we can probably guess that he is based on the anchor anchor Point has a position attribute, he is a point, if in Anchormin and Anchormax is coincident case, The anchoredposition is the position of the anchor point to pivot, as shown in:

Anchoredposition schematic One

But if Anchormin and Anchormax do not coincide, Anchoredposition is more complicated, in which case Unity calculates an anchor point based on Pivot, Anchormin, and Anchormax. Then in the position of anchoredposition through pivot and Anchor point, about how to calculate rules, interested friends can self-thrust

Iv. Offsetmin and Offsetmax detailed

Offsetmin and Offsetmax are better understood, where offsetmin represents the offset of the lower-left corner of the object (the red box in this article) relative to the anchormin, and the Offsetmax represents the offset from the upper-right corner of the object relative to Anchormax.

Anchor (0, 0)
Anchormin (0,0) Anchormax (five), Sizedelta detailed

Sizedelta is the value of Offsetmax-offsetmin, which is the variable in the lower-left corner of the object to the upper-right corner, as shown in:

Sizedelta diagram

Unity Basics-------------------------understanding of anchor anchor points