О чем этот пример
Кривые — мощный инструмент в арсенале игрового разработчика, позволяющий задавать сложные траектории движения, формировать контуры объектов или создавать плавные анимации. Однако для эффективной работы с ними часто необходимо знать их пространственные границы, например, для проверки столкновений или определения видимой области. В этой статье мы разберем пример из официальной коллекции Phaser, который наглядно демонстрирует создание линейной кривой, расчет её ограничивающего прямоугольника (bounds) и интерактивное управление её точками. Вы научитесь динамически обновлять геометрию и визуализировать эти изменения в реальном времени.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
graphics;
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();
this.curve = new Phaser.Curves.Line([ 100, 100, 600, 400 ]);
// curve = new Phaser.Curves.Line(new Phaser.Math.Vector2(100, 100), new Phaser.Math.Vector2(600, 400));
this.curve.getBounds(this.bounds);
const point0 = this.add.image(this.curve.p0.x, this.curve.p0.y, 'dragcircle', 0)
.setDataEnabled()
.setInteractive();
const point1 = this.add.image(this.curve.p1.x, this.curve.p1.y, 'dragcircle', 0)
.setDataEnabled()
.setInteractive();
point0.data.set('vector', this.curve.p0);
point1.data.set('vector', this.curve.p1);
this.input.setDraggable([ point0, point1 ]);
this.input.on(Phaser.Input.Events.DRAG_START, (event, gameObject) =>
{
console.log(gameObject);
gameObject.setFrame(1);
});
this.input.on(Phaser.Input.Events.DRAG, (event, gameObject, dragX, dragY) =>
{
gameObject.x = dragX;
gameObject.y = dragY;
gameObject.data.get('vector').set(dragX, dragY);
this.curve.getBounds(this.bounds);
});
this.input.on(Phaser.Input.Events.DRAG_END, (event, gameObject) =>
{
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
this.graphics.lineStyle(2, 0xffffff, 1);
this.curve.draw(this.graphics);
// Draw the follower
this.curve.getPoint(this.path.t, this.path.vec);
this.graphics.fillStyle(0xffff00, 1);
this.graphics.fillRect(this.path.vec.x - 8, this.path.vec.y - 8, 16, 16);
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Инициализация сцены и создание кривой
Вся логика примера размещена в классе сцены Example. В методе create() происходит основная настройка.
Сначала создается объект Graphics для рисования и объявляются основные переменные: path (хранит состояние анимации вдоль кривой), bounds (прямоугольник для границ) и сама кривая curve.
Кривая создается с помощью класса Phaser.Curves.Line. Её можно инициализировать двумя способами: передав массив координат [x1, y1, x2, y2] или два векторных объекта. В примере используется первый способ.
Сразу после создания вызывается метод getBounds(), который вычисляет и записывает в переданный объект Phaser.Geom.Rectangle минимальный прямоугольник, охватывающий всю кривую.
this.curve = new Phaser.Curves.Line([ 100, 100, 600, 400 ]);
this.curve.getBounds(this.bounds);Интерактивные точки и перетаскивание
Чтобы кривая стала интерактивной, в позициях её начальной (p0) и конечной (p1) точек создаются спрайты-кружки из загруженного спрайтшита.
Каждому спрайту включается система данных (setDataEnabled()), и в неё записывается ссылка на соответствующий вектор кривой. Это ключевой момент: перемещая спрайт, мы будем обновлять не просто его координаты, но и исходные данные кривой.
point0.data.set('vector', this.curve.p0);
point1.data.set('vector', this.curve.p1);
this.input.setDraggable([ point0, point1 ]);Далее настраиваются обработчики событий перетаскивания DRAG_START, DRAG и DRAG_END. Во время перетаскивания (DRAG) обновляются координаты спрайта и связанного с ним вектора кривой. После каждого изменения позиции точки необходимо заново вычислить границы кривой.
this.input.on(Phaser.Input.Events.DRAG, (event, gameObject, dragX, dragY) => {
gameObject.x = dragX;
gameObject.y = dragY;
gameObject.data.get('vector').set(dragX, dragY);
this.curve.getBounds(this.bounds); // Пересчет границ!
});Анимация и отрисовка в update()
Для демонстрации движения по кривой создается tween-анимация, которая циклически меняет значение this.path.t от 0 до 1 и обратно.
Каждый кадр в методе update() происходит полная перерисовка.
1. Очистка холста Graphics.
2. Отрисовка зеленого прямоугольника границ (this.bounds).
3. Отрисовка белой линии самой кривой с помощью метода curve.draw().
4. Вычисление текущей точки на кривой для значения `t` и отрисовка в этом месте желтого квадрата-маркера.
this.graphics.clear();
this.graphics.lineStyle(1, 0x00ff00, 1).strokeRectShape(this.bounds);
this.graphics.lineStyle(2, 0xffffff, 1);
this.curve.draw(this.graphics);
this.curve.getPoint(this.path.t, this.path.vec);
this.graphics.fillStyle(0xffff00, 1);
this.graphics.fillRect(this.path.vec.x - 8, this.path.vec.y - 8, 16, 16);Таким образом, мы видим, как прямоугольник границ автоматически подстраивается под новую форму кривой при перемещении её концов.
Что попробовать дальше
Этот пример — отличная основа для понимания работы с кривыми в Phaser. Вы научились создавать линейную кривую, вычислять её ограничивающую область и динамически управлять её геометрией. Экспериментируйте: попробуйте заменить Line на Spline или Quadratic Bezier, добавьте проверку столкновений маркера с границами (Phaser.Geom.Rectangle.ContainsPoint) или создайте цепочку из нескольких кривых, формирующих сложный путь для игрового персонажа.