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

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

Хранение игровых данных, локализаций или конфигураций во внешних текстовых файлах — стандартная практика. 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.text('data', 'assets/loader-tests/test.txt');
    }

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

        const data = this.cache.text.get('data');

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

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

const game = new Phaser.Game(config);

Загрузка ресурсов: текст и изображения

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

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('logo', 'assets/sprites/phaser.png');
this.load.text('data', 'assets/loader-tests/test.txt');

Здесь setBaseURL задает общий путь для всех последующих загрузок. Метод load.image регистрирует спрайт с ключом 'logo', а load.text — текстовый файл с ключом 'data'. После выполнения preload содержимое файла test.txt будет храниться в текстовом кэше под этим ключом.

Извлечение данных из кэша

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

const data = this.cache.text.get('data');

Вызов this.cache.text.get('data') возвращает строку — всё содержимое загруженного файла. Эта строка хранится в переменной data для дальнейшего использования. Такой подход позволяет отделять данные от логики игры, что упрощает их обновление.

Отображение текста с помощью DOM-элемента

Phaser интегрирует DOM-элементы в игровой мир. Чтобы отобразить наш текст, мы создаем стилизованный div и помещаем в него полученное содержимое.

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

Метод this.add.dom создает новый DOM-элемент. Его параметры: 1. **400, 300** — координаты X и Y элемента в игровом мире. 2. **'div'** — тип создаваемого HTML-элемента. 3. **Строка стилей** — задает фон, размеры, шрифт, цвет и скрывает переполнение. 4. **data** — строка, которая становится внутренним содержимым (innerHTML) этого div. Это и есть текст из нашего файла.

Для работы DOM-элементов в конфигурации игры должна быть включена соответствующая опция.

Конфигурация игры: включаем поддержку DOM

Чтобы методы, связанные с DOM (например, add.dom), работали корректно, необходимо явно указать это в настройках игры при её создании.

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

Ключевой момент — объект dom с параметром createContainer: true. Это говорит Phaser создать специальный контейнер для DOM-элементов и интегрировать его в рендерер. Без этой настройки вызов add.dom приведет к ошибке.

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

Использование текстовых файлов для хранения данных и их отображение через DOM — это гибкий и мощный паттерн в Phaser 3. Он отлично подходит для интерфейсов, не требующих сложной игровой графики. Для экспериментов попробуйте: загрузить JSON-файл и парсить его для динамического создания контента; использовать разные стили CSS для DOM-элементов; или анимировать положение и прозрачность DOM-объекта с помощью Tween.