О чем этот пример
Работа с кривыми и путями — ключевой навык для создания плавного и управляемого движения в играх. В этой статье мы разберем пример из официальной документации 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.path = { t: 0, vec: new Phaser.Math.Vector2() };
this.curve = new Phaser.Curves.Spline([
20, 550,
260, 450,
300, 250,
550, 145,
745, 256
]);
this.points = this.curve.points;
// Create drag-handles for each point
for (let i = 0; i < this.points.length; i++)
{
const point = this.points[i];
const handle = this.add.image(point.x, point.y, 'dragcircle', 0).setInteractive();
handle.setData('vector', point);
this.input.setDraggable(handle);
}
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);
});
this.input.on('dragend', (pointer, gameObject) =>
{
gameObject.setFrame(0);
});
this.tweens.add({
targets: this.path,
t: 1,
ease: 'Sine.easeInOut',
duration: 2000,
yoyo: true,
repeat: -1
});
this.graphics = this.add.graphics();
}
update ()
{
this.graphics.clear();
this.graphics.lineStyle(2, 0xffffff, 1);
this.curve.draw(this.graphics, 64);
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, 8);
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Подготовка сцены и создание сплайна
В методе preload загружается спрайт, который будет служить интерактивной ручкой для перетаскивания. Это простой спрайтшит с двумя кадрами, чтобы визуально отличать активное и неактивное состояние.
В методе create инициализируется ключевая структура данных path, которая будет хранить текущую позицию на кривой и вектор для расчетов.
Далее создается сама кривая типа Spline. Ей передается массив чисел, который интерпретируется как последовательность координат точек: [x1, y1, x2, y2, ...]. Эти точки станут контрольными точками сплайна, определяющими его форму.
this.curve = new Phaser.Curves.Spline([
20, 550,
260, 450,
300, 250,
550, 145,
745, 256
]);Ссылка на массив точек кривой сохраняется в свойстве this.points для удобства доступа.
Создание интерактивных ручек для управления
Для каждой контрольной точки создается интерактивный спрайт-ручка. Важный момент: в пользовательские данные (Data Manager) спрайта записывается ссылка на сам объект точки кривой из массива this.points. Это создает прямую связь между визуальным элементом и математической точкой, определяющей кривую.
const handle = this.add.image(point.x, point.y, 'dragcircle', 0).setInteractive();
handle.setData('vector', point);
this.input.setDraggable(handle);Затем настраиваются обработчики событий перетаскивания:
- dragstart: Меняет кадр спрайта на активный (1).
- drag: Обновляет позицию спрайта, а затем, через сохраненную ссылку, обновляет координаты самой точки кривой. Именно вызов set(dragX, dragY) изменяет форму сплайна в реальном времени.
gameObject.data.get('vector').set(dragX, dragY);- dragend: Возвращает спрайту исходный кадр (0).
Анимация движения по кривой
Чтобы продемонстрировать, как объект следует по созданной кривой, в сцене запускается бесконечный tween. Он анимирует свойство `tобъектаthis.pathот 0 до 1 и обратно. Значениеt` — это нормализованная позиция на кривой (0 — начало, 1 — конец).
this.tweens.add({
targets: this.path,
t: 1,
ease: 'Sine.easeInOut',
duration: 2000,
yoyo: true,
repeat: -1
});Также создается объект Graphics, который будет использоваться для отрисовки кривой и движущейся точки в методе update.
Отрисовка и обновление в реальном времени
Каждый кадр в update выполняется перерисовка. Сначала очищается предыдущий кадр с помощью this.graphics.clear().
Затем задается стиль линии и рисуется сама кривая. Метод curve.draw принимает объект Graphics и количество отрезков для аппроксимации кривой (чем больше, тем она глаже).
this.graphics.lineStyle(2, 0xffffff, 1);
this.curve.draw(this.graphics, 64);Далее, используя текущее значение this.path.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, 8);Что попробовать дальше
Вы создали полностью интерактивную кривую, форму которой можно менять мышью в реальном времени, наблюдая за изменением траектории движущегося объекта. Этот фундамент можно использовать для множества экспериментов: попробуйте привязать к движущейся точке спрайт врага, сохранять массив точек в локальное хранилище для создания редактора уровней или генерировать сложные пути для кат-сцен, динамически меняя контрольные точки в зависимости от игровых событий.