Кейс дизайна игры для МегаФона: пиксель-арт, ламповые 80-е и больше 2 млн уникальных игроков за полтора месяца

Искали идею, рисовали макеты и прятали котиков по окнам, — в Red Collar. Собрали лучшее, что было в СССР.

«Панельки нашего двора» — новая промо-игра от МегаФона. Рассказываем, как делали ее: от идеи до пиксельного финала с 8-битной музыкой.

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

Кейс дизайна игры для МегаФона: пиксель-арт, ламповые 80-е и больше 2 млн уникальных игроков за полтора месяца

Задача: tower bloxx и четкие сроки

Надо было придумать идею для аркадной игры с механикой tower bloxx — геймплей заключается в строительстве башни из блоков — и нарисовать до старта маркетинговых активностей. Опорными точками для поиска идеи были:

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

Поиск идеи

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

Выбрали три идеи локаций, в которых будет происходить игра, и три варианта стилизации иллюстраций этих пространств:

  • постсоветская ностальгия;
  • футуризм космической эры, колонизация планеты;
  • путешествия по странам, где уровни — разные атмосферные места, типа рисовых пагод в Китае.

Делать иллюстрации планировали в стиле сюрреализма «Розовой пантеры» — гротескная графика, плывущая геометрия — пиксельной графики или классических иллюстраций.

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

Маркетинговую задачу отклика также лучше всего может решить атмосфера советской эпохи. Есть психологический эффект «узнавания знакомого»: людям в основном нравятся уже знакомые вещи, представленные в свежей обертке.

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

Мудборды трех идей и разных стилей иллюстраций.
Мудборды трех идей и разных стилей иллюстраций.
Пример внедрения брендинга МегаФона: поиск стилизации музыкальной кассеты. Слева — варианты, справа — итог.
Пример внедрения брендинга МегаФона: поиск стилизации музыкальной кассеты. Слева — варианты, справа — итог.

Кристаллизация идеи: поиск рефов и вдохновения

Уровни игры, которых должно быть четыре, решили сделать по десятилетиям: советское и постсоветское время: 60-е, 70-е, 80-е и 90-е. Референсы искали по этим отрезкам: гуглили архитектуру, ретро-игры, знаковые культурные произведения, культовые предметы и атмосферные вещи.

У МегаФона есть маскот — Коржик. Собака породы корги, которая также должна присутствовать в игре. Чтобы персонаж был уместен в разных десятилетиях, внедрили миф о том, что Коржик путешествует во времени на автомобиле DeLorean DMC-12 из фильма «Назад в будущее».

Ларьки, первое остекление балконов, спутниковые тарелки, стереотипный красный мерседес, фотоаппарат Любитель и многое другое, — было референсом и часть можно встретить в игре.<br />
Ларьки, первое остекление балконов, спутниковые тарелки, стереотипный красный мерседес, фотоаппарат Любитель и многое другое, — было референсом и часть можно встретить в игре.
Коржика на DeLorean можно увидеть на баннере в приложении МегаФона.
Коржика на DeLorean можно увидеть на баннере в приложении МегаФона.

Пиксель-арт: умножаем пиксель на 4 и делимся гайдами

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

Пиксель-арт достаточно простой стиль иллюстрации. Однако, есть моменты, которые стоит помнить со старта работы.

Например, минимальный размер изображения 1:1 — когда это минимальный размер зерна изображения и одно зерно равно одному пикселю. Когда рисуется пиксель-арт его стоит сразу тестировать на устройстве, под которое рисуется интерфейс: десктоп, смартфон, часы и так далее.

1:1 не будет просматриваться с мобильной версии, поэтому мы увеличили арт-фон на 400 процентов. Каждый пиксель рисунка увеличивали на 4 пикселя для крупности.

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

Для тех, кто не работал с пиксельной графикой, оставляем несколько ссылок на гайды: подборка материалов на Medium, туториал по базовым вещам от Make Games With Derek и еще один от Studio Mini Boss.

Линейная перспектива и многоплановость

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

Предполагалось, что фоны будут меняться от времен года, но из-за сжатых сроков было принято решение остановиться на лете. Различие в бекграунде сделали за счет смены времени суток: 60-е — это день, 70-е — вечер, 80-е — день и 90-е — вечер.

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

Примеры фона и финальных объектов для уровня 80-х.<br />
Примеры фона и финальных объектов для уровня 80-х.

Атмосфера в детализации

Чтобы добиться атмосферы, набирали огромное количество деталей из разных эпох. С каждым десятилетием развивается скилл игрока и количество объектов в игре растет. Она становится более насыщенной и яркой.

Особого внимания заслуживает небо — оно нигде не повторяется. Его делали чрез дизеринг — специальный прием, градиент, который складывается не путем смешивания цветов, а пиксельного «шумного», неплавного перехода. Усовершенствовали этот прием и встраивали в концепцию облаков. Отличаются только 80-е: в них небо сделано через облачные слои.

Для некоторых фонов референсами служила японская мультипликация: вдохновлялись оттенками цветов и градиентами.

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

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

Селектор уровней: иллюстративность в интерфейсе

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

Отказались от этого варианта, так как иллюстрации фонов смешивались и не было нативно для пользователя, что тут есть выбор десятилетия.

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

Промежуточные и итоговый варианты селектора уровней.<br />
Промежуточные и итоговый варианты селектора уровней.

Музыкальное сопровождение

8-битная музыка — неотъемлемая часть пиксельной графики. Прослушали сотни композиций и сэмплов, из которых выбрали те, что вызвали самые сильные ностальгические настроения. Отобранные треки адаптировали под динамику игры.

Брали не классические мелодии, а стилизованные современные композиции. Поэтому можно встретить и техно-стиль, и мелодичный поп-рейв, и инопланетный ритмичный фанк.

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

Результаты

Создали концепцию и графику для четырех уровней, четырех временных отрезков игры в механике «tower bloxx»: космические 60-е, рок-н-ролльные 70-е, романтичные 80-е и технологичные 90-е. Каждый уровень со своим набором характерных черт и отсылок.

В игре можно встретить фотоаппарат Смена 8м, кассетный бумбокс, видеодвойку с VHS из 90х, шлем Гагарина, олимпийского мишку из 80х и другие культовые артефакты.

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

За полтора месяца промо-игры ее посетили более 2 млн уникальных пользователей.

Кстати, помимо игры мы успели стилизовать и главные призы: например, музыкальные колонки, часы и еще много всего. А еще делаем ряд иных интересных проектов с МегаФоном, но это уже совсем другие истории.

Кейс дизайна игры для МегаФона: пиксель-арт, ламповые 80-е и больше 2 млн уникальных игроков за полтора месяца
2222
7 комментариев

выглядит прикольно, мне понравилось , думаю многим тоже залетит

2
Ответить

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

1
Ответить

Отличные результаты, веселая игра получилась!

1
Ответить
Комментарий удалён модератором

Можно ссылки на художников и материалы?

1
Ответить

Классный кейс с атмосферной игрой :)

Ответить

Коты 9
Цветы 31
Коржик 6

Ответить