Phaser

Или же Emoji Survivors. Недавно писал про результаты полутора месяцев в Яндекс Играх и пока они копились успел немного поработать над следующей игрушкой. Опять же продолжается тема вкатывания в геймдев. Яндекс Игры пока всего-лишь платформа для тестов, чего-то серьезного разрабатывать и выкладывать не планирую, набиваю руку так сказать.

Ну штош. В этот раз захотелось сделать игру из еще одного жанра который мне нравится. Аналог Vampire Survivors. У этой игры уже появилось очень много различных клонов, разного уровня проработки, 2D и 3D, мобильные и десктопные, и еще куча различных комбинаций.

Для начала решил поковыряться в 2D движках для JS. Когда-то был небольшой опыт с pixi.js, но я еще слышал про Phaser. Почитав различные англоязычные сравнения было выявлено что свои плюсы и минусы есть у обоих движков, но Phaser полегче для новичков. На нем и остановился.

Из плагинов добавил Rex UI чтобы было полегче мастерить менюшки и прочие UI'ные элементы. Долго пришлось разбираться как это всё дело правильно масштабировать для разных экранов, но наконец получилось сделать нормальный вариант, который прошел модерацию. Изначально выявились баги на некоторых разрешениях что меню обрезалось, элементы UI улетали за экран. Теперь всё ок. Если вдруг что-то найдете, вы знаете куда писать.

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

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

В игре есть несколько различных персонажей, изначально доступно 2, следующие открываются при добыче монет. Механика аналогичная вампирам, убиваешь монстров, получаешь опыт и иногда различные ништяки. Есть потенциал для усложнения механик, но решил пока выпустить MVP версию для проверки. Всё таки клонов и на Яндекс Играх полно.

Монетизация простая: стики баннеры, rewarded реклама за получение 5 монет и воскрешение.

Игра только вышла, поэтому никакой статистики нет, но как только появится поспешу поделиться, самому интересно как получится.

Собственно сама игра на Яндекс Играх https://yandex.ru/games/app/243190

Основные фичи:

- это "Сапёр с инструментами" и в нём нет проблемы 50/50 и нерешаемых ситуаций

- можно вообще не решать головоломку с цифрами, а просто тыкать в мышь/экран и выигрывать

- появился человек-протагонист, и это не просто смайлик (хоть и проработан он примерно на том же уровне)

- работает в браузере на любых устройствах. Управление специально упрощено - достаточно левой кнопки мыши / тача.

Сделано с целью быть играбельным.

Техническая информация:

- Объём скачиваемых файлов для игры: около 12МБ (зависит от платформы)

- Количество строк кода: около 8 тысяч

- Общий объём ассетов (картинки, звуки, конфиги и т.п.): 20МБ

- Количество коммитов в git: около 220

- Количество карточек в Trello (идеи, задачи, баги): около 180

- Основные технологии: JavaScript, Phaser 3, React, SASS, Webpack

- Финансовые затраты: отсутствуют

Углубляться в код или рутинные операции не вижу смысла. Хочу отметить некоторые неочевидные технические нюансы:

- Для людей с цветовой слепотой (около 8% мужчин, кстати) потребовались некоторые фичи. Так как цвета в игре передают важную информацию, пришлось добавить белый контур к некоторым элементам, которые иначе становятся просто невидимыми.

- 2D изометрическая графика состоит из хаков и ухищрений. Добиться быстрой и корректной картинки с анимациями и перекрытием объектов в проекции - нетривиальная задача в общем случае.

- Чтобы игра не жрала ресурсы в простое и работала нормально на мобилках пришлось отказаться от WebGL и переписать рендер со встроенной в Phaser имплементации TileMap на свою реализацию на базе RenderTexture - по сути формировать спрайты в памяти вручную и самому их обновлять.

- Не бывает идеальных инструментов и фреймворков, поэтому при дебаге и обходе багов очень помогает доступ к исходникам. Исходники Phaser, кажется, я читал даже больше, чем свои.

- 2D арт очень удобно делать через 3D. При рендере под нужным углом и с низким разрешением модель допускает некоторую всратость, которая не повлияет на результат. Я использовал Blender, для него есть много плагинов для генерации моделей (например MakeHuman). Рендер можно автоматизировать и генерировать все нужные положения камеры, фреймы анимации и атласы.

- Пиксель-арт относительно просто рисуется, но плохо масштабируется. Если нужна поддержка разных разрешений и разных DPI, то придётся рисовать много картинок, т.к. ни из большой в малую (что не так уж и очевидно), ни из малой в большую отскейлить без шакалов не получится. С 3D проще, рендер модели даже в разрешении 32x32 даёт приемлемое изображение. Пример зашакаливания ручного арта:

Разработка игр на Phaser это весело говорили они!

Ссылки:

Страница игры на Itch: https://gamruls.itch.io/minesweeper-with-tools (есть версия с окном побольше)

Буду рад ответить на вопросы, а также получить обратную связь.

