О чем этот пример
Кривые Безье — мощный инструмент для создания плавных и предсказуемых траекторий, будь то полёт снаряда, движение врага по заданному пути или камера, следующая за героем. В статье разбираем пример из официального репозитория Phaser, который позволяет не только отрисовать кубическую кривую Безье, но и интерактивно менять её форму прямо в браузере. Этот подход полезен для прототипирования и тонкой настройки перемещений в игре без перезапуска проекта.
Версия 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 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.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.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`) и вектор для вычислений. Затем определяются четыре ключевые точки для кривой Безье: начальная, конечная и две контрольные.
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 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);С помощью метода curve.getSpacedPoints(32) мы получаем 32 точки, равномерно распределённые вдоль кривой. Эти точки используются для её отрисовки. Далее создаются спрайты (изображения кругов) в координатах этих четырёх ключевых точек. Каждому спрайту через setData() привязывается исходный вектор-объект и флаг, является ли он контрольной точкой. Это важно для последующей логики перетаскивания и визуального оформления.
Интерактивность: перетаскивание точек
Все четыре спрайта-точки делаются перетаскиваемыми с помощью this.input.setDraggable(). Далее настраиваются обработчики событий драга.
При начале перетаскивания (dragstart) спрайт меняет кадр на активный (frame 1).
this.input.on('dragstart', (pointer, gameObject) => {
gameObject.setFrame(1);
});Во время перетаскивания (drag) обновляются координаты спрайта и связанного с ним векторного объекта. После этого кривая пересчитывается, и мы заново получаем массив из 32 точек для её отображения.
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);
});По окончании перетаскивания (dragend) спрайт возвращается к своему исходному кадру в зависимости от типа точки: 0 для начальной/конечной и 2 для контрольной.
this.input.on('dragend', (pointer, gameObject) => {
if (gameObject.data.get('isControl')) {
gameObject.setFrame(2);
} else {
gameObject.setFrame(0);
}
});Эта система обеспечивает интуитивно понятный редактор кривой прямо в игре.
Анимация и отрисовка
Для демонстрации движения по кривой создаётся твин, который циклически меняет значение this.path.t от 0 до 1 и обратно. Именно этот параметр `t` определяет позицию на кривой.
this.tweens.add({
targets: this.path,
t: 1,
ease: 'Sine.easeInOut',
duration: 2000,
yoyo: true,
repeat: -1
});В методе update() каждый кадр сначала очищается графика (this.graphics.clear()), затем задаётся стиль линии и рисуется сама кривая с помощью this.curve.draw(this.graphics).
this.graphics.clear();
this.graphics.lineStyle(1, 0xff00ff, 1);
this.curve.draw(this.graphics);Далее, используя текущее значение `t, вычисляется соответствующая точка на кривой методом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);Таким образом, жёлтый шарик наглядно демонстрирует, как параметр `t` соответствует позиции на интерактивно изменяемой кривой.
Что попробовать дальше
Пример наглядно показывает, как работать с кривыми Безье в Phaser для создания динамических траекторий. Используя этот подход, вы можете, например, задавать путь патрулирования для NPC, который дизайнер сможет редактировать прямо в игре. Для экспериментов попробуйте: изменить количество точек в getSpacedPoints() для более гладкой или, наоборот, угловатой кривой; привязать к движущейся по кривой точке не спрайт круга, а спрайт персонажа, вращая его в соответствии с направлением движения (касательной к кривой); использовать не кубическую, а квадратичную кривую Безье (Phaser.Curves.QuadraticBezier) для более простых дуг.