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

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

Экспорт данных анимации в JSON — мощный инструмент для отладки, сохранения состояний или интеграции с редакторами. В этой статье разберем, как получить структурированное представление ваших анимаций в Phaser 3, используя встроенные методы API. Вы научитесь извлекать данные как для одной анимации, так и для всего менеджера, что полезно при создании инструментов или переносе контента между проектами.

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

    create ()
    {
        this.add.text(400, 32, 'Check the console', { color: '#00ff00' }).setOrigin(0.5, 0);

        this.anims.create({ key: 'diamond', frames: this.anims.generateFrameNames('gems', { prefix: 'diamond_', end: 15, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'prism', frames: this.anims.generateFrameNames('gems', { prefix: 'prism_', end: 6, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'square', frames: this.anims.generateFrameNames('gems', { prefix: 'square_', end: 14, zeroPad: 4 }), repeat: -1 });

        this.add.sprite(400, 200, 'gems').play('diamond');
        this.add.sprite(400, 300, 'gems').play('prism');
        this.add.sprite(400, 400, 'gems').play('ruby');
        this.add.sprite(400, 500, 'gems').play('square');

        //  Get a JSON representation of a single animation, or all animations:

        //  You can extract the animation:
        var ruby = this.anims.get('ruby');

        //  Then pass it to JSON.stringify
        console.log(JSON.stringify(ruby));

        //  Or call toJSON directly (this returns an Object)
        console.log(ruby.toJSON());

        //  You can also call 'this.anims.toJSON' and pass it the key of the animation you want:
        console.log(JSON.stringify(this.anims.toJSON('ruby')));

        //  Or dump out ALL animations in the Animation Manager:
        console.log(JSON.stringify(this.anims));
    }
}

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

const game = new Phaser.Game(config);

Подготовка анимаций

Прежде чем экспортировать анимации, их нужно создать и запустить. В примере используется атлас gems, из которого генерируются кадры для четырех анимаций: diamond, prism, ruby и square. Ключевой метод this.anims.generateFrameNames автоматически создает массив кадров на основе префикса и конечного индекса.

this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });

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

Экспорт одной анимации через get() и toJSON

Самый прямой способ получить данные одной анимации — использовать метод this.anims.get('ключ'). Он возвращает экземпляр анимации, который затем можно преобразовать в JSON.

var ruby = this.anims.get('ruby');
console.log(JSON.stringify(ruby));

Альтернативно, у экземпляра анимации есть метод toJSON(), который возвращает обычный JavaScript-объект с данными анимации. Этот объект уже структурирован и готов к сериализации или дальнейшей обработке.

console.log(ruby.toJSON());

Оба подхода дают одинаковый результат, но toJSON() может быть удобнее, если вам нужен объект, а не строка.

Использование метода this.anims.toJSON()

Менеджер анимаций this.anims предоставляет собственный метод toJSON(), который может принимать ключ анимации в качестве аргумента. Это компактный способ получить данные без промежуточного получения экземпляра.

console.log(JSON.stringify(this.anims.toJSON('ruby')));

Если вызвать this.anims.toJSON() без аргументов, он вернет данные всех анимаций. Однако в примере показана передача ключа, что полезно для точечного экспорта.

Экспорт всех анимаций из менеджера

Чтобы получить полный снимок всех анимаций, зарегистрированных в сцене, можно сериализовать сам объект this.anims. При передаче в JSON.stringify автоматически вызывается внутренний метод toJSON, который собирает данные по всем анимациям.

console.log(JSON.stringify(this.anims));

В консоли вы увидите массив объектов, каждый из которых соответствует одной анимации. Это полезно для отладки сложных сцен или сохранения состояния анимаций целиком.

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

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