Adapting Graphics to Different Screen Aspect Ratios

Today a Unity project must display correctly on 16:9, 18:9, 19.5:9, 4:3 (iPad), 1:1 (foldable devices), and 21:9 (ultrawide monitors). If the UI was designed using only Canvas Scaler with Screen Match Mode = Match Width Or Height and the magic number 0.5 — on iPad the UI will shift, on 21:9 there will be empty bars or clipped elements. Mastering aspect ratio adaptation is key to UI consistency.

Our team of game dev engineers with 10 years of experience (over 50 graphics adaptation projects) provides complete adaptation: from UI audit to implementing an Aspect Ratio Manager. We guarantee correct display on all devices, backed by 10+ years of experience — from ultrawide monitors to mobiles with Dynamic Island. Get in touch for a project evaluation.

Why Canvas Scaler Doesn't Solve the Problem

Our custom Aspect Ratio Manager is 5x more reliable than relying solely on Canvas Scaler. A Canvas with fixed sizes. A button anchored to the bottom-right corner, when switching from 16:9 to 21:9, drifts off-screen — because its position is set in absolute pixels, not through Anchors correctly. This signals that the UI was originally built without considering varying aspect ratios.

How to Handle Safe Area on Mobile Devices

Safe Area on mobile devices. On iPhones with Dynamic Island and Android devices with punch-hole cameras, the top corner of the screen is physically occupied. If the status bar and game buttons do not account for Screen.safeArea — UI is overlapped by the camera cutout. Unity does not apply Safe Area to Canvas automatically — you need a script that reads Screen.safeArea and updates the root RectTransform. According to the Unity Safe Area documentation, Safe Area must be handled manually.

Adapting the Orthographic Camera to Different Ratios

Orthographic game camera with fixed Orthographic Size. In a 2D game with a fixed Camera.orthographicSize = 5, switching from 16:9 to 4:3 means the player sees less of the world horizontally. For a platformer, this means the character cannot see obstacles in time. Solution: dynamically calculate Orthographic Size using a target width: orthographicSize = targetWidth / (2 * Camera.aspect).

How to Choose a Strategy: Letterbox, Pillarbox, or Crop

Three strategies to fill mismatched aspect ratios. Each game has its own. A fighting game on 21:9: pillarbox (bars on the sides) looks strange — better crop with arena expansion. Strategy on iPad: letterbox is undesirable — better show more map. Choosing a strategy is a design decision, but it must be made explicitly and implemented technically.

1. Determine the genre and target devices.
2. Choose a primary aspect ratio (design UI for it).
3. For other ratios decide: letterbox, pillarbox, or crop.
4. Implement via Camera Viewport Rect or separate cameras.

Practical Approach: Camera Viewport Rect and Multiple Canvas

Camera Viewport Rect. For Letterbox/Pillarbox we control camera.rect depending on the current aspect ratio. For 21:9 on 16:9 content: calculate the required Viewport Rect so the game area is centered, and bars are drawn via a separate camera with a Solid Color background.

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

From Our Practice: Adapting a Mobile Strategy Game

A mobile strategy game, released on iOS and Android. Development was done for iPhone 14 (19.5:9). When testing on iPad Pro (4:3) we found: the bottom resource panel was clipped, the world map displayed only 60% of the needed area, and the "Attack" button was covered by Safe Area. The solution took 5 days: wrote an AspectRatioManager with three profiles (narrow: < 1.6, standard: 1.6–2.0, wide: > 2.0), for each profile separate Anchor Presets for critical UI elements, plus a Safe Area Controller. Final test on 7 devices with different aspect ratios — all screens correct.

public class AspectRatioManager : MonoBehaviour {
    public enum AspectProfile { Narrow, Standard, Wide }
    private AspectProfile currentProfile;

    void Update() {
        float ratio = (float)Screen.width / Screen.height;
        if (ratio < 1.6f) currentProfile = AspectProfile.Narrow;
        else if (ratio <= 2.0f) currentProfile = AspectProfile.Standard;
        else currentProfile = AspectProfile.Wide;
        ApplyProfile();
    }

    void ApplyProfile() {
        // Apply anchor presets and camera rect based on profile
    }
}

Shader-Level Adaptation

Shader-level adaptation. For background images (loading screen, main menu) — a shader with a Tiling parameter that adapts UVs to the current aspect ratio. The image does not stretch or crop, but scales with smart framing (analogous to CSS object-fit: cover).

Testing on Real Devices

