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

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

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

Версия 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('bg', 'assets/skies/clouds.png');
        this.load.image('ground', 'assets/skies/sf2floor.png');
        this.load.image('master', 'assets/sprites/master.png');
        this.load.spritesheet('coin', 'assets/sprites/coin.png', { frameWidth: 32, frameHeight: 32 });
    }

    create ()
    {
        this.add.image(400, 400, 'bg');
        this.add.image(400, 600, 'ground');

        const master = this.physics.add.image(400, 300, 'master');

        master.setDirectControl();
        master.setImmovable();

        this.input.on('pointermove', pointer => {

            master.setPosition(pointer.worldX, pointer.worldY);

        });

        this.anims.create({
            key: 'spin',
            frames: this.anims.generateFrameNumbers('coin', { frames: [ 0, 1, 2, 3, 4, 5 ] }),
            frameRate: 16,
            repeat: -1
        });

        const coins = [];

        for (let i = 0; i < 64; i++)
        {
            const x = Phaser.Math.Between(0, 800);
            const y = Phaser.Math.Between(-1500, 0);

            const coin = this.physics.add.sprite(x, y, 'coin').playAfterDelay('spin', Math.random() * 1000);

            coin.setBounce(1);
            coin.setDrag(5);
            coin.setVelocityX(Phaser.Math.Between(-80, 80));
            coin.setVelocityY(Phaser.Math.Between(10, 50));
            coin.setMaxVelocity(500, 500);
            coin.setCollideWorldBounds(true);

            coins.push(coin);
        }

        this.physics.world.setBounds(0, -1500, 800, 2080);

        this.physics.add.collider(master, coins);
    }
}

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

const game = new Phaser.Game(config);

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

В методе create() сцены создается главный спрайт master как физическое изображение. Ключевой момент — два вызова, которые меняют его поведение.

const master = this.physics.add.image(400, 300, 'master');
master.setDirectControl();
master.setImmovable();

Метод setDirectControl() переводит тело в особый режим, при котором его скорость и ускорение больше не управляются движком Arcade Physics в ответ на силы (например, гравитацию). Вместо этого мы можем напрямую задавать его позицию. Вызов setImmovable(true) делает тело недвижимым при столкновениях. Это означает, что при соударении с другими динамическими телами (монетами) оно не будет отталкиваться, а будет стоять на месте, передавая импульс монетам, что идеально для роли статичного «собирателя» или платформы.

Далее обработчик события движения указателя мыши просто обновляет позицию спрайта, синхронизируя ее с координатами курсора в игровом мире (pointer.worldX, pointer.worldY).

Создание динамических объектов: монеты с анимацией

В примере создается 64 монеты, которые падают сверху. Каждая монета — это физический спрайт (physics.add.sprite) с анимацией вращения.

const coin = this.physics.add.sprite(x, y, 'coin').playAfterDelay('spin', Math.random() * 1000);
coin.setBounce(1);
coin.setDrag(5);
coin.setVelocityX(Phaser.Math.Between(-80, 80));
coin.setVelocityY(Phaser.Math.Between(10, 50));
coin.setMaxVelocity(500, 500);
coin.setCollideWorldBounds(true);

Анимация spin создается заранее с помощью this.anims.create. playAfterDelay запускает ее для каждой монеты со случайной задержкой, создавая эффект разнообразия.

Физические параметры настраиваются так: - setBounce(1) — упругость равна 1 (идеальный отскок). - setDrag(5) — устанавливает сопротивление движению (демпфирование), чтобы монеты со временем замедлялись. - setVelocityX/Y — задает начальную случайную скорость. - setMaxVelocity(500, 500) — ограничивает максимальную скорость, предотвращая неконтролируемое ускорение. - setCollideWorldBounds(true) — включает столкновение с границами мира, которые будут расширены далее.

Расширение мира и настройка столкновений

По умолчанию физический мир ограничен размерами игрового холста (800x600). Однако монеты создаются далеко за верхней границей (от Y = -1500). Чтобы они падали плавно и сталкивались, необходимо расширить границы мира.

this.physics.world.setBounds(0, -1500, 800, 2080);

Эта строка устанавливает новые границы: X=0, Y=-1500, ширина=800, высота=2080. Таким образом, общая высота мира становится 2080 пикселей, начиная с -1500. Это дает монетам пространство для падения сверху.

Финальный и самый важный элемент физического взаимодействия — коллайдер.

this.physics.add.collider(master, coins);

Он регистрирует столкновения между спрайтом master и массивом coins. Благодаря тому, что master является immovable, при столкновении он останется на месте, а монеты отскочат от него с учетом их упругости (bounce). Без этого вызова объекты просто проходили бы друг сквозь друга.

Конфигурация игры и физики

Весь описанный функционал работает благодаря правильной настройке игры в объекте config. Самое важное — активация Arcade Physics и установка гравитации.

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

Установка gravity: { y: 50 } создает постоянное ускорение вниз по оси Y для всех динамических тел (монет). Именно из-за этой гравитации монеты начинают падать. Параметр debug: false отключает отладочную отрисовку hitbox. Если установить его в true, вокруг каждого тела появится контур, что полезно для тонкой настройки столкновений.

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

Использование setDirectControl() в сочетании с прямым позиционированием через setPosition открывает путь к созданию объектов с уникальной физикой — они участвуют в столкновениях, но их движение полностью программируется вручную. Попробуйте поэкспериментировать: замените управление мышью на клавиатуру, но продолжайте использовать setPosition для телепортации. Или создайте несколько «мастеров» с разными свойствами (например, один immovable, а другой — нет) и посмотрите, как они будут взаимодействовать с монетами и друг с другом.