Разработка системы освещения мобильной игры
Реальтайм освещение на мобильных устройствах — это постоянный торг. Один динамический Point Light в URP с тенями на Adreno 640 стоит около 1.5-2.5 мс на кадр. При целевых 60 FPS весь бюджет кадра — 16.6 мс, и два таких источника уже занимают треть бюджета только на свет. Мы перебирали десятки конфигураций, пока не нашли золотую середину: запекать всё, что не движется, и оставлять 1-2 реалтаймовых источника для игровых событий.
Стратегия освещения под мобильный GPU
Фундаментальный выбор — соотношение запечённого (baked) и динамического (realtime) света. Для большинства мобильных игр правило простое: всё статичное освещение запекаем, динамическое — минимум.
В Unity URP это: Mixed Lighting со Subtractive или Shadowmask режимом. Subtractive быстрее — тени от статики запекаются в lightmap, динамические объекты отбрасывают тень на статику через mixed light. Shadowmask точнее, но требует дополнительную текстуру на GPU.
Lightmap resolution — типичная ошибка завышения. Texels per unit = 20 для детальной геометрии и 4-8 для фонового окружения. Гигантский lightmap 2048×2048 за один атлас на всю локацию — хорошо. Двадцать мелких lightmap по 256×256 — плохо, это двадцать texture binds. Чтобы избежать этого, группируем статику в один атлас и повторно используем материалы.
Когда оправданы динамические источники?
Динамический свет нужен для игровых событий: взрыв, выстрел, интерактивные факелы. Реализация через короткоживущий Light с интерполяцией Range:
IEnumerator FlashLight(Light light, float intensity, float duration) {
float elapsed = 0f;
while (elapsed < duration) {
light.intensity = Mathf.Lerp(intensity, 0f, elapsed / duration);
elapsed += Time.deltaTime;
yield return null;
}
light.enabled = false;
}
Такой вспышечный свет можно не включать в shadow casting — визуально разница минимальна, а производительность значительно лучше.
Ограничение количества Per-Object lights. В URP Light настройку Additional Lights > Per Object Limit выставляем в 1-2 для мобильных пресетов. По умолчанию 8 — это десктопное значение. Наш опыт: на Adreno 618 два реалтаймовых источника без теней дают 0.8 мс дополнительного времени.
Как работают Light Probes?
Персонажи и враги двигаются через запечённые зоны и должны получать правильное ambient-освещение. Light Probe Group расставляем в точках смены освещения: вход в тень, зона факела, темный коридор. LightProbeProxyVolume для крупных динамических объектов — заменяет интерполяцию между пробами на объёмную выборку.
Без Light Probes персонаж в тёмном углу светится, как будто стоит на солнце — ambient из Skybox применяется без учёта позиции.
Ambient Occlusion: мобильные альтернативы
Screen Space AO (SSAO) на мобиле — нет. Дорого и не нужно при правильных lightmap. Альтернативы:
- Запечённый AO в lightmap — бесплатно в рантайме, настраивается в
Generate Lighting настройках.
- Vertex AO — запекается в vertex color, сэмплируется в шейдере, полностью бесплатно.
- GTAO в URP 15+ — экспериментально, на топовых мобильных GPU допустимо при низком
radius.
Godot 4: освещение в 2D
В 2D-играх на Godot: CanvasItemMaterial с Light Mode = Normal Map Only позволяет использовать normal maps на спрайтах и получать псевдо-3D освещение без реального 3D. PointLight2D с Shadow Enabled = false стоит дёшево. DirectionalLight2D для имитации солнца в top-down играх.
Нормал-маппинг в 2D — мощный инструмент: игра выглядит объёмно, а рендерится как flat sprites. На мобиле это существенно выгоднее, чем переход в 3D ради визуальной глубины.
Как профилировать освещение?
Unity Frame Debugger показывает все draw calls по освещению. Xcode GPU Frame Capture на iOS даёт точный breakdown по шейдерным инвокациям. Цель: Shadow Map passes — не более 1-2 за кадр, Additional Lights — не более 2 реалтаймовых источника одновременно.
| Параметр |
Целевое значение |
Критическое значение |
| Shadow Map passes |
≤2 |
>4 |
| Realtime lights per object |
1-2 |
>4 |
| Lightmap atlas size |
2048×2048 |
Множество мелких атласов |
| Additional Lights total |
≤4 |
>8 |
Что входит в разработку системы освещения?
- Анализ сцен и целевых устройств — подбор стратегии (baked/realtime mix).
- Настройка lightmap resolution и атласирование — устранение перерасхода ресурсов.
- Расстановка Light Probes и настройка Proxy Volume.
- Оптимизация динамических источников: ограничение Per-Object Limit, кэширование корутин.
- Профилирование и фиксация — Frame Debugger, GPU Capture, Instruments.
- Итоговая документация по освещению для команды (конфиги, схемы, метрики).
Наш опыт: 10+ лет в мобильной разработке, 50+ проектов с оптимизацией под iOS/Android. Мы гарантируем, что система освещения будет работать в рамках бюджета 16.6 мс для 60 FPS на целевых устройствах. Свяжитесь с нами для консультации или расчёта стоимости под ваш проект.
Документация Unity URP: https://docs.unity3d.com/Manual/universal-render-pipeline.html
Типичные ошибки при настройке освещения
- Использование 4+ реалтаймовых источников на мобиле.
- Слишком высокое разрешение lightmap для фонового окружения.
- Забыли расставить Light Probes — динамические объекты выглядят плоскими.
- Всключение SSAO без тестирования производительности.
Как выбрать кроссплатформенную разработку: Flutter, React Native или KMM?
Мы часто работаем со стартапами, которым нужно два приложения — iOS и Android — с бюджетом на одну команду. Или корпорациями, которые хотят выпустить внутренний инструмент за три месяца на обе платформы. Кроссплатформенная разработка решает конкретную экономическую задачу: один кодовый базис вместо двух. Вопрос не «кроссплатформа или нативная» — вопрос «какой инструмент под какую задачу».
Каждый фреймворк диктует свой стек и накладывает ограничения. Неправильный выбор приводит к переписыванию проекта через полгода — мы это видели не раз. Поэтому перед стартом проводим аудит технологических требований и экспертизы команды.
Три главных игрока сейчас: Flutter, React Native и Kotlin Multiplatform Mobile. Они решают разные проблемы и плохо сравниваются в лоб. Ниже разберём, как выбрать оптимальный вариант под ваш проект.
Как мы выбираем технологию: 4 шага
-
Анализ требований — список нативных API, необходимость автономной работы, брендовый UI или стандартный.
-
Оценка команды — экспертиза в Dart, JavaScript/Kotlin, наличие iOS-разработчика.
-
Прототип (proof-of-concept) — реализация критического сценария на выбранном стеке за 2–3 дня.
-
Финальное решение — на основе бенчмарков производительности и стоимости поддержки.
Сравнение Flutter и React Native: под капотом
Это сравнение, которое реально влияет на выбор. Разберём по конкретным техническим характеристикам.
Модель рендеринга
Flutter рендерит UI самостоятельно через Impeller (заменил Skia начиная с версии 3.10). Платформа предоставляет только canvas — Flutter рисует каждый пиксель сам. Это означает:
- Пиксельная точность на всех платформах. Один и тот же виджет выглядит одинаково на iOS и Android — хорошо для брендовых приложений, плохо если нужно выглядеть «нативно» на каждой платформе.
- Нет зависимости от версии ОС. Material 3 в Flutter работает одинаково на Android 8 и Android 14. Системные компоненты Android не участвуют.
- Platform channels для нативного кода. Доступ к камере, Bluetooth, NFC — через
MethodChannel или EventChannel. flutter_camera, flutter_blue_plus — это обёртки над platform channels.
React Native использует нативные компоненты платформы. <View> на iOS — это UIView. <Text> — это UILabel. Это означает:
- Нативный look and feel без дополнительных усилий.
- New Architecture (Fabric + TurboModules) с JSI убрала JSON-мост между JS и нативным кодом. Синхронные вызовы работают без сериализации. Это критично для анимаций и жестов.
- React Native Reanimated 3 запускает worklets на UI thread — анимации в 60/120 fps без блокировки JS thread.
Производительность на практике
Для большинства бизнес-приложений разница в производительности между Flutter и React Native New Architecture незаметна пользователю. Разница появляется в граничных случаях.
Flutter медленнее при взаимодействии с платформенными API через platform channels — каждый вызов асинхронный, есть накладные расходы на сериализацию данных. google_maps_flutter рендерит карту через PlatformView — это нативный UIView/View, встроенный в Flutter-дерево. До Impeller это вызывало проблемы с производительностью (Hybrid Composition vs Virtual Display). С Impeller ситуация улучшилась, но PlatformView по-прежнему дороже чистого Flutter-виджета.
React Native медленнее в сценариях с тяжёлой JS-логикой на main thread. Парсинг большого JSON, сложные вычисления — это блокирует JS thread и видно как фриз UI. Решение: Hermes (JS-движок, оптимизированный для RN) + вынос вычислений в нативный модуль или react-native-workers. С Hermes время холодного старта снижается на 30–40% по сравнению с JavaScriptCore.
Экосистема и зрелость
| Параметр |
Flutter |
React Native |
| Язык |
Dart |
JavaScript / TypeScript |
| Пакетный менеджер |
pub.dev |
npm / yarn |
| Крупные компании |
Google, Alibaba, BMW |
Meta, Microsoft, Shopify |
| Hot reload |
Да (stateful) |
Да (Fast Refresh) |
| Desktop (macOS, Windows) |
Да (stable) |
Экспериментально |
| Web |
Да (CanvasKit / HTML) |
Частично (через React) |
| Размер APK/IPA |
~6 MB базовый |
~4 MB базовый |
Dart — барьер входа для команд с JS/TS-бэкграундом. Освоить базовый Dart за неделю реально. Перестроить мышление под Flutter-виджеты и widget tree — занимает больше.
TypeScript в React Native — стандарт де-факто. Команда с React-опытом начинает продуктивно быстрее.
Когда выбирать Flutter?
- Нужен единый брендовый UI на всех платформах (iOS, Android, Web, Desktop).
- Команда готова к Dart.
- Много кастомной анимации и кастомного UI — Flutter более предсказуем.
- Приложение не завязано на специфические нативные API.
Когда выбирать React Native?
- Команда с React/TypeScript-экспертизой.
- Нужен нативный look and feel платформы.
- Активное использование нативных компонентов (Maps, Camera с нативными возможностями).
- Шаринг кода с React-вебом через монорепозиторий.
Kotlin Multiplatform Mobile: другая история
KMM решает не UI-проблему, а проблему дублирования бизнес-логики. Концепция: пишем бизнес-логику, работу с сетью, кеш, валидацию один раз на Kotlin. iOS получает .framework через Kotlin/Native, Android использует библиотеку напрямую. UI на каждой платформе — нативный.
// Shared Kotlin код — работает на iOS и Android
class UserRepository(
private val httpClient: HttpClient, // Ktor
private val database: AppDatabase // SQLDelight
) {
suspend fun getUser(id: String): User {
return database.userQueries.selectById(id).executeAsOneOrNull()
?: httpClient.get("$BASE_URL/users/$id").body<User>().also {
database.userQueries.insert(it)
}
}
}
Ktor — HTTP-клиент для KMM (работает на iOS через Darwin engine, на Android через OkHttp). SQLDelight генерирует typesafe Kotlin API для SQLite, работает на обеих платформах.
Реальные ограничения KMM
Coroutines на iOS: suspend-функции из shared кода вызываются через автоматически сгенерированные обёртки. SKIE (Swift/Kotlin Interface Enhancer) от Touchlab значительно улучшает Swift-интерфейс: async/await вместо callback, AsyncStream для Flow. Без SKIE работать с coroutines из Swift неудобно.
Compose Multiplatform: JetBrains развивает Compose для iOS — UI на Compose работает на iOS через Metal. Это стирает границу с Flutter: один Compose-код для обеих платформ. Статус на сегодня: Beta, в production есть ранние adopters (Touchlab, JetBrains собственные продукты), но стабильность ниже Flutter.
Сложность iOS-интеграции: XCFramework из KMM-модуля добавляется в Xcode-проект. SPM-интеграция появилась и работает. Но iOS-разработчики должны понимать Kotlin-API и правила работы с памятью через Kotlin/Native (ARC + Kotlin GC работают вместе, это не всегда очевидно).
Когда KMM оправдан
У компании уже есть зрелые iOS и Android команды, которые дублируют бизнес-логику. Переводить всё на Flutter или React Native — слишком радикально. KMM позволяет начать с малого: вынести сетевой слой и модели в shared, оставить UI нативным. Постепенная миграция без переписывания всего.
Типичные ошибки при выборе технологии
Выбор Flutter «потому что один кодовый базис» для приложения, которое сильно завязано на нативные API (custom camera, BLE, background processing). Реализовывать это через platform channels — дополнительная сложность, которая съедает выигрыш по скорости разработки.
React Native без понимания JS-thread. Тяжёлые операции на JS thread дают видимые фризы. Это решаемо, но требует понимания architecture — иначе приложение будет работать хуже нативного.
KMM без iOS-разработчика в команде. Shared Kotlin-код требует iOS-инженера, который интегрирует фреймворк в Xcode, пишет SwiftUI поверх KMM API и дебажит Kotlin/Native-краши.
Процесс и сроки
Кроссплатформенный проект проходит те же этапы, что нативный: аудит требований → выбор стека → дизайн → разработка → тестирование на реальных устройствах обеих платформ → публикация в App Store и Google Play → поддержка.
Тестирование на реальных устройствах — не опциональный этап. Эмулятор не воспроизводит проблемы с памятью на бюджетных Android-телефонах и не показывает разницу в поведении жестов на iOS.
| Тип проекта |
Flutter |
React Native |
| MVP (8–12 экранов) |
7–12 недель |
7–12 недель |
| Среднее (20–30 экранов) |
3–5 месяцев |
3–5 месяцев |
| Сложное (нативные интеграции, AI) |
5–8 месяцев |
5–8 месяцев |
Экономия бюджета по сравнению с двумя нативными командами достигает 40–50%. Стоимость рассчитывается индивидуально после анализа стека и требований.
Что входит в нашу работу
- Технический аудит и выбор стека под ваш проект.
- Проектирование архитектуры (чистая архитектура, MVVM, BLoC/Redux).
- Разработка UI по макетам дизайна на обе платформы.
- Интеграция нативных модулей (камера, геолокация, пуш-уведомления).
- Настройка CI/CD (GitHub Actions, Codemagic).
- Тестирование на реальных устройствах (iOS/Android) — не менее 40 сценариев.
- Подготовка и публикация в App Store и Google Play с учётом гайдлайнов (App Store Review, Google Play Policy).
- Техническая поддержка 3 месяца после запуска.
- Передача исходного кода, документации, доступов — всё под ключ.
Оценим ваш проект за один день — свяжитесь с нами для консультации по выбору стека. Закажите разработку под ключ и получите готовое кроссплатформенное приложение в оговорённые сроки.
Источники: