How to Anchor Every UI Element

Follow these 4 anchor rules so elements never stretch weirdly across screens:

1. Corner Controls (Buttons, Joysticks, Coins): Point Anchor to corner (Min == Max). Keep fixed pixel size (e.g. 96x96). They pin to corners and never stretch.
2. Banners & Bars (Top HUD, Bottom Dock): Horizontal Stretch (Min(0,1) Max(1,1)). Height stays fixed (e.g. 80px); width fluidly spans screen edges.
3. Center Windows (Dialogues, Menus, Popups): Middle-Center Anchor (Min == Max = 0.5, 0.5). Preserves designed box size dead-center without warping.
4. 1:1 Squares/Circles (Minimaps, Avatars): Attach AspectRatioFitter (Fit In Parent, Ratio 1.0). Prevents circles turning into squashed ovals!

9-Slice Sprites & TMP Auto-Size

9-SLICE In Sprite Editor, set 4-way borders and set Image Type to Sliced. Corners stay crisp while edges expand!

TMP AUTO Check Auto Size (Min 16, Max 32) on TextMeshPro to prevent labels clipping on narrow screens.

[LIVE UI SCALING & DISTORTION SIMULATOR]

HUD BAR (Stretch X) HP: 100%

II

Coins: 250

MAP

Quest Dialog 9-Slice Clean Borders

Screen Resolution:

[x] Correct Anchors & 9-Slice

                    [CLEAN & CRISP] Correct anchors: buttons stay corner-pinned, minimap stays 1:1 round, dialog stays centered & undistorted!
                

[Advanced] Layout Groups + Content Size Fitter Expand

For dynamic rows of buttons, inventory slots, or ability icons: add HorizontalLayoutGroup and ContentSizeFitter. It automatically calculates item spacing and container width on any screen resolution without manual script offsets.

[Expert] AspectRatioFitter Modes in Production Expand

AspectRatioFitter provides 4 modes: Width Controls Height, Height Controls Width, Fit In Parent (never overflows), and Envelope Parent (fills screen completely, ideal for full-screen background video or splash screens).

HR Teacher Mode Access

Keyboard Shortcuts

Teacher Speaker Notes [N]