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

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

При разработке игры на Phaser может потребоваться динамически ссылаться на её метаданные, например, для отображения названия или формирования ссылки на официальный сайт. Глобальный объект `game.config` хранит эти данные, заданные при инициализации, и предоставляет к ним удобный доступ из любого места в коде. Это полезно для создания информационных экранов, дебаг-панелей или водяных знаков.

Версия 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.image('pic', 'assets/pics/baal-loader.png');
    }

    create ()
    {
        this.add.image(400, 300, 'pic');

        const text = this.add.text(80, 550, '', { font: '16px Courier', fill: '#ffffff' });

        text.setText([
            `Game Title: ${game.config.gameTitle}`,
            `URL: ${game.config.gameURL}`
        ]);
    }
}

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

    //  Open the Dev Tools
    //  The URL of your game will be a link at the end of the banner text
    title: 'Shock and Awesome',
    url: 'http://shockandawe.io'
};

const game = new Phaser.Game(config);

Инициализация игры с метаданными

При создании экземпляра игры через new Phaser.Game(config) в конфигурацию можно передать дополнительные поля title и url. Они не влияют на внутреннюю работу движка, но сохраняются для дальнейшего использования разработчиком.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example,
    title: 'Shock and Awesome',
    url: 'http://shockandawe.io'
};

const game = new Phaser.Game(config);

Доступ к конфигурации из сцены

После создания игры переданная конфигурация становится доступна через глобальный объект game.config. Обратите внимание, что это именно глобальная переменная game, а не свойство сцены. Доступ к ней можно получить из любого метода сцены, например, в create().

create ()
{
    this.add.image(400, 300, 'pic');

    const text = this.add.text(80, 550, '', { font: '16px Courier', fill: '#ffffff' });

    text.setText([
        `Game Title: ${game.config.gameTitle}`,
        `URL: ${game.config.gameURL}`
    ]);
}

Ключевой момент: в конфиг мы передали поля title и url, но обращаемся к ним через свойства gameTitle и gameURL. Это особенность Phaser: движок автоматически переименовывает эти поля при создании объекта конфигурации.

Практическое применение и нюансы

Использование game.config.gameTitle и game.config.gameURL — это отличный способ избежать «магических строк» в коде. Если название игры или её адрес понадобится изменить, достаточно будет обновить их в одном месте — в объекте конфигурации.

Важно помнить, что game.config содержит всю исходную конфигурацию игры, включая width, height, type и другие параметры. Поля title и url — это пользовательские метаданные, которые Phaser просто сохраняет и не использует самостоятельно. Например, title отображается в заголовке окна браузера и в баннере при открытии консоли разработчика, но для отображения внутри игрового интерфейса вам нужно обратиться к конфигу, как показано в примере.

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

Глобальный объект game.config предоставляет простой и централизованный способ хранения метаданных игры. Для экспериментов попробуйте использовать эти данные не только для текста, но и для динамического формирования ссылок в UI (например, кнопки «Посетить сайт»), логирования или условной загрузки ресурсов в зависимости от окружения (production/development), определяемого по URL.