Учебное пособие MDN «2D-игра с прорывом с помощью Phaser» показывает вам базовый способ создания игры с помощью Phaser 2. Недавно я сделал это руководство, чтобы помочь другим пройти через него.

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

Поэтому я приступил к адаптации учебника по MDN в соответствии с форматом, изложенным в учебнике по фазеру Ourcade Современный JavaScript. В руководстве используется шаблон Phaser3-parcel-template, который помогает при запуске сложного проекта Phaser.

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

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

В этой статье я расскажу о добавлении звука и шагах 9 и 10 руководства по MDN: «9. Постройте кирпичное поле», «10. Обнаружение столкновений» и «10.5 добавление звука».

Построить кирпичное поле

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

Первое, что мы сделаем, это создадим константу BrickInfo, которая содержит информацию о размере кирпичей, их количестве и их расположении на экране.

Этот код будет находиться на корневом уровне файла GameScene.js.

Затем мы проделываем те же шаги для создания игровых объектов, что и с мячом и ракеткой:

  1. создайте ключевую константу для использования при загрузке актива
  2. сделать свойство объекта сцены в его методе конструктора, в котором будет храниться актив
  3. загрузите актив в метод предварительной загрузки сцены
  4. сделать метод createObject в сцене
  5. вызовите метод createObject в методе create сцены и присвойте возвращаемое значение свойству, созданному в шаге 2.

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

Большая часть волшебства происходит в строке 27 с помощью метода create. Это говорит группе создать игровой объект по заданным координатам с активом и добавить его в свою коллекцию игровых объектов.

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

Добавление столкновения кирпичей

Чтобы добавить столкновение с кирпичами, мы просто создадим между игровым объектом мяч и группой кирпичей, установим метод, который будет запускаться при столкновении, и передадим значение «this» объекта «Сцена» в вызов коллайдера.

Метод disableBody() заменяет метод gameobject.kill() из Phaser 2. Первый параметр disableBody переключает физику, а второй переключает видимость.

Добавление звука

Прежде чем мы начнем добавлять звук, обязательно скачайте звуки и поместите их в папку с ресурсами. Сами звуки взяты с сайта freesound.org.

Добавление звуков немного похоже на добавление изображений. Мы будем следовать аналогичному шаблону для добавления игровых объектов:

  1. создайте ключевую константу для использования при загрузке актива
  2. загрузите актив в метод предварительной загрузки сцены
  3. воспроизвести звук по мере необходимости

Давайте начнем. Для этого не так много кода.

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

Кроме того, у нас есть кирпичи, которые можно разрушить, и звуковые эффекты.

Следующий

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