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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super({
            pack: {
                files: [
                    { type: 'atlas', key: 'megaset', textureURL: 'assets/atlas/megaset-0.png', atlasURL: '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);

Конфигурация загрузки через `pack` в конструкторе сцены

Phaser предоставляет удобный механизм предзагрузки ресурсов через свойство pack в конфигурации сцены. Это свойство принимает объект с массивом файлов files, где каждый файл описывается типом, ключом и путями.

constructor ()
{
    super({
        pack: {
            files: [
                { 
                    type: 'atlas', 
                    key: 'megaset', 
                    textureURL: 'assets/atlas/megaset-0.png', 
                    atlasURL: 'assets/atlas/megaset-0.json'
                }
            ]
        }
    });
}

В этом примере мы указываем, что файл имеет тип 'atlas', что означает текстурный атлас. Ключ 'megaset' будет использоваться для доступа к ресурсу в коде. Параметры textureURL и atlasURL задают пути к изображению атласа и соответствующему JSON-файлу с данными о кадрах. Phaser автоматически загрузит эти ресурсы перед вызовом метода create() сцены, что гарантирует их доступность.

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

После успешной загрузки атласа мы можем получить к нему доступ в методе create(). Для этого используется менеджер текстур сцены, доступный через this.textures.

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

Метод this.textures.get('megaset') возвращает объект текстуры по ключу, который мы указали при загрузке. У этого объекта есть метод getFrameNames(), который возвращает массив строк с именами всех кадров (спрайтов), описанных в JSON-файле атласа. Этот массив можно использовать для перебора всех доступных изображений.

Динамическое создание изображений из кадров атласа

Имея список кадров, мы можем динамически создавать игровые объекты. В примере используется цикл для размещения каждого кадра в случайной позиции на экране.

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.Math.Between(0, 800) генерирует случайное целое число в указанном диапазоне для координат `xиy. Методthis.add.image()создает объект изображения. Он принимает четыре аргумента: координатыxиy, ключ текстуры'megaset'и имя конкретного кадраframes[i]`. Phaser автоматически извлекает нужную область из атласа, используя данные из JSON-файла.

Настройка игры и запуск сцены

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

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

const game = new Phaser.Game(config);

Параметр type: Phaser.AUTO позволяет Phaser автоматически выбрать между WebGL и Canvas рендерингом. width и height задают размер игрового мира. parent указывает ID HTML-элемента, в который будет встроен canvas. scene: Example передает класс нашей сцены, который будет инстанциирован при запуске игры. Создание экземпляра new Phaser.Game(config) инициализирует игру и начинает выполнение предзагрузки, определенной в конструкторе сцены.

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

Использование JSON-конфигурации для загрузки ресурсов в Phaser упрощает управление ассетами и делает код сцены чище. Этот метод особенно эффективен для изолированных сцен с собственными зависимостями. Для экспериментов попробуйте

  1. загрузить несколько атласов с разными ключами и комбинировать их кадры
  2. использовать pack для предзагрузки звуков или JSON-данных
  3. динамически менять кадры у созданных изображений во время игры с помощью метода setFrame()