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

Наша компания по разработке видеоигр ведет независимые проекты, совместно с клиентом создает игры и оказывает дополнительные операционные услуги. Опыт нашей команды позволяет нам охватить все игровые платформы и разработать потрясающий продукт, соответствующий видению клиента и предпочтениям игроков.

От иммерсивных приложений до игровых миров и 3D-сцен

Наша выделенная команда для VR/AR/MR-разработки, Unity-продакшна и 3D-моделирования и анимации с собственными кейсами и презентациями.

Посетить персонализированный сайт
Показано 1 из 1Все 242 услуг
Адаптация графики под разные форматы экранов (Aspect Ratio)
Средний
~3 дня
Часто задаваемые вопросы

Наши компетенции

Какие этапы разработки игры?

Последние работы

  • image_games_mortal_motors_495_0.webp
    Разработка игры для компании Mortal Motors
    1422
  • image_games_a_turnbased_strategy_game_set_in_a_fantasy_setting_with_fire_and_sword_603_0.webp
    Пошаговая стратегия в фэнтези сеттинге With Fire And Sword
    954
  • image_games_second_team_604_0.webp
    Разработка игры для компании Second term
    577
  • image_games_phoenix_ii_606_0.webp
    3D-анимация — тизер для игры phoenix 2.
    638

Сегодня 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 устройствах с разными соотношениями — все экраны корректны.

Пример настройки AspectRatioManager
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.

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

Соотношение Пример устройства Критичные проверки
4:3 iPad 9th gen HUD, игровая камера, Safe Area
16:9 Samsung Galaxy S10e Базовый layout
18:9 Pixel 6a Растяжение UI по вертикали
19.5:9 iPhone 15 Dynamic Island, Safe Area
21:9 Sony Xperia 1 Letterbox/Pillarbox/Crop

Что входит в работу

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

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

Масштаб задачи Сроки
Аудит UI + отчёт по проблемам 2–3 дня
Исправление Safe Area + базовый Aspect Ratio 3–5 дней
Полная адаптация UI под 4+ соотношения 2–4 недели
Разработка Aspect Ratio Manager с нуля 1–2 недели

Стоимость рассчитывается индивидуально в зависимости от сложности проекта. Экономия времени на доработки после релиза может достигать 40% бюджета. Закажите аудит вашего UI или получите консультацию — мы оценим проект бесплатно.

Типичные проблемы производительности игр

Проект запускается на топовых девайсах разработчика без вопросов. На mid-range Android пятилетней давности — 20 fps и перегрев через 5 минут. На iPhone 11 — стабильные 60, но на iPhone XR — просадки в тяжёлых сценах. Мы сталкиваемся с этим каждый день. Оптимизация — не «потом», а архитектурное решение с первого коммита. За 8 лет работы мы провели оптимизацию более чем для 50 игр — от гиперказуалки до AAA на консолях. Гарантируем: после нашего аудита вы получите не просто список проблем, а конкретный план с измеримыми целями и сроками. Закажите аудит производительности — оценим ваш проект за 3 дня и покажем, как снизить draw calls на 40% без потери качества.

Как профилировать производительность игр: инструменты и правила

Прежде чем оптимизировать — измерить. Оптимизация без профилирования — угадывание.

Инструмент Назначение
Unity Profiler CPU/GPU время по системам, GC allocations, audio
Frame Debugger Инспекция каждого draw call в кадре
Memory Profiler Снимок памяти, граф зависимостей ассетов
RenderDoc Глубокий анализ GPU-состояния, актуален для PC/Console
Android GPU Inspector Профилирование GPU на реальном Android-устройстве
Xcode Instruments GPU + memory на iOS (Metal Performance HUD)
Snapdragon Profiler Qualcomm GPU — детальная статистика шейдеров

Профилируйте на целевом железе, а не в редакторе. Editor добавляет оверхед — цифры из Play Mode не репрезентативны. Разделяйте GPU и CPU bottleneck: на CPU много draw calls или тяжёлая логика, на GPU — сложные шейдеры или overdraw. Документация Unity: профилирование на устройстве — обязательный шаг для мобильных игр. Типичное время профилирования одного сценария — 5–8 часов, включая сбор метрик на 3–5 устройствах разных поколений.

Как уменьшить количество draw calls: от статического батчинга до SRP Batcher

