Учебное пособие MDN «2D-игра с прорывом с помощью Phaser» показывает вам базовый способ создания игры с помощью Phaser 2. Недавно я сделал это руководство, чтобы помочь другим пройти через него.
Однако в этом руководстве не показано, как использовать самую последнюю версию Phaser или как использовать хорошие концепции дизайна, которые помогут вам создать собственную игру с использованием лучших практик JavaScript.
Поэтому я приступил к адаптации учебника по MDN в соответствии с форматом, изложенным в учебнике по фазеру Ourcade Современный JavaScript. В руководстве используется шаблон Phaser3-parcel-template, который помогает при запуске сложного проекта Phaser.
Вот ссылка на готовый код, и еще одна ссылка на ассеты, используемые в проекте.
Последний шаг обучения касался создания счета, победы в игровых условиях и добавления дополнительных жизней.
В этой статье мы рассмотрим создание дополнительных трудностей, когда все кирпичи очищены, и шаг 14 руководства MDN: «14. Анимация и анимация».
Очистка уровня и добавление сложности
Мы начнем создавать функциональность, позволяющую игроку многократно очищать кирпичи, создавая переменные состояния. Во-первых, мы добавим переменную в physicsConstants.js, которая определяет, насколько скорость увеличивается каждый раз, когда кирпичи убираются.
Мы также добавим физическую переменную, которая определяет максимальную скорость мяча, чтобы сохранить ограничение на то, насколько сумасшедшим он может стать.
Затем мы добавим значение в gameState.js, чтобы определить, насколько увеличивается счет каждый раз, когда кирпичи убираются.
И мы добавим атрибут в объект Scene в методе конструктора, чтобы отслеживать, сколько раз игра была пройдена. Обратите внимание, что мы помещаем значение в отдельный файл констант, если оно не будет меняться во время игры, и мы помещаем его в метод конструктора сцены, тем самым прикрепляя его к объекту сцены, если оно будет меняться.
Таким образом, переменные, на которые влияет игровой процесс, будут напрямую доступны в сцене, а константы, участвующие в настройке игры, будут сосредоточены в логическом месте. Это становится все более важным по мере увеличения масштаба вашей игры. Одну константу можно было использовать в дюжине сцен. Таким образом, имея возможность искать в одном логическом месте, когда значение необходимо настроить, вы упрощаете поддержку своей игры.
Далее мы создадим метку ClearedLabel для отслеживания и отображения очисток. Мы создадим ClearedLabel.js в каталоге «src/ui». Далее следует код.
Мы будем использовать тот же процесс, который мы использовали для создания наших предыдущих ярлыков:
- импортировать ярлык
- сделать свойство объекта Scene в его методе конструктора, в котором будет храниться метка
- сделать метод createLabel в сцене
- вызовите метод createLabel в методе create сцены и присвойте возвращаемое значение свойству, созданному в шаге 2.
Имея метку и созданные переменные состояния, нам просто нужно изменить способ установки скорости мяча, изменить подсчет очков и увеличить количество очисток, когда все кирпичи будут уничтожены.
Скорость мяча изменяется на основе переменных состояния в setBallVelocity.
Оценка изменяется на основе очищенных переменных состояния в методе ballHitBrick.
Очистки увеличиваются в методе resetLevel.
В resetLevel мы приостанавливаем физику перед повторным заполнением кирпичей, чтобы предотвратить попадание кирпича до сброса положения мяча и ракетки.
После увеличения числа раз, когда кирпичи были очищены, и установки этого значения в ClearedLabel, мы вызываем setBallVelocity, чтобы мяч двигался быстрее с новым очищенным значением.
Затем мы вызываем repopulateBricks после задержки. Метод enableBody снова включает физику и видимость для каждого блока.
В строке 58 метод clearAlpha сбрасывает альфа-значение кирпичного игрового объекта. Сейчас в этом нет необходимости, но она пригодится, когда мы реализуем анимацию. В противном случае кирпич останется невидимым после повторного заполнения.
Мяч Анимация
Прежде чем мы начнем анимировать мяч, вам нужно взять лист спрайтов анимации мяча из репозитория ресурсов.
Затем мы заменяем ссылку на статическое изображение мяча ссылкой на лист спрайтов, определяем анимацию в createBall и запускаем анимацию в методе ballHitPaddle.
Обратите внимание, что мы отображаем массив качающихся кадров в массив объектов со свойствами ключа и кадра, который затем присваивается свойству кадров, переданному в anims.create() в строке 14.
Подростки
Создание твина — это еще один шаг, который для Phaser 3 сильно отличается от того, что вы видите в учебном пособии MDN.
Процесс относительно прост, хотя сигнатура метода создания анимации немного сложна. Одна загвоздка в том, что мы должны отключить физику, но оставить видимость на кирпиче перед выполнением анимации. В противном случае мяч может снова столкнуться с кирпичом во время его исчезновения, создавая непреднамеренные эффекты.
Мы начнем с добавления переменной задержки, которая определяет, сколько времени потребуется, чтобы кирпичи исчезли, в gameConstants.js.
Далее идет код твина:
Так что теперь у нас повышенная сложность и возможность очищать кирпичи несколько раз. У нас также есть анимация мяча и эффект затухания кирпича.
Обязательно удалите или закомментируйте строку кода, которая использовалась ранее, чтобы отключить тело кирпича, иначе кирпичи просто исчезнут, и вы не увидите, как работает анимация. Я знаю это, потому что я сделал это, когда представлял этот урок!
Следующий
В следующей статье этой серии руководств мы завершим рассмотрение создания кнопки Пуск и состояния игры для управления ею.
