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

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

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

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

    create ()
    {
        const group = this.add.group();

        //  Create a Sprite via the group.

        //  The Sprite is added to the Scene display list, and to the group, at the same time.

        group.create(400, 300, 'phaser');

        //  The above is a short-cut for:
        //  var sprite = this.add.sprite(400, 300, 'phaser');
        //  group.add(sprite);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое группа (Group)?

Группа (Phaser.GameObjects.Group) — это контейнер для управления коллекцией игровых объектов. Она позволяет обновлять, фильтровать и уничтожать объекты как единое целое, что особенно полезно для пуль, врагов или блоков на уровне.

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

Создание группы и спрайта

В методе create() сцены мы сначала создаем пустую группу с помощью this.add.group(). Затем используем метод create() самой группы для добавления спрайта.

const group = this.add.group();
group.create(400, 300, 'phaser');

Этот код создает спрайт с ключом текстуры 'phaser' на координатах (400, 300) и сразу добавляет его в группу group. Объект также автоматически помещается в список отображения сцены, поэтому он будет виден на экране.

Сравнение с ручным подходом

Метод group.create() — это сокращенная запись для более многословного, но функционально идентичного подхода. Давайте сравним его с классическим способом.

// Сокращенный способ через группу
group.create(400, 300, 'phaser');

// Развернутый (ручной) способ
const sprite = this.add.sprite(400, 300, 'phaser');
group.add(sprite);

Оба варианта дают одинаковый результат. Однако использование group.create() делает намерения разработчика более явными и сокращает количество строк кода, что повышает читаемость.

Практическое применение и паттерны

Основная сила метода group.create() раскрывается при массовом создании объектов, например, в цикле для генерации поля из плиток или волны врагов.

// Создание сетки из спрайтов
for (let y = 0; y < 5; y++)
{
    for (let x = 0; x < 5; x++)
    {
        group.create(100 + x * 100, 100 + y * 100, 'phaser');
    }
}

Все созданные спрайты будут частью одной группы. Это позволяет, например, одним вызовом group.clear(true, true) удалить все спрайты и освободить память, или использовать group.children.iterate для применения логики ко всем объектам.

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

Использование group.create() — это простой, но мощный паттерн для структурирования игрового кода. Он уменьшает сложность и помогает управлять объектами как единым целым. Попробуйте экспериментировать: создайте группу для пуль и используйте create внутри обработчика выстрела, или сгенерируйте процедурный уровень, заполняя группу плитками. Это отличный шаг к написанию чистого и эффективного кода на Phaser.