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

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

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

Версия 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.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
    }

    create ()
    {
        const text = this.add.bitmapText(64, 64, 'ice', 'Drop Shadows', 128);

        text.setDropShadow(4, 4, 0x000000);

        const text2 = this.add.bitmapText(64, 264, 'ice', 'Drop Shadows', 128);

        text2.setDropShadow(4, 6, 0xff00ff, 0.7);

        const text3 = this.add.bitmapText(64, 464, 'ice', 'Drop Shadows', 128);

        text3.setDropShadow(0, 8, 0x000000, 0.2);
    }
}

const config = {
    type: Phaser.WEBGL,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Загрузка bitmap-шрифта

Прежде чем работать с текстом, необходимо загрузить сам шрифт. Bitmap-шрифт в Phaser состоит из двух файлов: изображения (.png) со всеми символами и файла описания (часто .xml или .fnt), который содержит данные о расположении каждого символа на этом изображении.

В методе preload мы используем this.load.bitmapFont для загрузки. Первый аргумент — это ключ ('ice'), по которому мы будем обращаться к шрифту в коде. Далее указываются пути к файлам изображения и данных.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.bitmapFont('ice', 'assets/fonts/bitmap/iceicebaby.png', 'assets/fonts/bitmap/iceicebaby.xml');
}

Создание текста и базовая тень

Для создания объекта текста используется метод this.add.bitmapText. В него передаются координаты (x, y), ключ загруженного шрифта, сама текстовая строка и размер.

Сразу после создания к объекту text применяется метод setDropShadow. Первые два параметра — это смещение тени по осям X и Y (в пикселях). Третий параметр — цвет тени в шестнадцатеричном формате (например, 0x000000 для чёрного). Четвёртый, необязательный параметр — альфа-канал (прозрачность) от 0 до 1. Если он не указан, используется значение по умолчанию.

const text = this.add.bitmapText(64, 64, 'ice', 'Drop Shadows', 128);
text.setDropShadow(4, 4, 0x000000);

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

Эксперименты с цветом и прозрачностью

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

Второй текстовый объект (text2) демонстрирует это. Здесь тень смещена сильнее по вертикали (6 пикселей), ей задан яркий пурпурный цвет (0xff00ff) и снижена непрозрачность до 0.7. Это может имитировать неоновое свечение или стилизованный графический эффект.

const text2 = this.add.bitmapText(64, 264, 'ice', 'Drop Shadows', 128);
text2.setDropShadow(4, 6, 0xff00ff, 0.7);

Создание эффекта размытой тени

Ещё один интересный приём — использование очень размытой и прозрачной тени. Если смещение по X задать равным 0, а по Y — значительным (например, 8 пикселей), и при этом сильно уменьшить альфа-канал, получится эффект лёгкой, воздушной тени под текстом, как от рассеянного света.

Этот подход отлично подходит для минималистичных интерфейсов или для создания ощущения «парения» объекта над поверхностью.

const text3 = this.add.bitmapText(64, 464, 'ice', 'Drop Shadows', 128);
text3.setDropShadow(0, 8, 0x000000, 0.2);

Важно помнить, что тень рендерится как часть самого bitmap-текста и не является отдельным физическим объектом или частью системы освещения Phaser.

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

Метод setDropShadow — это простой и эффективный инструмент для мгновенного улучшения визуального качества текста в игре. Он не требует сложной настройки и работает исключительно с 2D-координатами, цветом и прозрачностью. Для экспериментов попробуйте анимировать параметры тени (например, меняя смещение или цвет в зависимости от времени или действий игрока) или комбинируйте несколько текстовых объектов с разными настройками теней для создания сложных композитных эффектов.