Adapting graphics for different screen aspect ratios

Adapting Graphics for Different Screen Formats (Aspect Ratio)

In 2024 a Unity project needs to correctly display on 16:9, 18:9, 19.5:9, 4:3 (iPad), 1:1 (some folding devices in half-screen mode), and 21:9 (ultra-wide monitors). If designing UI with only Canvas Scaler with Screen Match Mode = Match Width Or Height and magic number 0.5 — on iPad UI breaks, on 21:9 — empty bars or cropped elements.

This isn't "resolution support". It's systematic work with Reference Resolution, Safe Area, Camera Viewport, and gameplay camera scaling logic.

Where exactly breaks on aspect ratio change

Canvas with fixed sizes. Button pinned by Anchor to bottom-right corner, switching 16:9 to 21:9 floats off-screen — because position set in absolute pixels, not properly through Anchors. Signals UI initially designed without aspect ratio variability.

Safe Area on mobile. On iPhone with Dynamic Island and Android with punch-hole camera the top corner physically occupied. If status bar and game buttons don't account for Screen.safeArea — UI overlapped by camera cutout. Unity doesn't automatically apply Safe Area to Canvas — must be done through script reading Screen.safeArea and updating RectTransform of root element.

Orthographic game camera with fixed Orthographic Size. 2D game with fixed Camera.orthographicSize = 5 switching 16:9 to 4:3 player sees less world horizontally. For platformer this means character can't see upcoming obstacles. Solution: dynamically calculate Orthographic Size through target width: orthographicSize = targetWidth / (2 * Camera.aspect).

Letterbox vs pillarbox vs crop. Three strategies for filling mismatched ratio. Each game — its own. Fighting on 21:9: pillarbox (side bars) looks strange — better crop with arena expansion. iPad strategy: letterbox unwanted — better show more map. Strategy choice — design decision, but must be made explicitly and implemented technically.

Practical approach

Camera Viewport Rect. For Letterbox/Pillarbox manage camera.rect depending on current aspect ratio. For 21:9 on 16:9 content: calculate needed Viewport Rect so game area centered, bars drawn via separate camera with Solid Color background.

Multiple Canvas and Reference Resolution. Split UI into several Canvas with different scaling settings. HUD (health, minimap) — Canvas Scaler Scale With Screen Size, Match = 1 (Match Height). Dialogs and menus — Match = 0 (Match Width). Gives more predictable scaling for different element categories.

Real case: mobile strategy, iOS and Android release. Development for iPhone 14 (19.5:9). Testing on iPad Pro (4:3) revealed: bottom resource panel cropped, world map shows only 60% of needed, "Attack" button overlapped by Safe Area. Solution took 5 days: wrote AspectRatioManager with three profiles (narrow: < 1.6, standard: 1.6–2.0, wide: > 2.0), for each profile — separate Anchor Presets for critical UI, plus Safe Area Controller. Final test on 7 devices with different ratios — all screens correct.

Shader-level adaptation. For background images (loading screen, main menu) — shader with Tiling parameter adapting UVs to current aspect ratio. Image doesn't stretch or crop, but scales with smart framing (like CSS object-fit: cover).

Testing different formats

Use Unity Device Simulator (Window → General → Device Simulator) for preliminary check. But final testing — only on real devices: iOS Safe Area calculated differently in simulator than physical iPhone.

Test matrix:

Estimated timelines:

Cost calculated individually after project analysis.