Да, верно, теперь есть игровая версия этого сайта. Устали перелистывать скучные страницы и читать? Как насчет того, чтобы погрузиться в путешествие по ролевой игре с видом сверху, найти сообщения в блоге и прочитать их в игре?
Хорошо, но почему?
Идея родилась, когда я добавил 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 :.
Специальная благодарность
Эта игра была бы невозможна без помощи замечательных людей и их работы, поэтому вот мой список особой благодарности.
- Фотонная буря, за создание Phaser.io.
- Annoraaq, за создание плагина grid-engine.
- ArMM1998, для спрайтов и тайлсетов персонажей.
- PixElthen, для слизистых спрайтов.
- Pixelartm, для спрайтов пиратской шляпы.
- Jkjkke для фона экрана Game Over.
- KnoblePersona, для фона экрана главного меню.
- Мин, для спрайта открытой книги.
Первоначально опубликовано на https://pablo.gg.
Больше контента на plainenglish.io