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

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

Платформеры — один из самых популярных жанров в 2D-разработке. Этот пример наглядно показывает, как с помощью физического движка Arcade в Phaser создать базовую механику прыжков, коллизий и движения платформ. Вы научитесь настраивать статичные и движущиеся объекты, управлять анимацией персонажа и обрабатывать сбор предметов. Эти знания станут фундаментом для ваших собственных игровых механик.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    movingPlatform;
    cursors;
    platforms;
    stars;
    player;

    preload ()
    {
        // this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
        this.load.image('sky', 'src/games/firstgame/assets/sky.png');
        this.load.image('ground', 'src/games/firstgame/assets/platform.png');
        this.load.image('star', 'src/games/firstgame/assets/star.png');
        this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

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

        this.platforms = this.physics.add.staticGroup();

        this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();

        // platforms.create(600, 400, 'ground');
        // platforms.create(50, 250, 'ground');
        // platforms.create(750, 220, 'ground');

        this.movingPlatform = this.physics.add.image(400, 400, 'ground');

        this.movingPlatform.setImmovable(true);
        this.movingPlatform.body.allowGravity = false;
        this.movingPlatform.setVelocityX(50);

        this.player = this.physics.add.sprite(100, 450, 'dude');

        this.player.setBounce(0.2);
        this.player.setCollideWorldBounds(true);

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'turn',
            frames: [ { key: 'dude', frame: 4 } ],
            frameRate: 20
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });

        this.cursors = this.input.keyboard.createCursorKeys();

        this.stars = this.physics.add.group({
            key: 'star',
            repeat: 11,
            setXY: { x: 12, y: 0, stepX: 70 }
        });

        for (const star of this.stars.getChildren())
        {
            star.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
        }

        this.physics.add.collider(this.player, this.platforms);
        this.physics.add.collider(this.player, this.movingPlatform);
        this.physics.add.collider(this.stars, this.platforms);
        this.physics.add.collider(this.stars, this.movingPlatform);

        this.physics.add.overlap(this.player, this.stars, this.collectStar, null, this);
    }

    update ()
    {
        const { left, right, up } = this.cursors;

        if (left.isDown)
        {
            this.player.setVelocityX(-160);

            this.player.anims.play('left', true);
        }
        else if (right.isDown)
        {
            this.player.setVelocityX(160);

            this.player.anims.play('right', true);
        }
        else
        {
            this.player.setVelocityX(0);

            this.player.anims.play('turn');
        }

        if (up.isDown && this.player.body.touching.down)
        {
            this.player.setVelocityY(-330);
        }

        if (this.movingPlatform.x >= 500)
        {
            this.movingPlatform.setVelocityX(-50);
        }
        else if (this.movingPlatform.x <= 300)
        {
            this.movingPlatform.setVelocityX(50);
        }
    }

    collectStar (player, star)
    {
        star.disableBody(true, true);
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка ассетов

В методе preload загружаются все необходимые изображения и спрайтшит для персонажа. Ключевой момент — использование this.load.spritesheet для загрузки анимационных кадров из одного файла с указанием размеров каждого кадра.

this.load.image('sky', 'src/games/firstgame/assets/sky.png');
this.load.image('ground', 'src/games/firstgame/assets/platform.png');
this.load.image('star', 'src/games/firstgame/assets/star.png');
this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });

Конфигурация физического движка задаётся в объекте config. Здесь активирован движок Arcade с гравитацией по оси Y и отключённым режимом отладки.

physics: {
    default: 'arcade',
    arcade: {
        gravity: { y: 300 },
        debug: false
    }
}

Создание мира: платформы, персонаж и звёзды

В методе create формируется игровой мир. Статичные платформы создаются через this.physics.add.staticGroup(). Это оптимизированная группа физических тел, которые не двигаются под действием сил, но участвуют в коллизиях.

this.platforms = this.physics.add.staticGroup();
this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();

Персонаж создаётся как физический спрайт с помощью this.physics.add.sprite. Для него настраивается отскок (setBounce) и ограничение выхода за границы мира (setCollideWorldBounds).

this.player = this.physics.add.sprite(100, 450, 'dude');
this.player.setBounce(0.2);
this.player.setCollideWorldBounds(true);

Звёзды создаются группой с повторением. Для каждой звезды в цикле задаётся случайный отскок по оси Y.

this.stars = this.physics.add.group({
    key: 'star',
    repeat: 11,
    setXY: { x: 12, y: 0, stepX: 70 }
});

for (const star of this.stars.getChildren())
{
    star.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
}

Движущаяся платформа: физика без гравитации

Особенность примера — движущаяся платформа. Она создаётся как обычное физическое изображение (this.physics.add.image), но с ключевыми настройками.

this.movingPlatform = this.physics.add.image(400, 400, 'ground');
this.movingPlatform.setImmovable(true);
this.movingPlatform.body.allowGravity = false;
this.movingPlatform.setVelocityX(50);

Метод setImmovable(true) делает платформу неподвижной при столкновениях (объект не отталкивается). Свойство body.allowGravity = false отключает для неё гравитацию. Начальная скорость по оси X задаётся через setVelocityX(50).

Логика движения «туда-обратно» реализована в update(): при достижении границ (X=300 или X=500) скорость инвертируется.

if (this.movingPlatform.x >= 500)
{
    this.movingPlatform.setVelocityX(-50);
}
else if (this.movingPlatform.x <= 300)
{
    this.movingPlatform.setVelocityX(50);
}

Анимация персонажа и управление с клавиатуры

Анимации создаются через this.anims.create. Для ходьбы влево и вправо используется генерация номеров кадров из спрайтшита, для состояния покоя — один конкретный кадр.

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

В методе update состояние клавиш (this.cursors) управляет скоростью персонажа и проигрыванием соответствующей анимации. Прыжок возможен только при касании земли (this.player.body.touching.down).

if (left.isDown)
{
    this.player.setVelocityX(-160);
    this.player.anims.play('left', true);
}
else if (right.isDown)
{
    this.player.setVelocityX(160);
    this.player.anims.play('right', true);
}

if (up.isDown && this.player.body.touching.down)
{
    this.player.setVelocityY(-330);
}

Коллизии и сбор предметов

Взаимодействие объектов настраивается через this.physics.add.collider и this.physics.add.overlap. Коллизии обеспечивают физическое столкновение объектов, а overlap — обнаружение пересечения без физического отталкивания.

this.physics.add.collider(this.player, this.platforms);
this.physics.add.collider(this.player, this.movingPlatform);
this.physics.add.collider(this.stars, this.platforms);
this.physics.add.collider(this.stars, this.movingPlatform);

this.physics.add.overlap(this.player, this.stars, this.collectStar, null, this);

При overlap игрока и звезды вызывается функция collectStar. В ней star.disableBody(true, true) отключает физическое тело звезды и скрывает её игровой объект, создавая эффект сбора.

collectStar (player, star)
{
    star.disableBody(true, true);
}

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

Этот пример демонстрирует мощь и простоту физического движка Arcade в Phaser. Вы можете экспериментировать: добавьте несколько движущихся платформ с разными траекториями, измените тип коллизии для звёзд на статичный, чтобы они не падали, или создайте более сложную систему анимаций для персонажа. Попробуйте добавить счётчик собранных звёзд и условие победы — это отличный следующий шаг.