Draw call — команда CPU к GPU «нарисуй это». Каждый вызов имеет overhead независимо от сложности геометрии. На мобильных 200–300 draw calls за кадр — граница. Цель: минимизировать их количество, объединяя геометрию с одинаковым материалом.

Static Batching объединяет неподвижные меши при сборке. Требование: флаг Static на объекте и одинаковый материал. Эффективен для статичного окружения, но увеличивает потребление памяти — объединённый меш хранится отдельно. В сценах с тысячами статичных объектов следите за памятью через Memory Profiler.

Dynamic Batching объединяет меши в рантайме с жёсткими ограничениями: меньше 900 вертексных атрибутов на меш, одинаковый материал и масштаб. На практике эффективен только для мелких объектов (партиклы, UI). В URP по умолчанию отключён — его вытеснил SRP Batcher.

SRP Batcher — не классический батчинг, а оптимизация CPU-overhead при подготовке draw calls. Вместо того чтобы каждый кадр заново загружать uniform-данные шейдера, SRP Batcher кэширует их в GPU-памяти и обновляет только изменившиеся. Draw calls остаются прежними по количеству, но каждый занимает меньше времени CPU — иногда в 2–3x по CPU-времени рендера. Требование: шейдер должен быть совместим с SRP Batcher (декларировать per-object свойства в UnityPerDraw CBUFFER). Стандартные URP Lit/Unlit шейдеры совместимы. Кастомные — проверяем в Inspector материала: SRP Batcher compatible: Yes/No. Для включения убедитесь, что в URP Asset опция SRP Batcher активна, а для кастомных шейдеров используйте макрос UNITY_INSTANCING_BUFFER и объявляйте per-object свойства в блоке CBUFFER_START(UnityPerDraw). После включения в Profiler должно снизиться время RenderLoop.Draw на CPU.

GPU Instancing — для множества копий одного меша с одним материалом (деревья, трава, NPC). Отправляет один draw call с массивом per-instance данных. Включается на материале: Enable GPU Instancing. Ограничение: все инстансы в одном batch должны иметь одинаковый материал и меш. Graphics.DrawMeshInstanced / Graphics.DrawMeshInstancedIndirect — для процедурного рендеринга без GameObject overhead.

Выбор метода зависит от сценария: Static Batching подходит для статичного окружения, SRP Batcher выигрывает в проектах с множеством уникальных материалов, GPU Instancing незаменим для массовых объектов (лес, толпа), Dynamic Batching — только для мелких и редких случаев. На практике мы комбинируем всё, начиная с профилирования.

Метод Тип объектов Влияние на CPU Влияние на GPU Потребление RAM
Static Batching Статичные Умеренное снижение Без изменений Увеличивается
Dynamic Batching Мелкие (≤900 вертексов) Снижение Без изменений Без изменений
SRP Batcher Любые (совместимые шейдеры) Значительное снижение Без изменений Без изменений
GPU Instancing Копии одного меша Минимальное Значительное снижение Незначительно

Подробнее о технологии — на Wikipedia.

Почему оптимизация памяти критична для мобильных игр?

Мобильные платформы — жёсткие ограничения по RAM. iOS убивает приложение при превышении памяти без предупреждения (memory pressure kill). Android — аналогично, но с onLowMemory callback. Целевые бюджеты: iOS — <1 GB для современных устройств, <512 MB для поддержки iPhone 8/X; Android — <800 MB для широкой совместимости (ОС занимает 400–600 MB). Типичная экономия после нашей оптимизации — 30–50% оперативной памяти при сохранении качества.

Addressables и Asset Bundles: как не превысить бюджет

Загружать всё сразу при старте — неприемлемо для больших проектов. Addressables (надстройка над Asset Bundles) — система адресуемой асинхронной загрузки ассетов. Явная выгрузка: Addressables.ReleaseInstance / Addressables.Release. Addressables не выгружают ассеты автоматически при уничтожении объекта. Типичная ошибка: Addressables.InstantiateAsync в цикле без Release — память растёт до краша. Reference counting: ассет выгружается только когда все его handles освобождены. Архитектурный паттерн: сервис/менеджер держит handle загруженного ассета, освобождает при переходе между сценами.

Groups и Bundle Strategy: группируем ассеты по логике загрузки. Например, все ассеты одного уровня — в один bundle, шаренные (UI, шрифты) — в отдельную группу с Prevent Updates. Такая стратегия экономит до 30% памяти.

