Учебник по созданию игры Phaser в вашем приложении React/Redux.
Это третья часть урока из трех частей. Для начала ознакомьтесь с моим первым постом здесь. Или перейти ко второй части здесь.
Во второй части мы сосредоточимся на создании движения, анимации, звука и начальной сцены. Мы также подключим нашу игру к магазину Redux. К концу этого раздела ваша игра Phaser будет полностью функциональна в вашем приложении React/Redux!
Шаг восьмой: движение, анимация и звук
Движение, звуки и анимация оптимизированы с помощью объектов использования.
Анимация игрока
Во-первых, давайте создадим анимацию нашего персонажа. В MainScene.js напишите вспомогательный метод для класса MainScene, который создает все анимации нашего плеера.
Затем вызовите этот вспомогательный метод после того, как наш проигрыватель будет создан в методе create.
Теперь ваши анимации настроены. Это также действительная стратегия для создания ваших анимаций в методе create. Мне нравится использовать вспомогательную функцию, потому что она не позволяет моему методу создания стать слишком большим. Мы назначим анимацию объекту Player, когда определим его движение.
Движение игрока
Во-первых, нам нужно сказать нашей игре, чтобы она прослушивала ввод курсора пользователя. В MainScene.js под определением проигрывателя добавьте одну строку для прослушивания курсоров.
В Player.js мы собираемся добавить два вспомогательных метода в класс Player. Один будет управлять движением и анимацией игрока во время бега, а другой — движением и анимацией игрока во время прыжка.
Во-первых, давайте заставим нашего игрока бежать. Добавьте в конструктор вспомогательный метод, который прослушивает клавиши со стрелками влево и вправо и соответствующим образом устанавливает скорость игрока. Кроме того, обратите внимание, что я назначил анимации, которые мы создали, используя метод воспроизведения.
Далее, давайте заставим нашего игрока прыгать. Добавьте вспомогательный метод во вспомогательный метод вашего движения, который прослушивает клавиши со стрелками вверх, влево и вправо и соответствующим образом устанавливает скорость игрока. Кроме того, обратите внимание, что я назначил анимации, которые мы создали, используя метод воспроизведения.
Теперь мы определили два вспомогательных метода движения. Мы должны вызывать эти методы в методе обновления проигрывателя, чтобы убедиться, что движение постоянно обновляется. Добавьте метод обновления в конец класса Player.
Наконец, мы собираемся вернуться к MainScene.js, чтобы убедиться, что наш объект Player обновлен в основной сцене. Внизу класса MainScene добавьте метод обновления и вызовите внутри него метод обновления проигрывателя, передав курсоры, которые мы определили в методе создания MainScene.
Если вы запустите игру сейчас, вы сможете заставить Ньюта бегать и прыгать с помощью клавиш со стрелками!
Звук игрока
Поскольку мы уже определили движение нашего игрока, нам нужно всего лишь добавить несколько строк кода, чтобы добавить звук. Давайте добавим звук прыжку Ньюта. Во-первых, мы должны загрузить звуковой файл в методе предварительной загрузки нашего класса MainScene в MainScene.js.
Затем перейдите к методу create и определите звуки с помощью spriteKey. Вы также можете отредактировать громкость отдельных звуков.
Наконец, перейдите к методу обновления MainScene, в котором мы вызываем this.player.update. Добавьте this.jumpSound в качестве второго аргумента, чтобы мы могли воспроизвести его в сущности Player.
Теперь, когда jumpSound создан, давайте используем его в нашей сущности Player.
В Player.js добавьте jumpSound в качестве второго параметра в методе обновления проигрывателя, чтобы он был готов к приему второго аргумента, который мы только что передали ему в MainScene. Затем добавьте jumpSound в качестве второго аргумента в вызов метода updateJump и в качестве второго параметра в определение метода updateJump. Теперь, когда он был передан из MainScene.update в Player.update, в Player.updateJump, вызовите встроенный метод воспроизведения звука, чтобы связать его с прыжком игрока.
Если вы запустите игру сейчас, вы должны услышать приятный небольшой звук, когда ваш игрок прыгает.
Перекрытие Firefly и звук
Ньют нужно чем-то ДЕЛАТЬ, пока она бегает по лесу. Давайте сделаем светлячков коллекционными, используя перекрытие. Во-первых, загрузите звук светлячка в свой метод предварительной загрузки на MainScene.
Затем в методе создания MainScene объявите звук с помощью spriteKey.
Теперь давайте добавим перекрытие. В нижней части метода create вашей MainScene добавьте перекрытие между игроком и группой светлячков, которое вызывает вспомогательный метод collectFirefly, который мы сейчас определим. Обязательно добавьте это перекрытие ПОСЛЕ того, как вы определили своего игрока и светлячков.
Между методами создания и обновления MainScene добавьте вспомогательный метод с именем collectFirefly.
Метод disableBody заставит светлячка исчезнуть, как только Newt перекроет его. Затем мы передаем мерцающий звук в метод обновления объекта Firefly. Но подождите, мы еще не написали этот метод обновления! Прежде чем мы напишем это, не забудьте привязать этот контекст вашего вспомогательного метода в конструкторе MainScene.
Затем перейдите к entity/Firefly.js. Добавьте свойство playSound в конструктор. Установите его на ложь.
Затем напишите метод обновления с блоком if, который срабатывает, только если свойство playSound имеет значение false. При первом воспроизведении этого звука мы установим для него значение true, чтобы предотвратить любые сбои. В первый раз, когда тритон пересекается с экземпляром светлячка, будет воспроизводиться мерцающий звук.
Если вы запустите игру сейчас, Ньют сможет собирать светлячков! Теперь давайте вознаграждать пользователя каждый раз, когда он это делает.
Шаг девятый: подключение магазина Redux
В первой части этого руководства мы настроили 2 компонента React, таблицу лидеров и форму отправки результатов. Это полностью функциональные компоненты, которые позволяют вам получать оценки из базы данных и отправлять свои оценки. Однако свойство score для состояния еще не было связано с нашей игрой Phaser, поэтому оно постоянно равно нулю. Давайте исправим это!
Каждый раз, когда Ньют ловит светлячка, давайте пользователю 10 баллов. Перейдите на MainScene.js. Чтобы отслеживать счет, добавьте свойство score в MainScene в его конструкторе.
Затем найдите вспомогательный метод collectFireflies и добавьте эти две строки.
Первая строка увеличивает счет на 10 каждый раз, когда Ньют пересекается со светлячком. Второй отправляет тип действия в наш магазин Redux для обновления счета. Ваша оценка Redux теперь реагирует на вашу игру Phaser. Это так просто!
Если вы запустите игру сейчас, компонент React, содержащий свойство очков магазина, теперь будет обновляться в режиме реального времени, когда Ньют собирает светлячков!
Шаг десятый: вступительная сцена
У вас уже есть полностью функционирующая игра Phaser, подключенная к вашему приложению React/Redux. Если вы хотите, вы можете добавить вступительную сцену, чтобы приветствовать вашего пользователя, чтобы он не был брошен прямо в действие. Подобно сущностям, сцены являются компонентами модульного класса. Итак, мы собираемся определить нашу новую сцену в файле scenes/OpeningScene.js. Импорт Фазера.
Как и в случае с MainScene, определите класс OpeningScene, расширяющий класс Phaser.Scene. В конструкторе передайте sceneKey «OpeningScene» в super.
Затем добавьте метод создания. Первое, что мы хотим добавить, это всплывающее окно и кнопку запуска.
Затем добавьте заголовок, описание и инструкции.
Наконец, добавьте текст к кнопке «Пуск» и сделайте ее интерактивной. Когда пользователь нажимает кнопку запуска, возобновляет работу MainScene и останавливает OpeningScene.
Но ждать! Наша игра не знает об OpeningScene. Экспортируйте класс OpeningScene, затем вернитесь в game/index.js и импортируйте OpeningScene. Как только вы это сделаете, добавьте его в свойство scenes конструктора. Обязательно добавьте его после MainScene.
Игра начнется с первой сцены в массиве сцен. OpeningScene — это полупрозрачное всплывающее окно, поэтому мы хотим, чтобы оно появлялось поверх графики основной сцены. Таким образом, мы хотим создать MainScene, но запустить OpeningScene до того, как пользователь сможет играть. Итак, чтобы запустить OpeningScene, вернитесь к MainScene.js и добавьте эти две строки в самый низ метода create.
И это все! Теперь у вас есть полнофункциональная многосценовая игра Phaser в вашем приложении React/Redux! Поздравляем. Надеюсь, вам понравился урок.
