Guides UI What Are Anchors, Pivots, and Rect Transforms?

UI 3 min read Updated Apr 2026

What Are Anchors, Pivots, and Rect Transforms?

Every UI element in Lenga uses a `Rect Transform`.

That Rect Transform controls:

  • anchors
  • pivot
  • position
  • size
  • scale
  • rotation

If you understand those values, the rest of Lenga UI layout becomes much easier to reason about.

Start with the Rectangle

Every UIElement has a rectangle.

That rectangle is the layout box for the element.

For Text, it is the content box that alignment works inside. For Image and Button, it is the box the element is drawn and positioned within.

What Anchors Mean

Anchors describe which part of the parent rectangle your UI element is attached to.

Think of anchors as normalized coordinates inside the parent:

  • 0.0 means the left or top edge
  • 0.5 means the center
  • 1.0 means the right or bottom edge

So:

  • (0.0, 0.0) means top left
  • (0.5, 0.5) means middle center
  • (1.0, 1.0) means bottom right

When Anchor Min and Anchor Max are the same, the element is anchored to one point.

That is the most common setup for:

  • labels
  • portraits
  • HUD counters
  • buttons

What Pivot Means

Pivot answers a different question:

Which point inside the element should be treated as the element's own reference point?

Examples:

  • (0.0, 0.0) = top-left corner
  • (0.5, 0.5) = center
  • (1.0, 1.0) = bottom-right corner

Pivot changes which point moves when you adjust Position.

How Position Works

Position in the Inspector is the Rect Transform's anchored position.

That means you are moving the element by its pivot point relative to its anchors.

If your anchor is top right and your pivot is also top right, Position moves the top-right corner of the element.

If your anchor is top right and your pivot is center, Position moves the center of the element relative to that top-right anchor point.

Anchor Presets

The Inspector includes a 3x3 anchor preset grid:

  • top left
  • top center
  • top right
  • middle left
  • middle center
  • middle right
  • bottom left
  • bottom center
  • bottom right

Each preset updates related Rect Transform values together so you can establish a sensible starting point quickly.

A Practical Example

Suppose you want a pause button tucked into the top-right corner of the screen.

A clean setup is:

Anchor Min: (1.0, 0.0)
Anchor Max: (1.0, 0.0)
Pivot:      (1.0, 0.0)
Position:   (-24, 24)

That means:

  • the button is attached to the parent's top-right corner
  • the button's own top-right corner is the point being positioned
  • (-24, 24) nudges it inward from the edge

Remember

Anchors describe where the element is attached to the parent.

Pivot describes which point inside the element is used as its own reference point.

Position moves the pivot relative to the anchors.

What Comes Next