Screen Transform Properties
Screen Transform allows you to make sure your screen objects adapt to various screen sizes. This guide goes over some of the options the component provides.
In order to be placed correctly Screen Transform objects need to be a child of either another Screen Transform or an Orthographic Camera. As you set up a Screen Transform, it is being set up relatively to its parent. So if its parent is another Screen Transform, it is tuned against the size of that parent Screen Transform.
Each ScreenTransform is represented with:
- Pivot Position
- Basic Transform
Anchors (or Bounds) (Left, Right, Bottom, Top) represent positions of each edge of the rectangle in coordinates relative to the parent Screen Transform.
Anchors.left - the normalized position of the left edge in the parent ScreenTransform, where -1 represents anchoring to the left edge of the parent and 1 - to right.
Anchors.right - anchoring of the right edge, where -1 represents anchoring to the left edge of the parent and 1 - to right.
Anchors.bottom - anchoring of the bottom edge, where -1 represents anchoring to the bottom edge of the parent and 1 - to the top.
Anchors.top - anchoring of the right edge, where -1 represents anchoring to the left corner of the parent and 1 - to right.
Offsets (paddings) represent offsets of rectangle edges from the Anchors rectangle.
Offsets.left - offset from the left anchor
Offsets.right - offset from the right anchor.
Offsets.bottom -offset from the bottom anchor
Offsets.top - offset from the top anchor
Offsets are measured in world units while anchors are measured in relative units
Anchors and Offsets visualization
On the picture below can see how Anchors and offsets change affected by parent ScreenTransform:
White rectangle represents parent, yellow - rectangle calculated from anchors, green - rectangle - after offsets are applied. We can see how the child rectangle changes with the change of the parent : anchors are affected by the parent while offsets stay the same.
Pivot Position : represents a point inside a ScreenTransform rectangle it is rotated around. This point is defined as a relative position in this rectangle, where (0, 0) is the center, (-1, 1) bottom left corner and (1, 1) top right corner of this rectangle.
- Position - is a local position of the Screen Transform pivot in the local space of parent. If you are reading the value, you are just learning where the pivot ended up being placed, if you are writing it via setting ScreenTransform.position you are actually modifying the offsets so that pivot ends up in the requested spot. (The expected use case for this is small animations in the UI, like a button pulsing to draw attention to it.)
- Rotation - represents local rotation of the Screen Transform. Often for Screen Transform rotation, the only axis that makes sense to rotate is around the Z.
- Scale - represents the local scale of the Screen Transform. It doesn’t affect anchors or paddings and is applied after rectangle is calculated from it’s Anchors and Offsets
Screen Transform position on the screen is being calculated in several steps:
- First the Anchors rectangle is calculated based on a parent screen Transform (or ScreenRegion)
- Then Offsets are applied to this rectangle
- After this basic transform is applied (rotation and scale)
- Also the Image Component has its own stretch mode and alignments. They are applied inside of the calculated ScreenTransform rectangle
Still Looking for help?Visit Support