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

Работа с текстом — важная часть создания игрового интерфейса. 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('lulu', 'assets/pics/shocktroopers-lulu2.png');
    }

    create ()
    {
        this.add.image(790, 600, 'lulu').setOrigin(1);
        
        const text1 = this.add.text(20, 50, 'Shadow Stroke', { fontFamily: 'Arial Black', fontSize: 74, color: '#c51b7d' });
        text1.setStroke('#de77ae', 16);

        //  Apply the shadow to the Stroke only
        text1.setShadow(2, 2, '#333333', 2, true, false);

        const text2 = this.add.text(20, 180, 'Shadow Fill', { fontFamily: 'Arial Black', fontSize: 74, color: '#c51b7d' });
        text2.setStroke('#de77ae', 16);

        //  Apply the shadow to the Fill only
        text2.setShadow(2, 2, '#333333', 2, false, true);

        const text3 = this.add.text(20, 310, 'Shadow Both', { fontFamily: 'Arial Black', fontSize: 74, color: '#c51b7d' });
        text3.setStroke('#de77ae', 16);

        //  Apply the shadow to the Stroke and the Fill (this is the default)
        text3.setShadow(2, 2, '#333333', 2, true, true);

        const text4 = this.add.text(20, 440, 'Shadow None', { fontFamily: 'Arial Black', fontSize: 74, color: '#c51b7d' });
        text4.setStroke('#de77ae', 16);

        //  Apply the shadow to neither stroke nor fill, if you don't need a shadow then don't call setShadow at all :)
        text4.setShadow(2, 2, '#333333', 2, false, false);
    }
}

const config = {
    type: Phaser.CANVAS,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    backgroundColor: 0xbdbdbd,
    scene: Example
};

const game = new Phaser.Game(config);

Создание базового текста с обводкой

Прежде чем добавлять тени, создадим текстовый объект с обводкой. В Phaser это делается с помощью метода this.add.text() и последующего вызова setStroke().

const text = this.add.text(20, 50, 'Пример текста', {
    fontFamily: 'Arial Black',
    fontSize: 74,
    color: '#c51b7d'
});
text.setStroke('#de77ae', 16);

Метод setStroke() принимает два аргумента: цвет обводки и её толщину в пикселях. Цвет заливки задаётся в параметре color при создании объекта.

Метод setShadow и его параметры

Для добавления тени используется метод setShadow(). Его сигнатура выглядит так:

setShadow(offsetX, offsetY, color, blur, shadowOnStroke, shadowOnFill)

* offsetX, offsetY: Смещение тени по осям X и Y. * color: Цвет тени в виде строки (например, '#333333'). * blur: Радиус размытия тени. * shadowOnStroke: Булево значение, применять ли тень к обводке. * shadowOnFill: Булево значение, применять ли тень к заливке.

Последние два параметра — ключевые для выборочного применения эффекта.

Тень только для обводки (Stroke)

Чтобы тень отображалась исключительно вокруг контура текста, установите shadowOnStroke: true и shadowOnFill: false. Это создаёт эффект "подсветки" контура, в то время как сама заливка остаётся плоской.

text1.setShadow(2, 2, '#333333', 2, true, false);

Такой стиль подходит для создания текста с "объёмным" или "отделяющимся" контуром на сложном фоне.

Тень только для заливки (Fill)

Обратная ситуация: тень добавляется к основному полю букв, но не к их границам. Для этого укажите shadowOnStroke: false и shadowOnFill: true.

text2.setShadow(2, 2, '#333333', 2, false, true);

Этот приём может имитировать внутреннее свечение или создать лёгкую глубину для плоского текста с яркой обводкой.

Тень для обоих элементов и её отсутствие

Классический и самый распространённый вариант — тень и для обводки, и для заливки. Это поведение по умолчанию, если вызвать setShadow() с параметрами true, true.

text3.setShadow(2, 2, '#333333', 2, true, true);

Если же установить оба флага в false, тень будет "применена", но не видна. Как справедливо отмечено в комментарии к исходнику, в таком случае метод setShadow() лучше вообще не вызывать для экономии ресурсов.

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

Тонкая настройка теней для текста в Phaser открывает новые возможности для дизайна интерфейсов. Экспементируйте с комбинациями: попробуйте использовать тень только для заливки на тёмном фоне или только для обводки для создания неонового эффекта. Поиграйте с цветами теней (например, контрастными) и значениями размытия (blur), чтобы добиться уникального стиля для вашей игры.