Кривые: QuadraticBezier, CubicBezier, Spline, Path

Phaser предоставляет мощный инструментарий для создания и управления кривыми, который позволяет анимировать объекты, рисовать сложные траектории и строить интерактивные пути движения. Основные типы кривых: QuadraticBezier, CubicBezier, Spline и Path. Каждая из них имеет свои особенности, синтаксис и применения.

QuadraticBezier

QuadraticBezier — это квадратичная кривaя Безье, определяемая тремя точками: начальной, контрольной и конечной. Она идеально подходит для плавных дуг и простых анимаций движения.

Создание квадратичной кривой:

let curve = new Phaser.Curves.QuadraticBezier(
    new Phaser.Math.Vector2(100, 100), // начальная точка
    new Phaser.Math.Vector2(200, 50),  // контрольная точка
    new Phaser.Math.Vector2(300, 100)  // конечная точка
);

Основные методы:

  • getPoint(t) — возвращает координаты точки на кривой при параметре t от 0 до 1.
  • getPoints(segments) — возвращает массив точек, разбивающих кривую на указанное количество сегментов.
  • draw(graphics) — рисует кривую на объекте Phaser.GameObjects.Graphics.

Пример использования для рисования кривой:

let graphics = this.add.graphics({ lineStyle: { width: 2, color: 0xff0000 } });
curve.draw(graphics);

CubicBezier

CubicBezier представляет кубическую кривую Безье, определяемую четырьмя точками: начальной, двумя контрольными и конечной. Она позволяет строить более сложные формы и изгибы по сравнению с квадратичной кривой.

Создание кубической кривой:

let cubic = new Phaser.Curves.CubicBezier(
    new Phaser.Math.Vector2(50, 150),  // начальная точка
    new Phaser.Math.Vector2(150, 50),  // первая контрольная точка
    new Phaser.Math.Vector2(250, 250), // вторая контрольная точка
    new Phaser.Math.Vector2(350, 150)  // конечная точка
);

Методы и особенности:

  • getPoint(t) и getPoints(segments) работают аналогично QuadraticBezier.
  • Для анимации объекта по кубической кривой используется curve.getPoint(t) совместно с Phaser.Tweens.Tween.

Пример анимации объекта по кривой:

this.tweens.add({
    targets: sprite,
    t: 1,
    ease: 'Linear',
    duration: 2000,
    onUpdate: () => {
        let position = cubic.getPoint(sprite.t);
        sprite.setPosition(position.x, position.y);
    }
});
sprite.t = 0;

Spline

Spline — это сглаженная кривая через множество точек, известная как кубическая сплайн-интерполяция. Она полезна для создания сложных траекторий движения, плавного соединения нескольких сегментов и генерации кривых для фона или маршрутов.

Создание сплайна:

let points = [
    new Phaser.Math.Vector2(50, 200),
    new Phaser.Math.Vector2(150, 100),
    new Phaser.Math.Vector2(250, 300),
    new Phaser.Math.Vector2(350, 200)
];

let spline = new Phaser.Curves.Spline(points);

Методы:

  • getPoint(t) возвращает координаты на кривой.
  • getPoints(segments) позволяет разбить кривую на равные сегменты.
  • draw(graphics) рисует кривую на холсте.

Сплайн автоматически сглаживает переходы между точками, создавая плавный визуальный эффект. Для управления кривизной можно добавлять больше точек и менять их расположение.

Path

Path — это контейнер для нескольких кривых и линий, позволяющий комбинировать QuadraticBezier, CubicBezier, Spline и обычные линейные сегменты в одну траекторию. Path используется для сложных маршрутов движения или последовательного рисования фигур.

Создание и добавление кривых в Path:

let path = this.add.path(50, 50);
path.lineTo(100, 100);
path.quadraticBezierTo(150, 50, 200, 100);
path.cubicBezierTo(250, 150, 350, 50, 400, 100);

Особенности Path:

  • getPoint(t) возвращает координаты точки на всей траектории Path.
  • getPoints(segments) разбивает всю траекторию на заданное количество сегментов.
  • Path можно анимировать так же, как отдельные кривые, используя Tween и метод getPoint.

Пример движения объекта по Path:

this.tweens.add({
    targets: sprite,
    t: 1,
    ease: 'Linear',
    duration: 3000,
    onUpdate: () => {
        let position = path.getPoint(sprite.t);
        sprite.setPosition(position.x, position.y);
    }
});
sprite.t = 0;

Советы по использованию кривых

  • Для плавной анимации важно равномерно распределять точки кривой с помощью getPoints.
  • Комбинация Path с различными типами кривых позволяет создавать сложные, динамичные маршруты.
  • Сплайн лучше использовать для сложных маршрутов с множеством точек, где требуется естественная плавность.
  • Кривые Безье (Quadratic и Cubic) эффективны для контролируемых изгибов и точного управления траекторией.

Кривые Phaser обеспечивают гибкость как для визуальных эффектов, так и для движения объектов, создавая естественные, эстетически привлекательные траектории и маршруты в играх и интерактивных приложениях.

Оглавление