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

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

Анимации движения — основа динамичных игр. В Phaser для их создания часто используют Tween-систему. Иногда требуется запустить анимацию не сразу, а по событию или после паузы. Этот пример показывает, как создать Tween, изначально поставленный на паузу, и затем запустить его в нужный момент. Это полезно для синхронизации анимаций с игровыми событиями, такими как появление врага или реакция на действие игрока.

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

Живой запуск

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

Исходный код

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.spritesheet('fish', 'assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
}

function create ()
{
    var image1 = this.add.image(0, 80, 'fish', 0);

    var tween = this.tweens.add({
        targets: image1,
        props: {
            x: { value: 700, duration: 4000, flipX: true },
            y: { value: 500, duration: 8000,  },
        },
        ease: 'Sine.easeInOut',
        yoyo: true,
        repeat: -1,
        paused: true
    });

    tween.play();
}

Настройка сцены и загрузка ассетов

В этом примере используется стандартная конфигурация игры Phaser с предзагрузкой и созданием сцены.

var config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

Функция preload загружает спрайтшит, который будет использоваться для анимации. Обратите внимание, что базовая ссылка задаётся через this.load.setBaseURL, а сам спрайтшит загружается методом this.load.spritesheet. Второй и третий аргументы метода определяют ширину и высоту одного кадра.

function preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.spritesheet('fish', 'assets/sprites/fish-136x80.png', { frameWidth: 136, frameHeight: 80 });
}

Создание объекта и конфигурация Tween

В функции create мы создаём игровой объект — изображение рыбы — и настраиваем для него анимацию перемещения (Tween).

var image1 = this.add.image(0, 80, 'fish', 0);

Объект image1 создаётся с начальными координатами (0, 80) и использует первый кадр (индекс 0) из загруженного спрайтшита.

Теперь создадим сам Tween. Ключевой параметр здесь — paused: true. Он указывает системе, что анимация не должна запускаться автоматически сразу после создания.

var tween = this.tweens.add({
    targets: image1,
    props: {
        x: { value: 700, duration: 4000, flipX: true },
        y: { value: 500, duration: 8000,  },
    },
    ease: 'Sine.easeInOut',
    yoyo: true,
    repeat: -1,
    paused: true
});

Разберём параметры конфигурации: - targets: объект или массив объектов, к которым применяется анимация. - props.x и props.y: определяют анимацию перемещения по осям. Каждое свойство имеет конечное value и длительность duration. Для оси X также включён flipX: true, который зеркально отразит спрайт при движении. - ease: функция плавности Sine.easeInOut обеспечивает плавное ускорение и замедление. - yoyo: true: после завершения анимации она проиграется в обратном порядке. - repeat: -1: анимация будет повторяться бесконечно. - paused: true: анимация создаётся в приостановленном состоянии.

Запуск анимации методом play()

Поскольку Tween был создан с флагом paused, он не начнётся сам. Для его запуска необходимо явно вызвать метод play() у объекта tween.

tween.play();

В данном примере вызов происходит сразу после создания tween, поэтому разницы в визуальном результате не будет. Однако этот подход становится мощным инструментом, когда запуск нужно привязать к игровому событию: клику мыши, коллизии, таймеру или загрузке уровня.

Метод play() можно вызывать многократно и комбинировать с другими методами управления анимацией, такими как pause(), resume(), restart() и stop().

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

Использование флага paused при создании Tween даёт полный контроль над моментом старта анимации. Это основа для создания реактивного и синхронизированного геймплея. Поэкспериментируйте: попробуйте запустить Tween по клику на объект, после прохождения определённой дистанции или в зависимости от состояния игры. Также можно управлять несколькими «приостановленными» анимациями, запуская их в разной последовательности для создания сложных сцен.