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

В Phaser 3 работа с группами объектов (`Group`) — это мощный инструмент для оптимизации и создания сложных визуальных эффектов. Часто требуется анимировать всю группу сразу, а не каждый спрайт по отдельности. Этот пример демонстрирует, как с помощью простого вызова `Phaser.Actions.Rotate` заставить множество объектов плавно вращаться, создавая гипнотический "водоворот". Такой подход экономит ресурсы и упрощает код, что особенно полезно для частиц, фоновых элементов или формирования сложных паттернов.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    group;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bar', 'assets/sprites/flectrum.png');
    }

    create ()
    {
        this.group = this.add.group({ key: 'bar', frameQuantity: 32, setXY: { x: 400, y: 300 }, setScale: { x: 2, y: 6 } });
    }

    update ()
    {
        Phaser.Actions.Rotate(this.group.getChildren(), 0.005, 0.0005);
    }
}

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

const game = new Phaser.Game(config);

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

В методе preload мы загружаем единственный спрайт, который станет основой для всех элементов группы. Обратите внимание на использование setBaseURL для указания базового пути к ресурсам.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bar', 'assets/sprites/flectrum.png');
}

Создание группы объектов

Ключевой момент происходит в методе create. Здесь мы создаем группу this.group с помощью this.add.group. Конфигурационный объект позволяет сразу задать все параметры для элементов группы: - key: ключ загруженного изображения. - frameQuantity: количество создаваемых спрайтов (32). - setXY: объект для установки начальной позиции всех спрайтов (x: 400, y: 300). - setScale: объект для установки масштаба по осям X и Y. Таким образом, одной строкой кода создается и настраивается целая группа идентичных спрайтов.

create ()
{
    this.group = this.add.group({ key: 'bar', frameQuantity: 32, setXY: { x: 400, y: 300 }, setScale: { x: 2, y: 6 } });
}

Анимация вращения с помощью Phaser.Actions

Динамика эффекта реализуется в методе update, который вызывается каждый кадр. Для вращения всей группы используется статический метод Phaser.Actions.Rotate. В него передаются: 1. Массив детей группы, полученный через this.group.getChildren(). 2. Скорость вращения (0.005 радиан на кадр). 3. Приращение скорости (0.0005 радиан на кадр). Второй параметр — это не конечная скорость, а шаг, на который скорость будет увеличиваться каждый кадр, что создает эффект плавного ускорения водоворота.

update ()
{
    Phaser.Actions.Rotate(this.group.getChildren(), 0.005, 0.0005);
}

Конфигурация игры и запуск

Стандартная конфигурация игры Phaser. Важно, что в свойстве scene передается класс нашей сцены Example. После создания экземпляра Phaser.Game с этой конфигурацией игра запускается автоматически.

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

const game = new Phaser.Game(config);

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

Использование Phaser.Actions для управления группой объектов — это элегантный и производительный способ анимации. Вращение — лишь один из многих доступных методов (есть также смещение, изменение масштаба, альфа-канала и др.). Для экспериментов попробуйте изменить второй параметр в Rotate на отрицательное значение для вращения в другую сторону, применить Phaser.Actions.SetScale для пульсации размеров или комбинировать несколько действий в update для создания более сложных композиций.