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

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

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

    create ()
    {
        const group = this.add.group({ key: 'orb', frameQuantity: 300 });

        const line = new Phaser.Geom.Line(200, 200, 500, 400);

        //  Randomly position the sprites on the line
        Phaser.Actions.RandomLine(group.getChildren(), line);
    }
}

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

const game = new Phaser.Game(config);

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

Всё начинается с базовой настройки сцены. В методе preload() загружается текстура спрайта, который будет использоваться для всех объектов. Ключевой момент — создание группы (Group). Группы в Phaser управляют пулами однотипных объектов, что оптимально для производительности.

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

create ()
{
    const group = this.add.group({ key: 'orb', frameQuantity: 300 });
}

Здесь создаётся группа group, которая сразу наполняется 300 (frameQuantity) спрайтами с текстурой 'orb'. Все они пока невидимы и не имеют позиций.

Определение геометрической линии

Чтобы распределить объекты, нужна линия — её начало и конец. В Phaser для этого используется объект Phaser.Geom.Line.

const line = new Phaser.Geom.Line(200, 200, 500, 400);

Эта строка создаёт линию от точки с координатами (200, 200) до точки (500, 400). Именно между этими двумя точками и будут случайным образом размещены наши 300 сфер.

Применение действия RandomLine

Самый важный шаг — вызов действия Phaser.Actions.RandomLine(). Это статический метод, который изменяет координаты переданных ему объектов.

Phaser.Actions.RandomLine(group.getChildren(), line);

Метод принимает два аргумента: 1. Массив объектов для размещения. group.getChildren() возвращает все 300 созданных спрайтов. 2. Объект линии line, созданный на предыдущем шаге.

Действие перебирает все спрайты в массиве и задаёт каждому случайные координаты (`x,y`), которые гарантированно лежат на заданной линии. Всё происходит мгновенно за один вызов.

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

Финальный шаг — стандартная конфигурация объекта Game и его создание. В этом примере используется простая сцена с тёмно-серым фоном.

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

const game = new Phaser.Game(config);

После запуска игры вы увидите, как 300 синих сфер образовали плотную прямую дорожку между указанными точками.

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

Phaser.Actions.RandomLine() — мощный и лаконичный инструмент для создания линейных композиций со случайным заполнением. Он избавляет от необходимости писать циклы и математические формулы для расчёта позиций на отрезке. **Идеи для экспериментов:** 1. Анимируйте линию, изменяя её координаты (line.x1, line.y1 и т.д.) в update(), и повторно применяйте действие RandomLine — объекты будут «перетекать» вдоль движущегося пути. 2. Используйте несколько линий и разных групп, чтобы создавать сложные сетки или узоры из объектов. 3. Комбинируйте RandomLine с другими действиями, например, RandomRotate или SetTint, чтобы добавить разнообразия внешнему виду объектов на линии.