Создание вашей первой игры Phaser 3 на современном Javascript. Часть 3.

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

У нас есть платформы и игрок, но мы не проверяем столкновение между ними. Давайте исправим это, добавив коллайдер для персонажа и статической группы платформ. Этот объект контролирует два физических объекта (или группы объектов) и проверяет их на столкновение или перекрытие.

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.

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

Оригинал.