Перевели мобильное приложение с Unity на Flutter

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

Изначально приложение работало на игровом движке Unity, но со временем технология перестала отвечать задачам. Поскольку клиент уже работал с Flutter, приложение было решено перенести на новую платформу. 

Задача

Основной претензией к Unity были мелкие проблемы, которые сильно влияли на пользовательский опыт: медленный безинерционный скроллинг, замедленная анимация, пикселизация компонентов интерфейса и не нативные подсказки при взаимодействии с текстовыми полями. Unity отлично подходит для 3D-приложений, но для 2D-приложений производительность существенно уступает аналогам. Чтобы это исправить клиент решил рассмотреть возможность миграции приложения на Flutter, который команда успешно применяет при проектировании HMI-интерфейсов для электромобиля. Фреймворк обеспечивает околонативную производительность и потенциально мог решить проблему. 

Специалисты Evrone получили тестовое задание — сверстать два экрана, на которых сильнее всего ощущались неудобства пользования, на Flutter. Это чат с AI-ассистентом и список миссий. Но главным вызовом стали не сами экраны, а возможность продемонстрировать их работу. Переделать все приложение — слишком большая задача, которая выходит за рамки теста. Нам нужно было найти локальное решение, которое позволило бы построить связь между приложением Flutter и проектом Unity, не задев производительность и работоспособность всей системы. 

Наша команда нашла такое решение. Мы оттолкнулись от того, что под капотом у Flutter и Unity нативное приложение, в котором запускается фреймворк и отрисовывает нужные элементы. Поэтому мы создали мост на нативных языках, через который можно осуществить вызов Flutter-экранов из Unity приложения или передавать данные между ними. У такого подхода есть ограничения, но для нашей задачи он подошел идеально. 

Реализация

Производительность Flutter устроила клиента, поэтому решено было полностью перенести разработку игры на эту технологию, постепенно заменяя экран за экраном. На Unity должен остаться только 3D-аватар пользователя и виртуальная карта города. 

Из-за того, что переход происходит постепенно, не получается полноценно использовать одно из главных преимуществ Flutter-приложений — Hot Reload. Эта функция позволяет моментально тестировать изменения в коде, и смотреть как работает программа с ними. Hot Reload получается использовать только внутри Flutter-экранов, например, для смены верстки. 

Когда изменения влияют на флоу или касаются взаимодействия с платформой, например, затрагивают авторизацию или загрузку фото из галереи, процесс сильно усложняется. Сначала нужно собрать Flutter-модули, подтянуть их в Unity-проект, собрать приложение, запустить и только затем проверить. 

Flutter полностью рендерит UI, позволяет контролировать каждый пиксель на экране, поэтому он открывает почти неограниченные возможности для дизайна. С векторной графикой он прекрасно работает с помощью дополнительных библиотек. Flutter очень хорошо себя показывает в рендеринге сложных эффектов, таких как градиенты и блюр, что было очень актуально в случае игрового UX. В Unity верстка ограничена, он не поддерживает рендеринг векторной графики, была заметна пикселизация элементов UI. Сложные элементы макетов экспортировались в виде изображений из Figma. 

Сейчас все новые экраны проектируются под Flutter и c точки зрения дизайна. Дизайн приложения универсален для Android и iOS, Flutter дает возможность кастомизировать некоторые элементы интерфейса типа всплывающих окон и уведомлений. Два набора виджетов Material Design для Android и Cupertino для iOS, позволяют оформить их в стиле, привычном пользователям каждой из платформ. Достаточно просто объявить adaptive-компонент, и все произойдет автоматически. 

Помимо переноса уже существующих экранов, специалисты Evrone разрабатывают и полностью новые флоу. Так, в приложении периодически проходят ивенты, мы создаем новые страницы для них и также делаем новые элементы для основного приложения. 

Планы

Главная задача нашей команды на этом проекте — перенести все приложение на Flutter, оставив лишь интеграции с Unity для 3D-аватара и виртуальной карты города. Мы работаем над этим с командой клиента. В ближайших планах оптимизировать запуск Flutter-экранов: сейчас под каждый новый экран создается класс Flutter Engine, мы планируем закешировать его один раз при запуске и затем обращаться в кэш. 

В приложении планируется редизайн текущего флоу миссий. Постепенно обновляется дизайн, по цветовым решениям и шрифтам он становится ближе к брендингу Атома.

Наша команда готова подключиться и к вашему проекту. Мы поможем с миграцией и созданием кроссплатформенной игры на Flutter. Заполните форму, чтобы связаться с нами и обсудить ваш проект!