Адаптація графіки під різні формати екранів (Aspect Ratio)

Адаптація графіки під різні формати екранів (Aspect Ratio)

У 2024 Unity-проект потрібно коректно відображати на 16:9, 18:9, 19.5:9, 4:3 (iPad), 1:1 (деякі складні пристрої у режимі половини екрана) та 21:9 (ультраширокі монітори). Якщо при проектуванні UI використовувалась тільки Canvas Scaler з Screen Match Mode = Match Width Or Height та magic number 0.5 — на iPad'є UI поїхав, на 21:9 — пусті полоси по бокам або обрізані елементи.

Це не «поддержка розрішень». Це системна робота з Reference Resolution, Safe Area, Camera Viewport та логікою масштабування ігрової камери.

Де конкретно ломається при зміні Aspect Ratio

Canvas з фіксованими розмірами. Кнопка, запинена по Anchor до правого нижнього кута, при переході з 16:9 на 21:9 уплисає за екран — тому що її позиція задана у абсолютних пікселях, а не через Anchors правильно. Це сигнал, що UI спочатку верстався без урахування вариативності соотношень.

Safe Area на мобільних пристроях. На iPhone з Dynamic Island та на Android-пристроях з punch-hole камерою верхній кут екрана фізично займаний. Якщо статус-бар та ігрові кнопки не враховують Screen.safeArea — UI перекривається виразом камери. Unity сам не застосовує Safe Area до Canvas — це потрібно робити через скрипт, який читає Screen.safeArea та оновлює RectTransform кореневого елемента.

Ортографічна ігрова камера з фіксованим Orthographic Size. У 2D-грі з фіксованим Camera.orthographicSize = 5 при переході з 16:9 на 4:3 гравець бачить менше світу по горизонталі. Для платформера це означає, що персонаж не встигає бачити перешкоди. Рішення: розраховуємо Orthographic Size динамічно через цільовий width: orthographicSize = targetWidth / (2 * Camera.aspect).

Letterbox vs pillarbox vs crop. Три стратегії заповнення несумісного соотношення. Для кожної гри — своя. Файтинг на 21:9: pillarbox (полоси по бокам) виглядає дивно — краще crop з розширенням арени. Стратегія на iPad: letterbox небажаний — краще показувати більше карти. Вибір стратегії — дизайн-рішення, але його потрібно прийняти явно та реалізувати технічно.

Практичний підхід

Camera Viewport Rect. Для Letterbox/Pillarbox керуємо camera.rect залежно від поточного aspect ratio. Для 21:9 на 16:9-контенті: вичисляємо потрібний Viewport Rect так, щоб ігрова область центрувалась, а полоси рисувалися через окремою камеру з Solid Color background.

Multiple Canvas та Reference Resolution. Розділяємо UI на кілька Canvas з різними настройками масштабування. HUD (здоров'я, міні-карта) — Canvas Scaler Scale With Screen Size, Match = 1 (Match Height). Діалоги та меню — Match = 0 (Match Width). Це дає більш передбачуваний масштаб різних категорій елементів.

Реальний кейс: мобільна стратегія, релізу на iOS та Android. Розробка велась під iPhone 14 (19.5:9). При тестуванні на iPad Pro (4:3) виявилося: нижня панель ресурсів обрізана знизу, карта світу відображає тільки 60% від потрібної області, кнопка «Атака» перекрита Safe Area. Рішення зайняло 5 днів: написали AspectRatioManager з трьома профілями (narrow: < 1.6, standard: 1.6–2.0, wide: > 2.0), під кожен профіль — окремі Anchor Preset'и для критичних UI-елементів, плюс Safe Area Controller. Фінальний тест на 7 пристроях з різними соотношеннями — всі екрани коректні.

Shader-рівневь адаптація. Для фонових зображень (загрузочний екран, головне меню) — шейдер з параметром Tiling, який адаптує UVs під поточний aspect ratio. Зображення не тягується та не обрізується, а масштабується з розумним кадруванням (аналог CSS object-fit: cover).

Тестування на різних форматах

Використовуємо Unity Device Simulator (Window → General → Device Simulator) для попередної перевірки на пристроях. Але фінальне тестування — тільки на реальних пристроях: iOS Safe Area у симуляторі розраховується інакше, ніж на фізичному iPhone.

Матриця тестування:

Орієнтовні терміни:

Вартість розраховується індивідуально після аналізу проекту.