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

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

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

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

В этой статье я расскажу о шагах с 1 по 6 из статьи MDN: «1. Инициализируйте фреймворк», «2. Масштабирование», «3. Загрузите активы и распечатайте их на экране», «4. Перемести мяч», «5.Физика» и «6. Отскакивать от стен».

Инициализировать фреймворк

Чтобы инициализировать фреймворк, мы будем следовать указаниям репозитория Phaser3-parcel-template, чтобы клонировать репозиторий в новый каталог. Позаботьтесь о том, чтобы, если вы захотите позже загрузить свою работу в собственный репозиторий, вам придется удалить скрытую папку «git».

С помощью этого шаблона вы получаете формат проекта, настроенный для модульного проектирования. Мы будем использовать импорт JavaScript, чтобы разделить наш код на модули.

Вы заметите, что при импорте нам не нужно расширение «.js». Это связано с некоторыми модулями, включенными через NPM в проект.

Следующее, что мы хотим сделать, это установить значения для типа и размера холста. Мы перейдем к файлу «main.js» в каталоге «/src» проекта. Там мы найдем объект конфигурации, и именно здесь мы можем настроить игру на использование «CANVAS», установить размер игрового мира и установить масштабирование.

Мы создадим GameScene всего за минуту, и он заменит HelloWorldScene, поставляемый с Phaser3-parcel-template.

В приведенном выше коде мы устанавливаем тип отображения на холст (шаг 1), а в другом устанавливаем размер холста, устанавливаем масштабирование (шаг 2) и устанавливаем физику (шаг 5).

Создать игровую сцену

Прежде чем мы начнем загружать ресурсы в сцену, мы создадим файл GameScene.js в src/scenes.

Создать мяч

Перед тем, как пройти шаги, вам нужно захватить актив мяча, чтобы вы могли загрузить его. Мы также хотим создать ссылку на холст, который мы будем использовать для позиционирования мяча при его создании. Это будет полезно, так как размер холста может варьироваться в зависимости от размера экрана пользователя.

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

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

В приведенном ниже коде мы также рассмотрим шаг 6 руководства MDN «Отскок от стен», поскольку для этого требуется только строка кода в методе createBall.

Обратите внимание, что в методе createBall мы создаем объект, а затем возвращаем его из метода. Это лучшая практика для метода createObject. Затем возвращаемое значение прикрепляется к свойству объекта сцены, что позволяет использовать его другими методами сцены.

Таким образом, мы выполнили шаги с 1 по 6 из руководства по работе с MDN, но с помощью Phaser 3 и в модульном формате JavaScript!

У нас есть сцена и мяч, который прыгает по экрану.

Следующий

В следующей статье этой серии руководств мы добавим весло и создадим условия игры.