🔥 Как мы сделали игру весом в 5 Мб и внедрили её в приложение Яндекс Маркета Привет! Меня зовут Миша Лардугин, я руководитель разработки веб-интерфейсов рекламы в Яндекс Маркете. Обычно моя команда делает баннеры и спецпроекты на лендингах. Но у нас давно зрела одна идея: мы хотели разработать по-настоящему живую рекламу. 🚚 Так родилась концепция мини-игры внутри приложения: пользователь едет на фирменном красном фургончике Маркета и уклоняется от других машин, а за высокие результаты получает призы. В карточках я показал, какие этапы прошла наша идея и как выглядит готовый продукт. ⏮ А здесь хочу рассказать, как мы выбирали игровой движок Обычного Canvas для нашей идеи не хватило бы. Нужен был движок, который возьмёт на себя физику, коллизии и управление сценами. При этом было и строгое ограничение: мы хотели уложить код и ассеты в 5–6 Мб. Потому что игра должна загружаться мгновенно: пользователь заходит в приложение, видит баннер, тапает и сразу играет. Было три кандидата: 🟡 Unity. Это мощный инструмент, который мы хорошо знаем. Но для веба он не подходит. Unity имеет свой WebGL-плеер, который сам по себе весит около 20 Мб! К тому же его интеграция в интерфейс Маркета вряд ли была бы бесшовной. Кстати, Unreal Engine мы отмели ещё раньше: он вообще не про веб 🟡 PixiJS. Это отличный быстрый рендерер, но он представляет собой конструктор из разряда «собери сам». Нет ни встроенной физики, ни системы коллизий, ни менеджера сцен. Пришлось бы писать всё это с нуля или подключать сторонние библиотеки 🟡 Phaser. Этот вариант стал разумным компромиссом между мощностью и лёгкостью. У него из коробки есть система сцен, готовая физика, универсальный API для обработки input’а и отличная документация На Phaser мы собрали и MVP, и сам релиз. ➡️ В блоге Городских сервисов можно узнать подробности. Например, про оптимизацию игры и наши планы на будущие проекты. Подписывайтесь: 💬 @Yandex4Frontend