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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

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

    create ()
    {
        const group = this.add.group();

        //  Add an existing Image into the group:

        const image = this.add.image(0, 0, 'phaser');

        group.add(image);

        //  Any action done to the group is now reflected by the Image
        //  For example this will set the position of the image to 400 x 300
        Phaser.Actions.SetXY(group.getChildren(), 400, 300);
    }
}

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

const game = new Phaser.Game(config);

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

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

В методе create() сцены мы сначала создаем пустую группу с помощью this.add.group().

Затем создаем спрайт (изображение) phaser в точке (0, 0) мира сцены. Важно: на этом этапе спрайт существует независимо от группы.

Ключевой шаг — добавление уже созданного спрайта в группу с помощью метода group.add(image). Теперь группа знает об этом объекте и может им управлять.

const group = this.add.group();
const image = this.add.image(0, 0, 'phaser');
group.add(image);

Массовое действие Phaser.Actions.SetXY

Phaser.Actions — это статический класс, содержащий методы для выполнения операций над массивами объектов. Один из самых простых и полезных — SetXY.

Он принимает три основных аргумента: 1. Массив объектов (в нашем случае — массив детей группы). 2. Координата X для установки. 3. Координата Y для установки.

Метод group.getChildren() возвращает массив всех объектов, добавленных в эту группу. Хотя у нас всего один спрайт, логика работы та же, что и для сотни объектов.

Вызов Phaser.Actions.SetXY(group.getChildren(), 400, 300) проходит по всем элементам переданного массива и устанавливает свойство `xкаждого в 400, а свойствоy` — в 300.

Phaser.Actions.SetXY(group.getChildren(), 400, 300);

В результате наш спрайт image, который изначально был создан в точке (0, 0), мгновенно перемещается в центр экрана (при данных настройках игры).

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

Сила этого подхода раскрывается при работе с множеством объектов. Представьте, что вам нужно создать 50 звезд на фоне и разбросать их по случайным координатам.

Сначала создаем группу и в цикле добавляем в нее спрайты. Затем одним вызовом Phaser.Actions.SetXY с функцией-итератором можно задать каждому уникальную позицию.

// Создаем 50 звезд и добавляем их в группу
for (let i = 0; i < 50; i++) {
    const star = this.add.image(0, 0, 'star');
    starsGroup.add(star);
}

// Устанавливаем каждой звезде случайную позицию
Phaser.Actions.SetXY(starsGroup.getChildren(), 
    function() { return Math.random() * 800; }, // X
    function() { return Math.random() * 600; }  // Y
);

Аналогично работают другие методы Actions, например: - SetAlpha — для одновременного изменения прозрачности. - SetScale — для масштабирования. - Call — для вызова пользовательского метода у каждого объекта группы. Это делает группы и Actions идеальным дуэтом для спецэффектов, систем частиц и управления юнитами.

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

Использование Group вместе с Phaser.Actions — это фундаментальный паттерн для эффективной работы с множеством объектов в Phaser. Он избавляет от ручного перебора массивов, делает код чище и производительнее. Для экспериментов попробуйте: 1. Создать группу из 20 спрайтов и анимировать их движение по кругу с помощью SetXY в методе update(). 2. Реализовать взрыв, где группа частиц разлетается от центра, используя SetXY со случайными векторами. 3. Сделать "волну" врагов, где вся группа плавно смещается по экрану, реагируя на одно обновление позиции.