Заставочный экран — первый интерфейс игрока. Он определяет восприятие бренда, маскирует загрузку ассетов и задаёт тон всему игровому опыту.
Какие бывают заставки и зачем каждая нужна
В мобильной разработке заставки делят на функциональные типы. Каждый решает свою задачу: от скрытия холодного старта до соблюдения правовых норм. Понимание различий позволяет не смешивать ответственности и не перегружать единственный экран.
Splash-экран (холодный старт)
Статичное системное изображение, которое ОС показывает до инициализации движка. На iOS — LaunchScreen.storyboard, на Android 12+ — SplashScreen API. Не может содержать анимации или динамического контента.
Экран загрузки (Loading Screen)
Появляется после запуска движка. Здесь допустимы анимации, прогресс-бары, советы по геймплею. Задача — удержать внимание пока стримятся ассеты уровней, шейдеры или сетевые данные.
Онбординг и интро (First Run)
Серия экранов для новых игроков: обучение управлению, лор, настройка профиля. Часто объединяется с загрузкой кэша первого сеанса. Требует отдельной аналитики воронки.
Легальные и возрастные гейты
Обязательные экраны согласия (GDPR, COPPA, age rating). Блокируют вход до действия пользователя. Дизайн должен быть нейтральным, но читаемым; ошибки здесь ведут к реджектам в сторах.
Событийные и обновления (LiveOps)
Временные заставки под ивенты, сезоны, мажорные патчи. Меняются удалённо через Remote Config. Длительность показа — от нескольких дней до недель. Важен быстрый пайплайн замены ассетов без билда.
Технические ограничения iOS и Android: сравнительная таблица
Платформы диктуют жёсткие рамки. Нарушение — повод для реджекта или визуальных артефактов (мерцание, растяжение, обрезание нотчем). Таблица сводит ключевые параметры для нативных и кроссплатформенных решений.
| Параметр | iOS (LaunchScreen) | Android (SplashScreen API) | Unity / Unreal / Custom |
|---|---|---|---|
| Формат исходника | Storyboard / XIB (вектор), PNG в ассет-каталог | XML drawable (VectorDrawable, AnimatedVectorDrawable), PNG/WebP | Texture2D (ASTC/ETC2), Render Texture, Video Player |
| Анимация | Запрещена системой. Только статика. | Поддерживается через AnimatedVectorDrawable (до 1000 мс) или SplashScreenView с кастомной анимацией. | Полная свобода: частицы, скелетная анимация, шейдеры, видео. Ограничение — память GPU и время холодного старта. |
| Safe Area / Вырезы | Обязательно. Логотип в центре safe area. Фон растягивается на весь экран. | Icon в центре окна (windowInsets). Фон — windowBackground. Нотчи и punch-holes учитываются автоматически при правильной настройке темы. | Ручной расчёт через Device.Screen / Screen.safeArea. Нужен референс-макет под разные соотношения сторон (19.5:9, 2:1, 4:3). |
| Макс. время показа | До готовности first frame (обычно 200–800 мс). Долгое ожидание — краш Watchdog. | Система скрывает сплэш при onResume / first frame. Рекомендуемая анимация иконки — до 200–300 мс. | Зависит от инициализации SDK (Ads, Analytics, Play Services). Цель — уйти на игровой цикл < 3 с на средних устройствах. |
| Тёмная тема | Отдельный ассет в Assets.xcassets (Any, Dark). Автопереключение. | Night mode квалайзеры в drawable-night / values-night. Иконка адаптируется под theme background. | Ручной свап текстур или шейдеров по SystemInfo.operatingSystem / Application.themeChanged. |
| Локализация текста | Текст на статическом сплэше запрещён. Только логотип. | Текст на системном сплэше не рекомендуется. Переносится на Loading Screen. | Текст рендерится UI-системой (TextMeshPro, UMG, Slate) поверх фона. Поддержка RTL, шрифтов, fallback. |
Пять принципов дизайна, которые работают на любой платформе
Визуальное качество заставки не зависит от движка. Зависеть от дисциплины дизайнера и понимания конвейера рендеринга. Пять правил ниже покрывают 90% сценариев.
Бренд узнаётся за 0,5 секунды
Логотип — единственный обязательный элемент. Никаких слоганов, кнопок, мелких деталей. Силуэт логотипа должен читаться в монохроме на фоне любого цвета. Используйте вектор (SVG / PDF) для исходника, экспорт в PNG @3x только на финале.
Фон — не картинка, а цветовая система
Градиент или сплошной цвет из палитры бренда масштабируется без артефактов на любом разрешении. Фотографии и сложные иллюстрации дают бандинг на OLED, проблемы с safe area и вес 5–10 МБ. Если нужна текстура — процедурный шейдер или тайлируемый паттерн < 50 КБ.
Анимация — функциональная, а не декоративная
Движение должно означать процесс: вращение логотипа = инициализация движка, пульсация = загрузка сети, раскрытие = переход к меню. Бесконечные лупы без привязки к прогрессу вызывают раздражение и повышают CPU/GPU load на старте.
Плавный переход (Seamless Transition)
Последний кадр заставки должен совпадать с первым кадром главного меню по композиции и цветам. Используйте Shared Element Transition (общий элемент — логотип) или Cross-fade за 150–200 мс. Резкая смена фона (flash) воспринимается как баг.
Вес и память под контролем
Бюджет сплэш-ассетов — 500 КБ суммарно (иконка + фон + анимация). Видео — только для премиум-проектов с предзагрузкой (Preload) и ограничением 2–3 МБ (H.264/HEVC, 720p). Текстуры в ASTC 4×4 / ETC2. Проверяйте через Xcode Instruments / Android Profiler: нет утечек на старте.
Частые ошибки и их решения: разбор паттернов
Ошибки на заставке дешевы в исправлении на этапе макета и дороги в проде (реджекты, отвалы ретеншена Д1). Ниже — пары «Ошибка → Решение» с техническим обоснованием.
Тяжёлый PNG фон (10–20 МБ) на старте Unity/Unreal. Приложение крашится по OOM на low-end устройствах до показа первого кадра.
Векторный фон (градиент/шейдер) или Lottie-анимация < 200 КБ. Для сложных сцен — рендер в RenderTexture на GPU после инициализации, на сплэше — только цвет бренда.
Игнорирование Android 12+ SplashScreen API. Старый тематический сплэш (windowBackground) даёт «белую вспышку» и растянутую иконку на новых API.
Мигрируйте на core-splashscreen библиотеку. Настройте windowSplashScreenAnimatedIcon (AVD) и windowSplashScreenBackground. Тестируйте на API 31, 33, 34 отдельно.
Текст (версия билда, копирайт, «Загрузка…») запечён в изображение сплэша. Невозможно локализовать, обновить версию без ребилда, текст размывается на ретине.
Текст только кодовым UI поверх фона. Версия билда — из манифеста/Info.plist. Локализация — через стандартные таблицы строк. Шрифт — системный или встроенный SDF-атлас.
Резкий переход: сплэш тёмный, меню белое (или наоборот). Пользователь видит «мерцание» экрана, воспринимает как лаг или баг рендера.
Единая цветовая схема фона сплэша и первого кадра меню. Cross-fade 150–200 мс. На нативке — ActivityOptions.makeSceneTransitionAnimation. На движках — CanvasGroup.alpha / UMG Animation с Event Track на момент смены сцены.
Инструменты и форматы анимации: что выбрать в 2024 году
Выбор инструмента зависит от конвейера арта, целевых платформ и бюджета на интеграцию. Сравнение популярных решений по критериям: вес рантайма, поддержка интерактивности, сложность пайплайна художника → билд.
Lottie (Bodymovin)
Стандарт де-факто для मोба. JSON из After Effects. Рантайм ~100–200 КБ (lottie-android, lottie-ios, lottie-unity). Поддержка масок, маттов, выражений — частично. Нет 3D, нет частиц.
Rive (Flare)
Современная альтернатива. Своя редакция, state machine, интерактивность (ввод, джойстик на заставке). Рантайм легче Lottie, формат .riv бинарный. Экспорт из Figma/Editor. Поддержка скелетной анимации и мешей.
Spine 2D
Профессиональный стандарт для скелетной анимации в играх. Тот же рантайм, что и для геймплея. Единый пайплайн: художник анимирует в Spine, программист запускает на заставке. Мешки, IK,.constraints. Вес рантайма ~300 КБ.
Нативные: AVD / Core Animation
AnimatedVectorDrawable (XML) на Android, CAKeyframeAnimation / Lottie-iOS нативный. Нулевой оверхед, идеальная интеграция с системным сплэшом. Сложно художникам: нет визуального таймлайна, только код/XML. Для простых морфингов иконок — лучший выбор.
Unity Timeline / Unreal Sequencer
Полноценные кино-инструменты внутри движка. Партикл-системы, пост-процессинг, видео-треки. Тяжело: нужен инициализированный движок. Используется для Loading Screen / Intro, а не для системного Cold Start Splash.
Чек-лист перед релизом: что проверить на устройствах
Автоматизированные тесты не 잡ют визуальные регрессы на заставке. Нужен ручной прогон на референсной ферме устройств. Список ниже — минимальный набор для QA-сборки.
- Холодный старт на чистом устройстве
Удалено приложение, перезагрузка ОС. Время до интерактивного меню < 3 с (средний тир), < 5 с (low-end). Нет черных экранов, нет мерцаний. - Safe Area: нотч, Dynamic Island, punch-hole, системные жесты
Логотип не обрезан, не наезжает на индикатор Home Bar. Фон заполняет весь экран edge-to-edge. Проверка на iPhone SE (4.7″), iPhone 15 Pro Max, Galaxy S24 Ultra, Fold (свернуто/развернуто). - Тёмная / Светлая тема системы
Переключение темы в настройках ОС до запуска. Сплэш меняет цвет фона/иконки мгновенно, без перезапуска приложения (на Android 10+, iOS 13+). - Ротация экрана (если поддерживается)
Запуск в ландшафте, поворот в портрет во время сплэша. Никаких пересозданий Activity / перерисовок. Логотип остаётся в центре новой ориентации. - Анимация иконки Android (SplashScreen API)
AnimatedVectorDrawable запускается, проигрывается до конца, не.loopится бесконечно. Длительность < 300 мс. На старых API (pre-31) фоллбэк на статический drawable без краша. - Локализация и правовые экраны
Системный язык: арби (RTL), китайский, немецкий (длинные слова). Текст на загрузке не обрезан, не наезжает на UI. Возрастной гейт появляется до любого трекинга. - Память и CPU на старте (Profiling)
Xcode Instruments (Time Profiler, Allocations) / Android Studio Profiler. Пик памяти на сплэше не превышает бюджета (например, 150 МБ). Нет аллокаций в Update/Tick до первого кадра меню. - Remote Config: смена событийной заставки без билда
Проверка доставки нового ассета (CDN → кэш → показ). Фоллбэк на дефолт, если скачивание упало. Версионирование манифеста ассетов.
Качественная заставка — не украшение, а инженерная задача. Она решает проблему холодного старта, защищает восприятие бренда и даёт движку время на инициализацию без визуальных артефактов.
Целое приключение — в одном телеграм-боте 🌍
Не нужно ничего скачивать, регистрироваться и разбираться в сложных интерфейсах. Открыли Telegram — и вы уже в текстовой ролевой игре с ИИ. Идеально на 10 минут в обеденный перерыв или на целый вечер: история подождёт и продолжится с того же места, где вы остановились.
Открыть бота 👉 https://clck.ru/3Ta8kQ
