Желаю игре хороших продаж, положительных отзывов, а моим бывшим сокомандникам - наконец-то отдохнуть.

Или же 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

Сапёр с инструментами это браузерная мультиплатформенна игра, что накладывает некоторые ограничения на доступные способы ввода:

- курсор как игровой элемент недоступен на мобильных устройствах

- правая кнопка мыши недоступна на мобильных устройствах

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

- клавиатура недоступна на мобильных устройствах, а виртуальная клавиатура (или кнопки управления) съедают довольно много места (в Phaser 3 её ещё и писать с ноля придётся)

- правая кнопка мыши может конфликтовать с "жестами мышью" в некоторых браузерах и расширениях на ПК

- средняя кнопка мыши доступна далеко не на всех ПК (устройства Apple не имеют такого функционала в принципе, тачпады ноутбуков как правило требуют нажатия несколькими пальцами и очень неточны)

- автоматически определить, какая схема управления оптимальна для устройства, в общем случае невозможно (например, ноут с сенсорным экраном или смарт с мышкой - да-да, и такое бывает) - необходимо либо делать под всё сразу, либо дать возможность выбрать схему управления, при этом явно обозначить такую возможность

- игра очень похожа на уже существующую и известную, а потому важно явно и ненавязчиво сообщить об отличиях (новых доступных функциях) - мало кто станет смотреть туториал или лезть в справку по Сапёру.

Начальная схема управления учитывает все эти ограничения (на самом деле это уже третья итерация, но именно она вышла в первый релиз):

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

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

- клик по меню вызывает нужное действие (персонаж подойдёт к ячейке по максимально безопасному пути)

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

Главный минус такой схемы в том, что частое действие - пройти в неизвестную клетку - становится неудобным и требует 2 клика в разные места экрана (сначала меню на клетке, потом кнопка на уровне соседней клетки)

Долго думал как улучшить существующую схему управления не потеряв её достоинств и устранив недостатки и решил:

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

- добавить жесты для установки флага - необходимо для сенсорных экранов из-за отсутствия альтернативного меню

В итоге управление теперь такое:

- ЛКМ / нажатие - открывается меню, где под курсором действие "идти"

- ПКМ - открывается меню, где под курсором действие "поставить флаг"

- жест в виде прямой линии через клетку - поставить флаг (работает и с мышью)

- соответственно двойной клик ЛКМ / двойное нажатие - пойти в клетку, двойной клик ПКМ - поставить флаг

Всё равно не самая оптимальная схема с точки зрения пользователя, но если учитывать затраты на разработку...

Полный список исправлений:

- поправлена отрисовка цифр - контур сделан отдельным слоем, который всегда (почти) рисуется поверх картинки для большей контрастности

- увеличена контрастность меню действий, отдельные действия теперь имеют свой цвет

- увеличена контрастность неразведанных ячеек, особенно при перекрытии объектами - туман рисуется поверх всех объектов, теперь деревья не скрывают важную информацию

- добавлено отображение пути от протагониста до курсора, а также пути, по которому происходит текущее движение

- добавлена возможность посмотреть поле после окончания игры

- поправлены баги с установкой флагов и вопросов

- улучшена генерация мин

- на 30% увеличена скорость движения персонажа

- немного изменены размеры и положение кнопок выбора действия (проще попасть, сложнее промазать)

- поддержка жестов и длинного нажатия для устройств с сенсорным вводом

- поддержка правой кнопки мыши

Ссылки

1. Игрушку можно заценить на https://gamruls.itch.io/minesweeper-with-tools (версия с окном побольше https://itch.io/embed-upload/6350431?color=605948)

Буду рад обратной связи.

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

- это "Сапёр с инструментами" и в нём нет проблемы 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

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