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

Анимация — это душа игрового мира. В 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.image('block', 'assets/sprites/block.png');
}

function create ()
{
    var image = this.add.image(100, 100, 'block');

    this.tweens.add({
        targets: image,
        x: { value: 700, duration: 4000, ease: 'Power2', yoyo: -1 },
        y: { value: 400, duration: 1500, ease: 'Bounce.easeOut', yoyo: -1 }
    });

}

Создаем основу: сцена и спрайт

Вся сцена анимации разворачивается в методе create. Это стандартная точка входа для создания игровых объектов после загрузки ресурсов. Первым делом мы создаем простой спрайт — основу для нашей анимации.

var image = this.add.image(100, 100, 'block');

Этот код создает изображение (Image) с текстурой 'block' и помещает его в точку с координатами x: 100, y: 100. Именно этот объект и станет нашей анимируемой целью.

Сердце анимации: объект tween

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

this.tweens.add({
    targets: image,
    x: { value: 700, duration: 4000, ease: 'Power2', yoyo: -1 },
    y: { value: 400, duration: 1500, ease: 'Bounce.easeOut', yoyo: -1 }
});

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

Независимый контроль свойств: детали конфигурации

Давайте подробно разберем настройки для свойства `x. Аналогичные правила применимы и кy`.

x: { value: 700, duration: 4000, ease: 'Power2', yoyo: -1 }

* value: 700 — целевое значение. Спрайт будет двигаться по оси X до координаты 700 пикселей. * duration: 4000 — длительность анимации именно этого свойства. Она составляет 4000 миллисекунд (4 секунды). Обратите внимание, что для свойства `y` длительность другая — 1500 мс. * ease: 'Power2' — функция плавности (easing) для движения по X. Она создает более естественное, нелинейное движение с ускорением. * yoyo: -1 — это особая и мощная настройка. Значение -1 означает «повторять бесконечно в режиме йо-йо». После достижения конечной точки (value: 700) анимация свойства `x` автоматически пойдет в обратном направлении к начальному значению (100), и так до бесконечности.

Результат: сложное движение из простых частей

Благодаря независимым настройкам получается комплексная траектория:

1. **По оси X:** Плавное движение вперед-назад с ускорением (Power2), полный цикл занимает 8 секунд (4 секунды туда, 4 секунды обратно). 2. **По оси Y:** «Прыгающее» движение с эффектом отскока (Bounce.easeOut), полный цикл занимает 3 секунды (1.5 секунды вниз, 1.5 секунды вверх).

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

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

Использование расширенных объектов для свойств в tween — это профессиональный прием, который позволяет создавать богатые и разнообразные анимации с минимальным кодом. Для экспериментов попробуйте: анимировать одновременно scale и angle с разными ease-функциями; задать yoyo: 3, чтобы анимация сделала ограниченное число циклов; или использовать delay для каждого свойства, чтобы запускать компоненты движения последовательно.