In Unity, anchors are an essential concept used in UI (User Interface) design within the Unity Canvas
system. Anchors help determine how UI elements behave when the screen size or resolution changes.
Here's a breakdown of what anchors are and how they work:
What Are Anchors?
Anchors define the position of a UI element relative to its parent container (often the Canvas or another
UI element). They allow you to create responsive layouts by determining how the UI element scales or
moves when the screen resolution changes.
Anchor Components:
1. Anchor Min and Max: These values determine the corners of the anchor rectangle relative to
the parent.
o (0,0): Bottom-left corner of the parent.
o (1,1): Top-right corner of the parent.
o Values in between set the anchor rectangle to a specific part of the parent (e.g., center,
top-left, etc.).
2. Pivot: This is the point around which the UI element rotates and scales. It’s specified in
normalized coordinates relative to the UI element’s rectangle.
o (0.5, 0.5): Center of the UI element.
3. Position: The position is relative to the anchor rectangle when using a RectTransform.
Anchor Presets:
Unity provides a set of pre-defined Anchor Presets to simplify layout design. These can be accessed in
the RectTransform component via the small square icon in the Inspector panel.
Some common presets:
Stretch: Ensures the UI element stretches to match the parent size in one or both axes.
Center: Anchors the UI element to the center of the parent.
Corners: Anchors the UI element to specific corners of the parent.
How to Use Anchors:
1. Select the UI Element: In the Hierarchy, select the UI element you want to set anchors for.
2. Adjust Anchors:
o Open the Anchor Presets panel in the Inspector.
o Select a preset or manually drag the anchor handles in the Scene view.
3. Tweak RectTransform Settings:
o Adjust Position, Size, and Pivot for finer control.
Examples of Usage:
1. Responsive Button Centered on Screen:
o Anchor Preset: Center
o Position: (0, 0)
o Pivot: (0.5, 0.5)
2. Toolbar at the Top of the Screen:
o Anchor Preset: Stretch (Horizontal Top)
o Pivot: (0.5, 1)
o Adjust height and position as needed.
3. Side Panel that Stays Fixed:
o Anchor Preset: Stretch (Vertical Left or Right)
o Pivot: Adjust to the edge (0 or 1 for X-axis).
