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

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

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

    create ()
    {
        this.add.image(8, 8, 'logo').setOrigin(0);

        const data = this.cache.json.get('jsonData');

        this.add.dom(400, 300, 'div', 'background-color: rgba(0, 0, 80); width: 600px; height: 500px; font: 12px Courier; color: white; overflow: hidden', JSON.stringify(data));
    }
}

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

const game = new Phaser.Game(config);

Настройка конфигурации и загрузка данных

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

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

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('logo', 'assets/sprites/phaser.png');
    this.load.json('jsonData', 'assets/atlas/megaset-0.json');
}

Ключ 'jsonData' — это уникальный идентификатор, под которым данные будут храниться в кэше.

Извлечение данных из кэша и создание DOM-элемента

После успешной загрузки в методе create() мы можем получить доступ к данным. Все загруженные через Loader Plugin ресурсы автоматически помещаются в соответствующие кэши. Для JSON используется this.cache.json.

const data = this.cache.json.get('jsonData');

Переменная data теперь содержит JavaScript-объект, распарсенный из JSON-файла. Для его отображения мы используем DOM-элемент. Метод this.add.dom() создает HTML-элемент, интегрированный в игровое пространство.

this.add.dom(400, 300, 'div', 'background-color: rgba(0, 0, 80); width: 600px; height: 500px; font: 12px Courier; color: white; overflow: hidden', JSON.stringify(data));

Параметры метода: 1. **400, 300**: координаты X и Y центра элемента. 2. **'div'**: тип создаваемого HTML-элемента. 3. **Строка стилей**: задает внешний вид контейнера (фон, размеры, шрифт). 4. **JSON.stringify(data)**: содержимое элемента. Функция JSON.stringify() преобразует объект обратно в строку JSON для читаемого отображения.

Анализ и практическое применение

Почему мы используем именно this.add.dom, а не простой текстовый объект Phaser? Стандартный this.add.text не поддерживает автоматическое форматирование многострочных данных и полосы прокрутки.

DOM-элемент, созданный в примере, имеет стиль overflow: hidden. Если заменить его на overflow: auto, появится полоса прокрутки для просмотра больших JSON-файлов.

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

Для работы с самими данными (например, для создания спрайтов из atlas данных) нужно не просто выводить строку, а обращаться к свойствам объекта data.

// Предположим, наш JSON описывает atlas
const frames = data.frames;
Object.keys(frames).forEach(frameName => {
    console.log(`Загружен кадр: ${frameName}`);
});

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

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