Интерактивная кривая Безье в Phaser: оживляем геометрию

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

Кривые Безье — это мощный инструмент для создания плавных траекторий и органичных движений в играх. В этой статье мы разберем, как создать интерактивную квадратичную кривую Безье в Phaser, которую можно менять в реальном времени, перетаскивая контрольные точки. Этот подход полезен для проектирования путей следования объектов, анимационных траекторий или создания гибких редакторов уровней прямо внутри игры. Мы будем использовать класс `Phaser.Curves.QuadraticBezier` и научимся визуализировать кривую, динамически обновлять её точки и анимировать движение объекта по заданному пути. Полученный пример станет отличной основой для ваших собственных инструментов разработки.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    graphics;
    points;
    curve;
    path;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.spritesheet('dragcircle', 'assets/sprites/dragcircle.png', { frameWidth: 16 });
    }

    create ()
    {
        this.graphics = this.add.graphics();

        this.path = { t: 0, vec: new Phaser.Math.Vector2() };

        const startPoint = new Phaser.Math.Vector2(50, 260);
        const controlPoint1 = new Phaser.Math.Vector2(610, 25);
        const endPoint = new Phaser.Math.Vector2(735, 550);

        this.curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint1, endPoint);

        this.points = this.curve.getSpacedPoints(32);

        const point0 = this.add.image(startPoint.x, startPoint.y, 'dragcircle', 0).setInteractive();
        const point1 = this.add.image(endPoint.x, endPoint.y, 'dragcircle', 0).setInteractive();
        const point2 = this.add.image(controlPoint1.x, controlPoint1.y, 'dragcircle', 2).setInteractive();

        point0.setData('vector', startPoint);
        point1.setData('vector', endPoint);
        point2.setData('vector', controlPoint1);

        point0.setData('isControl', false);
        point1.setData('isControl', false);
        point2.setData('isControl', true);

        this.input.setDraggable([ point0, point1, point2 ]);

        this.input.on('dragstart', (pointer, gameObject) =>
        {

            gameObject.setFrame(1);

        });

        this.input.on('drag', (pointer, gameObject, dragX, dragY) =>
        {

            gameObject.x = dragX;
            gameObject.y = dragY;

            gameObject.data.get('vector').set(dragX, dragY);

            //  Get 32 points equally spaced out along the curve
            this.points = this.curve.getSpacedPoints(32);

        });

        this.input.on('dragend', (pointer, gameObject) =>
        {

            if (gameObject.data.get('isControl'))
            {
                gameObject.setFrame(2);
            }
            else
            {
                gameObject.setFrame(0);
            }

        });

        this.tweens.add({
            targets: this.path,
            t: 1,
            ease: 'Sine.easeInOut',
            duration: 2000,
            yoyo: true,
            repeat: -1
        });
    }

    update ()
    {
        this.graphics.clear();

        //  Draw the curve through the points
        this.graphics.lineStyle(1, 0xff00ff, 1);

        this.curve.draw(this.graphics);

        //  Draw t
        this.curve.getPoint(this.path.t, this.path.vec);

        this.graphics.fillStyle(0xffff00, 1);
        this.graphics.fillCircle(this.path.vec.x, this.path.vec.y, 16);
    }
}

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

const game = new Phaser.Game(config);

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

В методе create подготавливается графика, определяется путь для анимации и создается сама кривая.

Объект this.path хранит текущую позицию `t` (от 0 до 1) на кривой и вектор для расчетов. Кривая Безье создается тремя точками: начальной, конечной и контрольной. Контрольная точка не лежит на кривой, но влияет на её форму.

this.path = { t: 0, vec: new Phaser.Math.Vector2() };
const startPoint = new Phaser.Math.Vector2(50, 260);
const controlPoint1 = new Phaser.Math.Vector2(610, 25);
const endPoint = new Phaser.Math.Vector2(735, 550);
this.curve = new Phaser.Curves.QuadraticBezier(startPoint, controlPoint1, endPoint);

Метод this.curve.getSpacedPoints(32) сразу получает 32 точки, равномерно распределенные вдоль кривой. Эти точки будут использоваться для перерисовки.

Создание интерактивных точек-спрайтов

Для каждой из трёх точек создаются спрайты из спрайтшита 'dragcircle'. Они делаются интерактивными и становятся перетаскиваемыми.

Каждому спрайту через setData присваиваются связанные данные: исходный вектор-точку и флаг, является ли она контрольной. Это нужно, чтобы позднее обновлять геометрию кривой и менять внешний вид спрайта.

const point0 = this.add.image(startPoint.x, startPoint.y, 'dragcircle', 0).setInteractive();
point0.setData('vector', startPoint);
point0.setData('isControl', false);
this.input.setDraggable([ point0, point1, point2 ]);

Обратите внимание, что контрольной точке (point2) изначально задается кадр спрайта с индексом 2, чтобы визуально её отличать.

Обработка перетаскивания и обновление кривой

Логика перетаскивания реализована через обработчики событий dragstart, drag и dragend.

При перетаскивании (drag) координаты спрайта обновляются, а связанный с ним вектор (начальный, конечный или контрольный) тоже меняет свои значения с помощью метода .set(). После этого кривая заново рассчитывает массив из 32 точек (getSpacedPoints).

this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
    gameObject.x = dragX;
    gameObject.y = dragY;
    gameObject.data.get('vector').set(dragX, dragY);
    this.points = this.curve.getSpacedPoints(32);
});

В dragstart и dragend меняется кадр спрайта для визуальной обратной связи: при перетаскивании он подсвечивается, а при отпускании возвращается к исходному виду.

Анимация движения по кривой

Phaser Tweens используется для плавного изменения значения `tв объектеthis.path` от 0 до 1 и обратно.

this.tweens.add({
    targets: this.path,
    t: 1,
    ease: 'Sine.easeInOut',
    duration: 2000,
    yoyo: true,
    repeat: -1
});

Это создает бесконечную анимацию движения точки по кривой. Значение t=0 соответствует началу кривой, t=1 — её концу.

Визуализация в методе Update

Каждый кадр в методе update графика очищается, кривая перерисовывается, и вычисляется позиция анимированной точки.

Сначала задается стиль линии и рисуется сама кривая с помощью метода this.curve.draw().

this.graphics.clear();
this.graphics.lineStyle(1, 0xff00ff, 1);
this.curve.draw(this.graphics);

Затем для текущего значения `tизthis.pathвычисляется соответствующая точка на кривой методомgetPoint. Результат записывается вthis.path.vec`, и в этой позиции рисуется жёлтый круг.

this.curve.getPoint(this.path.t, this.path.vec);
this.graphics.fillStyle(0xffff00, 1);
this.graphics.fillCircle(this.path.vec.x, this.path.vec.y, 16);

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

Вы создали полностью интерактивную кривую Безье, форму которой можно менять в реальном времени, просто перетаскивая точки. Полученный пример — это готовая основа для множества практических применений. **Идеи для экспериментов:** 1. Сделать так, чтобы по кривой двигался не просто круг, а спрайт игрока или врага. 2. Добавить больше контрольных точек, перейдя к кубической кривой Безье (Phaser.Curves.CubicBezier). 3. Реализовать сохранение и загрузку координат точек кривой для создания предустановленных траекторий. 4. Использовать кривую в качестве пути для камеры (this.cameras.main) для создания кинематографичных пролётов.