Phaser

С прошлого поста про игру на хакатон прошло чуть больше года, было не до геймдева. Всё как обычно началось с желания создать игру, игру которая бы сочетала элементы idle и менеджмента. Хотелось, чтобы игроки могли развивать свой город, но при этом не были привязаны к постоянному управлению. Так родилась концепция City States Idle.

Выбор технологий

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

Первый прототип

Первым делом был создан базовый прототип с гексагональной сеткой. Это было ключевым элементом игры, так как гексагональные плитки позволяли создавать интересные стратегические решения при планировании карты. Очень помог плагин rexBoard для создания сетки.

Система покупок и размещения

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

Система производства и доставки

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

Графика

Как обычно графика сгенерирована нейросетями, лучший помощник при разработке игр.

Система соединений

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

Инструменты

Отдельно пришлось создать редактор карт на базе самой игры и локальный сервер для обработки и хранения этих карт. Это очень сильно облегчило создание и редактирование карт.

Оптимизация и балансировка

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

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

Релиз и обновления

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

Заключение

Разработка City States Idle стала интересным проектом, который объединил элементы градостроительства и idle-геймплея. Продолжается работа над улучшением игры, основываясь на обратной связи от игроков и новых идеях для развития проекта.

City States Idle на Яндекс Играх

Обновил игру "Сапёр с инструментами". Игра описана в посте: Сапёр с инструментами - небольшая игра, где у сапёра наконец-то появился миноискатель

В двух словах - классическая головоломка сапёр с тем отличием, что в игре есть протагонист с металоискателем и сапёрным щупом.

Выложил на itch обновлённую версию, ссылка в конце поста.

Большое спасибо всем, кто попробовал игру и особенная благодарность тем, кто написал пожелания, мнения, сообщил об ошибках.

Поскольку больше всего писали про управление, давайте поговорим про него подробней.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылки

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

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

Добрый день, уважаемые читатели.

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

Идея такая: При старте уровня запускается фоновая музыка и играет на протяжении всего уровня. При соборе звезд так же будет проигрываться музыкальный файл. Таким образом наша игра станет более интерактивной и живой.

Таким образом нашей задачей будет набрать как можно больше очков и не умереть.

ПОДГОТОВКА К РАБОТЕ

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

ЗАГРУЗКА ИГРОВЫХ ФАЙЛОВ

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

затем нам нужно загрузить файлы в phaser.js что бы он мог с ними взаимодействовать, для этого в в функцию preload нужно добавить следующий код:

Как видно на изображении выше мы добавили два аудиофайла:

collect - проигрывается при сборе звездочек;

level - проигрывается в время уровня так называемая музыкальная "тема" уровня;

ПРОИГРЫВАНИЕ ЗВУКОВЫХ ФАЙЛОВ

После того как мы загрузили файлы в phaser.js, мы можем с ними взаимодействовать, для начала сделаем так что бы при старте уровня началась проигрываться музыка ( музыкальная тема/сопровождение ), для этого в функцию create нужно добавить следующий код:

на 2, 3 строке мы сохраняем ссылки на музыкальные объекты для упрощения работы с ними, на строках 5-7 мы добавляем проверку запускать проигрывание "темы" только если она остановлена, что бы избежать двойного запуска.

Также добавим озвучивание процесса сбора звездочек, для этого нам нужно добавить следующий код:

На сегодня это все в следующем уроке мы рассмотрим процесс разбиения игры на отдельные модули для структуризации кода и упрощения разработки.

Добрый день, уважаемые читатели.

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

И так поехали!

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

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

Таким образом нашей задачей будет набрать как можно больше очков и не умереть.

Подготовка к работе

для работы над проектом вам понадобится настроенный phaserjs и установленный nodejs. Все необходимые файлы доступны по ссылке.

Добавляем бомбы

Первое что нам нужно, это группа объектов для бомб и несколько коллайдеров:

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

Пока все хорошо, но нам нужно реализовать механизм сброса бомб. Для этого модифицируем функцию collectStar:

Мы используем метод countActive, чтобы узнать, сколько звезд осталось в живых. Если живых звезд нет, значит, игрок собрал их все, и нам нужно, снова включить все звезды и сбросить их положение по оси Y на ноль. Это заставит все звезды снова упасть с верхней части экрана.

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

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