Упрощаем адаптацию 2D-игр под любые экраны: как работает моя система скейлинга
Одна из ключевых задач при разработке 2D-игр — корректное отображение контента на устройствах с разными разрешениями. Рассказываю, как я решил эту проблему с помощью гибкой системы скейлинга, которая экономит время и сохраняет качество графики.
📐 Базовое разрешение — сердце системы
За основу взято разрешение 360×800 пикселей. Все расчеты масштаба идут относительно этих значений.
- Например, для устройства с шириной 1440 пикселей масштаб вычисляется как
1440 / 360 = x4. - Это позволяет автоматически подбирать оптимальный размер ассетов для каждого экрана.
🎨 Подготовка ресурсов: один клик вместо рутины
- Спрайты из Figma экспортируются в масштабе x4 (например, для базовой иконки 100×100 пикселей — 400×400 в x4).
- AssetPack автоматически генерирует наборы текстур для масштабов x1, x2, x3, x4.
- Игра загружает текстуры, соответствующие текущему скейлу устройства.
Плюсы:
- Нет потери качества на экранах с высоким разрешением.
- Не нужно вручную готовить ресурсы под каждое разрешение.
💻 Код и координаты: работаем как в Figma
В коде мы всегда используем координаты базового масштаба (x1). Например, если в Figma объект расположен в точке (50, 100), в коде это так и указывается. Рендерер автоматически масштабирует позицию и размеры под текущее разрешение.
Почему это удобно:
- Не нужно пересчитывать координаты для разных устройств.
- Дизайнеры работают в привычном масштабе, а игра адаптируется под любой экран.
✍️ Шрифты: магия метрик и глифов
Для текстов я тоже сохраняю единый подход:
- Шрифты генерируются с метриками и кеглем в масштабе x4.
- Скрипт создает текстуры глифов для всех масштабов (x1–x4) и шрифт с метриками для x1.
- В игре текст рендерится с текстурой нужного скейла, но метрики (отступы, межбуквенные интервалы) остаются в x1.
Результат:
- Четкий текст на любом экране.
- Нет «прыгающих» layout из-за различий в метриках шрифтов.
Итог
Система скейлинга позволяет:
✅ Автоматизировать подготовку ассетов.
✅ Использовать высокодетализированные текстуры для 4K-экранов.
✅ Работать в единой системе координат, как в Figma.
✅ Избежать ручных расчетов под каждое устройство.
Если у вас есть вопросы или идеи по оптимизации — пишите в комментариях! 🚀