О чем этот пример

Анимация игровых объектов — ключевой элемент геймплея и визуальной привлекательности. Phaser 3 предлагает мощную систему твинов, но последовательная анимация нескольких свойств объекта часто требует ручного управления временем и колбэками. Цепочки твинов (tween chains) решают эту проблему, позволяя объединять несколько анимаций в одну последовательность с чётким контролем. Это полезно для создания сложных траекторий, комбинированных трансформаций и циклических действий, например, полёта снаряда с вращением и изменением масштаба.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('assets', 'assets/atlas/tweenparts.png', 'assets/atlas/tweenparts.json');
    }

    create ()
    {
        const image = this.add.image(800, 300, 'assets', '02_axe_one_projectile');

        image.setAngle(35);

        const chain = this.tweens.chain({
            targets: image,
            persist: true,
            tweens: [
                {
                    x: 400,
                    ease: 'power3',
                    duration: 750
                },
                {
                    angle: 0,
                    ease: 'elastic.out',
                    duration: 500
                },
                {
                    scale: { value: 0.5, duration: 1000 },
                    y: { value: 100, duration: 750, ease: 'sine.in' }
                },
                {
                    angle: 35,
                    ease: 'power2',
                    duration: 200
                },
                {
                    x: -100,
                    ease: 'quart.in',
                    duration: 1000
                },
            ]
        });

        this.input.on('pointerdown', () => {

            image.setScale(1)
            image.setPosition(800, 300);

            chain.restart();

        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое цепочка твинов?

Цепочка твинов — это объект, который управляет последовательным выполнением нескольких анимаций (твинов) для одного или нескольких целевых объектов. В отличие от запуска отдельных твинов с задержками, цепочка обеспечивает централизованное управление: её можно перезапускать, приостанавливать или останавливать как единое целое.

В примере мы анимируем изображение топора, задавая цепочку из пяти шагов: движение по X, поворот, одновременное изменение масштаба и позиции Y, обратный поворот и финальное движение за экран. Ключевой параметр persist: true гарантирует, что цепочка не будет автоматически уничтожена после завершения, что позволяет перезапускать её по клику.

Создание и конфигурация цепочки

Цепочка создаётся через метод this.tweens.chain(). Основные параметры: - targets: объект или массив объектов для анимации. - tweens: массив конфигураций для каждого шага цепочки. - persist: если true, цепочка остаётся в памяти после завершения.

Каждый твин в цепочке — это обычный конфиг с параметрами вроде duration, ease и свойствами для анимации. Обратите внимание на третий шаг, где анимируются два свойства (scale и `y`) с разной длительностью — они запускаются одновременно, но завершатся в разное время.

const chain = this.tweens.chain({
    targets: image,
    persist: true,
    tweens: [
        {
            x: 400,
            ease: 'power3',
            duration: 750
        },
        // ... другие твины
    ]
});

Структура отдельных твинов в цепочке

Каждый элемент массива tweens определяет анимацию одного или нескольких свойств. Можно задавать: - Простые значения: x: 400 анимирует свойство `xк значению 400 за указаннуюduration`. - Объекты с детальной конфигурацией: scale: { value: 0.5, duration: 1000 } анимирует scale к 0.5 за 1000 мс, независимо от общей длительности шага. - Функции плавности (ease): например, 'elastic.out' создаёт эффект пружины, 'sine.in' — плавное замедление.

Важно: если для свойства задан объект конфигурации (как у scale и `yв третьем твине), его длительность переопределяет общуюduration` для этого шага. Это позволяет создавать сложные параллельные анимации внутри последовательной цепочки.

{
    scale: { value: 0.5, duration: 1000 },
    y: { value: 100, duration: 750, ease: 'sine.in' }
}

Управление и перезапуск цепочки

Поскольку цепочка создана с persist: true, мы можем управлять ею после создания. В примере обработчик клика сбрасывает позицию и масштаб изображения, затем вызывает chain.restart().

Метод restart() начинает выполнение цепочки с первого твина, учитывая текущие свойства целевых объектов. Это удобно для повторяющихся действий, например, выстрелов или цикличных движений врагов.

this.input.on('pointerdown', () => {
    image.setScale(1);
    image.setPosition(800, 300);
    chain.restart();
});

Что попробовать дальше

Цепочки твинов в Phaser 3 — это мощный инструмент для создания сложных, но управляемых последовательностей анимации без ручных таймеров. Они идеально подходят для анимации снарядов, врагов, UI-элементов или кат-сцен. Для экспериментов попробуйте: добавить задержки между твинами через параметр delay, создать цепочку для нескольких объектов одновременно или комбинировать цепочки с событиями onComplete для запуска звуков или частиц.