Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр

В конце 2023 года в We Wizards и EPSILON EPSILONобратилась компания GlowByte – крупнейший поставщик решений BI и Big Data в России. Нужно было разработать интерактивный проект, посвященный наступающему году дракона. Уже на первых созвонах мы решили, что это будет игра-таймкиллер, которая должна:

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

Мы предложили создать Endless раннер (платформер наподобие Subway Surf или Nyan cat) в 8-битной стилистике с главным героем драконом. Такие игры позволяют быстро отвлечься от рутины, заработать очки. Они нравятся всем и не очень сложны в разработке, а ретро-стиль вызывает теплую ностальгию у игроков любого возраста.

Дизайн-концепция должна была объединить символ года и атрибутику, связанную с деятельностью компании: это всякие элементы, связанные с данными (диски, диаграммы и прочее). При этом мы захотели оставить дракона в “классическом” для таких персонажей сеттинге: средневековые замки, темные леса и таинственные подземелья. Эта идея понравилась заказчику и мы приступили к работе.

Концепция

На ранних этапах мы собрали свои наработки и пожелания клиента, и картинка начала складываться:

  • формат endless runner платформер
  • стилистика пиксель-арт
  • главный герой дракон
  • collectibles (штучки, которые нужно собирать, чтобы набрать очки) – диаграммы и диски с данными
  • сеттинг (антураж, в котором пробегает герой) – средневековье

Нужно было хотя бы минимально проработать лор игры, и в этом нам помог ChatGPT. Изначальный промт был примерно такой: “Ты Толкиен, у тебя есть дракон. Нужно описать его приключение и связать с цифровым миром”. Нейросеть стала подбирать варианты, мы его направляли и корректировали, чтобы в итоге получить несложную историю, которая погружает пользователя в мир игры:

Команда

We Wizards – компания, которая родилась из цифрового бума и любви к поп-культуре, так что мы легко собрали идеальную команду под эту задачу. Это был новый для нас опыт коммерческой разработки игр, поэтому было важно, чтобы люди были по-настоящему заинтересованы и горели идеей сделать хороший продукт.

Движком занимался наш штатный фронтенд-разработчик Даня Сарабьев, который увлекается и настольными, и компьютерными играми. Шеф-дизайнером стала Саша Ермилова – заядлый геймер и художник с опытом создания дизайн-концепций мобильных игр, в том числе в стиле пиксель-арт. Еще у нас был крутейший саунд-продюсер Джон Бдоян, который написал все треки и сэмплы для игры с нуля. Проектом руководил CEO We Wizards Сергей Шилов. Ребята отлично сработались, каждый отнесся к своим задачам ответственно и с вниманием к самым мелким деталям.

Разработка игры очень отличается от разработки сайта, там совершенно другой флоу. С сайтом все понятно: пишем техническое задание, отрисовываем и согласовываем прототипы, рисуем дизайн, делаем верстку и так далее. А с чего начать разработку игры? Со сценария? Движка? Концепт-арта?

Мы не знали, за что взяться, поэтому запустили все процессы одновременно: Джон писал трек, Саша рисовала арты, а Даня на бесплатных ассетах разрабатывал и демонстрировал механику.

Даниил Сарабьев о процессе разработки

Старт работ и выбор технологий

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

Так как у меня уже был скромный опыт в разработке игр, выбрали те же технологии, а именно фреймворк Phaser 3 для JavaScript и WordPress в качестве бэкенда. Последнее решение может показаться спорным, но для нашего проекта в нем были очевидные плюсы, которые позволили закрыть вопрос с бэкендом примерно за неделю:

  • Rest API из коробки;
  • готовая система пользователей;
  • JWT auth (посредством плагина);
  • легкая кастомизация админки.

Разработка игры

Почти сразу после брифа с командой я сделал базовый прототип на бесплатных ассетах с itch.io, чтобы пощупать механику и иметь представление, с чем нужно будет работать. На этапе прототипа было частично реализовано следующее:

  • параллаксный фон, состоящий из нескольких слоев;
  • земля, по которой бежит ГГ (в дальнейшем отказались от нее);
  • рандомно появляющиеся платформы с “монетами” на них;
  • механика сбора “монет”;
  • тройной прыжок ГГ;
  • постепенно увеличивающаяся скорость игры.

Так как геймплей подобных игр однообразный, мы с командой решили делать динамически меняющееся окружение, состоящее из нескольких биомов: подземелье, лес, замок и ледяная локация. На каждом биоме были разные враги, разный фон, разные платформы, ловушки и разрушаемые предметы. Тут я сразу выявил основную задачу для себя – сделать генератор, который ставил бы платформу рандомной длины с ассетами текущего биома на игровую сцену. Поверхность пола тоже являлась этой платформой, но с отдельным контроллером, чтобы регулировать расстояния между элементами (в промежутках между платформами мы размещаем шипы).

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

