Игра-виммельбух для интерактивного сенсорного стола на мероприятии

К нам обратилось агентство с задачей создать интерактивную игру для крупного банка ВТБ. Изначально у клиента уже была готовая арт‑картинка города в низком разрешении, использовавшаяся в печатных материалах и на постерах. Требовалось превратить её в игру по поиску предметов — так называемый Виммельбух, с анимацией и оживлённой городской жизнью.

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

Мы решили реализовать проект на Unity с использованием технологии WebGL, чтобы игру можно было запускать прямо в браузере без установки. Это позволило максимально упростить развёртывание на мероприятиях, где всё должно работать «из коробки» и не требовать установки ПО.

Игровой процесс представлял собой поиск объектов на детализированной карте города. Чтобы картинка «ожила», мы добавили анимацию: по городу ездили машины, двигались люди, плавали лодки. Перед пользователям стояла задача по поиску вывесок с логотипами бизнеса в городе. В случае, если пользователь долгое время не мог найти нужный логотип — мы предусмотрели подсказки в виде стрелок или визуальных эффектов-бликов, упрощающих поиск.

Сначала нужно было разобраться каким образом лучше всего увеличить и каким должно быть целевое разрешение картинки. 

Так же стоял вопрос, как наилучшим образом перенести большое по размеру и детализации изображение города в веб-приложение, чтобы оно не было слишком большим по размеру. Рассматривали два варианта: использовать векторную графику и растровую. Вектор выглядел логичным для масштабирования, сохраняя детализацию на любом уровне зума, но Unity плохо "переваривает" сложную векторную графику, к тому же на векторе терялись важные детали, полутона переходов и и градиенты. Поэтому мы остановились на растровой графике.

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

Мы определили нужное разрешение финальной карты под 4K-дисплеи сенсорных столов. Не забываем, что оно ещё должно и зуммироваться. При этом на максимальном приближении картинка все так же должна выглядеть хорошо. Художники перерисовали исходный арт в нужном качестве, а местами мы использовали нейросети для ускорения работы и детализации отдельных элементов. Создали анимированные объекты (автомобили, лодки, персонажи), которые должны были наполнить город жизнью.

Для анимаций мы выбрали Spine, потому что он позволяет делать более сложные и плавные 2D-анимации с псевдо-3D-эффектами, чего нельзя было добиться встроенными средствами Unity. Это позволило оживить сцену: объекты двигались естественнее, выглядели более объемными и реалистичными (насколько реалистичными могут быть мультяшки, конечно же).

Также сверстали интерфейсы, учтя разные соотношения сторон экранов (16:9, 4:3, 16:10), добавили систему подсказок и логику автоматического перезапуска при простое, снимая нагрузку с волнтеров.

Первоначально рассматривали размещение на поддомене банка, но в итоге было принято решение выделить отдельный домен, где мы и развернули приложение. Приобрели SSL‑сертификаты, чтобы обеспечить защищённую работу через браузер. Развернули приложение на VPS-сервере. Благодаря использованию веб-приложения оно стало доступно на любых устройствах и из любой локации, где есть интернет. Кстати, благодаря изначальному исследованию перед работой с большим количеством графики - размер приложения удалось ограничить 50 мегабайтами на диске.

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