Phaser.js: всё об играх и разработке

О чем этот пример

В этой статье мы разберем, как создать простой платформер с использованием физического движка Arcade и реализовать механику 'липких' платформ, которые временно удерживают игрока.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('block', 'assets/sprites/block.png');
        this.load.image('dude', 'assets/sprites/phaser-dude.png');
        this.load.image('ball', 'assets/sprites/blue_ball.png');
        this.load.image('sky', 'assets/skies/cavern2.png');
    }

    create ()
    {
        const targets = [
            new Phaser.Math.Vector2(100, 500),
            new Phaser.Math.Vector2(700, 100),
            new Phaser.Math.Vector2(700, 500),
            new Phaser.Math.Vector2(100, 100)
        ];

        let targetIndex = 0;

        this.add.image(400, 300, 'sky');

        const block = this.physics.add.image(100, 100, 'block');

        block.body.immovable = true;
        block.body.allowGravity = false;

        const dude = this.physics.add.image(100, 0, 'dude');

        this.time.addEvent({
            delay: 2000,
            startAt: 1500,
            loop: -1,
            callback: () =>
            {
                this.physics.moveToObject(block, targets[targetIndex++ % targets.length], 0, 2000);
            }
        });

        this.physics.add.collider(block, dude, () =>
        {
            dude.setGravityY(12000);
        });

        this.input.on('pointerdown', () =>
        {
            if (dude.body.onFloor())
            {
                // Jump!
                dude.setGravityY(0);
                dude.body.velocity.y -= 300;
            }
        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
            gravity: { y: 800 }
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Настройка физики и загрузка ассетов

В иpreload() мы загружаем изображения для игры: блок платформы, двух спрайтов игрока и фон. Особенность this.load.setBaseURL() позволяет указать базо вый URL для асетов.

Реализация липких платформ

Для созда ния механикики липких пла тформ мы использу ем событие this.physics.moveToObject(), котороые плавно перемеща ет платформу к целе вой точке. При стол кновении игрока с платфор мой (this.physics.add.collider) мы временно увеличи ваем гравитацию для игрока, созда вая эффект 'прилипания'.

Управление и механика прыжка

Обработчик события pointerdown позволяет реализо вать прыжок при каса нии экрана или клике мышью. Важная проверка dude.body.onFloor() предотвращает двойные прыжки в воздухе. При прыжке мы сбра сываем гравитацию игрока к нормальному значению и при даем импульс вверх.

Что попробовать дальше

Этот пример демонстрирует базовые принципы работы с физикой Arcade в Phaser 3. Механику 'липких' платформ можно развивать: добавлять анимацию, изменять время 'прилипания' или создавать целые уровни, такие ми движущиеся платформы. Эксперимен тируйте с парамет рами гравитации и скоростей, чтобы добиться нужной игровой механики.