Учебное пособие по созданию игры Phaser в вашем приложении React / Redux.

До работы с Phaser 3 все созданные мной приложения использовали React и Redux для управления интерфейсом. Когда я начал пытаться интегрировать игру Phaser 3 в одно из своих приложений, я нашел несколько полезных ресурсов. Я даже нашел статьи, в которых говорилось, что НЕ следует интегрировать React / Redux с Phaser. Но я был настроен. После долгих исследований, чтения документации и опробования ряда методов, которые не помогли, мне удалось создать полнофункциональную игру Phaser в среде React / Redux. Я здесь, чтобы разбить свою стратегию на несколько простых шагов, чтобы вы тоже могли добавлять игры Phaser в свои приложения.

В этом уроке мы создадим простую платформерную фазерную игру, в которой гном по имени Ньют бегает по волшебному лесу, собирая светлячков. Используя React / Redux, мы создадим форму для отправки результатов и компонент таблицы лидеров, который обновляется в режиме реального времени.

В первой части мы сосредоточимся на настройке фреймворка вашего приложения React / Redux / Phaser. Перейдите ко второй части здесь или к третьей части здесь.

Чтобы увидеть приложение, которое мы будем создавать, просмотрите мой пример репозитория здесь или посетите мое развернутое приложение здесь.

Шаг первый: установите Phaser

Прежде чем мы начнем, вам понадобится работающее приложение React / Redux. В нем должны быть установлены React, Redux и React-Redux. Если у вас его еще нет, вы можете клонировать и форкнуть это репо.

Установите Phaser в свое репо.

Шаг 2. Настройте каталог переднего плана.

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

Как и в большинстве приложений React / Redux, app.js и store.js находятся внутри клиентского каталога, а компоненты React находятся внутри каталога компонентов. Все, что связано с вашей игрой Phaser, должно находиться в каталоге игры.

В каталоге игры вы можете разбить свои сцены и объекты (персонажи, предметы и т. Д.) На модульные компоненты, аналогичные React. Эта стратегия помогает поддерживать организацию и оптимизацию вашей игры. Фактический компонент игры находится в game / index.js. Здесь определяется конфигурация игры и запускается новая игра.

Для этого урока я включил две сцены: MainScene.js и OpeningScene.js. а также три объекта: Player.js, Ground.js и Firefly.js. Я также добавил два компонента React, Leaderboard.js и ScoreForm.js.

Шаг третий: определите свой игровой компонент

В game / index.js импортируйте "фазер" и "реакцию". Затем импортируйте свои сцены: MainScene и OpeningScene.

Затем определите свою игру как компонент React. Таким образом, его можно легко интегрировать в ваше приложение React.

В вашем методе componentDidMount объявите конфигурацию переменной и установите ее равной вашему объекту конфигурации Phaser. Пока мы будем помещать только MainScene в массив сцен.

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

Добавьте метод shouldComponentUpdate, который возвращает false, чтобы игра не перезагружалась при каждом обновлении состояния.

Наконец, верните пустой div в свой метод рендеринга.

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

Шаг четвертый: магазин Redux

В store.js импортируйте {createStore} из Redux. Чтобы делать вызовы API, я также импортировал axios.

Объявите свое начальное состояние, типы действий и создателей действий.

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

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

UPDATE_SCORE и updateScore будут использоваться в игре Phaser, когда игрок собирает светлячка. Сохранение счета в нашем магазине Redux позволит другим нашим компонентам React получить к нему доступ.

Объявите своих танков.

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

Наконец, объявите свой редуктор и создайте хранилище Redux.

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

Шаг пятый: компоненты React

Отправить форму оценки

В components / ScoreForm.js импортируйте React, подключитесь из «react-redux» и преобразователь addPlayer из файла вашего магазина.

Определите компонент класса ScoreForm. Установите два свойства для состояния: name и buttonDisabled. Имя будет отслеживать вводимые пользователем данные, а buttonDisabled позволит нам запретить пользователю отправлять свои оценки несколько раз. Мы определим методы handleChange и handleSubmit позже, а пока привяжем контекст this к конструктору.

Под компонентом ScoreForm объявите mapState и mapDispatch, чтобы передать состояние из нашего хранилища Redux в свойства наших компонентов. Затем используйте connect из «react-redux» для создания и экспорта подключенного компонента.

В своем классе ScoreForm напишите метод рендеринга, который имеет форму с полем ввода и кнопкой отправки. Кнопка отправки должна иметь атрибут disabled, для которого установлено свойство buttonDisabled в состоянии компонента. Это позволит нам запретить пользователю отправлять свои оценки несколько раз.

Атрибут onSubmit вашей формы должен быть методом handleSubmit вашего компонента. Атрибут onChange вашего поля ввода должен быть методом handleChange вашего компонента. Мы определим их на мгновение.

Между конструктором компонента и методом рендеринга определите методы handleChange и handleSubmit.

Метод handleChange обновляет состояние компонентов каждый раз, когда пользователь меняет поле ввода.

В методе handleSubmit e.preventDefault () останавливает обновление страницы при нажатии кнопки отправки, что является поведением по умолчанию для форм React. В строках 23–26 метод вызывает преобразователь addPlayer, который мы сопоставили из хранилища и подключили к нашему компоненту. Переданный ему объект содержит введенное имя игрока и счет, который мы сопоставили из магазина. Когда вызывается этот преобразователь, обновляются и база данных, и хранилище. Затем он обновляет локальное состояние компонентов, сбрасывая поле ввода и отключая кнопку отправки.

Таблица лидеров

В компонентах / Leaderboard.js импортируйте React, подключите и

Определите компонент класса Leaderboard. Мы определим метод findTopPlayers позже, а пока привяжем контекст this к конструктору.

Под компонентом Leaderboard объявите mapState и mapDispatch, чтобы передать состояние из нашего хранилища Redux в свойства наших компонентов. Затем используйте connect из «react-redux» для создания и экспорта подключенного компонента.

В классе Leaderboard напишите метод, который принимает массив игроков и возвращает трех лучших игроков.

Внизу класса Leaderboard напишите метод рендеринга, который создает таблицу лидеров путем сопоставления трех лучших игроков и создания ‹div› для отображения их имени и очков.

Создайте ‹div›, который отображает счет, который мы сопоставили из магазина, чтобы игроки могли видеть, как их счет обновляется в режиме реального времени. Также включите компонент ScoreForm, чтобы они могли отправлять свои оценки, когда они закончат игру.

Добавление компонентов в ваше приложение

Теперь, когда у вас есть все компоненты, импортируйте их в свой app.js. На этом этапе ваш файл app.js должен выглядеть примерно так:

На этом этапе, когда вы запускаете приложение, вы должны увидеть свои компоненты Leaderboard и ScoreForm, а также пустой холст игры.

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