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

Анимация движения — основа динамичных игр. Твины (tweens) в Phaser позволяют плавно изменять свойства игровых объектов. Часто нужно анимировать не одно, а несколько свойств одновременно, например, перемещать объект по горизонтали и заставлять его подпрыгивать. В этой статье разберем, как создать параллельный твин для свойств `x` и `y`, управлять их длительностью, задержками и эффектами (easing).

Версия 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 image = this.add.image(0, 400, 'block');

        var tween = this.tweens.add({
            targets: image,
            props: {
                x: { value: 800, duration: 5000, ease: 'Linear' },
                y: { value: 100, duration: 1000, ease: 'Bounce.easeInOut', yoyo: true, delay: 1000 }
            }
        });

        console.log(tween);

    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов и создание объекта

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

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

В методе create мы создаем объект изображения. Обратите внимание на начальные координаты: (0, 400). Это левый нижний угол экрана (поскольку система координат Y направлена вниз). Объект image становится целью (target) для нашего будущего твина.

create() {
    var image = this.add.image(0, 400, 'block');
}

Создание составного твина

Ключевой элемент примера — вызов this.tweens.add. Мы передаем объект конфигурации, в котором определяем цели анимации (targets) и свойства (props), которые будем изменять.

var tween = this.tweens.add({
    targets: image,
    props: {
        x: { value: 800, duration: 5000, ease: 'Linear' },
        y: { value: 100, duration: 1000, ease: 'Bounce.easeInOut', yoyo: true, delay: 1000 }
    }
});

Внутри props мы объявляем два независимых твина: для свойства `xи для свойстваy`. Они будут выполняться параллельно, но каждый со своими параметрами. Этот подход гораздо мощнее и гибче, чем последовательная цепочка анимаций.

Анализ твина для свойства X

Первый твин перемещает объект по горизонтали.

x: { value: 800, duration: 5000, ease: 'Linear' }

* value: 800 — целевое значение. Объект переместится от X=0 до X=800 пикселей. * duration: 5000 — длительность анимации составляет 5000 миллисекунд (5 секунд). * ease: 'Linear' — функция плавности (easing). 'Linear' означает равномерное, постоянное по скорости движение без ускорений и замедлений. Идеально для фонового, непрерывного перемещения.

Анализ твина для свойства Y

Второй твин создает прыжок по вертикали.

y: { value: 100, duration: 1000, ease: 'Bounce.easeInOut', yoyo: true, delay: 1000 }

* value: 100 — целевая высота прыжка (от Y=400 до Y=100). * duration: 1000 — сам прыжок длится 1 секунду. * ease: 'Bounce.easeInOut' — функция плавности "отскок". Она создает эффект, будто объект ударяется о верхнюю точку и слегка пружинит. easeInOut означает, что эффект применяется и к началу, и к концу анимации. * yoyo: true — ключевой параметр. После завершения анимации до значения 100, она автоматически воспроизводится в обратном направлении (от 100 до 400), создавая полный цикл прыжка: взлет и падение. * delay: 1000 — задержка перед стартом этой анимации в 1000 мс. Пока объект 1 секунду просто едет по горизонтали, вертикальная анимация ждет своего начала.

Объект твина и конфигурация игры

Метод this.tweens.add возвращает объект Tween, который мы можем сохранить в переменную. Этот объект позволяет позднее управлять анимацией: ставить на паузу (pause), возобновлять (resume), останавливать (stop) или перезапускать (restart). Вывод в консоль помогает в отладке.

console.log(tween);

Конфигурация игры стандартна: указываем тип рендерера, размеры холста, цвет фона и корневой класс сцены.

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

const game = new Phaser.Game(config);

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

Использование параллельных твинов внутри одного объекта props — это мощный инструмент для создания сложной, многосоставной анимации с минимальным кодом. Вы можете независимо настраивать длительность, задержку и easing для каждого свойства объекта. Для экспериментов попробуйте: изменить easing для движения по X на 'Power2'; добавить твин для свойства scale; или использовать repeat вместо yoyo для создания серии прыжков.