Skip to main content
Version: 5.x
Supported on
Snapchat
Spectacles
Camera Kit

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.

Properties​

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:

  • Anchors
  • Offsets
  • 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 top edge, where -1 represents anchoring to the bottom edge of the parent and 1 - to the top.

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.

Basic Transform:

  • 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
Was this page helpful?
Yes
No