О проекте

Клиент

«СТС» — один из главных развлекательных и молодёжных телеканалов страны. В их программе: комедийные сериалы, юмористические шоу, фильмы и мультфильмы.

В апреле 2024 года на канале вышла новая 17-серийная комедия «Цирк!». В съёмках приняли участие знаменитые дрессировщики — Эдгар и Аскольд Запашные. По сюжету три молодых человека попадают в мир цирка, где оказываются в разных забавных и трудных ситуациях.

Задача

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

Цели проекта

Особенности проекта

Проект нужно было выполнить в сжатые сроки — за три недели. Чтобы заранее проанонсировать выход сериала.
За это время нужно было разработать ТЗ, подготовить дизайн, разработать игру, протестировать её и запустить.

Взаимодействие с клиентом

Совместно с командой «СТС» продумали концепцию, будущие механики и технические возможности.

Разработка была на нашей стороне, дизайн — на стороне клиента. А над ТЗ работали вместе. Мы и команда «СТС» много времени проводили на встречах, на которых детально обсуждали концепцию игры, её механики и уровни. Тестировали игру на коллегах, отрабатывали обратную связь и вносили изменения.

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

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

Суть и механика игры

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

Суть игры в том, чтобы накормить разных животных в цирке. Всего их четыре: крокодил, слон, обезьяна и собака. Каждое животное — это отдельный уровень.

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

В каждом уровне свои
препятствия

Когда игрок попадает едой в рот животному, заполняется шкала сытости. Сытый зверь показывает «класс», и игрок переходит на следующий уровень. А вот голодное показывает палец вниз и уровень нужно пройти заново.

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

Разработка и стек: технические детали

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

Для этого проекта написали свой игровой движок — работали с физическими законами и математикой. Такой подход позволил нам реализовать собственные игровые механики на основе взаимодействий между фигурами и объектами.

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

Технологии

Игровой движок

Движок отвечает за отображение игрового поля, персонажей и объектов, а также расчёты движений и взаимодействий в игре. Он создаёт события, которые передавались во Vue.js, а Vue.js реагировал на эти события. Например, когда движок сообщал, что животное съело еду, Vue.js увеличивал показатель его сытости. А если животное сталкивалось с препятствием, то на таймере добавлялось время.

Анимация

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

Регистрация

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

Павел Кузнецов,
фронтенд-разработчик
Wemakefab

Обычно гироскоп используется для простых действий — наклон телефона для перемещения объектов по экрану. Но использовать его для игры — это редкость, особенно в краткосрочных промо-проектах. Мы объединили механику гироскопа, а также Vue.js — получилось необычно. Вся механика игры реализована на Vue.js, а бизнес-логика, включая обработку игровых событий и отрисовку спрайтов, осуществлялась через самописный игровой движок на основе библиотеки Matter.js

Результат

Реализовали игру за три недели и уложились в сжатые сроки. Команда «СТС» смогла провести полноценную промо-кампанию к новому сериалу.

Клиент получил не просто промо-сайт, а полноценную игру — с уровнями, логикой взаимодействия с пользователем, онбордингом и правилами. Команда «СТС» использовала её как дополнительный способ привлечения внимания зрителей к сериалу.

Результаты в цифрах