UPD

Небольшое видео с геймплеем, без звука

Делал я ее долгих 4 с хвостом года, после работы, правда делал я не ее, но это совсем другая история. Когда-то я тут писал пару статей про нее, но потом перекочевал на более профильный ресурс.

Игра представляет собой классическую сетевую сессионку в Sci-Fi сеттинге, где 2 команды игроков должны убить друг друга или захватить точки катясь на танках с видом сверху.

Трейлер:

Пара скринов:

Немного ворчания

На самом деле эта игра является куском ММОРПГ по геймплею напоминающую смесь eve online и механоидов с видом сверху, которая когда-нибудь наверно выйдет, но мне чет так надоело ковырять все без какого либо результата, что решил вырезать боевую систему и зарелизить как отдельную игру.

У этой игры был тайный план залететь в раздел игр вк и набрать какую то стартовую аудиторию, в итоге в маркет я попал, но мою игру не добавили в раздел “новые” и на текущий момент за 3+ дня там 50 установок и 1 активный игрок который целыми днями рубится с ботами и пишет мне о найденных багах за что я ему благодарен. :) По моим прикидкам вк мне принес 3-5 новых установок из маркета остальное это друзья, друзья друзей и чатики.

Но главное, что даже на такой маленькой аудитории я смог протестировать работу игры, и ожидаемо вылезли проблемы, большая часть из них вроде уже ушла. А некоторые еще остались (но про них еще никто не сообщал, но они есть).

Сейчас я прикупил рекламы у вк может кто еще придет, но за 60к+ показов 0 кликов, я так себе маркетолог ¯\_(ツ)_/¯. Думаю закинуть игру еще в другие социалки ну и продолжу делать дальше свою ММО. Если появится аудитория, то можно будет развивать параллельно и этот проект, рейтинговые бои, пве/кооп режимы и все такое.

Сама игра реализована частично на своем движке:

- бекенд полностью написал с нуля на golang, там происходят все что происходит в игре (коллизии, ии, баллистика и тд)

- в роли клиента выступает игровой движок для HTML5 phaser3.5+ и VUE для интерфейсов. Клиент выступает в роли “терминала” куда выводится изображения никакой логики предсказания или компенсации лагов не предусмотрело, но игра не быстрая и вроде с этим проблем нет

Буду рад за отзывы

Как-то раз, проснувшись тихим весенним утром, в мою буйную головушку ворвалась гениальная мысль, посещавшая тысячи людей до меня - а почему бы мне не написать игру?

На тот момент я уже несколько месяцев работал программистом после годового самообучения, но программировать умел, конечно, гомнокод и только на PHP и JS. Посмотрев видео с ютуба, где автор на JS написал простенькую игрулю и запустил ее на телефоне с помощью AndroidStudio, я решил, что это знак свыше и главное – начать, а дальше звезды укажут мне путь. Сказано – сделано.

Суть игры.

Из нескольких вариантов, самым удачным показалась такая идея: игра представляет собой раннер, где игрок выбирает Бога, за которого будет играть. Бог над движущейся справа налево землей, на которой появляются враги, которых, собственно, нужно нещадно карать. А враги, само собой, будут стрелять в игрока. Снаряды игрок может сбивать, если попадет. С повышением уровня игрок может выбрать одну из трех появившихся способностей. Выбираются три основных способности школы из шести, которые не противоречат друг другу (огонь нельзя выбрать вместе с водой и т.д). В зависимости от выбранных школ, при дальнейшем повышении уровня будут доступны разные дополнительные способности (если школа огня, то появятся огненные стрелы, взрыв и т.п.). В конце уровня ждет босс, за убийство которого игрок получает случайную награду и продолжает лететь уже на следующий уровень. Можно открыть разные бонусы, новых богов или шкурки для них.

Начало.

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

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

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

Первые сомнения.

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

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

Я уже имел навыки в Photoshop и Adobe Illustrator, но именно рисовать – не рисовал. Так что тут тоже пришлось учиться на ходу и процесс мне нравился. Я находил идеи персонажей в интернете, обрисовывал и изменял, соединял и творил. Короче, что-то, как мне кажется. Получилось довольно неплохо, как для новичка.

Процесс рисования занял все лето, которое как-то быстро пролетело. Под конец, я начал тестировать игру на разных телефонах (до этого тестировал в эмуляторе и на парочке андройдов) и пришла беда =( На некоторых телефонах игра лагала, на некоторых не запускалась. То она неадекватно вела при сворачивании приложения, то открывалась не на весь экран. Добавить ко всему этому хреновую архитектуру игры, которая убивала мое сознание при попытке отловить какой-то баг. Короче, с приходом осени я начал учить C# и Unity.

Конец.

Сейчас, после более 40 часов разных уроков и нескольких тестовых проектиков, я планирую перенести сие творение на Unity. Надеюсь, мне хватит сил и дошиков на это. Буду благодарен за ваше мнение и спасибо за внимание =)