We use Unity Device Simulator (Window → General → Device Simulator) for preliminary checks. But final testing is only on real devices: iOS Safe Area is calculated differently in the simulator than on a physical iPhone.

Testing matrix:

Deliverables Included

• UI audit report with a problem report (2–3 days)
• Aspect Ratio Manager with Unity package (1–2 weeks)
• Safe Area Controller script for mobile devices
• Custom background shaders with smart framing
• Documentation of UI layout and adaptation strategy
• Training video for your team
• 30 days of support after handover

Estimated Timelines and Pricing

A typical UI audit starts at $500, and full adaptation can save up to $2,000 in post-release fixes. Pricing is calculated individually based on project complexity. Time savings on post-release fixes can reach 40% of the budget.

Order a turnkey UI audit or write us for a free project evaluation. Our team can deliver full adaptation in just 2-4 weeks. We'll evaluate your project for free.

What Are the Typical Game Performance Problems and How Optimization Solves Them?

A project runs smoothly on developer devices. On a five-year-old mid-range Android, it hits 20 fps and overheats after five minutes. On iPhone 11 it maintains 60 fps, but on iPhone XR it drops in heavy scenes. We encounter this every day. Optimization is not a later task—it is an architectural decision from the first commit. With eight years of experience, we have optimized over fifty games, from hypercasual to AAA on consoles. We guarantee: after our audit, you get not just a list of problems, but a concrete plan with measurable goals and deadlines. Order a performance audit — we evaluate your project in three days and show how to reduce draw calls by 40% without losing quality.

How to Profile Game Performance? Tools and Best Practices

Before any optimization, measure. Optimization without profiling is guesswork.

Profile on target hardware, not in the editor. The editor adds overhead — Play Mode numbers are not representative. Distinguish between GPU and CPU bottlenecks: CPU may cause many draw calls or heavy logic, GPU may have complex shaders or overdraw. Unity Documentation: profiling on device is mandatory for mobile games. Typical profiling time for one scenario is five to eight hours, including metrics collection on three to five devices of different generations.

How Does Game Performance Optimization Reduce Draw Calls? Static Batching to SRP Batcher

A draw call is a command from CPU to GPU to “draw this.” Each call has overhead regardless of geometry complexity. On mobile, 200–300 draw calls per frame is typical. The goal is to minimize their number by combining geometry that shares the same material.

Static Batching combines stationary meshes during build. Requirement: Static flag on objects and the same material. Effective for static environments but increases memory usage – the combined mesh is stored separately. In scenes with thousands of static objects, monitor memory via Memory Profiler.

Dynamic Batching combines meshes at runtime with strict limits: fewer than 900 vertex attributes per mesh, same material and scale. In practice, it works only for small objects (particles, UI). Disabled by default in URP – replaced by SRP Batcher.

SRP Batcher is not classic batching – it optimizes CPU overhead when preparing draw calls. Instead of reloading shader uniform data each frame, SRP Batcher caches it in GPU memory and updates only when changed. Draw calls remain the same in number, but each takes less CPU time – sometimes 2–3 times less on render CPU time compared to standard batching. Requirement: shader must be compatible with SRP Batcher (declare per-object properties in UnityPerDraw CBUFFER). Standard URP Lit/Unlit shaders are compatible. Custom ones – check in Material Inspector: SRP Batcher compatible: Yes/No. To enable, ensure the SRP Batcher option is active in URP Asset, and for custom shaders use UNITY_INSTANCING_BUFFER macro and declare per-object properties in CBUFFER_START(UnityPerDraw). After enabling, the RenderLoop.Draw CPU time should decrease in Profiler.

GPU Instancing is for many copies of the same mesh with the same material (trees, grass, NPCs). It sends one draw call with an array of per-instance data. Enable on material: Enable GPU Instancing. Limitation: all instances in one batch must have the same material and mesh. Graphics.DrawMeshInstanced / Graphics.DrawMeshInstancedIndirect enable procedural rendering without GameObject overhead.

The choice of method depends on scenario. Static Batching for static environments. SRP Batcher wins in projects with many unique materials. GPU Instancing is indispensable for mass objects (forests, crowds). Dynamic Batching only for small and rare cases. In practice, we combine all methods, starting with profiling.

For more details on the technology, see Geometry instancing (Wikipedia).

Why Is Memory Optimization Critical for Mobile Games?

