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

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

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

    create ()
    {
        const group = this.add.group({
            key: 'bar',
            frameQuantity: 32,
            setXY: { x: 400, y: 300 },
            setRotation: { value: 0, step: 0.1 },
            setScale: { x: 1, y: 2, stepY: 0.1 }
        });
    }
}

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

const game = new Phaser.Game(config);

Создание группы через add.group

Основной инструмент для работы с множеством объектов — класс Group. Метод this.add.group() создает новую группу. Его мощь заключается в объекте конфигурации, который позволяет задавать параметры для всех создаваемых объектов сразу.

В примере группа создается с ключом 'bar' и количеством в 32 спрайта. Ключ соответствует изображению, загруженному в preload. Параметры setXY, setRotation и setScale определяют начальное положение, вращение и масштаб для каждого нового спрайта в группе.

const group = this.add.group({
    key: 'bar',
    frameQuantity: 32,
    setXY: { x: 400, y: 300 },
    setRotation: { value: 0, step: 0.1 },
    setScale: { x: 1, y: 2, stepY: 0.1 }
});

Деконструкция параметра setScale

Опция setScale — это объект, управляющий масштабированием по осям X и Y для каждого создаваемого спрайта.

* x: 1 — задает начальный масштаб по горизонтали. Значение 1 означает оригинальный размер. * y: 2 — задает начальный масштаб по вертикали. Значение 2 растягивает спрайт вдвое по высоте. * stepY: 0.1 — это ключевой параметр для создания вариативности. Он указывает, на сколько будет изменяться масштаб по оси Y (`y`) для каждого последующего спрайта в группе.

Таким образом, первый спрайт получит масштаб (1, 2), второй — (1, 2.1), третий — (1, 2.2) и так далее. Отсутствие stepX означает, что масштаб по оси X останется равным 1 для всех объектов.

// Пример объекта конфигурации setScale:
setScale: { x: 1, y: 2, stepY: 0.1 }

Взаимодействие с другими настройками группы

setScale работает в паре с другими параметрами конфигурации, что позволяет создавать сложные геометрические паттерны.

*   `setXY: { x: 400, y: 300 }` размещает все 32 спрайта в одной точке (400, 300). Они будут нарисованы друг поверх друга, но из-за разного масштаба по Y мы увидим "веер" или расходящийся пучок.
*   `setRotation: { value: 0, step: 0.1 }` добавляет вращение каждому следующему спрайту с шагом 0.1 радиана. В сочетании с увеличивающимся масштабом по Y это создает эффект спирали или раскрывающегося соцветия.

Итоговый код создает все объекты и применяет к ним все эти свойства атомарно, в момент создания группы.

// Полная конфигурация группы из примера:
groupConfig = {
    key: 'bar',
    frameQuantity: 32,
    setXY: { x: 400, y: 300 },      // Все спрайты в центре
    setRotation: { value: 0, step: 0.1 }, // Постепенный поворот
    setScale: { x: 1, y: 2, stepY: 0.1 }  // Постепенное растяжение
}

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

Такой подход невероятно полезен для генерации визуальных эффектов без использования ресурсоемких систем частиц (Particle Emitter).

**Идеи для использования:** * **Взрыв/Импульс:** Создать группу мелких спрайтов с stepX и stepY для имитации разлетающихся осколков. * **Луч/Энергия:** Использовать длинный тонкий спрайт и stepY для создания сужающегося или расширяющегося луча. * **Интерфейс:** Создание радиальных меню или индикаторов, где размер элемента зависит от его позиции.

Вы можете экспериментировать с отрицательными шагами (stepX: -0.05), разными стартовыми значениями и комбинацией осей.

// Пример: создание конуса, сужающегося к краю
setScale: { x: 2, y: 2, stepX: -0.06, stepY: -0.06 }

// Пример: изменение масштаба только по одной оси
setScale: { x: 0.5, stepX: 0.02 } // Спрайты будут постепенно расширяться по ширине

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

Использование setScale в конфигурации группы — это мощный и производительный способ мгновенно создавать сложные, вариативные массивы объектов. Этот метод идеально подходит для прототипирования визуальных эффектов, создания фонов и нестандартных UI-элементов. Для дальнейших экспериментов попробуйте скомбинировать setScale с setXY с шагом (stepX, stepY), чтобы объекты не только меняли размер, но и расходились из центра, или примените этот подход к группе, управляемой физикой this.physics.add.group, чтобы создать, например, поле астероидов разного размера.