UGUI / Unity
Unity UGUI Principles (3): RectTransform
Goal
- Understand the RectTransform component.
- Understand anchors.
- Understand pivot behavior.
- Understand Blueprint Mode and Raw Edit Mode.
Other articles in this series
- Unity UGUI Principles (1): Canvas Rendering Mode
- Unity UGUI Principles (2): Canvas Scaler and UI Scaling
- Unity UGUI Principles (3): RectTransform
- Unity UGUI Principles (4): EventSystem, Events, and Input
- Unity UGUI Principles (5): Auto Layout
Environment
- Windows 7
- Unity 5.2.4
RectTransform
RectTransform is the UI-space counterpart of Transform. A Transform represents a point in space; a RectTransform represents a 2D rectangle. When both parent and child objects use RectTransform, the child can define its position and size relative to the parent’s rectangle. In practice, RectTransform defines UI position, rotation, and size.
Anchor
Anchors define how a child UI element aligns to its parent. When both parent and child have RectTransform, the child uses Anchor Min and Anchor Max to describe its relationship to the parent rectangle. In the Scene view, the anchors appear as four small triangles around the object.
Anchor Min
The lower-left alignment point of the object. (0, 0) maps to the lower-left of the parent; (1, 1) maps to the upper-right.
Anchor Max
The upper-right alignment point of the object.
Anchor location coordinates and relationships
When you drag the four anchor triangles, Unity shows proportional values. Those values describe how the child scales within the parent.
Suppose an Image under a Canvas has both Anchor Min and Anchor Max set to (0.5, 0.5), as shown on the left. If Anchor Min changes to (0.3, 0.5) and Anchor Max changes to (0.5, 0.7), the Inspector changes how it displays position and size.
When both anchors are at the same point, Unity shows coordinates and size. When the anchors define a rectangle, Unity shows the distances to that anchor rectangle instead.
Here are a few examples.
If five Images under a Canvas use Anchor Min and Anchor Max (0.5, 0.5), each object aligns to the center of the parent. When the parent size changes, they stay centered.
If an Image uses Anchor Min and Anchor Max (0.0, 1.0), it aligns to the upper-left corner of the parent and stays fixed there as the parent size changes.
If Anchor Min is (0.0, 0.0) and Anchor Max is (1.0, 0.0), the object aligns to both lower corners. Its width changes with the parent.
These examples show the important rule: child UI elements update their position and size based on their anchor relationship to the parent.
Original value
Parent Size is (400, 350). Image Size is (120, 105). Anchor Min is (0.2, 0.5), and Anchor Max is (0.5, 0.8).
Parent Size half time value
Parent Size becomes (200, 175). Image Size becomes (60, 52.5).
Image Size Width = 400 * 50% * 30% = 60
Image Size Height = 350 * 50% * 30% = 52.5
Anchor Min remains (0.2, 0.5), and Anchor Max remains (0.5, 0.8). Because the parent has been reduced by half, the child updates through the same anchor ratio. This is how UGUI adapts UI size and position across different resolutions.
Anchor Presets
Click the upper-left square in the RectTransform inspector to open Anchor Presets. It lists common anchor configurations for quick use. Hold Shift to change the Pivot at the same time. Hold Alt to change the position at the same time.
Pivot
Pivot is the object’s own center of operation. It affects rotation, scaling, and position. To edit UI Pivot in the Scene view, enable the Pivot button in the toolbar.
Pivot (0.5, 0.5):
Pivot (0, 1):
Blue Print Mode, Raw Edit Mode
Blue Print Mode
Blueprint Mode ignores the object’s Local Rotation and Local Scale, making it easier to adjust the UI element as if it were still in its original rotation and size.
Raw Edit Mode
Raw Edit Mode keeps the current position and size values when you edit Pivot and Anchor in the Inspector. Pay attention to the numeric fields while adjusting.
Adjusting Pivot in the Inspector:
Adjusting Anchor in the Inspector:
References
Attribution
Please credit ARKAI Studio and link back to this article when quoting or reposting.