Миграция мобильного приложения Protone с Unity на Flutter без остановки разработки

1. Вводная задача от заказчика, проблематика, цели

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

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

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

• медленный и неинерционный скроллинг;
• замедленная работа анимаций;
• пикселизация отдельных элементов интерфейса;
• неестественное поведение подсказок при работе с текстовыми полями;
• ограничения Unity при создании сложных 2D-интерфейсов.

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

Flutter уже использовался командой клиента в других проектах, в том числе при создании HMI-интерфейсов для электромобиля. Фреймворк обеспечивал близкую к нативной производительность и давал больше возможностей для создания современного пользовательского интерфейса.

Перед Evrone поставили тестовую задачу: перенести на Flutter два наиболее проблемных экрана — чат с AI-ассистентом и список миссий. При этом команде было важно проверить не только качество самих интерфейсов, но и возможность интегрировать Flutter в существующее Unity-приложение.

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

Фронтенд для электромобиля будущего

Аутсорсинг

Мобильная разработка

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Команда Evrone начала с анализа архитектуры Flutter и Unity. Оба решения работают внутри нативного мобильного приложения, поэтому специалисты Evrone использовали этот общий уровень как основу для интеграции.

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

Такой подход позволил Evrone отказаться от рискованной одномоментной миграции и перейти к поэтапной замене интерфейса.

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

Поэтапная миграция потребовала изменить привычный процесс разработки.

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

• собрать Flutter-модули;
• интегрировать их в Unity-проект;
• собрать мобильное приложение;
• запустить приложение;
• проверить взаимодействие между технологиями.

При этом Flutter дал команде Evrone гораздо больше свободы при создании интерфейсов. Фреймворк полностью отвечает за рендеринг UI и позволяет детально контролировать отображение элементов. Благодаря этому специалисты Evrone смогли отказаться от части ограничений Unity и улучшить работу с векторной графикой, градиентами, блюром и другими сложными визуальными эффектами.

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

Evrone также учитывает особенности двух мобильных платформ. Дизайн приложения создается с расчетом на Android и iOS, а Flutter позволяет адаптировать отдельные элементы интерфейса под привычные паттерны каждой операционной системы.

Для этого команда использует готовые наборы компонентов Material Design и Cupertino. При необходимости разработчики Evrone могут объявить компонент адаптивным, чтобы приложение автоматически выбирало подходящий вариант отображения для конкретной платформы.

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

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

Стартапы

Frontend

Backend

3. Результаты сотрудничества

В результате работы Evrone и команды Атом получили возможность постепенно модернизировать Protone App без необходимости одномоментно переписывать весь продукт.

Основные результаты проекта:

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

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

Отдельное направление дальнейшей оптимизации — ускорение запуска Flutter-экранов. Сейчас для каждого нового экрана создается отдельный экземпляр Flutter Engine. Команда Evrone планирует инициализировать и кэшировать движок при запуске приложения, чтобы затем повторно использовать его и сократить время открытия экранов.

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

iOS-разработка

Android-разработка

Flutter