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

Сьогодні 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 — пусті смуги або обрізані елементи.

Ми, команда геймдев-інженерів з 10-річним досвідом (понад 50 проєктів з адаптації графіки), забезпечуємо повну адаптацію: від аудиту UI до впровадження Aspect Ratio Manager. Наша робота гарантує коректне відображення на будь-яких пристроях — від ультрашироких моніторів до мобільних з Dynamic Island. Зв'яжіться з нами для оцінки вашого проєкту.

Чому Canvas Scaler не вирішує проблему?

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

Як працювати з Safe Area на мобільних пристроях?

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

Адаптація ортографічної камери під різні співвідношення

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

Як вибрати стратегію: letterbox, pillarbox чи crop?

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

1. Визначте жанр і цільові пристрої.
2. Виберіть primary aspect ratio (під нього проектуєте UI).
3. Для інших співвідношень вирішіть: letterbox, pillarbox чи crop.
4. Реалізуйте через Camera Viewport Rect або окремі камери.

Практичний підхід: Camera Viewport Rect і Multiple Canvas

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 пристроях з різними співвідношеннями — всі екрани коректні.

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

Тестування на реальних пристроях

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

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

Що входить в роботу

• Аудит поточного UI зі звітом по проблемах (2–3 дні)
• Розробка Aspect Ratio Manager з профілями під різні співвідношення
• Налаштування Safe Area Controller для мобільних пристроїв
• Оптимізація Anchor Preset'ів та Multiple Canvas
• Реалізація кастомних шейдерів для фонів
• Тестування на 7+ реальних пристроях
• Документація та рекомендації по підтримці

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

Вартість розраховується індивідуально залежно від складності проєкту. Економія часу на доопрацювання після релізу може досягати 40% бюджету. Замовте аудит вашого UI або отримайте консультацію — ми оцінимо проєкт безкоштовно.