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

Анимация движения — это только половина дела. Часто игровому объекту нужно не просто переместиться, но и изменить свой вид, например, развернуться в другую сторону, чтобы движение выглядело естественно. Phaser Tweens предоставляет для этого простой и элегантный механизм, позволяющий совместить трансформацию положения с изменением ориентации спрайта в одной конфигурации. В этой статье мы разберем на примере, как свойство `flipX` в конфигурации твина заставляет изображение зеркально отражаться в ключевые моменты анимации, что идеально подходит для создания циклического движения персонажа "туда-обратно" без ручного управления его состоянием.

Версия 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('bg', 'assets/skies/pixelsky.png');
        this.load.image('cat', 'assets/tweens/fairytail.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const cat = this.add.image(-200, 300, 'cat');

        //  The `flipX: true` in the Tween config will force the cat Image
        //  to be horizontally flipped when the Tween yoyos or repeats
        this.tweens.add({
            targets: cat,
            x: 1000,
            flipX: true,
            yoyo: true,
            duration: 3000,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и загрузка ресурсов

Вся работа происходит в классе сцены, унаследованном от Phaser.Scene. В методе preload мы загружаем два изображения: фон (bg) и спрайт кота (cat). Обратите внимание, что базовый URL задается один раз для всех ресурсов.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/skies/pixelsky.png');
    this.load.image('cat', 'assets/tweens/fairytail.png');
}

Затем, в методе create, сначала добавляется фон в центр экрана.

this.add.image(400, 300, 'bg');

Сам объект для анимации — кот — создается за пределами видимой области, слева от экрана (координата X = -200). Это стартовая точка для нашего твина.

const cat = this.add.image(-200, 300, 'cat');

Создание и настройка твина с переворотом

Основная магия происходит при вызове this.tweens.add(). В конфигурационный объект мы передаем несколько ключевых свойств:

* targets: объект или массив объектов для анимации (наш cat). * `x`: конечная координата по оси X (1000 пикселей). * flipX: флаг, который заставляет изображение зеркально отражаться по горизонтали. * yoyo: если true, твин будет проигрываться в обратном порядке после завершения прямой анимации. * duration: длительность одного направления анимации в миллисекундах (3000 мс = 3 секунды). * repeat: количество повторений; -1 означает бесконечный цикл.

this.tweens.add({
    targets: cat,
    x: 1000,
    flipX: true,
    yoyo: true,
    duration: 3000,
    repeat: -1
});

Важно понимать логику работы связки flipX, yoyo и repeat. Изображение переворачивается не во время движения, а в момент смены направления (yoyo) или при повторе цикла. В нашем примере кот начинает движение лицом вправо. Достигнув точки X=1000, твин запускается в обратном порядке (yoyo), и в этот момент свойство flipX применяется, разворачивая кота лицом влево для движения обратно к началу.

Конфигурация игры и запуск

Код сцены инкапсулирован в игровую конфигурацию. Это стандартный шаблон для инициализации Phaser.

const config = {
    type: Phaser.AUTO, // Автовыбор рендерера (WebGL или Canvas)
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d', // Цвет фона до загрузки ресурсов
    parent: 'phaser-example', // ID HTML-элемента для встраивания
    scene: Example // Наша сцена
};

const game = new Phaser.Game(config);

После создания экземпляра Game Phaser автоматически запускает жизненный цикл сцены: preload, create, а затем update на каждом кадре. Наш твин, созданный в create, начинает работать сразу.

Практические аспекты: когда использовать flipX в твине

Использование flipX (и его аналога flipY) непосредственно в конфигурации твина — это декларативный подход. Вы описываете желаемое состояние в ключевые моменты, а движок сам управляет свойствами объекта Image.

**Что происходит под капотом?** Phaser изменяет одноименное свойство flipX у объекта cat в нужный момент времени. Вы можете проверить это, добавив в update вывод значения.

update() {
    console.log(this.children.list[1].flipX); // Выведет true/false
}

**Альтернатива.** Вы можете достичь того же эффекта, создавая два отдельных твина для движения вправо и влево и меняя flipX в их коллбэках onComplete. Однако подход из примера лаконичнее и лучше поддерживается, так как вся логика инкапсулирована в одном объекте твина.

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

Свойство flipX в конфигурации твина — это мощный инструмент для создания выразительных циклических анимаций, где изменение направления движения должно сопровождаться разворотом спрайта. Оно избавляет разработчика от необходимости вручную управлять состоянием объекта по таймерам или коллбэкам. **Идеи для экспериментов:** 1. Добавьте свойство flipY: true и посмотрите, как изменится анимация. 2. Создайте твин для двух объектов одновременно, передав массив в targets, и настройте для них разную задержку (delay). 3. Попробуйте анимировать не `x, аyкоординату сflipY`, чтобы создать эффект подпрыгивающего и переворачивающегося в воздухе объекта. 4. Исследуйте другие свойства твина, такие как ease (функция плавности) или scaleX, чтобы комбинировать переворот с масштабированием.