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

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

При запуске игры на Phaser в консоли браузера по умолчанию отображается информационный баннер с версией движка, режимом рендеринга и временем загрузки. Хотя это полезно для разработки, в продакшене или при публикации демо лишние сообщения могут засорять вывод. Всего одна строчка в конфигурации игры позволяет полностью скрыть этот баннер, делая консоль чище. В этой статье мы разберем, как работает опция `banner` в объекте конфигурации Phaser.Game, и покажем практический пример её отключения. Это знание пригодится для финальной полировки проекта перед релизом.

Версия 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 config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example,

    //  Open the Dev Tools and notice how there is no banner printed
    //  when the game loads. Change this value to 'true' to see the
    //  default banner.
    banner: false
};

const game = new Phaser.Game(config);

Что такое баннер Phaser и зачем его убирать?

При инициализации игры Phaser автоматически выводит в консоль браузера стилизованный текстовый баннер. Он содержит техническую информацию: версию Phaser (например, 'Phaser v3.60.0'), выбранный тип рендеринга (WebGL или Canvas), а также время, затраченное на загрузку и запуск игры.

Это крайне полезно во время разработки для быстрой диагностики. Однако, когда игра готова к показу аудитории или встраивается в другой сайт, эти служебные сообщения могут выглядеть как мусор. Отключение баннера — это шаг к профессиональному виду вашего проекта.

Анализ исходного кода примера

Весь магия скрыта в объекте config, который передается в конструктор Phaser.Game. Давайте посмотрим на ключевой фрагмент:

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

Здесь стандартные свойства задают базовые параметры игры: тип рендеринга, контейнер для канваса, размеры и главную сцену. Строка banner: false — это та самая настройка, которая отключает вывод информационного сообщения в консоль. Если изменить её значение на true (или вовсе удалить), баннер снова будет появляться при каждой перезагрузке страницы.

Практическое применение: когда и как использовать

Опцию banner можно использовать не только для полного отключения. В документации Phaser указано, что значением может быть как булево (true/false), так и объект с настройками для кастомного вывода. Однако в предоставленном примере используется простейший способ — отключение.

Рекомендуется оставлять banner: true на этапе активной разработки и отладки. Переключиться на false стоит на одном из последних этапов, например, при сборке финальной версии для хостинга или перед отправкой игры на проверку заказчику. Это делается в одном месте — в основном конфигурационном файле вашего проекта.

// В вашем основном файле инициализации игры (например, main.js)
const gameConfig = {
    // ... другие настройки ...
    banner: process.env.NODE_ENV === 'development' // Пример для сборщиков
};

Такой подход позволяет гибко управлять выводом в зависимости от среды выполнения.

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

Отключение системного баннера Phaser — это маленький, но важный штрих для придания вашей игре законченного вида. Опция banner в конфиге предоставляет простой и контролируемый способ управлять этим поведением. Для экспериментов попробуйте не только включать и выключать баннер, но и изучить, какую ещё информацию можно выводить через эту систему (например, добавить кастомный текст). Также поэкспериментируйте с другими свойствами объекта конфигурации Phaser.Game, такими как backgroundColor или scale, чтобы понять, как они влияют на начальный экран загрузки.