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

Создание плавного и динамичного визуального поведения — ключ к захватывающему игровому процессу. В Phaser для этого есть мощный инструмент — система твинов (Tweens). Данная статья на практическом примере покажет, как одной анимацией управлять несколькими свойствами объекта одновременно, создавая сложные траектории движения с разной длительностью и эффектами. Это полезно для анимации врагов, интерактивных элементов интерфейса или просто для оживления игрового мира.

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

        this.tweens.add({
            targets: image,
            loop: 4,
            x: { value: 700, duration: 2000, ease: 'Sine.easeInOut', yoyo: true },
            y: { value: 100, duration: 1000, ease: 'Sine.easeOut' }
        });
    }
}

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

const game = new Phaser.Game(config);

Основы: что такое Tween?

Tween (от англ. *in-between*) — это анимация, которая плавно интерполирует значения свойств объекта между начальным и конечным состоянием за заданное время. Вместо того чтобы вручную в каждом кадре вычислять позицию спрайта, вы описываете цель («переместиться в точку X за 2 секунды»), а движок делает всё остальное.

В Phaser за управление твинами отвечает менеджер this.tweens. В нашем примере мы создаем один твин, который контролирует два свойства спрайта: его координаты по осям X и Y.

Разбор конфигурации твина

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

this.tweens.add({
    targets: image,
    loop: 4,
    x: { value: 700, duration: 2000, ease: 'Sine.easeInOut', yoyo: true },
    y: { value: 100, duration: 1000, ease: 'Sine.easeOut' }
});

* targets: Объект или массив объектов, к которым применяется анимация. В нашем случае это один спрайт image. * loop: Количество повторений всей анимации. Значение `4означает, что твин проиграется 4 раза. Установите-1` для бесконечного цикла. * `xиy`: Это так называемые *property objects*. Они описывают анимацию для конкретных свойств цели. Каждый такой объект — это самостоятельная мини-анимация со своими параметрами.

Параметры property object: контроль над движением

Каждый property object (например, для свойства `x`) настраивает анимацию независимо. Это позволяет создавать сложные составные движения.

x: { value: 700, duration: 2000, ease: 'Sine.easeInOut', yoyo: true }

* value: Конечное целевое значение свойства. Спрайт начнет движение от текущей позиции x = 100 к x = 700. * duration: Длительность анимации данного свойства в миллисекундах. Здесь движение по X займет 2000 мс (2 секунды). * ease: Функция плавности (easing). Она определяет характер ускорения и замедления. 'Sine.easeInOut' обеспечивает плавное начало и конец движения. * yoyo: Булев параметр. Если true, после достижения конечного значения анимация проиграется в обратном порядке. В сочетании с loop это создает движение «туда-обратно».

Анимация для свойства `yнастроена иначе: она быстрее (1000 мс), использует другую функцию плавности ('Sine.easeOut'` — резкий старт и плавное завершение) и не имеет эффекта йо-йо. В результате спрайт движется по сложной диагональной траектории с разной скоростью по осям.

Сцена и запуск игры

Код примера упакован в стандартную структуру Phaser 3. Класс сцены Example содержит методы preload для загрузки ассетов и create для создания игровых объектов и логики.

Конфигурация игры (config) задает базовые параметры, такие как размер холста и цвет фона. Важно, что сцена Example передается в конфиг, что делает её активной при запуске.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example // Указываем наш класс сцены
};

const game = new Phaser.Game(config); // Создание экземпляра игры

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

Система твинов в Phaser — это гибкий и мощный инструмент для анимации. Как мы увидели, с помощью одного твин-объекта можно управлять несколькими свойствами, задавая для каждого уникальную длительность, плавность и поведение. Для экспериментов попробуйте изменить параметры: поставьте loop: -1 для вечного движения, замените ease на 'Power2' или 'Bounce.easeOut' для другого визуального эффекта, или добавьте анимацию для свойства scale, чтобы спрайт увеличивался и уменьшался во время движения.