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

Циклические анимации — основа динамичной игровой механики: от пульсирующих врагов до покачивающихся предметов. Использование параметра `loop` для твинов в Phaser позволяет легко создавать повторяющиеся движения, не засоряя код таймерами и ручными обновлениями. В этой статье мы разберем, как управлять количеством циклов и отслеживать их в реальном времени, создавая плавные и контролируемые анимации.

Версия 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.image('bg', 'assets/tweens/grass.png');
        this.load.image('van', 'assets/tweens/icecreamvan.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const van = this.add.image(100, 100, 'van');

        const text = this.add.text(500, 20, 'Tween Loop: 4').setFontSize(32).setShadow(2, 2);

        //  This Tween changes 2 properties (x and y) over its duration.
        //  It is set to loop 4 times, which means it will replay the entire Tween.
        this.tweens.add({
            targets: van,
            x: 700,
            y: 500,
            duration: 2000,
            loop: 4,
            onLoop: (tween) => {
                text.setText('Tween Loop: ' + tween.loopCounter)
            }
        });
    }
}

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

const game = new Phaser.Game(config);

Что такое Tween Loop?

В Phaser твин — это объект, плавно изменяющий свойства цели (например, позицию, прозрачность, масштаб) за заданное время. Параметр loop определяет, сколько раз весь твин повторится после завершения первого проигрывания. Это отличается от бесконечного цикла loop: -1 и позволяет точно задать число повторений.

В примере твин перемещает фургончик из точки (100, 100) в (700, 500) за 2 секунды, и это движение повторяется 4 раза. Важно: каждый цикл начинается с исходных значений свойств цели (в данном случае `xиy`), а не продолжается с конечной точки предыдущего цикла. Фургончик будет "возвращаться" в стартовую позицию в начале каждого нового цикла.

Настройка твина с циклом

Основная конфигурация твина задается в методе this.tweens.add(). Ключевые параметры для цикла:

this.tweens.add({
    targets: van,
    x: 700,
    y: 500,
    duration: 2000,
    loop: 4,
    onLoop: (tween) => {
        text.setText('Tween Loop: ' + tween.loopCounter)
    }
});

- targets: van — объект, к которому применяется анимация (спрайт van). - x: 700, y: 500 — целевые значения свойств. - duration: 2000 — длительность одного цикла в миллисекундах (2 секунды). - loop: 4 — количество повторений твина (всего будет 5 проигрываний: исходный + 4 цикла). - onLoop — callback-функция, вызываемая в начале каждого нового цикла, кроме первого запуска.

Отслеживание циклов с onLoop

Событие onLoop полезно для синхронизации игровой логики с анимацией. В примере оно обновляет текстовый счетчик на экране.

onLoop: (tween) => {
    text.setText('Tween Loop: ' + tween.loopCounter)
}

Функция получает объект твина в качестве аргумента. Свойство tween.loopCounter автоматически увеличивается на 1 при каждом новом цикле, начиная с 0 после первого проигрывания. Это позволяет точно знать, какой по счету цикл выполняется в данный момент. В нашем случае текст изменится с "Tween Loop: 0" до "Tween Loop: 3" (4 цикла).

Практическое применение в играх

Циклические твины можно использовать для: - **Пульсации объектов:** изменение масштаба (scaleX, scaleY) с циклом 2-3 раза для эффекта удара. - **Покачивания платформ:** анимация `yвверх-вниз сloop: -1` для бесконечного движения. - **Мигания предупреждений:** чередование alpha (прозрачности) для мигающего текста.

Пример мигающего спрайта:

this.tweens.add({
    targets: warningSprite,
    alpha: 0,
    duration: 300,
    yoyo: true,
    loop: 6
});

Параметр yoyo: true заставляет твин проигрываться в обратном порядке после завершения, создавая плавный переход от видимого к невидимому и обратно. В сочетании с loop это дает контролируемое количество миганий.

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

Параметр loop в твинах Phaser — это простой способ добавить повторяемость анимациям без сложной логики. Экспериментируйте: попробуйте комбинировать циклы с delay (задержкой между циклами) или repeat (повтором части анимации внутри одного цикла). Для бесконечных процессов, как вращение фона, используйте loop: -1. Не забывайте про onLoop для синхронизации событий игры с визуальными эффектами.