Phaser.js: всё об играх и разработке

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

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

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

    create ()
    {
        const chest = this.add.image(400, 600, 'assets', 'blue-open').setOrigin(0.5, 1);
        //  After 2 seconds the frame will change to 'blue-open'

        this.tweens.add({
            targets: chest,
            texture: [ 'assets', 'blue-closed' ],
            duration: 500,
            repeat: -1,
            yoyo: true,
            y: chest.y - 50,
            scaleY: 1.2,
            ease: 'Back.out'
        });
    }
}

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

const game = new Phaser.Game(config);

Подготовка ассетов: загрузка атласа

Для работы с несколькими кадрами (текстурами) одного объекта удобно использовать Texture Atlas — изображение, содержащее набор спрайтов, и JSON-файл с координатами каждого кадра. Это позволяет загрузить все необходимые текстуры одной командой и обращаться к ним по имени.

В методе preload мы загружаем атлас с помощью this.load.atlas. Первый аргумент — ключ атласа ('assets'), по которому мы будем к нему обращаться. Второй и третий — пути к файлам изображения и данных соответственно.

this.load.atlas('assets', 'assets/atlas/tweenparts.png', 'assets/atlas/tweenparts.json');

Создание объекта и настройка Tween

В методе create мы создаем основной объект — изображение сундука. Метод this.add.image принимает координаты X, Y, ключ текстуры (атласа) и имя конкретного кадра из этого атласа для начального отображения. С помощью .setOrigin(0.5, 1) мы устанавливаем точку привязки (origin) спрайта: 0.5 по X (центр) и 1 по Y (нижний край). Это нужно, чтобы анимация движения вверх происходила от "дна" сундука.

const chest = this.add.image(400, 600, 'assets', 'blue-open').setOrigin(0.5, 1);

Затем создается анимация (Tween) с помощью this.tweens.add. Объектом анимации (targets) является наш сундук (chest).

Сердце анимации: свойство `texture` и параметры Tween

Ключевой момент — использование свойства texture в конфигурации Tween. Оно принимает массив, где первый элемент — ключ текстуры (атласа), а второй — имя целевого кадра. Tween плавно сменит текущий кадр объекта на указанный в процессе своей работы.

texture: [ 'assets', 'blue-closed' ]

Остальные параметры настраивают поведение анимации: - duration: длительность одного цикла в миллисекундах (500 мс). - repeat: количество повторений (-1 для бесконечного повтора). - yoyo: если true, анимация будет проигрываться в прямом и обратном порядке. - `yиscaleY`: свойства, которые также анимируются параллельно со сменой текстуры (поднятие на 50 пикселей и растяжение по высоте). - ease: функция плавности 'Back.out', которая создает эффект "отскока" в конце движения.

this.tweens.add({
    targets: chest,
    texture: [ 'assets', 'blue-closed' ],
    duration: 500,
    repeat: -1,
    yoyo: true,
    y: chest.y - 50,
    scaleY: 1.2,
    ease: 'Back.out'
});

В итоге сундук бесконечно открывается и закрывается (blue-open <-> blue-closed), одновременно подпрыгивая и немного деформируясь.

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

Код завершается стандартной конфигурацией игры (config) и ее созданием. В конфиге указаны базовые настройки: тип рендерера, размеры холста, цвет фона, ID родительского HTML-элемента и класс основной сцены (Example).

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

const game = new Phaser.Game(config);

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

Tween в Phaser — это мощный и гибкий инструмент для создания плавных анимаций, который умеет работать не только с числовыми свойствами вроде координат, но и с текстурами. Использование свойства texture в Tween позволяет легко оживлять объекты, меняя их внешний вид в такт движению. Для экспериментов попробуйте: анимировать несколько свойств одновременно (угол поворота, прозрачность), создать цепочку Tween-ов с помощью chain, применить разные функции плавности (ease) к разным свойствам или управлять анимацией по событию (например, по клику).