О чем этот пример
Кривые Безье — мощный инструмент для создания плавных траекторий движения, контуров объектов или сложных путей в играх. Этот пример Phaser демонстрирует не только как создавать и отрисовывать кубическую кривую Безье, но и как динамически вычислять её ограничивающий прямоугольник, получать набор точек на кривой и, что самое главное, делать всю эту систему интерактивной. Понимание этих принципов открывает двери к созданию редакторов путей для врагов, трасс для гонок или плавных анимационных маршрутов.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
graphics;
points;
bounds;
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() };
this.bounds = new Phaser.Geom.Rectangle();
const startPoint = new Phaser.Math.Vector2(50, 260);
const controlPoint1 = new Phaser.Math.Vector2(610, 25);
const controlPoint2 = new Phaser.Math.Vector2(320, 370);
const endPoint = new Phaser.Math.Vector2(735, 550);
this.curve = new Phaser.Curves.CubicBezier(startPoint, controlPoint1, controlPoint2, endPoint);
this.curve.getBounds(this.bounds);
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();
const point3 = this.add.image(controlPoint2.x, controlPoint2.y, 'dragcircle', 2).setInteractive();
point0.setData('vector', startPoint);
point1.setData('vector', endPoint);
point2.setData('vector', controlPoint1);
point3.setData('vector', controlPoint2);
point0.setData('isControl', false);
point1.setData('isControl', false);
point2.setData('isControl', true);
point3.setData('isControl', true);
this.input.setDraggable([ point0, point1, point2, point3 ]);
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.curve.getBounds(this.bounds);
});
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 bounds
this.graphics.lineStyle(1, 0x00ff00, 1).strokeRectShape(this.bounds);
// 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() закладывается основа примера. Создаются основные объекты: Graphics для рисования, объект path для хранения позиции анимированной точки и прямоугольник bounds для границ кривой.
Ключевой элемент — создание кубической кривой Безье (Phaser.Curves.CubicBezier). Для её определения необходимы четыре точки: начальная, конечная и две контрольные. Контрольные точки не лежат на самой кривой, но определяют её форму, "притягивая" к себе линию.
const startPoint = new Phaser.Math.Vector2(50, 260);
const controlPoint1 = new Phaser.Math.Vector2(610, 25);
const controlPoint2 = new Phaser.Math.Vector2(320, 370);
const endPoint = new Phaser.Math.Vector2(735, 550);
this.curve = new Phaser.Curves.CubicBezier(startPoint, controlPoint1, controlPoint2, endPoint);Сразу после создания кривой вызываются два важных метода: getBounds() для вычисления прямоугольной области, в которую она вписана, и getSpacedPoints() для получения массива из 32 точек, равномерно распределённых вдоль кривой. Эти данные будут использоваться для отрисовки.
Интерактивные точки и перетаскивание
Чтобы кривую можно было редактировать в реальном времени, все четыре точки визуализируются с помощью спрайтов из spritesheet и делаются перетаскиваемыми.
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();
const point3 = this.add.image(controlPoint2.x, controlPoint2.y, 'dragcircle', 2).setInteractive();Каждому спрайту через setData() привязываются исходный вектор-точка и флаг, указывающий, является ли она контрольной. Это позволяет в обработчиках событий знать, с каким именно элементом кривой мы работаем.
Обработчики событий dragstart, drag и dragend реализуют логику перетаскивания. Самый важный — drag. При каждом перемещении мыши:
1. Обновляется позиция спрайта.
2. Обновляются координаты привязанного к нему вектора (это напрямую меняет исходные данные кривой).
3. Заново вычисляется массив точек this.points и ограничивающий прямоугольник this.bounds.
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);
this.curve.getBounds(this.bounds);
});Таким образом, кривая и её свойства мгновенно пересчитываются при любом изменении.
Визуализация и анимация
Вся отрисовка происходит в методе update(). Перед каждым кадром холст Graphics очищается вызовом this.graphics.clear().
Затем отрисовываются три элемента:
1. **Зелёный ограничивающий прямоугольник (bounds)**. Он показывает минимальную область, содержащую всю кривую.
this.graphics.lineStyle(1, 0x00ff00, 1).strokeRectShape(this.bounds);2. **Сама кривая Безье фиолетового цвета**. Для этого у кривой есть удобный метод draw().
this.graphics.lineStyle(1, 0xff00ff, 1);
this.curve.draw(this.graphics);3. **Жёлтая анимированная точка**, которая движется вдоль кривой. Её позиция определяется с помощью curve.getPoint(t), где `t— параметр от 0 (начало кривой) до 1 (конец кривой). Значениеtплавно изменяется от 0 до 1 и обратно с помощьюTween`.
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);Анимация точки наглядно демонстрирует, как параметр `t` соотносится с позицией на кривой.
Конфигурация игры и запуск
Сцена Example передаётся в стандартную конфигурацию игры Phaser. Важные параметры:
- width и height задают размер холста.
- backgroundColor устанавливает тёмно-серый фон для лучшего контраста с графикой.
- parent указывает ID HTML-элемента, в который будет встроен canvas.
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);Инициализация игры с этой конфигурацией запускает весь описанный цикл: загрузку ресурсов, создание сцены и непрерывный цикл обновления update.
Что попробовать дальше
Этот пример — отличная отправная точка для работы с кривыми в Phaser. Вы научились создавать, визуализировать и динамически изменять кубические кривые Безье. Для экспериментов попробуйте: изменить количество точек, получаемых getSpacedPoints(), чтобы увидеть, как это влияет на сглаживание; использовать массив this.points для расстановки спрайтов вдоль кривой; или привязать движение игрового объекта к анимированной точке, создав плавный патрульный маршрут.