Первая версия нашего проекта загружалась почти шесть секунд на мобильных устройствах. Пользователи закрывали вкладку, не дожидаясь появления главного меню, поэтому нам пришлось полностью перебрать порядок загрузки ресурсов. Мы перенесли тяжёлые текстуры интерфейса из стартового бандла и переписали логику инициализации игрового движка.
Где мы ошиблись на старте
Сначала мы упаковали все графические файлы, звуки и шрифты в один общий архив, который загружался перед запуском первого уровня. В редакторе на рабочем ПК всё работало за секунду, но в реальных условиях браузерные игры сталкиваются с ограничениями мобильного интернета. Сетка интерфейса, фоновые изображения и звуковые эффекты меню весили ЦИФРА мегабайт. При медленном соединении экран оставался черным слишком долго.
Решение: разделение фоновых процессов
Мы разделили подготовку игры на три последовательных этапа:
| Этап | Что загружается | Время ожидания |
| 1 | Минимальный скрипт и логотип | До 0,5 сек |
| 2 | Логика меню и шрифты | До 1,5 сек |
| 3 | Графика первого уровня | Фоном во время анимации |
Для упаковывания текстур мы использовали инструмент TexturePacker, снизив итоговый размер графики на ЦИФРА %. Звуковые файлы перевели в формат WebM с пониженным битрейтом. В итоге первичный пакет данных уменьшился до ЦИФРА килобайт.
Что это дало на практике
После оптимизации запуск занимает ровно ЦИФРА секунды при подключении через 3G. Оказалось, что игровую логику вовсе не обязательно загружать целиком до того, как пользователь увидит интерфейс. Теперь мы используем эту схему во всех проектах, когда планируем разработку игр для каталога Яндекс Игры (ССЫЛКА)
Почему мы отказались от генерации уровней в пользу ручной сборки
В третьем проекте жанра три в ряд (ССЫЛКА) мы попытались доверить создание уровней алгоритму. Через ФАКТ недель тестирования выяснилось, что математически корректные раскладки получаются скучными и часто приводят к тупиковым ситуациям. Мы полностью выбросили генератор и вернулись к ручной сборке каждого поля в редакторе Tiled.
Проблема случайной генерации
Алгоритм расставлял элементы по заданным коэффициентам сложности, но не учитывал эмоции человека. На некоторых уровнях игрок мог собрать нужную комбинацию за два хода, а на других терял все попытки без возможности повлиять на результат. Это происходило из-за того, что процедурный код следил только за суммарным количеством фишек на поле, но упускал из виду их пространственное расположение.
Переход на ручной баланс
Мы создали внутренний инструмент на базе визуального редактора, где дизайнер проектирует сетку и сразу проверяет её на ботах. Процесс тестирования состоит из следующих шагов:
- Сборка базовой формы поля и расстановка препятствий.
- Прогон уровня автотестом на ЦИФРА тысяч виртуальных сессий.
- Корректировка количества ходов на основе средней вероятности победы.
Благодаря этому подходу мы точно знаем, сколько времени займет прохождение одного этапа — в среднем ЦИФРА минут. Когда пользователь ищет, во что поиграть во время короткого перерыва, предсказуемая длительность сессии становится решающим фактором.
Результаты тестирования
После отказа от скрипта автоматической генерации доходимость до ЦИФРА уровня выросла на ЦИФРА %. Ручная сборка требует больше времени на старте, но избавляет от внезапных непроходимых конфигураций на поздних.
Как мы адаптировали управление под сенсорные экраны и клавиатуру
При переносе игры на внимание (ССЫЛКА) с ПК на мобильные устройства мы столкнулись с падением точности ввода на ЦИФРА %. Игроки регулярно промахивались по мелким объектам на экранах с небольшой диагональю. Нам пришлось перерисовать размер активных зон и добавить алгоритм компенсации нажатий.
Разница в обработке событий
На компьютерах пользователь точно наводит курсор мыши на объект. На смартфоне палец перекрывает область нажатия, а сам сенсор регистрирует касание с погрешностью в несколько пикселей. Первоначально мы использовали стандартные события клика в веб-событиях HTML5, что вызывало задержку отклика в ЦИФРА миллисекунд.
Технические изменения интерфейса
Мы переписали модуль ввода, отказавшись от стандартных системных библиотек. Изменения затронули три ключевых элемента:
- Зона клика (Hitbox): Увеличена на ЦИФРА % относительно видимого размера графического элемента.
- Задержка отклика: Сокращена до ЦИФРА миллисекунд за счет использования Pointer Events вместо Touch Events.
- Визуальный отклик: Добавлена мгновенная анимация нажатия до того, как сервер подтвердит действие.
Если человек планирует играть онлайн бесплатно с телефона, он не должен испытывать неудобств из-за размера своего устройства. Мы также оставили полноценную поддержку клавиатуры для тех, кто запускает игры в браузере с компьютера.
Итоги переработки
Оптимизация модуля ввода заняла у нас ФАКТ рабочих дней. В результате число ошибочных действий снизилось до минимума, а процент пользователей, завершивших первый игровой сеанс, увеличился на ЦИФРА %.