Адаптация графики под разные форматы экранов (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 или получите консультацию — мы оценим проект бесплатно.