Учебное пособие MDN «2D-игра с прорывом с помощью Phaser» показывает вам базовый способ создания игры с помощью Phaser 2. Недавно я сделал это руководство, чтобы помочь другим пройти через него.
Однако в этом руководстве не показано, как использовать самую последнюю версию Phaser или как использовать хорошие концепции дизайна, которые помогут вам создать собственную игру с использованием лучших практик JavaScript.
Поэтому я приступил к адаптации учебника по MDN в соответствии с форматом, изложенным в учебнике по фазеру Ourcade Современный JavaScript. В руководстве используется шаблон Phaser3-parcel-template, который помогает при запуске сложного проекта Phaser.
Вот ссылка на готовый код, и еще одна ссылка на ассеты, используемые в проекте.
Последний шаг руководства посвящен созданию ракетки и элементов управления игрока, а также добавлению завершения игры.
В этой статье я расскажу о добавлении звука и шагах 9 и 10 руководства по MDN: «9. Постройте кирпичное поле», «10. Обнаружение столкновений» и «10.5 добавление звука».
Построить кирпичное поле
Прежде чем мы начнем добавлять кирпичи, обязательно скачайте образ кирпича из файлов активов.
Первое, что мы сделаем, это создадим константу BrickInfo, которая содержит информацию о размере кирпичей, их количестве и их расположении на экране.
Этот код будет находиться на корневом уровне файла GameScene.js.
Затем мы проделываем те же шаги для создания игровых объектов, что и с мячом и ракеткой:
- создайте ключевую константу для использования при загрузке актива
- сделать свойство объекта сцены в его методе конструктора, в котором будет храниться актив
- загрузите актив в метод предварительной загрузки сцены
- сделать метод createObject в сцене
- вызовите метод createObject в методе create сцены и присвойте возвращаемое значение свойству, созданному в шаге 2.
Кирпичи будут существовать в статической группе, в отличие от мяча и ракетки, поскольку их не нужно перемещать или реагировать на какую-либо физику.
Большая часть волшебства происходит в строке 27 с помощью метода create. Это говорит группе создать игровой объект по заданным координатам с активом и добавить его в свою коллекцию игровых объектов.
Мы могли бы изменить размер кирпичей и отступы, изменив информацию о кирпичах, и метод createBricks создаст кирпичи соответствующим образом. Отрисовывая кирпичи на основе постоянных значений, мы можем легче вносить изменения по мере необходимости.
Добавление столкновения кирпичей
Чтобы добавить столкновение с кирпичами, мы просто создадим между игровым объектом мяч и группой кирпичей, установим метод, который будет запускаться при столкновении, и передадим значение «this» объекта «Сцена» в вызов коллайдера.
Метод disableBody() заменяет метод gameobject.kill() из Phaser 2. Первый параметр disableBody переключает физику, а второй переключает видимость.
Добавление звука
Прежде чем мы начнем добавлять звук, обязательно скачайте звуки и поместите их в папку с ресурсами. Сами звуки взяты с сайта freesound.org.
Добавление звуков немного похоже на добавление изображений. Мы будем следовать аналогичному шаблону для добавления игровых объектов:
- создайте ключевую константу для использования при загрузке актива
- загрузите актив в метод предварительной загрузки сцены
- воспроизвести звук по мере необходимости
Давайте начнем. Для этого не так много кода.
Нам нужно будет добавить метод для вызова, когда мяч ударяется о ракетку, чтобы мы могли вызвать там звук.
Кроме того, у нас есть кирпичи, которые можно разрушить, и звуковые эффекты.
Следующий
В следующей статье этой серии руководств мы расскажем о добавлении очков, создании простых условий победы и добавлении дополнительных жизней.