Toward Understanding Unity’s RectTransform
Unity’s RectTransform layout system has confused me for a very long time. Not that there’s anything wrong with it. Confusion is what naturally happens when you approach a sophisticated system and just start pressing buttons. But in order to move past this stage, I’m documenting what I’ve learned after many hours of pressing.
Properties
Each widget with a RectTransform has a handful of properties that will determine how it is positioned on screen. The properties fall into two groups, which I’ll call anchors and offsets. The anchors facilitate percentage-based positioning relative to the parent container. The offsets facilitate pixel-based positioning relative to the anchors. There’s also pivot, which may bridge between the two groups.
Anchors
The properties to consider first are the anchors. The anchors establish reference points within the widget’s parent container. For example, we might anchor the widget to the bottom of the parent, or have it fill the parent, or have it fill the top-right quadrant of the parent. Anchors are expressed as proportions within the parent. An anchor of [0, 0] refers to the parent’s bottom-left corner, and an anchor of [1, 1] refers to parent’s top-right corner.
Offsets
The widget’s bounding box is situated relative to the anchors using the offsets.
When the anchors form a rectangle of non-zero width and height—which we’ll call the anchor box—the offsets are named left, top, right, and bottom. These values position the edges of the widget’s bounding box relative to the corresponding edge of the anchor box. A positive number insets an edge the given number of pixels. A negative number extends the widget outside of the anchor box.
When the anchors do not form a proper rectangle but rather a vertical anchor line, left becomes pos x. It still represents a horizontal offset, but “inset” is no longer a fitting term, as lines have no “in.” The right property is replaced by width, which is the distance in pixels from the widget’s left edge to its right edge. It must be positive.
When the anchors do not form a proper rectangle but rather a horizontal anchor line, top becomes pos y. It still represents a vertical offset. The bottom property is replaced by height, which is the distance in pixels from the widget’s top edge to its bottom edge. It must be positive.
When the anchors form neither a box nor a line but rather an anchor point, left becomes pos x, top becomes pos y, right becomes width, and bottom becomes height. These behave just as they do with anchor lines.
Pivot
The widget’s pivot is a proportion representing the origin of the widget’s bounding box. A pivot of [0, 1] puts the origin at the widget’s top-left corner. A pivot of [0.5, 0.5] puts the origin at the center of widget.
Scaling and rotation are applied relative to the pivot. To rotate something about its own centroid, then, the pivot must be at [0.5, 0.5].
For anchor lines and anchor points, the offsets specified by pos x and pos y are not between corresponding edges as they are with anchor boxes. Rather, they are the offsets between the anchor and the widget’s pivot. The pivot plays no role when an anchor box is used.