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

Создание и управление множеством одинаковых объектов — частая задача в разработке игр. 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 100 x 100 + 64px Y spacing (the stepY value)

        const group = this.add.group({
            key: 'diamonds',
            frame: [ 0, 1, 2, 3, 4 ],
            setXY:
            {
                x: 100,
                y: 100,
                stepY: 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 — это специальный контейнер, который управляет пулом игровых объектов одного типа. Её часто используют для пуль, врагов, монет или любых других повторяющихся элементов. Группа упрощает массовое создание, обновление и уничтожение объектов.

Ключевое преимущество группы — возможность задать начальные свойства для всех её членов прямо в конфигурации при создании. Это делается с помощью так называемых 'set-методов' в объекте конфигурации. В нашем примере используется setXY.

Разбираем конфигурацию группы с setXY

Давайте посмотрим на ключевой фрагмент кода, где создается группа. Вся магия происходит внутри метода this.add.group().

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

* key: 'diamonds': Указывает ключ спрайтшита, загруженного в preload. Это текстура для объектов группы. * frame: [ 0, 1, 2, 3, 4 ]: Массив индексов кадров (frames) из спрайтшита. Phaser создаст 5 спрайтов, по одному на каждый указанный кадр. * setXY: Это объект конфигурации для автоматического позиционирования. Phaser применит эти настройки к каждому созданному спрайту в группе.

Как работает объект setXY?

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

setXY:
{
    x: 100,   // Базовая координата X для первого объекта
    y: 100,   // Базовая координата Y для первого объекта
    stepY: 64 // Шаг (смещение) по оси Y для каждого следующего объекта
}

**Алгоритм работы:** 1. Phaser создает первый спрайт и помещает его в точку с координатами (x: 100, y: 100). 2. Для второго спрайта координата X остаётся той же (100), а к координате Y прибавляется значение stepY. Таким образом, его позиция будет (100, 100 + 64) = (100, 164). 3. Этот процесс повторяется для всех остальных спрайтов. Третий спрайт получит координаты (100, 164 + 64) = (100, 228) и так далее.

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

Вариации и аналоги: setX, setY и setRotation

setXY — не единственный 'set-метод'. Phaser предоставляет набор аналогичных опций для настройки других свойств всех объектов группы при создании. Их можно комбинировать.

* setX и setY: Позволяют задать только одну координату с возможным шагом. * setRotation: Устанавливает угол поворота (в радианах) для всех объектов, также с опциональным шагом (stepRotation).

Пример конфигурации с несколькими параметрами:

const group = this.add.group({
    key: 'diamonds',
    frame: [ 0, 1, 2 ],
    setXY: { x: 100, y: 100, stepX: 50 },
    setRotation: { value: 0.1, step: 0.05 }
});

Этот код создаст горизонтальный ряд из трёх спрайтов (с шагом 50 по X), каждый из которых будет немного повёрнут относительно предыдущего.

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

Использование setXY и других set-методов при создании группы — это отличный пример декларативного подхода в Phaser. Вы описываете *что* нужно сделать (создать колонку объектов с шагом 64), а движок сам заботится о *как*. Это делает начальную настройку сцены невероятно лаконичной. **Идеи для экспериментов:** 1. Попробуйте изменить stepY на отрицательное значение, чтобы расположить объекты снизу вверх. 2. Используйте stepX вместо stepY или вместе с ним, чтобы создавать сетки объектов. 3. Скомбинируйте setXY с setRotation или setAlpha (для прозрачности), чтобы создавать более сложные начальные композиции прямо в конфигурации группы.