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

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

Версия 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('bg', 'assets/pics/undersea.jpg');
    }

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

        const text = this.add.text(400, 300, 'Phaser\nShadow FX', { align: 'center' });

        text.setOrigin(0.5, 0.5);
        text.setResolution(window.devicePixelRatio);
        text.setFontFamily('Arial');
        text.setFontStyle('bold');
        text.setFontSize(128);

        const fx = text.enableFilters().filters.external.addShadow(0, 0, 0.06, 0.75, 0x000000, 4, 0.8);
    }
}

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

const game = new Phaser.Game(config);

Инициализация сцены и загрузка ресурсов

В методе preload() мы загружаем фоновое изображение. Обратите внимание на использование setBaseURL() — это удобный способ задать базовый путь для всех загружаемых ресурсов, чтобы не указывать полный URL каждый раз.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bg', 'assets/pics/undersea.jpg');
}

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

В методе create() сначала добавляется фоновое изображение. Затем создается текстовый объект с помощью this.add.text(). Первые два аргумента (400, 300) — это координаты X и Y для позиционирования текста в центре экрана (при размере canvas 800x600). Третий аргумент — строка с текстом, а четвёртый — объект стилей.

const text = this.add.text(400, 300, 'Phaser\nShadow FX', { align: 'center' });

Далее мы настраиваем свойства текста. setOrigin(0.5, 0.5) устанавливает точку привязки (anchor) в центр текстового блока, что позволяет точно центрировать его по указанным ранее координатам. setFontSize(128) задаёт размер шрифта.

text.setOrigin(0.5, 0.5);
text.setResolution(window.devicePixelRatio);
text.setFontFamily('Arial');
text.setFontStyle('bold');
text.setFontSize(128);

Добавление фильтра тени

Ключевой шаг — активация и добавление фильтра. Цепочка вызовов text.enableFilters().filters.external.addShadow(...) делает следующее: 1. enableFilters() — включает систему фильтров для этого игрового объекта. 2. .filters.external — предоставляет доступ к коллекции внешних фильтров. 3. .addShadow(...) — непосредственно создаёт и применяет фильтр тени.

const fx = text.enableFilters().filters.external.addShadow(0, 0, 0.06, 0.75, 0x000000, 4, 0.8);

Параметры метода addShadow(): - **0, 0** — смещение тени по осям X и Y (в данном случае тень прямо за текстом). - **0.06** — коэффициент размытия (blur). Чем больше значение, тем сильнее размытие. - **0.75** — сила тени (quality). Влияет на качество рендеринга. - **0x000000** — цвет тени в шестнадцатеричном формате (чёрный). - **4** — количество проходов (iterations). Больше проходов — более качественная, но ресурсоёмкая тень. - **0.8** — альфа-канал (прозрачность) тени.

Конфигурация игры

Объект config определяет основные настройки игры Phaser. Здесь важно указать родительский элемент (parent), чтобы движок знал, куда встраивать canvas, и правильно задать размеры (width, height).

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

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

Фильтр тени — мощный и лёгкий инструмент для улучшения визуального восприятия текста в Phaser 3. Он работает на уровне WebGL и не требует ручного рисования. Для экспериментов попробуйте изменить цвет тени на контрастный фону, увеличьте смещение для эффекта "света сбоку" или поиграйте с прозрачностью и размытием для создания более мягких или резких теней.