Как я создал игру для разработчиков на Flutter

12 Май в 09:12 Прокомментировать Просмотры: 30

Всем привет! На связи Амир Утеуов — ML-инженер в Авито.

В этой публикации я расскажу историю создания мобильной игры DevRush — пет-проекта, который эволюционировал до полноценной активности на стенде IT-конференции CodeFest 2025.

Всё началось с того, что под рукой оказался набор иконок различных языков программирования и фреймворков. Это вдохновило меня создать приложение, суть которого — максимально оперативно находить нужный логотип среди множества случайных. До этого момента я не имел опыта в разработке и релизе мобильных игр, но решил пройти этот путь с чистого листа.

Статья будет состоять из двух частей: в первой я подробно разберу процесс разработки первой версии и возникшие трудности, а во второй — расскажу о том, как мы адаптировали игру для выступления на конференции.

Подробное содержание первой части:

Почему именно Flutter?
Подбор технологического стека для иконок
Геймплей и механики
Реализация на Flutter
Главный вызов: векторная анимация
Визуализация экрана победы
Сборка и дистрибуция
Прохождение модерации
Итоги
Что почитать по теме

Почему именно Flutter?

Начнем с фундаментального вопроса — выбора инструментария для разработки.

Меня привлекает концепция кроссплатформенности: когда единожды написанный код успешно функционирует на iOS, Android, десктопах и в вебе. Проанализировав множество вариантов, я остановился на Flutter.

Flutter — мощный фреймворк для создания кроссплатформенных приложений, использующий язык Dart.

Dart — это лаконичный C-подобный язык, разработанный Google специально для подобных задач. Он существенно упрощает разработку за счет продвинутых инструментов. К примеру, hot reload позволяет мгновенно видеть изменения в коде, отображающиеся в эмуляторе или на реальном устройстве, будь то верстка, бизнес-логика или вычислительные переменные в рантайме.

Flutter предлагает богатую библиотеку виджетов с возможностью гибкой настройки дизайна. А механизм event loop обеспечивает эффективную асинхронную работу в одном потоке.

Изучив официальные материалы по Flutter и отличный бесплатный курс по Dart, я, не имея опыта в геймдеве, приступил к реализации.

Следующим этапом стала архитектурная схема приложения:

Приложение требовало экранов главного меню, самой игры, информационного раздела и экрана завершения. Также был критически важен таймер обратного отсчета.

Игровую логику я реализовывал самостоятельно, не подозревая о существовании движка Flutter Flame (сейчас бы, конечно, выбрал его). Изначально я установил таймер на 16 секунд, но позже увеличил его до 32, так как этого времени игрокам не хватало.

Выбор технологий для иконок

Я отбирал только те языки программирования, которые на слуху. Чтобы игра была доступной, я включил в неё как активно используемые, так и стабильные языки, имеющие сильное сообщество и регулярные обновления.

Поэтому в датасет попал, например, Fortran (так как он развивается), но не вошел экспериментальный или альфа-версионный софт. Также я сделал акцент на языках общего назначения (general-purpose), исключив узкоспециализированные вроде 1C или SAP ABAP, а также языки смарт-контрактов (Solidity, Plutus) и разметки.

Технологий в мире бесчисленное множество (миллионы пакетов в репозиториях вроде PyPI, Maven или npm), поэтому я отобрал около 250 наиболее узнаваемых.

Геймплей

Напомню задумку: игроку предлагается за ограниченное время отыскать нужную иконку среди массива других.

Прогрессия сложности устроена так:

Уровень «Junior»: у каждой иконки есть текстовая подсказка с названием технологии.
Уровень «Middle»: подсказки есть только у половины иконок, ориентируемся на визуальную память.
Уровень «Senior»: подсказок нет, ищем исключительно по логотипу.

Посмотрев на датасет, я понял, что интуитивно узнаю около 90% иконок. Чтобы сделать игру познавательнее, я написал Python-скрипт, который через DuckDuckGo API подтягивал краткое описание для каждой технологии.

