UI Anchor Assistant — Unity uGUI

UI Anchor Assistant is an editor and runtime utility for Unity uGUI that helps automate the initial setup of UI. This makes it easier to support various screen resolutions, aspect ratios, and devices with notches or safe areas.

[!NOTE] This tool is a setup helper, not a complete responsive layout solution. Once this pipeline is executed, you will still need to manually adjust Layout Groups, element sizes, and spacing to match your design requirements.

Key Features

Feature	Description
One-Click Fix	Configures `CanvasScaler`, creates the `SafeArea` container, moves the UI elements, and executes the anchor fix sequentially with a single button click.
Anchor Fix	Converts pixel offsets to anchor positions based on world-space bounds. Full precision without snapping.
Target Scope	Limit the scope of the operation to the entire Canvas or only the currently selected object and its children.
Multi-Device Safe Area	The `SafeAreaFitter` component reads `Screen.safeArea` from the OS every frame and automatically adjusts the container size.
Aspect Ratio Modes	Four scaling modes via `UIAnchorPreset`: `Fit`, `Expand`, `AutoMatch`, and `MaintainAspect`.
Ready-Made Presets	5 out-of-the-box presets: Portrait, Landscape, Tablet, Ultrawide, and Foldable.
Reference PPU	Supports configuring `Pixels Per Unit` in presets to maintain sprite sharpness across different DPI values.
Ignore Tagging	The `IgnoreUIAnchor` component flags specific elements to bypass the anchor fix process.
Gizmo Visualization	Colored borders in the Scene View display the effective SafeArea boundaries in real-time.

Editor Window Guide

Open the editor window via the Unity menu: Tools → QuickSetup → UI Anchor Assistant

1. Target Configuration

Field	Description
Target Canvas	The root Canvas to be processed. If left blank, the system automatically detects it from the active object in the Hierarchy.
Preset	A `UIAnchorPreset` ScriptableObject containing references for resolution, aspect ratio mode, PPU, and Safe Area configuration.
Target Scope	`Canvas`: Process the entire UI. `Selection`: Only process the selected object and its children.

2. Quick UI Optimization (One-Click)

The OPTIMIZE & FIX MY UI button runs the entire sequence of fixes in order:

Sets up the CanvasScaler according to the preset settings.
Creates a SafeArea GameObject to act as the main container.
Moves all UI elements inside the SafeArea container.
Performs anchor fixing on all UI elements (optional, controlled via toggle).
Automatically applies safe area boundaries from the OS.

[!IMPORTANT] All actions performed in the editor window support Unity’s built-in Undo / Redo (Ctrl + Z / Ctrl + Y).

3. Individual Utilities

Button	Description
Setup Canvas Scaler	Configures only the `CanvasScaler` without modifying anchors or the SafeArea.
Apply Anchor Fix	Converts pixel offsets to anchors based on world-space position. Full precision, no snapping.
Add Safe Area Fitter	Adds or updates only the SafeArea container without processing other anchors.

Presets (`UIAnchorPreset`)

A Preset is a ScriptableObject that stores all UI scaling configurations. There are 5 built-in presets:

Preset	Reference Resolution	Aspect Mode	Notes
`Portrait`	1080 × 1920	AutoMatch	Default mobile portrait
`Landscape`	1920 × 1080	AutoMatch	Default mobile landscape
`TabletPreset`	1668 × 2388	Expand	iPad Pro — prevents content clipping
`UltrawidePreset`	2560 × 1080	MaintainAspect	21:9 monitors with pillarbox styling
`FoldablePreset`	1768 × 2208	AutoMatch	Unfolded foldable screen (Galaxy Z Fold)

Preset Fields

Field	Type	Description
`Reference Resolution`	`Vector2`	The reference design size of the canvas (e.g., `1080 × 1920`).
`Reference Pixels Per Unit`	`float`	Pixels Per Unit for sprites on the Canvas. Default: `100`.
`Aspect Mode`	`enum`	See the Aspect Ratio Modes section below.
`Enable Safe Area`	`bool`	Enables Safe Area support when executing the One-Click Fix.
`Match Axis`	`float`	Used only for the `Fit` mode. `0` = Width, `1` = Height.

Aspect Ratio Modes (`AspectMode`)

`Fit`

Uses the standard Match Width or Height mode on the CanvasScaler with a manual Match Axis slider.

`Expand`

The canvas expands outward to prevent text or elements from clipping. Ideal for main menus.

