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

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

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

Версия 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('ball', 'assets/demoscene/doc-ball.png');
    }

    create ()
    {
        const group = this.physics.add.group({
            key: 'ball',
            frameQuantity: 12,
            gridAlign: {
                x: 25,
                y: 25,
                width: 1,
                height: 12,
                cellWidth: 50,
                cellHeight: 50
            },
            bounceX: 1,
            collideWorldBounds: true
        });

        group.setVelocityX(200, 10);
    }
}

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

const game = new Phaser.Game(config);

Создание физической группы

В Phaser группа (Group) — это мощный контейнер для управления множеством похожих игровых объектов. Используя физический фасад (this.physics.add.group), мы создаем группу, каждый элемент которой уже будет обладать телом Arcade Physics.

Ключевые параметры конфигурации группы: - key: ключ текстуры для спрайтов. - frameQuantity: общее количество создаваемых спрайтов. - gridAlign: параметры для автоматического выравнивания спрайтов в сетку. - bounceX и collideWorldBounds: физические свойства, которые сразу применяются ко всем телам в группе.

const group = this.physics.add.group({
    key: 'ball',
    frameQuantity: 12,
    gridAlign: {
        x: 25,
        y: 25,
        width: 1,
        height: 12,
        cellWidth: 50,
        cellHeight: 50
    },
    bounceX: 1,
    collideWorldBounds: true
});

В данном примере создается 12 шаров (ball), выстроенных в вертикальный столбец (ширина сетки width: 1, высота height: 12). Каждый шар будет отскакивать от границ мира по оси X (bounceX: 1) и сталкиваться с границами сцены (collideWorldBounds: true).

Мгновенная установка скорости для группы

После создания группы мы можем управлять скоростью всех её элементов одновременно. Метод setVelocityX объекта Group из Arcade Physics позволяет задать горизонтальную (X) компоненту скорости.

group.setVelocityX(200, 10);

Первый аргумент (200) — это значение скорости в пикселях в секунду, которое будет применено ко всем телам в группе. Второй необязательный аргумент (10) — это разброс (delta). Система возьмет базовое значение скорости (200) и прибавит к нему случайное число в диапазоне от -10 до +10 для каждого тела. Это позволяет добавить небольшой элемент вариативности в движение, делая его менее механическим.

Настройка сцены и физики

Для работы примера необходима базовая настройка игры. Конфигурация включает инициализацию Arcade Physics в качестве основной системы.

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

const game = new Phaser.Game(config);

Важные моменты конфигурации: - physics.default: активирует систему Arcade Physics. - arcade.gravity: { y: 0 }: отключает гравитацию по оси Y, так как в данном примере шары должны двигаться только горизонтально. - debug: false: отключает отладочную визуализацию физических тел.

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

Использование this.physics.add.group в сочетании с методами вроде setVelocityX делает управление множеством физических объектов невероятно эффективным. Вы можете сэкономить десятки строк кода, избегая циклов для индивидуальной настройки каждого спрайта. Для экспериментов попробуйте изменить параметры gridAlign, чтобы создать сетку 4x3, или используйте setVelocityY для вертикального движения. Добавление разброса скорости (delta) — простой способ придать движению группы более живой и естественный вид.