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

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

Создание равномерно распределённых точек по контуру фигуры — частая задача в игровой разработке. Например, для расстановки врагов по кругу, создания круговых UI-элементов или визуальных эффектов. Метод `getPoints()` геометрического объекта `Circle` решает эту задачу одной строкой кода. В этой статье мы разберём, как его использовать для получения координат и визуализации точек на окружности.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 }, fillStyle: { color: 0xff0000 }});

        const circle = new Phaser.Geom.Circle(400, 300, 170);

        const points = circle.getPoints(32);

        for (let i = 0; i < points.length; i++)
        {
            const p = points[i];

            graphics.fillRect(p.x - 4, p.y - 4, 8, 8);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание геометрического объекта Circle

Первый шаг — создать объект окружности. В Phaser для этого используется класс Phaser.Geom.Circle. Его конструктор принимает три основных параметра: координаты центра по осям X и Y и радиус.

const circle = new Phaser.Geom.Circle(400, 300, 170);

В этом примере создаётся окружность с центром в точке (400, 300) и радиусом 170 пикселей. Эти координаты отсчитываются от верхнего левого угла игрового холста. Такой объект является чисто математическим описанием фигуры и сам по себе не отрисовывается на экране.

Получение массива точек методом getPoints

Ключевой метод для нашей задачи — getPoints(quantity). Он вызывается у экземпляра Phaser.Geom.Circle и возвращает массив объектов Phaser.Geom.Point. Каждая точка содержит свойства `xиy`.

const points = circle.getPoints(32);

Аргумент quantity определяет, сколько точек нужно получить. Метод равномерно распределяет указанное количество точек по окружности. В примере мы запрашиваем 32 точки. Важно понимать, что точки располагаются именно на контуре (границе) окружности, а не внутри неё.

Визуализация полученных точек

Чтобы увидеть результат, необходимо отрисовать каждую точку. Для графики в Phaser используется объект Graphics. В примере он настраивается с зелёным контуром и красной заливкой.

const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 }, fillStyle: { color: 0xff0000 }});

Далее в цикле мы перебираем массив точек. Для визуализации точки как небольшого квадрата используется метод fillRect(x, y, width, height).

for (let i = 0; i < points.length; i++)
{
    const p = points[i];
    graphics.fillRect(p.x - 4, p.y - 4, 8, 8);
}

Код p.x - 4, p.y - 4 смещает координаты так, чтобы точка (которая считается центром нашего квадрата) оказалась в центре нарисованного прямоугольника размером 8x8 пикселей. В итоге на экране мы увидим 32 красных квадрата, образующих круг.

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

Метод Phaser.Geom.Circle.getPoints() — это мощный и простой инструмент для получения координат на окружности. Попробуйте изменить количество точек в вызове метода — вы увидите, как меняется плотность их распределения. Это можно применить для создания планетарных орбит, точек появления врагов в круговой арене или для построения сложных фигур на основе окружности. По аналогии можно исследовать методы getPoints у других геометрических объектов, например, Phaser.Geom.Rectangle.