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

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

Версия 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('bar', 'assets/sprites/longarrow.png');
    }

    create ()
    {
        const bar = this.add.image(400, 300, 'bar').setOrigin(0, 0.5);

        this.tweens.add({
            targets: bar,
            angle: '+=360',
            duration: 5000,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

Что такое твин (Tween)?

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

Встроенный менеджер твинов this.tweens позволяет управлять множеством анимаций одновременно, контролировать их повторение и добавлять эффекты плавности (easing).

Разбор примера: бесконечное вращение стрелки

Рассмотрим исходный код по шагам. В методе preload загружается изображение стрелки.

this.load.image('bar', 'assets/sprites/longarrow.png');

В методе create создаётся спрайт и сразу настраивается его точка вращения (origin). Установка setOrigin(0, 0.5) означает, что точка вращения находится на левом краю по центру спрайта.

const bar = this.add.image(400, 300, 'bar').setOrigin(0, 0.5);

Затем создаётся твин с помощью this.tweens.add(). Конфигурационный объект — сердце анимации.

this.tweens.add({
    targets: bar,
    angle: '+=360',
    duration: 5000,
    repeat: -1
});

Ключевые параметры конфигурации твина

Давайте подробно разберём каждый параметр из примера.

- targets: Объект или массив объектов, свойства которых будут анимироваться. В нашем случае это спрайт bar. - angle: '+=360': Целевое изменение свойства. Запись '+=' означает относительное изменение. Каждый цикл твина значение angle спрайта увеличится на 360 градусов относительно текущего. - duration: 5000: Длительность одного цикла анимации в миллисекундах (5 секунд). - repeat: -1: Количество повторений. Значение -1 задаёт бесконечное повторение твина.

Благодаря этим параметрам стрелка будет непрерывно вращаться вокруг своей левой точки, делая полный оборот за 5 секунд.

Практические вариации и улучшения

Конфигурация твина очень гибкая. Вот несколько идей для модификации.

Вращение в другую сторону или на конкретный угол:

angle: '-=360' // Вращение против часовой стрелки
angle: 180     // Поворот на 180 градусов от начального угла

Использование easing-функций для изменения динамики движения. Например, эффект "упругости":

this.tweens.add({
    targets: bar,
    angle: '+=360',
    duration: 3000,
    repeat: -1,
    ease: 'Bounce.easeOut' // Требует подключения плагинов Phaser
});

Запуск твина по событию (например, клику) и его остановка:

const tween = this.tweens.add({ /* конфиг */ });
// Позже, по какому-то условию:
tween.stop();

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

Система твинов Phaser — мощный и простой способ добавить динамики в вашу игру. Начните с вращения спрайтов, а затем экспериментируйте с другими свойствами: `x,y,scale,alpha. Попробуйте создать твин-цепочку (yoyo), чтобы стрелка вращалась туда-обратно, или анимируйте несколько объектов в массивеtargets` для синхронного движения. Это основа для создания сложных и красивых визуальных эффектов.