TweenManager и создание твина

TweenManager — это система управления анимациями в библиотеке Phaser, предназначенная для плавного изменения свойств игровых объектов во времени. Она позволяет анимировать позиции, размеры, прозрачность, вращение и другие свойства спрайтов и контейнеров без необходимости вручную обновлять их в каждом кадре.

В Phaser каждый объект сцены автоматически может быть анимирован через твины, которые создаются через менеджер твинов сцены:

this.tweens.add({
    targets: player,
    x: 400,
    duration: 1000,
    ease: 'Power2'
});

Ключевые параметры:

  • targets — объект или массив объектов, свойства которых будут изменяться.
  • props или прямое указание свойства (например, x, y) — конечные значения анимации.
  • duration — длительность твина в миллисекундах.
  • ease — функция сглаживания изменения значения. Phaser поддерживает большое количество кривых, включая Linear, Power1, Power2, Bounce, Elastic.
  • delay — задержка перед стартом анимации.
  • repeat — количество повторов; -1 для бесконечного повторения.
  • yoyo — логическое значение, указывающее, вернется ли объект к исходной позиции после завершения твина.

Создание и управление твинами

Для создания твина используется метод this.tweens.add(config). Конфигурация твина может быть простой или сложной. Простая конфигурация включает прямое изменение одного свойства, например позиции:

this.tweens.add({
    targets: enemy,
    y: 300,
    duration: 2000,
    ease: 'Linear'
});

Для более сложных анимаций можно одновременно изменять несколько свойств:

this.tweens.add({
    targets: star,
    x: 500,
    y: 200,
    alpha: 0.5,
    scaleX: 2,
    scaleY: 2,
    duration: 1500,
    ease: 'Power3',
    yoyo: true,
    repeat: 2
});

Особенности многосвойственных твинов:

  • Каждый свойство может иметь отдельную кривую ease.
  • Параметры duration и delay можно задавать как для всего твина, так и для отдельного свойства.
  • Использование yoyo создаёт эффект возврата к исходным значениям после завершения анимации.

Встроенные функции обратного вызова

TweenManager поддерживает несколько встроенных обратных вызовов для контроля событий анимации:

  • onStart — вызывается при старте твина.
  • onUpdate — вызывается на каждом кадре изменения.
  • onComplete — вызывается при завершении твина.
  • onRepeat — вызывается при каждом повторе твина.
  • onYoyo — вызывается при срабатывании эффекта yoyo.

Пример с обратными вызовами:

this.tweens.add({
    targets: player,
    x: 600,
    duration: 1000,
    ease: 'Cubic.easeInOut',
    yoyo: true,
    repeat: 1,
    onStart: () => console.log('Твин начался'),
    onComplete: () => console.log('Твин завершен')
});

Циклические и последовательные твины

Для создания сложных анимаций можно использовать Timeline — последовательность твинов, управляемую единым объектом:

let timeline = this.tweens.createTimeline();

timeline.add({
    targets: enemy,
    x: 400,
    duration: 1000,
    ease: 'Power1'
});

timeline.add({
    targets: enemy,
    y: 300,
    duration: 1000,
    ease: 'Bounce.easeOut'
});

timeline.play();

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

  • Позволяет комбинировать несколько твинов с различными свойствами.
  • Можно задавать последовательное или параллельное воспроизведение твинов.
  • Поддерживает параметры loop, yoyo, onComplete для всей последовательности.

Работа с функцией ease

Функция ease определяет способ изменения значения от начального к конечному. Phaser поддерживает несколько категорий кривых:

  • Linear — линейное изменение, без ускорений.
  • Power — плавное ускорение и замедление (Power1, Power2, Power3, Power4).
  • Elastic — имитация пружинящего движения.
  • Bounce — эффект подпрыгивания при достижении конечной позиции.
  • Back — эффект «откатного старта», когда объект немного выходит за начальную или конечную точку.

Каждую кривую можно комбинировать с режимами easeIn, easeOut, easeInOut для контроля направления ускорения.

Контроль твинов в реальном времени

TweenManager позволяет управлять твинами после их создания:

  • tween.pause() — приостановка твина.
  • tween.resume() — продолжение приостановленного твина.
  • tween.stop() — немедленное завершение твина.
  • tween.restart() — повторное воспроизведение с начала.
  • tween.seek(time) — установка текущего времени твина, полезно для синхронизации анимаций.

Пример управления твином:

let tween = this.tweens.add({
    targets: star,
    alpha: 0,
    duration: 2000
});

// Через 1 секунду приостановить твин
this.time.delayedCall(1000, () => tween.pause());

Tween с массивом целей

Можно анимировать сразу несколько объектов, передав массив в targets:

this.tweens.add({
    targets: [player, enemy, star],
    y: 500,
    duration: 1500,
    ease: 'Sine.easeInOut'
});

В этом случае каждый объект анимируется одновременно, но при необходимости можно задать разные задержки через функцию delay:

this.tweens.add({
    targets: enemies.getChildren(),
    x: 400,
    duration: 1000,
    delay: (target, key, value, index) => index * 200,
    ease: 'Power2'
});

Анимация сложных свойств

Твины могут работать не только с примитивными свойствами (x, y, alpha), но и с вложенными объектами, например, scale, rotation, tекстурными координатами:

this.tweens.add({
    targets: sprite,
    scale: { from: 1, to: 2 },
    rotation: 2 * Math.PI,
    duration: 1200,
    ease: 'Elastic.easeOut'
});

Такой подход позволяет создавать комплексные визуальные эффекты без необходимости вручную обновлять каждый кадр.

TweenManager в Phaser обеспечивает мощный и гибкий инструмент для управления анимацией, позволяя создавать плавные, динамичные и сложные визуальные эффекты, упрощая разработку игр и интерактивных приложений на JavaScript.

Оглавление