Texture Memory: откуда берётся 70% занимаемого объёма

Текстуры — основной потребитель памяти. Анализ через Memory Profiler: вкладка All Of MemoryTexture2D — сразу виден список самых тяжёлых текстур. На практике мы находим текстуры с завышенным Max Size (4096 для мобильной иконки — типичная ошибка). Меры: Mipmap для 3D-текстур (включить), для UI (выключить); Streaming Mipmaps для open world — загружает mip-уровни по мере приближения камеры. Крассовская проблема: текстуры, на которые ссылаются неиспользуемые Materials, остаются в памяти — Memory Profiler покажет reference chain. Удаляйте лишние материалы. После замены всех текстур формата RGBA32 на ASTC 6×6 на Android экономия достигает 60% без потери качества.

GC Allocations: как устранить фризы в Hot Path

C# garbage collector в Unity — stop-the-world. Если за кадр аллоцировано много heap-памяти, GC-пауза вызывает видимый фриз. Цель: нулевые аллокации в hot path (Update, FixedUpdate, рендер). Типичные источники: string конкатенация в Update (заменяем на StringBuilder), LINQ в hot path (ручные циклы с предаллоцированными списками), GetComponent<T>() каждый кадр (кэшируем в Awake/Start), boxing value types при передаче в object параметры. После профилирования с помощью Unity Profiler мы снижаем аллокации в hot path на 95% — фризы исчезают.

LOD и Culling: как отсечь лишние 40% draw calls

LOD Group — переключение на упрощённую геометрию при удалении объекта от камеры. Стандарт для 3D окружения: LOD0 (100%), LOD1 (30–50% треугольников), LOD2 (10–15%), Culled. Для мобильных порог Culled ставим агрессивнее — меньше рисуем за кадр.

Occlusion Culling — Unity не рендерит объекты за стенами. Требует запечённые occlusion данные. Для indoor сцен снижает draw calls на 20–40%.

Frustum Culling работает автоматически — объекты вне FOV камеры не рендерятся. Но draw call на проверку всё равно происходит. Для сцен с тысячами объектов — кастомный spatial partitioning (Quadtree, Octree). В одном из проектов внедрение окклюзионного калинга и LOD снизило общее количество draw calls с 2800 до 450 на Android.

Оптимизация VR: как удержать 72 FPS на Quest 3

VR — отдельный класс задач. Фреймрейт 72/90 Hz нельзя нарушать, иначе motion sickness. Дополнительно к стандартным методам: Single Pass Instanced Rendering — рендер для обоих глаз за один проход (снижает draw calls в 2 раза); Fixed Foveated Rendering (Quest) — снижение разрешения на периферии; Late Latching (Quest 3) — обновление позиции контроллера максимально поздно перед рендером; Dynamic Resolution в URP/HDRP — автоматическое снижение разрешения рендера при просадке fps. Для Quest профилируем через OVR Metrics Tool — показывает CPU/GPU time прямо в гарнитуре. После применения этих методов частота кадров на Quest 2 стабилизируется на 72 FPS даже в сценах с 1.5 млн полигонов.

Что входит в работу по оптимизации: этапы и сроки

Мы предлагаем комплексную услугу «под ключ»:

  1. Профилирование на целевых устройствах — сбор метрик (FPS, draw calls, память, GC). Анализируем 5–7 основных сценариев за 3–5 рабочих дней.
  2. Отчёт с приоритетами — какие проблемы критичны, какие можно отложить. Приоритеты выставляем на основе влияния на игровой опыт.
  3. Внедрение оптимизаций — батчинг, LOD, Addressables, шейдеры, occlusion culling. Средний цикл внедрения — 2–4 недели.
  4. Повторное профилирование — замер улучшений. Типичный прирост FPS — 30–60% на мобильных устройствах.
  5. Документация — рекомендации по поддержке и дальнейшей разработке.
  6. Обучение команды — как не допустить регресса. Проводим воркшопы по профилированию и оптимизации.

Средняя экономия заказчика за счёт предотвращения переделок на поздних этапах — от $15,000 до $40,000 на проекте. Получите консультацию — мы бесплатно оценим ваш проект и покажем потенциал оптимизации. Обращайтесь, чтобы узнать точные сроки и стоимость для вашего стека.