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

Управление анимациями в реальном времени — ключевой навык для создания динамичных игр. В этой статье мы разберем, как использовать методы `pause` и `resume` у твинов в Phaser. Это позволит вам ставить анимации на паузу и возобновлять их по действию игрока, например, по клику мыши, что открывает возможности для создания интерактивных пауз, реакций на события или пошаговых анимаций.

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

Живой запуск

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

Исходный код


var text;
var tween;

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

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

    create()
    {
        var marker = this.add.image(100, 200, 'block').setAlpha(0.3);
        var image = this.add.image(100, 200, 'block');

        text = this.add.text(30, 20, '0', { font: '42px Courier', fill: '#00ff00' });

        tween = this.tweens.add({
            targets: image,
            x: 700,
            y: 500,
            duration: 3000,
            ease: 'Power2',
            yoyo: true,
            repeat: -1,
            paused: true
        });

        this.input.on('pointerdown', function ()
        {

            if (tween.isPlaying())
            {
                tween.pause();
            }
            else
            {
                tween.resume();
            }

        });

    }

    update()
    {
        //  Tween
        text.setText([
            'Progress: ' + tween.progress,
            'Elapsed: ' + tween.elapsed,
            'Duration: ' + tween.duration,
        ]);
    }
}

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

const game = new Phaser.Game(config);

Создание и настройка твина

В начале сцены create мы создаем твин — объект, который будет анимировать свойства целевого объекта. В данном примере цель — спрайт image. Твин перемещает его из точки (100, 200) в точку (700, 500) за 3 секунды с эффектом Power2, после чего возвращает обратно (параметр yoyo: true) и повторяет бесконечно (repeat: -1). Ключевой параметр paused: true означает, что твин создается в приостановленном состоянии и не начнет играть автоматически.

tween = this.tweens.add({
    targets: image,
    x: 700,
    y: 500,
    duration: 3000,
    ease: 'Power2',
    yoyo: true,
    repeat: -1,
    paused: true
});

Управление твином по клику мыши

Мы добавляем обработчик события клика мыши (pointerdown) на всю сцену. Внутри него проверяем состояние твина с помощью метода isPlaying(). Этот метод возвращает true, если твин активен и воспроизводится. Если твин играет, мы вызываем метод pause(), чтобы приостановить анимацию. Если твин на паузе (или еще не запускался), вызываем resume(), чтобы возобновить или начать воспроизведение.

this.input.on('pointerdown', function ()
{
    if (tween.isPlaying())
    {
        tween.pause();
    }
    else
    {
        tween.resume();
    }
});

Отслеживание прогресса анимации

В методе update, который вызывается каждый кадр, мы обновляем текстовый объект, отображающий текущие метрики твина. Свойство progress показывает прогресс анимации от 0 (начало) до 1 (конец одного цикла). Свойство elapsed содержит время в миллисекундах, прошедшее с начала текущего цикла анимации. Свойство duration — это общая длительность одного цикла твина в миллисекундах (в нашем случае 3000 мс). Это полезно для отладки и создания UI, отображающего состояние анимации.

text.setText([
    'Progress: ' + tween.progress,
    'Elapsed: ' + tween.elapsed,
    'Duration: ' + tween.duration,
]);

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

Используя методы pause, resume и isPlaying, вы получаете прямой контроль над игровыми анимациями. Это основа для создания интерактивных элементов: попробуйте привязать паузу твина к нажатию клавиши пробела, создать систему «заморозки времени» в игре или реализовать пошаговую анимацию диалогов, где каждый клик продвигает анимацию текста.