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

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

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

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

        const frames = atlasTexture.getFrameNames();

        for (let i = 0; i < frames.length; i++)
        {
            const x = Phaser.Math.Between(0, 800);
            const y = Phaser.Math.Between(0, 600);

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

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

const game = new Phaser.Game(config);

Настройка базового URL и загрузка атласа

На этапе предзагрузки (preload) мы сначала указываем базовый URL, откуда будут загружаться все последующие ресурсы. Это удобно, чтобы не писать полные пути каждый раз.

Затем с помощью метода this.load.atlas() загружаем сам атлас. Метод принимает три аргумента: уникальный ключ ресурса (megaset), путь к изображению-атласу и путь к JSON-файлу с данными о кадрах (спрайтах). JSON описывает, какие области большого изображения соответствуют каждому отдельному спрайту.

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('megaset', 'assets/atlas/megaset-0.png', 'assets/atlas/megaset-0.json');

Получение текстуры и списка кадров

После успешной загрузки в методе create() мы можем начать работу с ресурсами. Сначала получаем саму текстуру атласа по её ключу с помощью this.textures.get('megaset').

Затем у полученной текстуры запрашиваем массив имён всех доступных кадров (спрайтов) методом .getFrameNames(). Этот массив мы будем использовать для создания изображений.

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

Случайное размещение всех спрайтов на сцене

Теперь, имея список всех кадров, мы можем создать из них игровые объекты. В цикле for перебираем массив frames.

Для каждого кадра генерируются случайные координаты X и Y в пределах размеров игрового холста (800x600) с помощью Phaser.Math.Between.

Затем создаётся объект изображения (this.add.image). Важно передать ему четыре аргумента: координаты X, Y, ключ атласа ('megaset') и конкретное имя кадра (frames[i]). Именно последний параметр указывает, какую часть атласа использовать для отображения этого конкретного спрайта.

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

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

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