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

Хорошо, но почему?

Идея родилась, когда я добавил Konami Code на свой веб-сайт, в результате чего исходный код Matrix отображается на заднем плане веб-сайта (попробуйте сейчас), что, хотя и супер круто, я подумал, что было бы еще круче сделать Код Konami открывает игру или что-то в этом роде, и, поскольку у меня уже есть 2-летний опыт работы с Phaser, я решил сделать глупую игру просто как MVP.

Примерно в те же дни я узнал о подключаемом модуле Phaser для движка сетки, который настолько упрощает создание нисходящей ролевой игры, что я решил сделать игру с ним, а также потому, что мой первый программирование восходит к 2002 году, когда я создавал именно такие игры с помощью RPG Maker.

С тех пор проект стал немного более амбициозным, и я подумал: «А что, если я покажу сообщения блога в игре?», Все данные блога в любом случае доступны в React через GraphQL, так что это не должно быть слишком сложно. .

Использование React в качестве пользовательского интерфейса для Phaser

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

Самый простой способ использовать Phaser с React - использовать функциональный компонент, подобный приведенному ниже.

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

Лучше всего это сделать с помощью какого-нибудь инструмента управления состоянием, такого как Flux, но поскольку это всего лишь очень маленький проект, отправка событий JavaScript пока будет работать. Посмотрите на пример ниже, как это сделать:

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

Интеграция Phaser с Gatsby

Gatsby - это генератор статических сайтов, работающий на React, но Phaser - это только клиентский пакет (я имею в виду, конечно, зачем вам Phaser в бэкэнде?), Поэтому всякий раз, когда Gatsby создавал мою страницу игры, я получал ошибки SSR, потому что Phaser пытался получить доступ только к API на стороне клиента.

Чтобы решить эту проблему, я использовал ловушку React useEffect для динамического импорта всех моих модулей, связанных с Phaser, поскольку useEffect выполняется только на стороне клиента.

Создание карты

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

tileset, который я использую для своей карты, - это Zelda-подобный набор тайлов, созданный ArMM1998, который включает внутренние и внешние тайлсеты.

Сначала я создам tileset на плитке и установлю свойство с именем ge_collide на true на всех плитках, на которых я хочу столкнуться с героем.

Важно создать карту с несколькими слоями, чтобы некоторые части могли быть ниже, а некоторые - выше героя.

После того, как карта будет готова, Я вставлю набор тайлов в карту, ​​а затем я могу просто импортировать карту и tileset файл в свою игру и загрузить их в Phaser.

Использование подключаемого модуля Phaser для grid-движка

Как я уже упоминал в начале поста, создать нисходящую игру в стиле RPG Maker с использованием плагина grid-engine очень просто: просто настройте свою игру на использование аркадной физики и добавьте grid-engine в качестве плагина.

Теперь я могу получить доступ к плагину через this.gridEngine внутри любой игровой сцены Phaser. Следующим шагом будет создание спрайта и его перемещение с помощью плагина grid-engine.

Этот код был в значительной степени скопирован и вставлен с их официальной страницы документации.

Как я упоминал ранее, для автоматической работы коллизий с картой, созданной на Tiled, просто добавьте свойство ge_collide, равное true, для плиток, с которыми должен столкнуться герой.

Обратите внимание, что это заставит героя двигаться и сталкиваться с объектами, но анимации ходьбы нет. Для создания новых анимаций спрайтов я буду использовать функцию this.anims.create(), а затем воспроизводить эту анимацию каждый раз, когда движок сетки сообщает мне, что игрок переместился, с событиями movementStarted, movementStopped и directionChanged, отправляемыми движком сетки.

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

Получение данных о записях от Гэтсби

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

После добавления запроса GraphQL все данные моих сообщений будут доступны через data.allMarkdownRemark.edges реквизиты.

Теперь в игре я могу отправить событие JavaScript, предлагающее React показать все мои сообщения в блоге в виде списка или чего-то подобного, а затем, когда сообщение в блоге выбрано, отобразить его в модальном интерфейсе пользовательского интерфейса материала.

Сложить все вместе

Вот как выглядит мой GamePage окончательный код:

Если вы хотите узнать больше о том, что происходит внутри GameScene, отметьте это сообщение в блоге.

Заключение

Мне очень понравилось создавать эту игру для своего блога, и, кроме того, я узнал много нового о Phaser и React. Может быть, я даже смогу использовать часть этого кода, чтобы сделать настоящую игру с видом сверху вниз: eyes :.

Специальная благодарность

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

Первоначально опубликовано на https://pablo.gg.

Больше контента на plainenglish.io