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');

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

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

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

    //  Open the Dev Tools
    //  Notice that it no longer says Phaser, or the Phaser version, in the banner
    banner: {
        hidePhaser: true
    }
};

const game = new Phaser.Game(config);

Стандартный баннер и зачем его скрывать

По умолчанию при инициализации Phaser Game в консоли разработчика браузера появляется сообщение (баннер). В нем указаны название движка (Phaser), его версия, режим рендеринга (WebGL или Canvas) и другие служебные данные.

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

Ключевая настройка: объект `banner`

Управление отображением баннера происходит в главном конфигурационном объекте игры, который передается в конструктор new Phaser.Game(). За это отвечает свойство banner.

По умолчанию оно не указано, и Phaser использует свои стандартные настройки. Чтобы изменить поведение, нужно явно объявить этот объект в конфиге.

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: Example,
    // Настройки баннера
    banner: {
        hidePhaser: true
    }
};

Опция `hidePhaser` и ее эффект

Внутри объекта banner доступно несколько опций. Самая важная для нашей задачи — булево свойство hidePhaser. Установив его значение в true, мы даем движку команду не выводить в консоль строку с логотипом и версией Phaser.

banner: {
    hidePhaser: true // Ключевая опция для скрытия
}

После применения этой настройки при запуске игры в консоли не будет строк вида "Phaser v3.60.0 (WebGL | Web Audio)". Остальная функциональность движка, включая предупреждения и ошибки отладки, остается полностью рабочей.

Полный пример конфигурации

Рассмотрим полный код инициализации игры с активированной опцией скрытия баннера. Обратите внимание, что объект banner добавлен в общий конфиг на одном уровне с type, width и scene.

class Example extends Phaser.Scene {
    // ... код сцены (preload, create) ...
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example,
    //  Откройте инструменты разработчика.
    //  Обратите внимание, что баннер с Phaser и его версией больше не отображается.
    banner: {
        hidePhaser: true
    }
};

const game = new Phaser.Game(config);

Именно передача этого конфигурационного объекта в new Phaser.Game(config) применяет настройки к запускаемому экземпляру игры.

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

Скрытие служебного баннера Phaser — это простой, но эффективный шаг к полировке финальной версии вашей игры. Всего одна строка hidePhaser: true в конфигурации убирает техническую информацию из консоли, оставляя ее чистой для ваших собственных сообщений отладки. **Идеи для экспериментов:** 1. Изучите другие свойства объекта banner, такие как text или background, чтобы полностью кастомизировать вывод в консоль под стиль вашей игры. 2. Попробуйте условно включать эту опцию только в продакшен-сборке, оставляя баннер видимым во время разработки.