Phaser.js: всё об играх и разработке

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

Tween-анимации в Phaser упрощают создание плавных переходов и движений объектов. Однако управление этими анимациями — ключевой навык для создания интерактивных сцен. В этой статье мы разберём, как остановить выполняющийся 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('block', 'assets/sprites/block.png');
    }

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

        var tween = this.tweens.add({
            targets: image,
            x: 700,
            delay: 1000,
            duration: 6000,
            ease: 'Power2'
        });

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

            tween.stop();

        });
    }
}

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

const game = new Phaser.Game(config);

Основы tween анимации в Phaser

Класс Phaser.Tweens.TweenManager (доступный через this.tweens) управляет всеми анимациями на сцене. Метод .add() создаёт новый tween, который автоматически запускается и воспроизводится один раз, если не указаны дополнительные параметры.

var tween = this.tweens.add({
    targets: image,
    x: 700,
    delay: 1000,
    duration: 6000,
    ease: 'Power2'
});

В этом примере мы создаём анимацию для объекта image, которая через задержку в 1 секунду (delay) плавно переместит его по оси X до позиции 700 за 6 секунд (duration). Функция плавности Power2 задаёт характер движения. Метод .add() возвращает экземпляр класса Phaser.Tweens.Tween, который мы сохраняем в переменной tween для дальнейшего управления.

Сохранение ссылки на tween

Для управления анимацией (остановки, перезапуска, изменения параметров) необходимо сохранить ссылку на объект tween, который возвращает метод this.tweens.add(). Если ссылка не сохранена, у вас не будет программного доступа к конкретной анимации для её остановки.

// Сохраняем возвращаемый объект tween в переменную
var tween = this.tweens.add({ /* конфигурация */ });

В примере эта ссылка хранится в переменной tween в области видимости метода create(), что делает её доступной для обработчика события клика.

Остановка tween по событию

Phaser предоставляет систему событий ввода (this.input). Мы можем привязать выполнение функции к событию, например, клику мышью (pointerdown) в любом месте игрового поля.

this.input.on('pointerdown', function () {
    tween.stop();
});

Внутри функции-обработчика мы вызываем метод .stop() у сохранённого ранее объекта tween. Этот метод немедленно прекращает воспроизведение анимации. Объект-цель (image) останется в той позиции, в которой его застала команда остановки.

Поведение метода .stop()

Метод tween.stop() выполняет мгновенную остановку анимации. Важно понимать его ключевые особенности: 1. **Немедленное прекращение:** Анимация останавливается в текущем кадре. 2. **Сохранение состояния:** Объект-цель остаётся в своём текущем положении и состоянии. 3. **Управление через ссылку:** Метод должен быть вызван у конкретного экземпляра tween.

// После вызова этой функции image перестанет двигаться
// и останется, например, на координате x = 450
tween.stop();

Это отличается от методов .pause() (приостановка с возможностью возобновления) или .restart() (сброс и запуск с начала).

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

Умение останавливать tween анимации по требованию открывает путь к созданию отзывчивых игровых механик. Вы можете экспериментировать: остановить анимацию при столкновении, по таймеру, или комбинировать .stop() с другими методами управления — .pause(), .resume(), .play() и .restart(). Попробуйте создать сцену, где несколько объектов движутся, и игрок должен кликать на них, чтобы заморозить, — это отличная практика для усвоения материала.