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

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

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

Версия 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 ellipse = new Phaser.Geom.Ellipse(400, 300, 600, 300);

        const points = ellipse.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);

Создание геометрического примитива

Всё начинается с создания объекта эллипса. Класс Phaser.Geom.Ellipse принимает координаты центра и размеры по осям.

const ellipse = new Phaser.Geom.Ellipse(400, 300, 600, 300);

Здесь мы создаём эллипс с центром в точке (400, 300). Ширина (горизонтальный диаметр) равна 600 пикселям, а высота (вертикальный диаметр) — 300 пикселям. Этот объект пока существует только как математическое представление и не отрисовывается на экране.

Извлечение точек контура

Ключевой метод для работы — getPoints(quantity). Он вычисляет и возвращает массив точек (Phaser.Geom.Point), равномерно распределённых по периметру фигуры.

const points = ellipse.getPoints(32);

Аргумент 32 определяет количество точек, которые мы хотим получить. Чем больше число, тем выше точность аппроксимации контура, но и тем больше вычислительная нагрузка. Для плавного эллипса часто хватает 32-64 точек. В результате points становится массивом из 32 объектов, каждый со свойствами `xиy`.

Визуализация результата

Чтобы увидеть полученные точки, необходимо их нарисовать. В примере для отрисовки используется объект 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);
}

Вычитание 4 из координат `xиy` нужно для центрирования квадрата размером 8x8 пикселей на самой точке. В итоге на экране мы увидим эллипс, «нарисованный» красными точками.

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

Полученный массив точек — это не просто визуализация. Это готовые данные для игровой логики.

* **Расстановка объектов:** Вы можете пройтись по массиву points и разместить на этих позициях спрайты врагов, элементов интерфейса или декораций, создав идеально ровное круговое построение.

points.forEach(point => {
    this.add.sprite(point.x, point.y, 'element');
});

* **Движение по траектории:** Координаты точек можно использовать для задания пути следования объекта через Path или простой линейной интерполяции, заставив его двигаться по эллиптической орбите. * **Сложные коллайдеры:** Если встроенных фигур коллайдера недостаточно, точки эллипса могут стать основой для создания полигонального коллайдера вручную, используя физический движок.

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

Метод getPoints() геометрических объектов Phaser — это мост между абстрактной математикой и игровой практикой. Он превращает фигуру в готовый набор координат для расстановки, движения и проверки столкновений. Попробуйте поэкспериментировать: измените количество точек, чтобы найти баланс между плавностью и производительностью; используйте полученные точки для создания «пояса астероидов» вокруг планеты или для реализации циклического меню выбора заклинаний.