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

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

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

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

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

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

        text.setText([
            'Game Title: ' + game.config.gameTitle
        ]);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    //  Open the Dev Tools
    //  The text in the banner will be in white on a neon pink background.
    //  The colors at the start of the background array define the blocks
    //  at the beginning of the banner
    title: 'Shock and Awesome',
    banner: {
        text: '#ffffff',
        background: [
            '#fff200',
            '#38f0e8',
            '#00bff3',
            '#ec008c'
        ],
        hidePhaser: true
    },
    scene: Example
};

const game = new Phaser.Game(config);

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

Этот объект позволяет переопределить три ключевых параметра: * Цвет текста баннера. * Цветной фон, состоящий из нескольких блоков. * Видимость строки с версией Phaser.

Использование banner не влияет на производительность самой игры, так как баннер существует только в консоли разработчика.

Объект banner принимает три свойства. Давайте рассмотрим их на основе примера из статьи.

banner: {
    text: '#ffffff',
    background: [
        '#fff200',
        '#38f0e8',
        '#00bff3',
        '#ec008c'
    ],
    hidePhaser: true
}

* text: Строка, определяющая цвет текста в CSS-формате (HEX-код, rgb, название цвета). В примере текст будет белым (#ffffff). * background: Массив строк с цветами для фона. Каждый элемент массива задает цвет для одного блока в начале баннера. Цвета применяются последовательно. В примере фон будет состоять из четырех разноцветных полос. * hidePhaser: Булево значение. Если true, из баннера удаляется строка с версией Phaser (например, Phaser v3.60.0). В примере эта строка скрыта.

Как получить название игры в коде сцены?

Название игры, заданное в конфиге в поле title, доступно для использования внутри вашего кода. Это может быть полезно для отображения титров или логирования.

В методе create сцены вы можете обратиться к глобальному объекту game и его конфигурации game.config. Внутри конфига хранится свойство gameTitle.

Вот как это выглядит в примере:

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

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

    text.setText([
        'Game Title: ' + game.config.gameTitle
    ]);
}

Код создает текстовый объект и выводит в него строку, состоящую из префикса 'Game Title: ' и значения game.config.gameTitle, которое в нашем случае равно 'Shock and Awesome'.

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

Давайте соберем все вместе и посмотрим на полный код инициализации игры с кастомизированным баннером.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    title: 'Shock and Awesome', // Название игры для баннера и game.config
    banner: {
        text: '#ffffff', // Белый текст
        background: [ // Радужный фон из 4-х блоков
            '#fff200', // Желтый
            '#38f0e8', // Голубой
            '#00bff3', // Синий
            '#ec008c'  // Розовый
        ],
        hidePhaser: true // Скрываем упоминание Phaser в баннере
    },
    scene: Example // Указываем главную сцену
};

const game = new Phaser.Game(config);

При запуске этой конфигурации в консоли браузера появится яркий баннер с белым текстом на разноцветном фоне, содержащий только название игры Shock and Awesome.

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

Кастомизация баннера через объект banner — это малая, но значимая деталь в разработке игры. Она позволяет сразу задать нужное настроение и профессионально оформить этап загрузки. Для экспериментов попробуйте согласовать цвета фона баннера с палитрой вашей игры, использовать градиенты (поддерживаются CSS-строки) или динамически менять gameTitle в зависимости от локализации. Помните, что баннер виден только при открытой консоли, поэтому его основная аудитория — вы сами и другие разработчики.