Вышло довольно информативно:

Для ускорения релиза все описания оставил на английском языке.

Реализация проекта на Flutter

Настройка окружения — первый этап, где возможны сюрпризы в зависимости от ОС. Использовать шаблонные проекты Flutter для Web, Desktop или мобильных платформ удобно из консоли VS Code. Альтернатива — FlutLab, если вы предпочитаете облачную разработку без установки зависимостей локально.

Я создал структуру проекта, добавляя нужные экраны и логику. Ключевой момент — понимание работы event loop во Flutter: если перегрузить основной поток вычислениями, приложение начнет «фризить».

Для базового дизайна я использовал стандартные стили, но обязательно внедрил поддержку темной темы.

Ресурсы (иконки, датасет, анимации) хранились в папке assets. Использовал PNG из-за поддержки прозрачности. Некоторые иконки терялись на фоне, поэтому пришлось программно добавить возможность контурной обводки.

В первой версии метаданные о файле я «зашивал» прямо в его имя, например: «Python_pr_nbrr.png» означало «технология Python, категория Programming Language, без необходимости границы (no border)». Не самый изящный подход, но для MVP сработал.

Игра насчитывала 64 уровня с динамически увеличивающимся количеством иконок на поле 4×4. Также реализовал режим контеста: за счет фиксированного random seed на разных устройствах генерировалось одинаковое поле — отличный вариант для дружеских соревнований.

На экране победы, как вишенка на торте, появилась анимация статистики.

Главный вызов: векторная анимация

Больше всего времени ушло на создание анимации разлетающихся иконок в формате Lottie. Я генерировал их с помощью Python-скриптов, настраивая эффекты взрыва через easings.

Процесс напомнил уроки информатики: перемещение частиц по физическим формулам. Чтобы анимация не казалась однообразной, я сделал 10 различных вариантов, выбираемых случайным образом. Конечно, логику можно было реализовать на чистом Dart, но тогда это казалось слишком сложной задачей.

Визуализация экрана победы

Сборка и дистрибуция

Flutter поддерживает сборку под множество платформ. Для Android предпочтительно использовать формат App Bundle (.aab), который оптимизирует размер загружаемого контента, подгружая только необходимые ресурсы для конкретного устройства. Для iOS, в свою очередь, обязательны Mac OS и свежий Xcode.

Учитывая текущие ограничения для разработчиков из РФ, создание платных приложений невозможно — только бесплатный софт без внутренней монетизации.

Самым кропотливым этапом стала настройка сертификатов и ключей для подписи приложений. Важно помнить, что структура Flutter-проекта включает папки Android и iOS с метаданными — фактически, это отдельные проекты, которые можно открывать в Android Studio или Xcode, но основная работа ведется на уровне кода Flutter.

Прохождение модерации

Первая попытка релиза в App Store закончилась отклонением из-за «рекламы конкурентов» — на одном из скриншотов присутствовала иконка Android. Мне пришлось удалить её, хотя в контексте игры это было вполне логично.

Этот опыт заставляет думать, что Apple использует автоматизированные системы анализа изображений.

Итоги

Геймдев — это увлекательный и познавательный процесс.
Первая публикация — серьезный бюрократический этап.
Четкое проектирование на старте помогло избежать глобальных переделок в ходе разработки.
Flutter отлично подходит для таких проектов: ресурсов фреймворка более чем достаточно.
Чтобы избежать проблем с производительностью, важно не перегружать event loop — выносите тяжелые вычисления в отдельные потоки.
Работа с векторной анимацией (Lottie + Python) — тема для отдельной глубокой статьи.

To be continued

Игра жила своей жизнью, пока коллеги не предложили адаптировать её для стенда Авито на конференции Code Fest 2025. О новом дизайне, веб-лидерборде и том, как прошла активность — в следующей статье!