После этого можно было сказать, что игра готова, но мне показалось, что геймплей все равно скучноват + полностью отсутствовал UI. На этом этапе происходили разные эксперименты с механиками, например:

  • добавили ауру вокруг главного героя, которая наносила урон во время выстрела (часто возникали ситуации, когда дракон приземлялся на врага или наоборот врезался в него снизу вверх, а так как выстрел был только в одну сторону -- это означало смерть);
  • добавили “босса-событие” (спустя какое-то количество набранных очков появляется босс, который кидается фаерболами, после убийства он появится вновь после очередного количества очков, но уже с бОльшим количеством жизней);
Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр
  • добавили подсветку для снарядов от врагов, чтобы их лучше было видно;
Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр
  • добавили пасхалку на один из биомов (попробуйте поиграть и найти ее сами!).

Пока Саша рисовала ассеты, я сделал функционал входа и регистрации, отправки данных о забеге на бэк и расчет таблицы рекордов. Хотелось побыстрее все это протестировать, поэтому я взял на себя отрисовку UI-компонентов. Понадобилось несколько кнопок с иконками, пустые кнопки разных размеров для текста и плашки для строки в таблице рейтингов. На этих компонентах мы собрали страницу с рекордами, главное меню, меню паузы, меню game over и страницу с лором игры.

Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр

Настало время добавления звуков. Я решил не держать звуковые файлы в репозитории, поэтому сделал в админке WordPress страницу для загрузки всех звуков. Это дало возможность нашему саунд-дизайнеру самому тестировать треки сразу в игре. После того, как звуки были загружены, мы добавили страницу настроек в главное меню, и на этом этапе игра была полностью готова.

Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр

Александра Ермилова о дизайне игры

Моя основная деятельность – это тату, но рисование, в особенности пиксельное, приносит нереальное удовольствие. Предложение поработать над игрой я получила летом, в основной деятельности был “не сезон”, поэтому я сразу согласилась.

Пиксели люблю всей душой, так как я, как большинство миллениалов, выросла, играя в Sega/Dendy/Nintendo. Пару раз бралась за подобное ранее, в частности, рисовала фоны для какого-то платформера и уровни для игры типа “Сапер”. Получалось круто, душевно и как-то “само по себе”.

Разработка дизайн-концепции

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

Вдохновлялась всем подряд, что в пикселях, что нет. Что должно быть в фэнтези мире, где главный герой – дракон? Слизни, скелеты, големы, призраки и прочие волшебные ребята – классика! Но обыграть хотелось весело и задорно, не копируя Pinterest.

Ход работы

«Я думала, будет весело и просто» – сказала я по итогу, но оказалось весело и не очень просто))). Сколько точно часов ушло, сказать не могу, но для меня такое количество концентрированного рисования было интересным опытом.

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

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

Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр
Dragonbyte: на страже данных. Наш первый опыт коммерческой разработки игр

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

Джон Бдоян о работе над звуком

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

Задача подразумевала создание саундтрека и звукового дизайна игры. Для музыкального сопровождения я решил написать трек в духе чиптюна, не прибегая при этом к родному для него софту – так называемым трекерам. Для аранжировки использовались сэмплы из старых компьютерных чипов (например, Commodore 64) и различные синтезаторы, их имитирующие. При работе над музыкой и саунд-дизайном я решил не ограничиваться исключительно 8-битным звуком, поэтому помимо сэмплированных чипов тут также подмешиваются звуки огня, ломания ящиков и ударов.

Поиграть можно здесь: clck.ru/38uMPB.

Будет интересно почитать о вашем опыте создания подобных проектов, послушать советы и рекомендации. Кстати, скоро запустим турнир по игре с подарками за призовые места, так что подписывайтесь на нас в телеграм в телеграме (clck.ru/38uMVw) и делитесь своими рекордами в комментариях!

Работа очень понравилась, наши ребята выложились на 200%, много элементов добавляли от себя, чтобы сделать игру более антуражной. Результат превзошел ожидания заказчика, не было ни одной серьезной правки. Опыт с Phaser был положительный, но для следующих наших проектов мы выберем более гибкий и функциональный движок (например, Unity).

Сергей Шилов, CEO We Wizards и менеджер проекта
2 комментария

Всем привет 👋 ребята вы серьёзно называете это продуктом и игрой?????? Сори конечно у меня сын в 12 лет написал получше конечно..
Пиксельарт - это треш, мы всю молодость решали как поднять качество игр а пришли к тому что разработчикам и юзерам лень и дорого, так сойдёт..
Может в силу опыта, и понимания я ни одного в проекта в пикселях не рассматрел как инвестор и не со, считаю что пиксели это конец и деградация геймдева...
Ну типо не умеем красиво, сделаем квадратики и назовём Пиксельарт.. 😂😂😂

Я что один это вижу что на Денди игры круче были чем сейчас создают и радуются этому чуду в ковычках..

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