Параллельные твины и таймлайны

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

Tween: базовые принципы

Tween в Phaser представляет собой плавное изменение свойства объекта от начального значения к конечному за определённое время. Создание твина происходит через метод scene.tweens.add(), который принимает объект конфигурации:

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

Ключевые моменты конфигурации твина:

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

Твины могут управляться методами play(), pause(), stop(), restart(), что позволяет динамически включать или приостанавливать анимации.

Параллельные твины

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

Пример параллельного выполнения:

this.tweens.add({
    targets: [sprite1, sprite2],
    x: 500,
    duration: 1500,
    ease: 'Sine.easeInOut'
});

this.tweens.add({
    targets: sprite1,
    alpha: 0,
    duration: 1500,
    ease: 'Linear'
});

В этом примере sprite1 одновременно перемещается и исчезает, а sprite2 только перемещается. Это демонстрирует независимость параллельных твинов.

Таймлайны

Timeline позволяет объединять несколько твинов в последовательности и управлять их запуском как единого объекта. Основное преимущество — возможность комбинировать последовательные и параллельные твины.

Создание таймлайна:

let timeline = this.tweens.createTimeline();

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

timeline.add({
    targets: sprite,
    y: 200,
    duration: 1000,
    ease: 'Power1'
});

timeline.play();

Каждый твин в таймлайне выполняется последовательно по умолчанию, но с использованием свойства offset можно запускать их параллельно.

Параллельные твины в таймлайне

Свойство offset определяет смещение старта твина относительно начала таймлайна или предыдущего твина. Для одновременного запуска нескольких твинов в таймлайне достаточно указать одинаковое смещение.

let timeline = this.tweens.createTimeline();

timeline.add({
    targets: sprite1,
    x: 400,
    duration: 1000,
    ease: 'Power2',
    offset: 0
});

timeline.add({
    targets: sprite2,
    y: 300,
    duration: 1000,
    ease: 'Power2',
    offset: 0
});

timeline.play();

В этом примере оба твина стартуют одновременно, создавая эффект параллельной анимации.

Управление таймлайнами

Таймлайны обладают методами управления, аналогичными твинам:

  • play() – запуск таймлайна.
  • pause() – приостановка текущего состояния.
  • resume() – продолжение после паузы.
  • stop() – полная остановка и сброс к начальной позиции.
  • seek(progress) – перемещение по таймлайну, где progress от 0 до 1.

Это позволяет строить динамические сцены с условным управлением и синхронизацией нескольких объектов.

Циклические и повторяющиеся таймлайны

Для повторяющихся эффектов таймлайны могут использовать свойства repeat и yoyo, аналогично твинам:

timeline.setLoop(-1); // бесконечный цикл
timeline.setYoyo(true); // возврат по завершении

Такой подход особенно полезен для игровых сцен с анимацией врагов, объектов или фона.

Композиция сложных анимаций

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

  • Многоуровневые движения: несколько объектов одновременно перемещаются и меняют прозрачность.
  • Синхронизацию звуков и эффектов: твины с offset можно синхронизировать с воспроизведением аудио.
  • Сложные последовательности: части сцены могут выполняться последовательно, а внутри — параллельные анимации.

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

let timeline = this.tweens.createTimeline();

timeline.add({
    targets: sprite1,
    x: 500,
    duration: 1000,
    ease: 'Power2',
    offset: 0
});

timeline.add({
    targets: sprite2,
    y: 400,
    duration: 1000,
    ease: 'Sine.easeInOut',
    offset: 0
});

timeline.add({
    targets: [sprite1, sprite2],
    alpha: 0,
    duration: 500,
    offset: '+=500' // старт через 500 мс после предыдущих
});

timeline.play();

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

Настройки ускорения и замедления

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

  • Linear – равномерная скорость.
  • Power1, Power2, Power3 – плавное ускорение/замедление.
  • Sine – мягкая синусоидальная кривая.
  • Bounce, Elastic – эффекты отскока и упругости.

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

Использование callback-функций

Tween и Timeline поддерживают события:

  • onStart – срабатывает при запуске.
  • onUpdate – срабатывает на каждом кадре.
  • onComplete – срабатывает по завершении твина или таймлайна.
timeline.setCallback('onComplete', () => {
    console.log('Анимация завершена');
});

Эти события помогают строить интерактивные цепочки анимаций и реакции на действия пользователя.

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

Оглавление