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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    player;
    cursors;

    create ()
    {
        this.player = this.add.rectangle(400, 300, 64, 64, 0xffffff);

        this.physics.add.existing(this.player, false);

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

        this.player.body.setCollideWorldBounds(true);
    }

    update ()
    {
        this.player.body.setVelocity(0);

        if (this.cursors.left.isDown)
        {
            this.player.body.setVelocityX(-300);
        }
        else if (this.cursors.right.isDown)
        {
            this.player.body.setVelocityX(300);
        }

        if (this.cursors.up.isDown)
        {
            this.player.body.setVelocityY(-300);
        }
        else if (this.cursors.down.isDown)
        {
            this.player.body.setVelocityY(300);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание графического объекта и включение физики

В методе create() сцены мы сначала создаём визуальный объект — белый прямоугольник. Затем с помощью системы физики Arcade добавляем ему физическое тело. Это ключевой шаг: без него объект будет просто картинкой.

Обратите внимание на второй аргумент false в вызове this.physics.add.existing(). Он указывает, что тело будет статическим (static) по умолчанию. Однако в следующей строке мы позволяем телу двигаться, включая столкновение с границами мира.

this.player = this.add.rectangle(400, 300, 64, 64, 0xffffff);
this.physics.add.existing(this.player, false);
this.player.body.setCollideWorldBounds(true);

Настройка управления с клавиатуры

Чтобы управлять персонажем, нам нужен доступ к состоянию клавиш. Phaser предоставляет удобный объект cursors для стрелок на клавиатуре. Мы создаём его один раз в create() и затем используем в каждом кадре в update() для проверки нажатий.

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

Обработка ввода и применение скорости

Вся логика движения происходит в методе update(), который вызывается на каждом кадре игры. Сначала мы сбрасываем скорость тела по обеим осям к нулю. Это важно, чтобы движение прекращалось, когда клавиша отпущена.

Затем мы проверяем состояние каждой из клавиш-стрелок. Если клавиша нажата (isDown), мы устанавливаем соответствующую компоненту скорости тела (setVelocityX или setVelocityY). Физический движок Arcade автоматически применит эту скорость и обновит позицию нашего графического прямоугольника.

this.player.body.setVelocity(0);

if (this.cursors.left.isDown)
{
    this.player.body.setVelocityX(-300);
}
else if (this.cursors.right.isDown)
{
    this.player.body.setVelocityX(300);
}

if (this.cursors.up.isDown)
{
    this.player.body.setVelocityY(-300);
}
else if (this.cursors.down.isDown)
{
    this.player.body.setVelocityY(300);
}

Конфигурация игры и сцены

Для работы примера необходима правильная настройка игры. В конфигурационном объекте мы явно указываем, что используем физический плагин 'arcade', и включаем отладочный режим (debug: true). В этом режиме физические тела будут отображаться с контуром, что помогает визуально контролировать их размер и положение.

const config = {
    type: Phaser.AUTO,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

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

Вы успешно создали базового управляемого персонажа, связав графический примитив с физическим телом. Теперь прямоугольник может двигаться и сталкиваться с границами экрана. Для экспериментов попробуйте изменить начальные параметры add.rectangle (цвет, размер), скорость движения или заменить прямоугольник на другой объект, например this.add.circle(). Чтобы добавить взаимодействие, создайте второе тело и используйте метод this.physics.add.collider(player, otherObject).