Паузить и перематывать твин

В Phaser твин (tween) используется для плавного изменения свойств объекта с течением времени. Твины позволяют анимировать позицию, масштаб, прозрачность, вращение и любые другие числовые свойства объектов. Управление твинами включает запуск, паузу, продолжение, перемотку и перезапуск, что делает анимации гибкими и управляемыми.

Создание базового твина осуществляется через this.tweens.add():

const tween = this.tweens.add({
    targets: sprite,
    x: 400,
    y: 300,
    duration: 2000,
    ease: 'Power2',
    yoyo: true,
    repeat: -1
});

Здесь ключевые параметры:

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

Пауза твина

Для временной остановки анимации используется метод pause():

tween.pause();

Особенности работы:

  • Твин замораживается в текущем состоянии, сохраняя текущее значение всех анимируемых свойств.
  • Можно паузить один конкретный твин или несколько одновременно, если хранить их в массиве.
  • paused — свойство твина, которое отражает его текущее состояние (true — пауза, false — выполняется).

Продолжение анимации осуществляется методом resume():

tween.resume();

Перемотка твина

Перемотка позволяет изменить текущее положение анимации относительно её длительности.

Методы перемотки:

  1. tween.seek(progress)

    • Устанавливает положение анимации в процентах или доли времени от начала.
    • progress принимает значение от 0 до 1.
    • Пример:
tween.seek(0.5); // Перемотка на середину анимации

  1. tween.setProgress(progress)

    • Функционально схоже с seek, но чаще используется для динамического обновления в цикле игры.

  2. tween.setTime(time)

    • Устанавливает положение в миллисекундах от начала твина.
    • Пример:
tween.setTime(1000); // Перемотка на 1 секунду

Важные моменты перемотки:

  • Если твин повторяется (repeat > 0), перемотка учитывает все повторения.
  • Для yoyo-твинов перемотка корректно учитывает возврат к начальной позиции.
  • После перемотки можно сразу вызвать resume() для продолжения анимации.

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

Phaser позволяет менять направление твина во время исполнения:

tween.reverse();
  • reverse() меняет направление текущего движения, сохраняя прогресс.
  • Совместимо с pause() и seek().

Цепочки твинов

Для сложных анимаций используется timeline:

const timeline = this.tweens.createTimeline();

timeline.add({
    targets: sprite,
    x: 400,
    duration: 1000
});

timeline.add({
    targets: sprite,
    y: 300,
    duration: 1000
});

timeline.play();
  • Пауза, перемотка и продолжение применяются к timeline аналогично отдельным твинам:
timeline.pause();
timeline.seek(0.5);
timeline.resume();
  • Timeline управляет последовательностью твинов, сохраняя синхронизацию между ними.

События твина

Phaser предоставляет несколько событий для отслеживания состояния твина:

  • onStart — вызывается при старте твина.
  • onComplete — вызывается после завершения твина.
  • onUpdate — вызывается на каждом кадре анимации.
  • onLoop — при повторении твина.

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

tween.on('update', () => {
    if (sprite.x > 300) {
        tween.pause();
    }
});

tween.on('complete', () => {
    tween.seek(0);
    tween.resume();
});

Практические рекомендации

  • Хранение ссылок на твины позволяет гибко управлять анимацией без дублирования кода.
  • Использование seek() и setTime() удобно для синхронизации анимации с игровыми событиями.
  • Для сложных последовательностей предпочтительно использовать timeline вместо множества отдельных твинов.
  • Сочетание pause() и reverse() создаёт эффект интерактивного управления анимацией, например для меню или игровых объектов.

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

Оглавление