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

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

Версия 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 noTintText = this.add.bitmapText(64, 64, 'ice', 'Phaser III\nTinted Text', 128);
        const tintedText = this.add.bitmapText(64, 400, 'ice', 'Phaser III\nTinted Text', 128);

        tintedText.setTint(0xff00ff, 0xffff00, 0x00ff00, 0xff0000);
    }
}

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

const game = new Phaser.Game(config);

Что такое BitmapText и зачем ему тинт

Класс BitmapText в Phaser 3 использует заранее подготовленное растровое изображение шрифта (спрайтшит). Это делает его отрисовку очень быстрой, но лишает гибкости векторных шрифтов — изначально цвет символов берется из файла изображения.

Метод setTint решает эту проблему, позволяя программно «подкрашивать» пиксели растрового шрифта. В отличие от изменения свойства color у обычного текста, тинт накладывается именно на текстуру, что открывает возможности для градиентов и сложного окрашивания отдельных символов или их частей.

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

Перед созданием текста необходимо загрузить сам шрифт. Для этого в методе preload используется this.load.bitmapFont. Метод принимает три аргумента: ключ для последующего обращения, путь к изображению-спрайтшиту и путь к XML-файлу с разметкой символов.

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');
}

Здесь 'ice' — это произвольный ключ, по которому мы будем создавать текст. Важно указать корректные пути к файлам данных шрифта.

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

В методе create сцены мы создаем два текстовых объекта для наглядного сравнения. Оба используют один и тот же загруженный шрифт.

const noTintText = this.add.bitmapText(64, 64, 'ice', 'Phaser III\nTinted Text', 128);
const tintedText = this.add.bitmapText(64, 400, 'ice', 'Phaser III\nTinted Text', 128);

Параметры метода this.add.bitmapText: координаты X и Y, ключ шрифта ('ice'), строка текста и размер. Размер в пикселях задает высоту строки. Обратите внимание на экранированный символ \n для переноса строки.

Применение тинта с помощью setTint

Вот ключевой момент. К одному из объектов применяется метод setTint. Он принимает до четырех числовых параметров в шестнадцатеричном формате (0xRRGGBB). Каждое число задает цвет тинта для одного из углов прямоугольника текстового объекта.

tintedText.setTint(0xff00ff, 0xffff00, 0x00ff00, 0xff0000);

Порядок углов: верхний левый, верхний правый, нижний левый, нижний правый. Phaser автоматически создает градиентную заливку текста, интерполируя эти цвета между углами. В примере используется фиолетовый (0xff00ff), желтый (0xffff00), зеленый (0x00ff00) и красный (0xff0000).

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

Метод setTint — это простой и эффективный способ динамически менять внешний вид bitmap-текста, создавая цветовые акценты и градиенты без дополнительных ассетов. Для экспериментов попробуйте

  1. Применять тинт только к одному цвету (например, tintedText.setTint(0xff0000))
  2. Анимировать изменение цветов во времени с помощью tweens или в update
  3. Комбинировать тинт с другими свойствами, такими как alpha или angle, для сложных эффектов