The Rect Transform is a new component that replaces
the usual transform component on all
new UI elements.
Whereas the transform component represented the position,
rotation and scale of a 3D object in the scene volume.
The Rect Transform represents a 2D
rectangle specified by a width
and a height related to a pivot point.
Even though the rect transform represents a
simple 2D rectangle, the component
does include a position along the Z axis
as well as rotation and scale
so the element can be manipulated in the scene
volume as a 3D object.
One important difference between a rect transform and
the traditional transform component is the
concept of anchors,
A rect transform can be anchored to it's parent
if that parent also has a rect transform component.
Anchoring allows the UI element to move
or stretch based on the position and size
of the parent UI element's rect transform.
It is worth noting that all UI elements must
ultimately be the child of a canvas,
even if they are not immediate children.
Canvases themselves have a rect transform.
So in almost all circumstances the parent
of a UI element will also have a rect transform.
And the UI element will be anchored to it's parent in some way.
For more information on the canvas component
please see the information linked below.
In the Scene view, to manipulate a UI element
it is best to use the Rect tool.
The Rect tool can be selected by clicking on
the Rect Tool button in the toolbar.
or by using the shortcut key T.
With the Rect tool selected it is possible
to move, resize and rotate any
UI element with that one tool.
With the UI element selected it can be moved
by clicking anywhere within the rectangle and dragging.
The UI element can be resized by
clicking on any of the edges or corners and dragging.
Note how the cursor changes when hovering
over an edge or corner from the usual pointer
to a double arrow aligned with the direction
the UI element will resize when dragged.
Holding the Shift key will force the UI element
to be resized proportionately.
The UI element can be rotated by clicking and
dragging outside of the rectangle near any of the corners.
Note how the cursor changes, indicating when the
tool can rotate the UI element.
Resizing or rotating a UI element is
done in relation to it's pivot point.
The pivot point is very much like the centre
point of a standard game object.
The pivot point is indicated by a blue ring
which by default starts in the centre of the UI element.
The pivot point can be moved by clicking and
dragging on the pivot point indicator in the scene view.
It is worth noting that the pivot point does not need
to be inside the rectangle of the UI element.
Placing the pivot point outside of the UI element's
rectangle can be done for specialised behaviour.
This however is not a common situation.
Another difference between the transform component
and the rect transform is the effective
global and local space on editing.
When editing UI elements in local space
the rectangle and handles are aligned with the UI element.
In global space the rectangles and handles are aligned globally
and the rectangle indicates the bounds of the UI element.
This is most notable when the UI element is rotated.
In the scene view, anchors are indicated by
by four small triangles, which by default
are grouped together in the centre of
the UI element's parent rect transform.
This parent rect transform can be the canvas.
Anchors will be covered in detail later in this lesson.
When looking at the rect transform in the inspector
it is clearly different from the transform component.
The position and size of the UI element are shown
in the upper right of the inspector for the
rect transform component.
Position shows the distance in pixels
from the anchor point to the pivot
along the X and Y axis.
The position Z is the distance along
the local Z axis and is often left at a value of 0.
Width and Height indicate the size of the UI element in pixels.
The Position and Size fields are dynamic
and context sensitive.
These will be covered in more detail in this lesson
as they relate directly to the position of the anchor.
The rect transform component includes a
powerful anchoring mechanism.
Rect transforms can be anchored to their parent
if the parent game object also has a rect transform component.
In most cases, every UI element
will be anchored to it's parent in some way.
In the scene view the anchors are represented by
four small triangle gizmos.
Each triangle represents one anchor.
And each anchor is associated with one
corner of the rect transform.
The upper left anchor is associated with the
upper left corner on the rect transform,
the lower right anchor to the lower right corner.
This is the same for each anchor and each corner.
Anchors are positioned within the bounds of the
parent's rectangle, not the UI element's rectangle.
Anchors cannot be positioned outside of
the bounds of the parent's rectangle.
Anchors can be moved by clicking and dragging
on the triangle gizmo.
Clicking in the centre of a group of triangles
will move the triangles as a group.
Clicking on an individual triangle will move one anchor at a time.
Anchors have a fixed relationship to
their rect transforms, which they are anchoring.
Anchors have a flexible relationship to their
parent's rect transform, which they are anchoring to.
When setting an anchor, the distance between
the anchor and the associated corner of
the rect transform is a fixed value.
The anchor's position within the parent's rect transform
however is relative to the parent's size
and is affected by changes to the size
in the parent's rect transform.
The anchor's position relative to the parent is
a percentage of the parent's size
along the X and Y axis.
And it's absolute position can change when the
parent's rect transform changes.
This percentage is represented by a normalised
value from 0 to 1 along each axis.
Where 0,0 is in the lower left
of the parent's rect transform, and 1,1
is in the upper right.
Practically, this means if all four anchors
are grouped together around a single point
the UI element will be anchored to that point.
If the parent rect transform changes in size
the UI element will move along with the anchor.
The UI element will not stretch or resize
as the distance from the anchors to their associated
corners is fixed.
If, however, the anchors are separated in any way
the UI element will stretch along with the parent
as the anchors, and the space between them,
are relative to the parent's rect transform
and will change in size if the parent changes in size.
How much the UI element stretches compared to
it's parent depends upon the placement of the anchors.
A few common cases are:
positioning the anchors are the corners of the UI element,
in which case the stretch will maintain the
UI element at the same percentage area of the parent.
Positioning the anchors at the bounds of the parent.
In which case the space between the edge of
the UI element and the bounds of the parent
will remain the same, creating a fixed border.
Positioning a pair of anchors grouped together
at the edges of the parent's rect transform,
in which case the UI element will stretch
horizontally but not vertically.
The stretching behaviour of an anchored UI element
can be quickly tested by grabbing the edge
of the parent's rect transform and dragging it.
Note the preview label that appears when dragging,
dragging and note that the parent rect transform snaps
back to it's original state when the dragging ends.
To make editing easier, when positioning anchors by hand
holding the Shift key will change the UI element
size as well.
How the rect transform is resized depends upon the
position of the anchor compared to it's associated corner,
as the distance between the two is a fixed value.
It is important to note a change in the way
the rect transform displays the positioning
and size information when the anchors are
not grouped together, and no longer define
a single point as an anchor.
When all four anchors are grouped together
they define a single anchor point.
And the rect transform displays the positional
offset from the pivot, and the width
and height of the UI element.
When the anchors are split apart however,
the rect transform displays the fixed
values of the left, right, top and bottom.
These are the fixed offsets, along the X and Y axis
of the anchors to their associated corners.
If any two anchors are grouped together
there will be no stretching along that axis
and the rect transform will continue to display
the position and width, or position and height
for that axis.
When setting the pivot and anchors for a UI element
there are a number of very common configurations.
To make setting these quick and easy
the rect transform includes the Anchor Presets window.
This can be accessed by clicking on the
Anchor Presets button.
The anchor presets button displays the current
anchoring choice of the rect transform.
In the anchor presets window there is a set of
common configurations for the anchors and pivots.
These common configurations are arranged
in the matrix based on the position of the anchors.
With fixed anchor points in the middle,
and stretch options along the outer edge.
The anchor position can be set simply by
clicking on the desired configuration.
Additionally, the pivot, the position of the UI element,
or both, can be set at the same time
as setting the anchors by holding down
the Shift and/or Alt keys
when clicking the desired configuration.
These optional keys are noted at the
top of the anchor presets window.
Pivot defines the pivot point of the UI element
using a normalised value of 0 to 1
along the X and Y axis
with 0,0 in the lower left
and 1,1 in the upper right.
Rotation defines the rotation of the UI element.
In the most common of cases rotation will
only need to be done along the Z axis,
keeping the UI element in 2D space.
Rotation is allowed on all 3 axis however,
and the element can be viewed in 3D space.
Before discussing scale it is important
to understand the difference between scaling and size.
When adjusting a UI element's size
in the scene view, or adjusting the width and height
in the inspector.
The UI element is being resized, not scaled.
Resizing changes the rect transform's width and/or height,
but does not scale the UI element.
When the UI element is resized
this will not effect the font sizes,
the border on sliced images,
or other items related to the UI element.
When the UI element is scaled however
the entire element is scaled,
including items like fonts and borders.
For layout purposes it is generally recommended
to resize a UI element rather than scale it.
Scaling on the other hand can be useful
for animated effects or other special purposes.
It is worth noting that a UI element
will become invisible if given a negative size.
Negative scaling however is supported
and can be used for effects, including flipping the
UI element with a scale of -1.
The rect transform component includes
two optional editing modes.
Blueprint mode and Raw Edit mode.
Blueprint mode allows for the editing of
rect transforms as if they were not rotated or scaled.
It is worth noting that the UI element
cannot be rotated with the rect tool when on blueprint mode.
Normally when editing the pivot or anchor values
from within the rect transform
the pivot or anchor will move and the
UI element will remain in place.
Just like editing these items in the scene view.
When in Raw Edit mode however,
the pivot, or anchor, will stay in place
and the UI element will move relative to that fixed item.
There are times when a rect transform
will have some or all of it's values
driven by a parent rect transform
or other UI component, such as a layout group.
In these cases some or all of the
properties of the rect transform will
be greyed out and uneditable.
When this is the case there will be a note
at the top of the rect transform indicating
that some values are being driven by another component.
For more information on the components
driving the rect transform
please see the Unity documentation
or the associated Learn lesson for that component.