Твины с несколькими целевыми объектами

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

Основы создания твинов

В Phaser 3 твины создаются через менеджер анимаций сцены:

this.tweens.add({
    targets: объект,
    x: 400,
    y: 300,
    duration: 2000,
    ease: 'Power2',
    repeat: 0,
    yoyo: false
});

Ключевые свойства:

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

Множественные цели через массив

Для применения анимации к нескольким объектам достаточно передать массив объектов в свойство targets:

const sprite1 = this.add.sprite(100, 100, 'player');
const sprite2 = this.add.sprite(200, 100, 'enemy');
const sprite3 = this.add.sprite(300, 100, 'npc');

this.tweens.add({
    targets: [sprite1, sprite2, sprite3],
    x: '+=200',
    duration: 1500,
    ease: 'Sine.easeInOut',
    yoyo: true,
    repeat: 2
});

В этом примере все три спрайта будут перемещаться одновременно, сохраняя синхронность изменения координат.

Важно: можно комбинировать масштаб, прозрачность, вращение и позицию в одном твине для нескольких объектов.

Различные свойства для каждого объекта

Phaser позволяет задавать значения свойств индивидуально для каждого объекта с помощью массивов:

this.tweens.add({
    targets: [sprite1, sprite2, sprite3],
    x: [100, 300, 500],
    y: [200, 250, 300],
    alpha: [1, 0.5, 0.8],
    duration: 2000,
    ease: 'Power1'
});

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

Тайминги и задержки для сложных анимаций

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

this.tweens.add({
    targets: [sprite1, sprite2, sprite3],
    y: '+=100',
    duration: 1000,
    ease: 'Cubic.easeOut',
    delay: 0,
    stagger: 200
});
  • stagger задаёт задержку между стартами анимации каждого объекта.
  • При stagger: 200 первый объект начнёт сразу, второй через 200 мс, третий через 400 мс.
  • Можно комбинировать с repeat и yoyo для создания сложных волновых или каскадных эффектов.

Использование функций для динамических значений

Для более гибких твинов свойство можно задавать как функцию, вычисляющую конечное значение динамически:

this.tweens.add({
    targets: [sprite1, sprite2, sprite3],
    x: (target, key, value) => target.x + Phaser.Math.Between(50, 150),
    y: (target, key, value) => target.y + Phaser.Math.Between(-50, 50),
    duration: 1000,
    ease: 'Power2'
});

Каждый объект получает уникальное смещение, что позволяет создавать органичные и непредсказуемые движения.

Группы и контейнеры как цели твина

Для удобства можно использовать группы (Phaser.GameObjects.Group) или контейнеры (Phaser.GameObjects.Container) в качестве targets:

const group = this.add.group([sprite1, sprite2, sprite3]);

this.tweens.add({
    targets: group.getChildren(),
    alpha: 0,
    duration: 800,
    yoyo: true,
    repeat: 3
});

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

Цепочки твинов и управление событиями

Твины можно комбинировать в цепочки с помощью событий onComplete, onStart и onUpdate:

this.tweens.timeline({
    tweens: [
        {
            targets: [sprite1, sprite2],
            x: 400,
            duration: 1000
        },
        {
            targets: [sprite3],
            y: 300,
            duration: 500
        }
    ],
    onComplete: () => console.log('Все твины завершены')
});

Преимущества таймлайнов:

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

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

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

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

Оглавление