UI scaling and anchors
A HUD that fits every screen size.
A HUD placed at fixed pixel positions looks perfect on your monitor and falls off the edge of a phone or an ultrawide screen. Anchoring each element to a corner or edge, and scaling the whole UI from a reference resolution, keeps health bars, minimaps and buttons where players expect them.
Try this: Collect coins, then switch the screen to Phone. With fixed pixels the coin counter and Jump button fall off the edge. Turn on Anchored and they stick to the corners.
Fixed pixels look fine on the screen they were made for. Switch to Phone.
Prompt bit
Works for 2D or 3D in any engine (Unity, Unreal, Godot, web). Paste the short one for a quick fix, or the detailed one when you want it done properly.
Make the HUD resolution-independent: anchor each element to its corner or edge with an offset, scale everything from a 1920x1080 reference matching width or height, keep inside the safe area, and fade layout changes over 0.2 s so rotating a phone never leaves elements offscreen.
Rebuild the HUD so it works on every screen (2D or 3D, any engine). Design at a reference resolution (default 1920x1080) and scale the UI canvas from it: Unity CanvasScaler Scale With Screen Size with match 0.5, Godot stretch mode canvas_items with aspect expand, Unreal DPI scaling curve, or on the web a scale factor = min(width / 1920, height / 1080). Anchor every element to the nearest corner, edge or centre (health top-left, minimap top-right, action buttons bottom-right, prompts bottom-centre) and position it by offsets from that anchor, never absolute pixels. Respect the device safe area (notches, rounded corners, TV overscan). Set minimum touch targets of 44 px on mobile and let text wrap instead of overflow. Test at 16:9, 4:3, 21:9 ultrawide and a portrait phone. Re-run layout on resize and orientation change (crossfade 0.2 s if it jumps). Offer a UI scale setting (75% to 150%) for accessibility.
Where it's used
- Every game with a HUD: health, ammo, minimap, score
- Mobile games: notches, portrait and landscape
- PC games: ultrawide and 4K monitors
- Console and TV: overscan and couch distance
- Web games: any browser window size
Common mistakes
Positioning by absolute pixels from the top-left, scaling only by width so tall phones crop the HUD, ignoring the safe area so buttons hide under the notch, and tiny text and buttons on high-DPI phones.
Writing this with an AI assistant? See our best AI coding assistants for game developers.
Missing a concept? Request one.
