Мы сделали пиксель-арт игру про футбол и хотим об этом рассказать. Опыт креативной студии Sports.ru
Мы – креативная студия «Сирена» из Sports.ru (делаем спецпроекты – тексты, тесты, игры и перфомансы).
Разработка игр – не наш основной профиль, но мы попробовали сделать масштабный по нашим меркам интерактивный проект и хотим рассказать о рабочем процессе.
Matchday – это пиксельная игра, в которой можно вывести на поле 3275 игроков из топ-5 лиг Европы (Англия, Италия, Германия, Испания, Франция) и России. Над игрой в течение 3 месяцев работала небольшая команда: один проджект-менеджер, два разработчика, дизайнер, художник (аутсорс), редактор и маркетолог.
Мы уже делали проект, где нужно вспоминать клубы – нам так понравилось, что решили делать вторую часть
Мы это поняли, еще когда делали другой интерактивный проект – «Сколько клубов ты знаешь?» Задача пользователя – зайти на лендинг и вспомнить как можно больше клубов из высших лиг всей Европы. В проекте есть даже небольшой мета-геймплей: можно не просто вбивать по памяти клубы, но и собирать интересные комбо: 🍝 Папа Карло (клубы, которые тренировал Карло Анчелотти) или ❄ Славянский базар (10 лучших клубов Восточной Европы в рейтинге УЕФА).
Но мы отвлеклись. Суть в том, что нашим коллегам и читателям очень понравилась механика, сводящая олдскулы; они проводили много времени на лендинге – на пользователя приходилось почти по 30 минут.
Появилась идея делать вторую часть, но не хотелось повторяться. И в этот раз мы решили повзаимодействовать не с клубами, а с игроками.
Нашим основным референсом стала игра Despotism 3k, а первым визуальным – старый мультик на YouTube с карикатурными человечками.
Мы взяли этот стиль за основу, потому что он очень простой. Но поняли, что пришлось бы очень много рисовать и выходить за рамки бюджета – поэтому посоветовались со знакомыми художниками и пришли к варианту с пиксельными человечками 16х22.
Механика игры: пользователь вводит игрока, и тот должен появиться на стадионе. Когда мы работали с первым художником (Леня Коробка), на макетах было только поле и трибуны.
Потом мы обратились к художнику Степе Воищеву (Gregor_Mack) – и он предложил разнообразить окружение: чтобы появилась парковка, по дороге могли ездить автобусы и машины, чтобы их было много. Какие-то вещи мы максимально упрощали, так как боялись не успеть из-за сроков и использовали на проекте технологии, на которых до этого ничего не писали.
А теперь подробнее про игру. Начнем с визуала
Пиксель-арт и футбол – вещи, не совсем чужие друг другу. Например, есть классный художник, который изображает звездных футболистов в стилистике 8bit.
Перед командой стояла сложная задача – отрисовать 3275 пиксельных спрайтов-футболистов, которые должны хоть как-то визуально отличаться друг от друга.
По механике на поле должен выбегать именно тот игрок, которого ты ввел. Поэтому мы почти сразу придумали делать по частям: сначала рисуем разные части тела, а потом генерируем футболистов внутри кода. Это в разы упростило нам задачу, потому что в игре 3500 игроков. Проще было кому-то по ним пробежаться и рассказать, из каких частей кто из них состоит, чем рисовать отдельно вообще все.
Как уже сказали чуть выше, на первых игровых макетах был только стадион. На этом этапе с командой работал пиксель-арт художник Леня 📦. В какой-то момент художник понял, что ему не хватает знаний и опыта в спортивной тематике, поэтому дальше мы сотрудничали со Степой Воищевым (Gregor_Mack).
Когда к команде присоединился Степа, на макеты добавили окружение: палатку с хот-догами и атрибутикой, парковку, проезжую часть с автобусами и машинами.
Выше написали о проблеме – сложно отрисовать 3275 персонажей в ограниченные сроки. Поэтому мы разбили их на три основных параметра – цвет кожи, прическа и цвет формы – и собирали в коде как в конструкторе. У болельщиков тоже появились свои скины и набор телодвижений.
Так разные спрайты выглядят на макетах.
Про общие визуальные решения в проекте рассказал художник Степа Воищев.
По поводу референсов – изометрические панорамы я брал отсюда, очень понравились. Изначально мне показали скетч с человечками, которые похожи на персонажей из Despotism, поэтому придерживались того, что персонажи должны быть простыми и аляповатыми. Пропорции у нас собственные, чтобы майки и шорты смотрелись органично.
Контент: используем базу статистики на Sports.ru
Таблица с контентом – самый страшный документ проекта. Туда мы сгрузили всю базу Sports.ru c игроками топ-6 европейских лиг и присвоили им необходимые теги: лиги, имена, прозвища (особенно актуально для бразильцев).
И теперь возвращаемся к тому, что в игре 3275 персонажей и у них есть индивидуальные характеристики: прически, цвет формы, цвет кожи. И эти теги игрокам вручную в табличке присваивали редакторы Sports.ru – три человека потратили на это примерно неделю.
После этого пришлось много раз тестировать игру – было видно, что редакторы в какой-то момент сильно устали и немного косячили: например, у Игоря Акинфеева появилась прическа в стиле афро, а темнокожие в реальной жизни игроки превратились в спрайтов с кожей светлого оттенка.
Мы делали как очевидные варианты (вспоминать пятерки футболистов из топовых клубов), так и посложнее – например, вратари, пропускавшие от Месси, или футболисты, которые побеждали на Евро. Более сложные ачивки тоже делались при помощи таблички – туда заносили новые теги, которые потом обрабатывались в коде.
Была идея сделать миссии вместо ачивок – чтобы пользователь, например, мог пройти мини-игру в роли продавца хот-догов или попробовать припарковаться у стадиона при помощи стрелочек или WASD. Нам не хватило на это времени, которое мы решили потратить на шлифовку существующих элементов.
Попробовали новый движок. А еще хотим перевести игру на английский
Три месяца на такой проект – это не так много, как кажется. При этом хотелось сделать красивый, удобный и адаптивный лендинг с игрой. Хотели наконец попробовать движок Unity, но он хорошо интегрируется в айфрейм на странице, для отдельного лендинга нужны более браузерные решения.
Мы гуглили и случайно наткнулись на движок Phaser. Почитали документацию, а там все примеры касаются пиксель-арта – как раз то, что мы знаем и умеем.
Показалось, что это идеальный вариант, хотя потом появились подводные камни – например, была проблема с адаптивом. Второй разработчик Макс предложил решение, которое устранило баг.
Уникальность кейса затрудняла дело: нужно было, чтобы камера адаптивилась и не вылетала за разрешенную часть экрана – игровое поле.
Мы брали одно готовое решение – и, оп, окружение заадаптивилось, но камера вылетает. Пробуем другое решение – камера не вылетает, но все растянуто и некрасиво. Пришлось пошаманить, чтобы все заработало
Скоро появится англоязычная версия игры – планируем адаптировать контент для болельщиков из Европы, а также показать ее на Reddit и представить как шоукейс в сообществе разработчиков Phaser.
Технически локализация выглядит легко – это будет не переключалка, а отдельный билд со всеми переведенными текстами.
Пострелиз: немного статистики про Matchday и игроков (не футболистов!)
• Каждый пользователь вбивает в среднем 45 фамилий и проводит в игре около 15 минут
• Среди самых часто называемых игроков – Роналду и Месси (60 и 58 тысяч), Дзюба, Неймар, Мбаппе и Левандовски (у всех от 26 до 38 тысяч). Среди российских игроков помимо Артема часто называют Акинфеева, Миранчука и Головина.
• Чаще всего пользователи открывают достижение «Солдаты Зидана» (пять игроков, побеждавших в ЛЧ), «Солдаты Эмери» (то же самое, но для ЛЕ) и «Короли мира» (пять чемпионов мира)
• А еще среди пользователей Sports.ru установлен рекорд – 3127 введенных футболистов!
***
Ждем ваших комментариев – попробуем ответить на все!
Комментарий недоступен
Комментарий недоступен
ты че под боярышником, глаза разуй где этот пост
Ссылку мы прошили сами для себя – любопытно, как отреагирует на пост незнакомая для нас аудитория (:
Публиковались в разделе "Игры", но, по правилам сайта, рассказывать о своих проектах действительно правильнее здесь (и на статус инди не претендуем!)
Футбол? о_О
Не, спасибо.
Спортсру? о_О
Не, спасибо.
А так? )