Во второй части мы добавили платформы и создали персонажа игрока. Пойдите, проверьте это, если вы еще этого не сделали. Если вы еще этого не сделали, то перейдите ко второй части и выполните указания в ней.
У нас есть платформы и игрок, но мы не проверяем столкновение между ними. Давайте исправим это, добавив коллайдер для персонажа и статической группы платформ. Этот объект контролирует два физических объекта (или группы объектов) и проверяет их на столкновение или перекрытие.
import Phaser from 'phaser'
const GROUND_KEY = 'ground'
const DUDE_KEY = 'dude'
export default class GameScene extends Phaser.Scene
{
//...
create()
{
this.add.image(400, 300, 'sky');
//Теперь получаем из методов экземпляры объектов для платформы и игрока
const platforms = this.createPlatforms();
this.player = this.createPlayer();
//Это наш коллайдер
this.physics.add.collider(this.player, platforms);
}
createPlatforms()
{
const platforms = this.physics.add.staticGroup();
platforms.create(400, 568, GROUND_KEY).setScale(2).refreshBody();
platforms.create(600, 400, GROUND_KEY);
platforms.create(50, 250, GROUND_KEY);
platforms.create(750, 220, GROUND_KEY);
return platforms; //возвращаем экземпляр
}
createPlayer()
{
//формируем объект для возврата из метода
const player = this.physics.add.sprite(100, 450, DUDE_KEY);
player.setBounce(0.2);
player.setCollideWorldBounds(true);
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers(DUDE_KEY, { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: DUDE_KEY, frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers(DUDE_KEY, { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
return player; //возвращаем экземпляр
}
}
Коллайдер добавлен в 20 строку, но мы внесли больше изменений.
Теперь методы createPlatforms()
и createPlayer()
возвращают экземпляр, который они создают.
Это лучшая практика - возвращать значение для функций с именами такими как create...
, make...
, construct...
и т.д. Это создает более четкий и безопасный код в отличие от функций меняющих переменные вне своей сферы.
Ранее наш метод createPlayer()
менял переменную this.player
в рамках класса. Теперь он создает локальную переменную и возвращает ее, не внося невидимых изменений или побочных эффектов.
Обычно вы хотите, чтобы ваши функции были как можно более чистыми. Некоторые из худших ошибок возникают из-за непреднамеренных мутаций или побочных эффектов.
Теперь, когда мы добавили коллайдер, наш игрок взаимодействует с платформами, как мы и ожидали.
Далее мы добавим некоторые элементы управления с клавиатуры.
import Phaser from 'phaser'
//Константы
....
export default class GameScene extends Phaser.Scene
{
constructor()
{
super('game-scene');
this.player = undefined;
this.cursors = undefined; //Добавляем менеджер клавиатуры
}
// preload()...
create()
{
this.add.image(400, 300, 'sky');
const platforms = this.createPlatforms();
this.player = this.createPlayer();
this.physics.add.collider(this.player, platforms);
// функция добавляет четыре свойства к объекту cursors
this.cursors = this.input.keyboard.createCursorKeys();
}
// проверяем статус клавиш
update()
{
if (this.cursors.left.isDown)
{
this.player.setVelocityX(-160);
this.player.anims.play('left', true);
}
else if (this.cursors.right.isDown)
{
this.player.setVelocityX(160);
this.player.anims.play('right', true);
}
else
{
this.player.setVelocityX(0)
this.player.anims.play('turn');
}
if (this.cursors.up.isDown && this.player.body.touching.down)
{
this.player.setVelocityY(-330);
}
}
// ...
}
Мы добавили свойство cursors
в строке 13, а затем установили для него клавиши управления курсором Phaser в методе create()
в строке 27.
В новом методе update()
происходит логика проверки ввода. Код такой же, как и в официальном руководстве Phaser, за исключением того, что мы используем ссылки на свойства класса (this.cursors
и this.player
) вместо глобальных переменных (cursors
и player
).
Откройте окно браузера и перейдите по адресу http://localhost:8000/. Затем вы можете перемещать своего персонажа с помощью клавиш со стрелками влево/вправо и прыгать с помощью клавиши вверх!
Мы преобразовали в современный JavaScript 6 и 7 части из официального руководства по игре Создание вашей первой игры в Phaser 3.
В следующей части мы добавим звезды, которые нужно собирать и обрабатывать, увеличивая счет.