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

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

Заголовок игры — это не просто строка в конфигурации. В 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.image('pic', 'assets/pics/baal-loader.png');
    }

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

        this.add.text(80, 560, `Game Title: ${game.config.gameTitle}`, { font: '16px Courier', fill: '#ffffff' });
    }
}

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

    //  Open the Dev Tools
    //  The title of your game will appear in the banner text
    title: 'Shock and Awesome'
};

const game = new Phaser.Game(config);

Установка заголовка в конфигурации игры

Заголовок игры задаётся в основном конфигурационном объекте при создании экземпляра Phaser.Game. Это свойство не влияет на внутреннюю работу движка, но сохраняется в глобальном объекте конфигурации для вашего удобства.

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

const game = new Phaser.Game(config);

В этом примере мы создаём конфиг с базовыми настройками: тип рендера, родительский контейнер, размеры холста и ссылку на главную сцену. Ключевое свойство title получает строковое значение 'Shock and Awesome'. После инициализации игры это значение будет доступно через game.config.gameTitle.

Доступ к заголовку из объекта сцены

Чтобы использовать заголовок внутри сцены, обратитесь к глобальному объекту game, который является экземпляром Phaser.Game. Свойство config этого объекта содержит всю переданную при создании конфигурацию, а gameTitle — наш установленный заголовок.

create ()
{
    this.add.image(400, 300, 'pic');
    this.add.text(80, 560, `Game Title: ${game.config.gameTitle}`, { font: '16px Courier', fill: '#ffffff' });
}

В методе create мы сначала добавляем фоновое изображение, а затем создаём текстовый объект. Для формирования строки используется шаблонный литерал, который подставляет значение game.config.gameTitle. Обратите внимание: обращение идёт именно к глобальной переменной game, а не к локальному контексту сцены (this).

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

Хотя в примере заголовок просто выводится на экран, его основная польза — централизованное хранение мета-информации об игре. Вы можете использовать его для: * Динамического обновления текста в меню или титрах. * Логирования или отладки, чтобы в консоли всегда было видно, какая версия игры запущена. * Использования в условиях или ветвлении кода.

Важно помнить, что game.config — это замороженный (read-only) объект. Вы не можете изменить gameTitle после инициализации игры через прямое присваивание. Если нужна динамически изменяемая переменная, её следует хранить в отдельном свойстве сцены или в менеджере данных.

// Не сработает после создания игры
game.config.gameTitle = 'New Title';

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

Использование свойства title в конфигурации Phaser — это простой и элегантный способ задать имя вашего проекта один раз и иметь к нему доступ отовсюду. Для экспериментов попробуйте создать сцену-заставку, которая анимированно выводит этот заголовок, или используйте его как ключ для загрузки специфичных ресурсов (например, фоновой музыки для конкретной игры).