Решение
Мы решили реализовать проект на Unity с использованием технологии WebGL, чтобы игру можно было запускать прямо в браузере без установки. Это позволило максимально упростить развёртывание на мероприятиях, где всё должно работать «из коробки» и не требовать установки ПО.
Игровой процесс представлял собой поиск объектов на детализированной карте города. Чтобы картинка «ожила», мы добавили анимацию: по городу ездили машины, двигались люди, плавали лодки. Перед пользователям стояла задача по поиску вывесок с логотипами бизнеса в городе. В случае, если пользователь долгое время не мог найти нужный логотип — мы предусмотрели подсказки в виде стрелок или визуальных эффектов-бликов, упрощающих поиск.
Этапы работ
1. Исследование подходов к визуализации и оптимизация под WebGL
Сначала нужно было разобраться каким образом лучше всего увеличить и каким должно быть целевое разрешение картинки.
Так же стоял вопрос, как наилучшим образом перенести большое по размеру и детализации изображение города в веб-приложение, чтобы оно не было слишком большим по размеру. Рассматривали два варианта: использовать векторную графику и растровую. Вектор выглядел логичным для масштабирования, сохраняя детализацию на любом уровне зума, но Unity плохо "переваривает" сложную векторную графику, к тому же на векторе терялись важные детали, полутона переходов и и градиенты. Поэтому мы остановились на растровой графике.
Дополнительно продумали оптимизацию под возможный мобильный запуск в будущем — заранее заложили возможность подгрузки упрощённых версий графики, чтобы не произошло переполнения памяти устройств и вылет браузера.
2. Подготовка графики и создание ассетов
Мы определили нужное разрешение финальной карты под 4K-дисплеи сенсорных столов. Не забываем, что оно ещё должно и зуммироваться. При этом на максимальном приближении картинка все так же должна выглядеть хорошо. Художники перерисовали исходный арт в нужном качестве, а местами мы использовали нейросети для ускорения работы и детализации отдельных элементов. Создали анимированные объекты (автомобили, лодки, персонажи), которые должны были наполнить город жизнью.
3. Реализация анимаций и интерактивных элементов
Для анимаций мы выбрали Spine, потому что он позволяет делать более сложные и плавные 2D-анимации с псевдо-3D-эффектами, чего нельзя было добиться встроенными средствами Unity. Это позволило оживить сцену: объекты двигались естественнее, выглядели более объемными и реалистичными (насколько реалистичными могут быть мультяшки, конечно же).
Также сверстали интерфейсы, учтя разные соотношения сторон экранов (16:9, 4:3, 16:10), добавили систему подсказок и логику автоматического перезапуска при простое, снимая нагрузку с волнтеров.
4. Интеграция с серверной частью и развёртывание
Первоначально рассматривали размещение на поддомене банка, но в итоге было принято решение выделить отдельный домен, где мы и развернули приложение. Приобрели SSL‑сертификаты, чтобы обеспечить защищённую работу через браузер. Развернули приложение на VPS-сервере. Благодаря использованию веб-приложения оно стало доступно на любых устройствах и из любой локации, где есть интернет. Кстати, благодаря изначальному исследованию перед работой с большим количеством графики - размер приложения удалось ограничить 50 мегабайтами на диске.
Результат
В итоге получилась яркая и живая браузерная игра, которая запустилась на сенсорных столах без установки. Пользователи вовлечённо искали объекты в виртуальном городе, а сотрудники банка собирали данные для дальнейшего взаимодействия с гостями. Проект стал отличным инструментом для привлечения и развлечения посетителей на мероприятиях.
Наш комментарий по проекту
Это был интересный кейс именно с точки зрения поиска оптимального решения по интеграции большого количества 2D-арта в веб-приложение. Важным вызовом стало соблюдение баланса между красотой картинки и техническими ограничениями WebGL. Мы протестировали разные подходы, отказались от вектора в пользу растра ради сохранения визуальной насыщенности. Отдельно рекомендую использовать Spine для анимации персонажей и сложных объектов — она действительно дала городу жизнь.
КОНТАКТНАЯ ИНФОРМАЦИЯ
