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

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

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

    create ()
    {
        const rect = new Phaser.Geom.Rectangle(100, 100, 300, 180);

        //  Each point is 10px apart
        // var points = Phaser.Geom.Rectangle.MarchingAnts(rect, 10);

        //  In this version we get the points based on passing in a quantity of 64 points only
        const points = Phaser.Geom.Rectangle.MarchingAnts(rect, false, 64);

        for (let i = 0; i < points.length; i++)
        {
            this.add.image(points[i].x, points[i].y, 'chunk');
        }
    }
}

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

const game = new Phaser.Game(config);

Суть метода MarchingAnts

Метод Phaser.Geom.Rectangle.MarchingAnts — это статическая функция, которая вычисляет серию точек, равномерно распределённых по периметру прямоугольника. Эти точки можно использовать для отрисовки прерывистого или анимированного контура.

Метод принимает три аргумента: - Сам прямоугольник (объект Phaser.Geom.Rectangle). - Шаг (step) или флаг для использования количества точек (quantity). - Количество точек (quantity), если второй аргумент — false.

В примере используется второй вариант, где мы явно задаём количество точек (64), а не шаг между ними.

Разбор кода: от геометрии к спрайтам

В методе create сцены сначала создаётся прямоугольник. Затем вызывается MarchingAnts для получения массива точек.

const rect = new Phaser.Geom.Rectangle(100, 100, 300, 180);
const points = Phaser.Geom.Rectangle.MarchingAnts(rect, false, 64);

Здесь rect определяет область (x=100, y=100, ширина=300, высота=180). Второй аргумент false указывает, что мы используем третий аргумент (64) как общее количество точек, а не как шаг в пикселях.

Далее в цикле каждая точка становится позицией для спрайта 'chunk'.

for (let i = 0; i < points.length; i++)
{
    this.add.image(points[i].x, points[i].y, 'chunk');
}

В результате по контуру прямоугольника равномерно размещается 64 спрайта, создавая эффект пунктирной линии. Если бы спрайты были анимированы или меняли прозрачность, мы получили бы классический эффект "бегущих муравьёв".

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

Сгенерированные точки — это просто массив объектов с координатами `xиy`. Это даёт большую гибкость:

1. **Визуализация области:** Можно рисовать не спрайтами, а с помощью графики (this.add.graphics), создавая точки, линии или дуги. 2. **Динамический контур:** Изменяя положение или размер прямоугольника rect в реальном времени (например, при перетаскивании), можно мгновенно пересчитать и перерисовать контур. 3. **Траектория движения:** Эти точки могут служить путём для движения объекта по периметру прямоугольника с помощью Phaser.Curves.Path или tween-анимации.

Попробуйте заменить второй аргумент на число, чтобы задать шаг в пикселях:

// Точки будут расставлены с интервалом в 15 пикселей
var points = Phaser.Geom.Rectangle.MarchingAnts(rect, 15);

Количество точек в этом случае будет вычислено автоматически, исходя из периметра прямоугольника и шага.

Оптимизация и расширение

В примере для каждой точки создаётся новый объект Image, что для большого количества точек может быть накладно. Рассмотрите альтернативы:

- **Использование одного Graphics:** Нарисовать все точки или линии одним вызовом.

const graphics = this.add.graphics({ fillStyle: { color: 0xff0000 } });
points.forEach(p => graphics.fillPoint(p.x, p.y, 3));

- **Частицевая система (ParticleEmitter):** Можно использовать массив точек как зону эмиттера для создания более сложных визуальных эффектов (например, мерцающей пыли по контуру). - **Обновление в реальном времени:** Если прямоугольник меняется, нужно пересчитывать массив points и обновлять позиции спрайтов или графики. Для этого логику лучше вынести в отдельный метод.

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

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

Phaser.Geom.Rectangle.MarchingAnts — это мощный, но простой инструмент для работы с контурами. Он отделяет логику геометрии от визуализации, позволяя создавать разнообразные эффекты выделения и анимации. Для экспериментов попробуйте: 1. Анимировать прозрачность или масштаб спрайтов 'chunk' по таймеру, чтобы создать иллюзию движения. 2. Использовать полученные точки как контрольные для кривой Безье или пути (Path), чтобы объект плавно "обходил" выделенную область. 3. Применить этот метод не к прямоугольнику, а к другой геометрической фигуре (например, к Ellipse), предварительно преобразовав её в набор точек по периметру.