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

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

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

Живой запуск

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

Исходный код


class Demo extends Phaser.Scene
{
    constructor()
    {
        super();
    }

    preload()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');   
        this.load.multiatlas('megaset', 'assets/loader-tests/texture-packer-multi-atlas.json', 'assets/loader-tests/');
    }

    create()
    {
        var atlasTexture = this.textures.get('megaset');

        var frames = atlasTexture.getFrameNames();

        for (var i = 0; i < frames.length; i++)
        {
            var x = Phaser.Math.Between(0, 1024);
            var y = Phaser.Math.Between(100, 768);

            let image = this.add.image(x, y, 'megaset', frames[i]);

            this.add.tween({
                targets: image,
                x: x + Phaser.Math.Between(-100, 100),
                y: y + Phaser.Math.Between(-100, 100),
                yoyo: true,
                repeat: -1
            });
        }

        this.add.text(32, 32, 'iOS ' + this.renderer.maxTextures).setDepth(1000);
    }
}

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

const game = new Phaser.Game(config);

Загрузка мульти-атласа

Загрузка мульти-атласа в Phaser выполняется с помощью метода load.multiatlas. Он принимает ключ для обращения к атласу, путь к JSON-файлу с данными о кадрах и базовый путь к изображениям.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.multiatlas('megaset', 'assets/loader-tests/texture-packer-multi-atlas.json', 'assets/loader-tests/');

setBaseURL задаёт базовый URL для всех загружаемых ресурсов, что упрощает указание путей. Ключ 'megaset' будет использоваться для доступа к атласу в коде.

Получение кадров и создание изображений

После загрузки атласа в методе create мы можем получить текстуру и имена всех кадров. Это позволяет создавать изображения для каждого кадра в случайных позициях.

var atlasTexture = this.textures.get('megaset');
var frames = atlasTexture.getFrameNames();

for (var i = 0; i < frames.length; i++) {
    var x = Phaser.Math.Between(0, 1024);
    var y = Phaser.Math.Between(100, 768);
    let image = this.add.image(x, y, 'megaset', frames[i]);
}

this.textures.get('megaset') возвращает текстуру атласа. getFrameNames() даёт массив имён всех кадров. Phaser.Math.Between генерирует случайные координаты, а this.add.image создаёт изображение, используя ключ атласа и имя конкретного кадра.

Добавление анимации через твины

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

this.add.tween({
    targets: image,
    x: x + Phaser.Math.Between(-100, 100),
    y: y + Phaser.Math.Between(-100, 100),
    yoyo: true,
    repeat: -1
});

targets указывает, к каким объектам применяется твин. Параметры `xиyзадают конечные координаты, смещённые случайным образом от начальной позиции.yoyo: trueделает анимацию возвратной, аrepeat: -1` заставляет её повторяться бесконечно.

Отображение информации о рендерере

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

this.add.text(32, 32, 'iOS ' + this.renderer.maxTextures).setDepth(1000);

this.renderer.maxTextures возвращает лимит текстур для текущего рендерера (например, WebGL). setDepth(1000) гарантирует, что текст будет отображаться поверх других элементов сцены.

Конфигурация игры

Базовый конфиг игры определяет её основные параметры: тип рендерера, размеры холста, цвет фона и главную сцену.

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

const game = new Phaser.Game(config);

type: Phaser.AUTO позволяет Phaser автоматически выбрать WebGL или Canvas. parent указывает ID HTML-элемента для встраивания игры. scene: Demo задаёт класс сцены, которая будет запущена первой.

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

Вы освоили работу с мульти-атласами и анимацией в Phaser, что поможет оптимизировать загрузку ресурсов и создать динамичную графику. Для экспериментов попробуйте изменить параметры твинов (длительность, ease-функции), добавить взаимодействие с изображениями по клику или комбинировать несколько атласов для сложных сцен.