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

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

Использование ассетов, созданных в Unity, может значительно ускорить разработку игр на Phaser, особенно если ваша команда уже работает с этим движком. В этом примере показано, как загрузить Texture Atlas, экспортированный из Unity, и создать на его основе плавные анимации. Вы научитесь работать с `unityAtlas`, создавать анимационные последовательности и управлять ими в сцене.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.unityAtlas('ant', 'assets/atlas/ant.png', 'assets/atlas/ant.meta');
        this.load.unityAtlas('ant2', 'assets/atlas/ant2.png', 'assets/atlas/ant2.meta');
    }

    create ()
    {
        this.anims.create({
            key: 'nod',
            frames: this.anims.generateFrameNames('ant', { prefix: 'ant1Sprite_', end: 12 }),
            repeat: -1,
            repeatDelay: 2,
            frameRate: 15
        });

        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNames('ant2', { prefix: 'ant2Sprite_', end: 3 }),
            repeat: -1,
            frameRate: 14
        });

        const walker = this.add.sprite(1000, 250, 'ant2', 'ant2Sprite_0').play('walk');

        this.add.sprite(200, 400, 'ant', 'ant1Sprite_0').play('nod');

        this.tweens.add({
            targets: walker,
            x: -200,
            duration: 6000,
            ease: 'Linear'
        });
    }
}

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

const game = new Phaser.Game(config);

Загрузка атласов Unity в preload

Метод this.load.unityAtlas() предназначен для загрузки специального формата атласа, который экспортируется из Unity. Он принимает три аргумента: ключ для дальнейшего обращения к текстуре, путь к PNG-изображению и путь к мета-файлу (.meta), содержащему данные о фреймах.

this.load.unityAtlas('ant', 'assets/atlas/ant.png', 'assets/atlas/ant.meta');
this.load.unityAtlas('ant2', 'assets/atlas/ant2.png', 'assets/atlas/ant2.meta');

В этом коде загружаются два отдельных атласа с ключами 'ant' и 'ant2'. Базовый URL задается через this.load.setBaseURL, что позволяет использовать относительные пути.

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

После загрузки атласа можно создать анимацию. Удобнее всего использовать метод this.anims.generateFrameNames(), который автоматически генерирует массив фреймов на основе заданного шаблона имен.

this.anims.create({
    key: 'nod',
    frames: this.anims.generateFrameNames('ant', { prefix: 'ant1Sprite_', end: 12 }),
    repeat: -1,
    repeatDelay: 2,
    frameRate: 15
});

Здесь создается анимация 'nod'. Параметр prefix указывает общее начало имени каждого кадра в атласе, а end — номер последнего кадра. Phaser сам найдет все кадры от ant1Sprite_0 до ant1Sprite_12. repeat: -1 задает бесконечное повторение, а repeatDelay добавляет паузу в 2 секунды между циклами.

Добавление и управление спрайтами

Спрайт добавляется в сцену с указанием ключа атласа и имени начального кадра. Метод .play() сразу запускает назначенную анимацию.

const walker = this.add.sprite(1000, 250, 'ant2', 'ant2Sprite_0').play('walk');

Переменная walker сохраняет ссылку на спрайт, что позволяет в дальнейшем управлять им, например, через твины.

Анимация перемещения с помощью твинов

Phaser предоставляет мощную систему твинов для плавного изменения свойств объектов. В примере твин перемещает спрайт walker по горизонтали.

this.tweens.add({
    targets: walker,
    x: -200,
    duration: 6000,
    ease: 'Linear'
});

Параметр targets принимает объект или массив объектов для анимации. Свойство `xизменяется от текущего значения (1000) до -200 за 6000 миллисекунд.ease: 'Linear'` обеспечивает равномерную скорость движения без ускорения или замедления.

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

Интеграция ассетов из Unity в Phaser — это простой и эффективный способ использовать готовую графику. Вы можете экспериментировать: создавать цепочки анимаций с помощью chain(), добавлять твинам задержки (delay) или callback-функции (onComplete), а также комбинировать несколько твинов для одного спрайта (например, одновременное движение и вращение).