`AutoMatch`

Dynamically detects the device aspect ratio at runtime:

Wider screens (Landscape / Tablet) → matches Height (1.0)
Taller screens (Portrait) → matches Width (0.0)

Helps prevent buttons or panels from shrinking excessively on devices with unusual aspect ratios.

`MaintainAspect`

Locks the aspect ratio precisely to the preset’s reference resolution (e.g., pure 9:16 or 16:9).

Uses mathematical bounds directly on the SafeArea for a letterbox/pillarbox effect.
Aligned within the safe area boundaries — the main UI is not cut off by notches, nor does it stretch abnormally.

Runtime Components

`SafeAreaFitter`

Attached to the SafeArea container. The [ExecuteAlways] attribute enables it to work in both Edit Mode & Play Mode.

Inspector Sections:

Configuration — Preset slot that can be replaced dynamically via script.
Gizmo Visualization — Toggle visibility, border color, and Line Thickness (slider 1–10).
Utilities — Force Apply Safe Area and Reset to Full Screen buttons.

// Change preset at runtime
GetComponent<SafeAreaFitter>().Preset = myNewPreset;

// Manually re-apply safe area
GetComponent<SafeAreaFitter>().ApplySafeArea();

// Reset size to full screen
GetComponent<SafeAreaFitter>().ResetToFullScreen();

How Safe Area works:

Screen.safeArea (from OS)
        ↓
Normalized to (0.0 – 1.0) relative to screen
        ↓
Set to RectTransform.anchorMin / anchorMax
        ↓
SafeArea container adjusts its size
        ↓
All child UI elements adjust accordingly

Re-application only occurs if the Screen.safeArea value changes (e.g., screen rotation, split-screen, etc.).

`IgnoreUIAnchor`

Attach this component to elements that should be bypassed by the anchor fix calculation.

Field	Description
`ignoreChildren`	If enabled, all children under this object will also be skipped. Default: `true`.

Common use cases:

Fullscreen background images (must cover the entire screen including the notch area)
Close / Back buttons that already have precise, manual anchoring
Overlay effects that are intended to extend beyond the Safe Area

Class & Asset List

Name	Type	Description
`UIAnchorAssistantWindow`	`EditorWindow`	The main editor window for this tool.
`UIAnchorFixer`	`static class`	Anchor calculation logic (Exact Bounds via world-space).
`SafeAreaFitter`	`MonoBehaviour`	Runtime component managing the Safe Area & CanvasScaler.
`UIAnchorPreset`	`ScriptableObject`	Config asset for resolution, PPU & aspect ratio mode.
`IgnoreUIAnchor`	`MonoBehaviour`	Utility component to exclude an object from auto-calculations.
`AspectMode`	`enum`	`Fit`, `Expand`, `MaintainAspect`, `AutoMatch`.
`SafeAreaFitterEditor`	`Editor`	Custom Inspector for `SafeAreaFitter`.
`IgnoreUIAnchorEditor`	`Editor`	Custom Inspector for `IgnoreUIAnchor`.
`UIAnchorPresetEditor`	`Editor`	Custom Inspector for `UIAnchorPreset`.

Usage Notes

Preset Resolution Orientation — Ensure that the reference resolution orientation matches your target display layout:
- 1080 × 1920 for portrait games.
- 1920 × 1080 for landscape games.
- An inverted orientation will cause the Canvas to shrink drastically.
Fullscreen Backgrounds — Place background images directly as children of the Canvas (not inside the SafeArea) and add the IgnoreUIAnchor component. This ensures the background covers the entire screen (including the notch), while UI/HUD elements remain safely inside the SafeArea.
Layout Groups — Elements controlled by a HorizontalLayoutGroup, VerticalLayoutGroup, or GridLayoutGroup are automatically bypassed since their positions are managed entirely by Unity’s layout system. The tool will not alter them.
Anchor Fix — Anchor calculation uses GetWorldCorners() to read the actual world space positions before the anchors are modified. This ensures consistent results even when CanvasScaler scaling is active.
Device Simulator — In the Unity Editor, Screen.safeArea always returns the full screen dimensions as monitors don’t have notches. Use Window → General → Device Simulator to preview the safe area for real-world device profiles (e.g., iPhone, Samsung).
Reference PPU — Align the Reference Pixels Per Unit in the preset with the PPU of your sprites to prevent size discrepancies between the Editor and target devices.