Адаптация графики под разные форматы экранов (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.

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

Ориентировочные сроки:

Стоимость рассчитывается индивидуально после анализа проекта.