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

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

Версия 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.spritesheet('diamonds', 'assets/sprites/diamonds32x24x5.png', { frameWidth: 32, frameHeight: 24 });
    }

    create ()
    {
        //  Create 5 sprites in our group  (one per frame)

        //  Use the setXY object to set the positions on them all to be x: 100 + 64px spacing (the stepX value) by 100.

        const group = this.add.group({
            key: 'diamonds',
            frame: [ 0, 1, 2, 3, 4 ],
            setXY:
            {
                x: 100,
                y: 100,
                stepX: 64
            }
        });
    }
}

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

const game = new Phaser.Game(config);

Что такое группа (Group) и зачем она нужна

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

Основное преимущество группы перед ручным созданием объектов — возможность настройки всех свойств при инициализации. В примере мы создаем пять спрайтов-бриллиантов из одного спрайтшита и сразу задаем им начальные позиции.

Разбор конфигурации группы

Давайте подробно рассмотрим параметры, которые передаются в метод this.add.group().

const group = this.add.group({
    key: 'diamonds',
    frame: [ 0, 1, 2, 3, 4 ],
    setXY:
    {
        x: 100,
        y: 100,
        stepX: 64
    }
});

* key: Ключ загруженного изображения или спрайтшита. В нашем случае это 'diamonds'. * frame: Массив кадров (индексов) из спрайтшита. Каждый индекс соответствует одному бриллианту другого цвета. Phaser создаст по одному спрайту для каждого указанного кадра. * setXY: Это главный объект конфигурации для позиционирования. Он указывает движку автоматически расставить все созданные спрайты.

Магия объекта setXY: позиционирование со смещением

Объект setXY делает рутинную работу за вас. Он принимает три основных свойства:

setXY:
{
    x: 100,   // Базовая координата X для ПЕРВОГО спрайта в группе
    y: 100,   // Координата Y для ВСЕХ спрайтов в группе
    stepX: 64 // Шаг (смещение) по оси X для КАЖДОГО следующего спрайта
}

**Как это работает:** 1. Движок создает первый спрайт и помещает его в точку (x: 100, y: 100). 2. Для второго спрайта координата X вычисляется как 100 + stepX (т.е. 164), координата Y остается 100. 3. Для третьего: X = 100 + stepX * 2 (228), Y = 100. 4. И так далее для всех пяти спрайтов.

В результате мы мгновенно получаем ровную горизонтальную линию из разноцветных бриллиантов, где каждый следующий сдвинут на 64 пикселя вправо относительно предыдущего. Координата Y у всех одинаковая.

Полная картина: от загрузки до создания сцены

Давайте взглянем на пример в сборе, чтобы понять контекст. Код загружает ресурсы в preload() и создает группу в create().

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.spritesheet('diamonds', 'assets/sprites/diamonds32x24x5.png', { frameWidth: 32, frameHeight: 24 });
}

Здесь загружается спрайтшит — одно изображение, содержащее 5 кадров (бриллиантов) размером 32x24 пикселя каждый.

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

const game = new Phaser.Game(config);

Это стандартная конфигурация игры Phaser, в которой указывается сцена для запуска, размеры холста и цвет фона.

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

Использование групп с параметром setXY — это элегантный и производительный способ инициализации множества объектов. Вы избавляетесь от циклов for и ручных вычислений координат, делая код декларативным и простым для чтения. **Идеи для экспериментов:** 1. Попробуйте добавить свойство stepY в объект setXY, чтобы расположить спрайты по диагонали или вертикали. 2. Создайте группу с помощью setXY и затем анимируйте всю группу целиком, используя методы group.getChildren() и this.tweens.add(). 3. Исследуйте другие параметры конфигурации группы, такие как repeat для создания сеток объектов или setScale для автоматического масштабирования.