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

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

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

Версия 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',
            repeat: 32,
            setXY: { x: 400, y: 300 },
            setRotation: { value: 0, step: 0.06 },
            setScale: { x: 6 }
        });
    }
}

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

const game = new Phaser.Game(config);

Создание группы с помощью this.add.group()

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

В нашем примере группа создается в методе create() сцены. Ключевые параметры конфигурации: - key: ключ текстуры для создаваемых спрайтов. - repeat: количество *дополнительных* объектов. Итоговое количество = repeat + 1. - setXY: задает позицию для всех объектов группы. - setRotation и setScale — именно те опции, которые позволяют кастомизировать каждый объект в группе.

const group = this.add.group({
    key: 'bar',
    repeat: 32,
    setXY: { x: 400, y: 300 },
    setRotation: { value: 0, step: 0.06 },
    setScale: { x: 6 }
});

Как работает setRotation

Опция setRotation ожидает объект с двумя свойствами: value и step. Её логика проста, но мощна: она применяет вращение к каждому объекту в группе последовательно, начиная с первого.

- value: это начальный угол вращения (в радианах) для *первого* объекта в группе. - step: это значение, которое прибавляется к углу вращения для каждого следующего объекта.

Таким образом, если value = 0, а step = 0.06, то вращение объектов будет: 0, 0.06, 0.12, 0.18 и так далее. Это создает красивый веерообразный или спиралевидный эффект, в зависимости от начального позиционирования.

// Пример конфигурации setRotation
setRotation: { value: 0, step: 0.06 }

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

Важно понимать, что все опции конфигурации (setXY, setRotation, setScale) применяются к объектам в одном порядке. В нашем примере все 33 спрайта будут помещены в одну точку (400, 300), но каждый будет повернут на свой угол и масштабирован по оси X.

Опция setScale: { x: 6 } растягивает каждый спрайт вширь, делая тонкие длинные полоски. В сочетании с постепенным вращением это создает иллюзию лучей, расходящихся из центра.

// Полная конфигурация группы с позицией, вращением и масштабом
{
    key: 'bar',
    repeat: 32,
    setXY: { x: 400, y: 300 },
    setRotation: { value: 0, step: 0.06 },
    setScale: { x: 6 }
}

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

Такой подход — не просто для красоты. Его можно использовать для: 1. **Создания круговых интерфейсов или меню**, где элементы равномерно распределены по окружности. 2. **Генерации сложных геометрических узоров или фонов.** 3. **Быстрого прототипирования поведения роя объектов** (например, стаи птиц или роя частиц), где каждому элементу задано свое начальное направление.

Экспериментируйте с параметрами step и value. Например, задав value: Math.PI / 4, вы сместите всю композицию на 45 градусов. А изменив step на отрицательное значение, вы поменяете направление "раскручивания" веера.

// Вариация: смещенный старт и обратное направление вращения
setRotation: { value: Math.PI / 4, step: -0.03 }

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

Использование setRotation при создании группы — это эффективный и декларативный способ мгновенно получить набор объектов с прогрессивно изменяющимся вращением. Этот метод избавляет от необходимости писать циклы для инициализации и позволяет сосредоточиться на творческой части — подборе правильных значений для визуального эффекта. **Идеи для экспериментов:** 1. Попробуйте комбинировать setRotation с setXY.step, чтобы объекты не только вращались, но и расходились от центра по радиусу. 2. Добавьте setAlpha с шагом, чтобы создать эффект затухания. 3. Используйте этот прием для создания анимированного циферблата или компаса, где каждое деление — это отдельный спрайт в группе.