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

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

Создание множества однотипных игровых объектов — частая задача в разработке игр. Вручную расставлять каждый спрайт неэффективно и громоздко. Phaser 3 предлагает мощный инструмент — `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 spacing (the stepX/Y values)

        const group = this.add.group({
            key: 'diamonds',
            frame: [ 0, 1, 2, 3, 4 ],
            setXY:
            {
                x: 100,
                y: 100,
                stepX: 64,
                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) и зачем она нужна?

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

Основные преимущества использования групп: * **Упрощение управления:** Вместо отслеживания множества отдельных переменных, вы работаете с одной группой. * **Автоматическое создание:** Группа может сама создавать заданное количество объектов по предоставленному шаблону (ключу key). * **Эффективное позиционирование:** Встроенные методы, такие как setXY, избавляют от необходимости писать циклы для расстановки объектов.

Разбираем конфигурацию группы: ключ, кадры и `setXY`

Давайте детально рассмотрим объект конфигурации, который передается в метод this.add.group().

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

* key: 'diamonds': Указывает на ключ спрайтшита, загруженного в preload. Группа будет использовать его для создания своих спрайтов. * frame: [ 0, 1, 2, 3, 4 ]: Это массив индексов кадров (frames) внутри спрайтшита. Группа создаст 5 спрайтов, и каждый получит свой уникальный кадр из этого списка. Если бы мы указали frame: 0, все спрайты выглядели бы одинаково. * setXY: Это опциональный, но крайне полезный конфиг для автоматического позиционирования. Он содержит: * x: 100, y: 100 — координаты (X, Y) для *первого* спрайта в группе. * stepX: 64, stepY: 64 — шаг (отступ) по осям X и Y для каждого последующего спрайта.

Как работает алгоритм расстановки `setXY`?

Функция setXY применяется ко всем спрайтам в группе последовательно, согласно порядку в массиве frame.

**Алгоритм для нашего примера:** 1. Первый спрайт (frame 0) помещается в точку (100, 100). 2. Координата X для второго спрайта (frame 1) вычисляется как x + stepX (100 + 64 = 164). Координата Y также увеличивается на stepY (100 + 64 = 164). Итоговая позиция — (164, 164). 3. Третий спрайт (frame 2) получает координаты (164 + 64 = 228, 164 + 64 = 228). 4. И так далее для всех пяти спрайтов.

В результате спрайты выстраиваются по диагонали. Если бы мы задали stepY: 0, они выстроились бы в горизонтальный ряд. stepX: 0 создал бы вертикальную колонку.

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

Использование Group с конфигурацией setXY — это элегантный и производительный способ массового создания и упорядочивания игровых объектов. Вы можете экспериментировать: создайте сетку 5x5, используя вложенный цикл для формирования массива кадров и настраивая stepX и stepY. Попробуйте применить setXY к уже существующей группе, вызвав group.setXY(100, 100, 64, 64). Это открывает простор для генерации уровней, инвентаря или любых повторяющихся элементов игры.