Mobile platforms have strict RAM limits. iOS kills apps without warning on memory pressure. Android does similarly with onLowMemory callback. Target budgets: iOS <1 GB for modern devices, <512 MB for iPhone 8/X support; Android <800 MB for broad compatibility (OS uses 400–600 MB). Typical savings after our optimization are 30–50% of RAM while maintaining quality.

Addressables and Asset Bundles: How to Stay Within Budget

Loading everything at startup is unacceptable for large projects. Addressables (a wrapper over Asset Bundles) provide addressable asynchronous asset loading. Explicit unload: Addressables.ReleaseInstance / Addressables.Release. Addressables do not automatically unload assets when objects are destroyed. A common mistake: Addressables.InstantiateAsync in a loop without Release – memory grows until crash. Reference counting: an asset is unloaded only when all its handles are freed. Architectural pattern: a service/manager holds the handle of the loaded asset and releases it during scene transitions.

Groups and Bundle Strategy: group assets by loading logic. For example, all assets of one level in one bundle, shared assets (UI, fonts) in a separate group with Prevent Updates. This strategy saves up to 30% memory.

Texture Memory: Where 70% of RAM Comes From

Textures are the main memory consumer. Analyze via Memory Profiler: All Of Memory -> Texture2D shows the heaviest textures immediately. In practice, we find textures with inflated Max Size (4096 for a mobile icon is a typical mistake). Measures: Mipmap for 3D textures (enable), for UI (disable); Streaming Mipmaps for open world – loads mip levels as camera approaches. A common problem: textures referenced by unused Materials remain in memory – Memory Profiler shows the reference chain. Remove unnecessary materials. After replacing all RGBA32 textures with ASTC 6×6 on Android, savings reach 60% without quality loss.

GC Allocations: How to Eliminate Freezes in Hot Path

C# garbage collector in Unity is stop-the-world. If heap memory is allocated per frame, GC pause causes visible freezes. Goal: zero allocations in hot path (Update, FixedUpdate, render). Typical sources: string concatenation in Update (replace with StringBuilder); LINQ in hot path (manual loops with pre-allocated lists); GetComponent<T>() every frame (cache in Awake/Start); boxing value types when passed as object parameters. After profiling with Unity Profiler, we reduce hot path allocations by 95% – freezes disappear.

How Can LOD and Culling Cut 40% of Draw Calls?

LOD Group switches to simplified geometry as the object moves away from camera. Standard for 3D environment: LOD0 (100% triangles), LOD1 (30–50%), LOD2 (10–15%), Culled. For mobile, set Culled threshold more aggressively – draw less per frame.

Occlusion Culling – Unity does not render objects behind walls. Requires baked occlusion data. For indoor scenes, reduces draw calls by 20–40%.

Frustum Culling works automatically – objects outside camera FOV are not rendered. But the draw call for the check still happens. For scenes with thousands of objects, use custom spatial partitioning (Quadtree, Octree). In one of our projects, implementing occlusion culling and LOD reduced total draw calls from 2800 to 450 on Android.

How to Maintain 72 FPS on Quest 3 with VR Optimization?

VR is a separate class of tasks. Frame rate of 72 or 90 Hz must not be violated, or motion sickness occurs. In addition to standard methods: Single Pass Instanced Rendering – renders both eyes in one pass (halves draw calls); Fixed Foveated Rendering (Quest) – reduces peripheral resolution; Late Latching (Quest 3) – updates controller position as late as possible before rendering; Dynamic Resolution in URP/HDRP – automatically lowers render resolution on fps drops. For Quest, profile via OVR Metrics Tool – displays CPU/GPU time directly in headset. After applying these methods, frame rate on Quest 2 stabilizes at 72 FPS even in scenes with 1.5 million polygons.

What Deliverables Do You Get from Game Performance Optimization? Stages and Timelines

We offer a comprehensive turnkey service. Here is exactly what you receive:

1. Profiling report on target devices – metrics (FPS, draw calls, memory, GC) for 5–7 main scenarios. Delivery: 3–5 business days.
2. Priority action plan – which problems are critical, which can be deferred. Priorities based on impact on gaming experience.
3. Optimization implementation – batching, LOD, Addressables, shaders, occlusion culling. Average implementation cycle: 2–4 weeks.
4. Re-profiling results – measured improvements. Typical FPS increase: 30–60% on mobile devices.
5. Documentation – recommendations for maintenance and further development.
6. Team training – how to prevent regressions. We conduct workshops on profiling and optimization.

Get a consultation – we evaluate your project for free and show the optimization potential. Contact us to learn exact timelines and details for your stack.