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

Создание игр часто подразумевает взаимодействие множества объектов, будь то пули, враги или падающие блоки. Вручную управлять физикой каждого спрайта неэффективно. Пример simple group.js демонстрирует мощный инструмент Phaser — физические группы. Они позволяют создавать и управлять множеством объектов с едиными физическими свойствами, что значительно упрощает код и повышает производительность. В этой статье мы разберем, как создать группу с физикой 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');
    }

    create ()
    {
        const group = this.physics.add.group({
            bounceX: 1,
            bounceY: 1,
            collideWorldBounds: true
        });

        group.create(100, 200, 'block').setVelocity(100, 200);
        group.create(500, 200, 'block').setVelocity(-100, -100);
        group.create(300, 400, 'block').setVelocity(60, 100);
        group.create(600, 300, 'block').setVelocity(-30, -50);

        this.physics.add.collider(group);
    }
}

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

const game = new Phaser.Game(config);

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

Вся магия начинается в методе create сцены. Вместо создания отдельных физических спрайтов мы используем метод this.physics.add.group(). Этот метод принимает объект конфигурации, который задаёт общие физические свойства для всех объектов группы.

const group = this.physics.add.group({
    bounceX: 1,
    bounceY: 1,
    collideWorldBounds: true
});

Разберем параметры конфигурации: * bounceX и bounceY: Значение 1 означает абсолютно упругое отскакивание (коэффициент восстановления). Объекты будут отскакивать от других тел и границ мира без потери скорости. * collideWorldBounds: При значении true все объекты группы будут сталкиваться с границами игрового мира (заданными в конфиге width и height).

Таким образом, мы одним вызовом задали правила для целой группы объектов.

Добавление спрайтов в группу

После создания пустой группы мы наполняем её спрайтами. Для этого используется метод group.create(), который наследует все физические свойства, заданные при создании группы.

group.create(100, 200, 'block').setVelocity(100, 200);
group.create(500, 200, 'block').setVelocity(-100, -100);
// ... и так далее

Каждый вызов create создает новый физический спрайт (тело Arcade) по заданным координатам (x, y) с текcтурой 'block'. Поскольку спрайт уже является частью физической группы, мы можем сразу же вызывать методы его тела, такие как setVelocity(), чтобы задать начальную скорость. Это создает динамичную сцену, где блоки начинают движение сразу после появления.

Организация столкновений внутри группы

Создание объектов — это только половина дела. Чтобы блоки сталкивались друг с другом, а не просто проходили насквозь, необходимо создать коллайдер. Phaser предоставляет для этого элегантное решение.

this.physics.add.collider(group);

Этот короткий вызов делает следующее: он создает коллайдер для всех объектов внутри одной группы. Теперь каждый спрайт в group будет сталкиваться с любым другим спрайтом в этой же группе. Физический движок автоматически рассчитает отскок, основываясь на заданных ранее свойствах bounceX и bounceY.

Также важно отметить настройки физики в глобальной конфигурации игры:

physics: {
    default: 'arcade',
    arcade: {
        debug: true,
        gravity: { y: 200 }
    }
}

Здесь включается гравитация (gravity: { y: 200 }), которая постоянно тянет все тела в группе вниз, и отладка (debug: true), которая отрисовывает хитбоксы тел, что очень полезно при разработке.

Практическое применение и преимущества

Использование групп — это не просто синтаксический сахар. Это фундаментальный подход для оптимизации.

* **Управление:** Вы можете применить действие ко всем объектам группы сразу, например, group.setVelocityX(50). * **Проверки:** Легко проверить столкновение группы с другим объектом или группой, используя this.physics.add.collider(group, otherGroup). * **Производительность:** Phaser внутренне оптимизирует обработку физики для объектов в группе, что эффективнее, чем работа с каждым спрайтом по отдельности.

Такой подход идеально подходит для: * Создания дождя из предметов или частиц. * Управления роем врагов с одинаковым поведением. * Генерации поля препятствий, которые взаимодействуют между собой.

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

Физические группы в Phaser — это мощный паттерн, который позволяет чисто и эффективно управлять множеством взаимодействующих объектов. Всего несколько строк кода заменяют десятки ручных созданий и настройки коллайдеров. Для экспериментов попробуйте: 1. Изменить bounceX и bounceY на значения меньше 1 (например, 0.5), чтобы объекты теряли энергию при ударе. 2. Добавить в группу не 4, а 40 блоков с помощью цикла for, задавая случайные координаты и скорость. 3. Создать вторую группу с другим спрайтом и настроить столкновение между двумя группами, чтобы увидеть, как разные типы объектов взаимодействуют.