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

Tween — плавные анимации движения, прозрачности или масштаба — часто используются в играх для оживления интерфейса и персонажей. Но что, если анимацию нужно прервать по действию игрока, например, клику? В этом примере разберем, как корректно удалять запущенные твины, чтобы избежать ошибок и неожиданного поведения.

Версия 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 tween = this.tweens.add({
            targets: van,
            x: 700,
            y: 500,
            duration: 2000,
            loop: 4
        });

        this.input.on('pointerdown', () => {
            tween.remove();
        });
    }
}

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

const game = new Phaser.Game(config);

Создание базовой сцены и загрузка ресурсов

В Phaser работа начинается со сцены. В методе preload загружаем два изображения: фон и спрайт фургончика.

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.tweens.add. Ключевые параметры: - targets: объект, который будет анимироваться. - `x,y`: целевые координаты. - duration: длительность одного цикла в миллисекундах. - loop: количество повторений (4 означает, что фургончик проедет маршрут 4 раза).

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

const tween = this.tweens.add({
    targets: van,
    x: 700,
    y: 500,
    duration: 2000,
    loop: 4
});

Обратите внимание: метод add возвращает объект Tween, который мы сохраняем в константу tween. Это потребуется для управления анимацией.

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

Чтобы прервать анимацию, используем метод remove() у объекта твина. В примере он привязан к событию клика (pointerdown) на canvas.

this.input.on('pointerdown', () => {
    tween.remove();
});

После вызова tween.remove() анимация немедленно останавливается, фургончик замирает на текущей позиции. Важно: метод remove() полностью удаляет твин из менеджера анимаций this.tweens. Попытка повторно вызвать remove() или управлять этим объектом приведет к ошибке.

Чем `remove()` отличается от `stop()` или `pause()`?

В API Phaser Tweens есть несколько методов контроля: - remove(): полное удаление твина, освобождение ресурсов. Анимацию нельзя возобновить. - stop(): остановка с возможностью последующего запуска с начала. - pause() / resume(): временная приостановка и продолжение с того же места.

Используйте remove(), когда анимация больше не нужна (например, объект удален из игры). Для паузы в меню подойдут pause() и resume().

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

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