Varieties of coordinates used in Unity3d GUI

Why species and how many of them?

Often I come across the fact that people simply do not understand how to move an object in the UI to some value, and they are surprised that the result is often unpredictable. Or suppose how to get the correct coordinates of the object in the UI. If, through the debager, we derive the usual position of the object (position), then it will be very different from what we see in the inspector of the UI element, so what do we see there and how does it work? As a result, 100,500 solutions are being sorted out from the forums, whichever is appropriate. I want to give such processes meaningful movement.



The essence of the trick is as follows - the usual Transform has a descendant of RectTransform which is responsible for the position and many things associated with the size, scale and so on - the UI element. And thanks to him we can get the following coordinates.

1. position
2. localPosition
3. anchoredPosition (there is still anchoredPosition3D, but we will not consider it separately, but we will assume that this is a subspecies test.anchoredPosition

Normal position

The usual position does not refer to the coordinate system UI of the word in general. These are some common coordinates of the object in the whole world of the unit, and in the world there is some representation of the position of the object that is not related to the interface. If you want to move the object by its width, this will not work, since the canvas has coordinates in pixels relative to the screen. And in global coordinates these are not pixels. Therefore, the object will shift in the world, let's say, by 200 units of measurement of the world, and not by 200 pixels, and just fly away to unknown distances. But it can be reasonably used. Later I will tell you how.

')

Anchor Position (anchoredPosition)

What we see in the inspector is it.







In a unit, you can set anchor points, this is a certain point relative to which the UI element will be positioned, including with changes in the size / proportions of the parent object.







Here you can see that we changed the size of the parent object and the proportions, our object follows the center of the parent object, and its coordinates have not changed, although on the screen it is not in the same place as before.



Anchor position - the coordinates of the object relative to the anchor. Anchor in the upper left corner and see that the coordinates have changed.







If you want to move an object to its width, then you need to change the anchoredPosition or localPosition. The local position for UI elements is also calculated in pixels, but differently. Therefore, if you need to manipulate two UI elements relative to each other. It is better to use a local position. Why so?

Local Position (localPosition)

So, what is the local position:







This is the coordinate system when the center of the parent object is 0. The upper right corner is the positive width of the rect divided in half. Left upper negative width value. That is, if the width of the rect is 800 pixels, then in the middle x = 0, in the upper right 400, in the upper left -400. Therefore, if you need to calculate the coordinates without anchors, it is better to use local positions. Provided that they have a common ancestor / rek. By the way, anchors can be used not only as a specific point on the parent object, but also as proportions relative to the parent object. In the second case, anchoredPosition will return localPosition.



What can I use the normal position for UI elements? Let's say so, within the global coordinates, if one object is assigned the coordinates of the second, then they will be at one point, regardless of their anchors or local positions, sometimes it is convenient - when the elements are on different canvases / in different panels and local / anchor coordinate systems do not match.

Conclusion / Summary

1. In the inspector, UI elements show anchoredPosition or proportions relative to the parent object. AnchoredPosition is considered depending on the position of the anchor.
2. localPosition allows you to get common coordinates relative to the parent, without reference to the anchors.
3. position is the global position of the element in the scene space, not tied to the UI.

I hope someone will help :-)