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

Игровой текст часто должен выделяться или соответствовать общему стилю игры. Простой смены цвета шрифта может быть недостаточно. Метод `setTint` в Phaser позволяет накладывать сложные градиентные окрашивания на текстовые объекты, придавая им уникальный вид без создания отдельных изображений. В этой статье мы разберем, как работает окрашивание текста, и рассмотрим два режима наложения тонировки: по умолчанию и `FILL`.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        const text1 = this.add.text(100, 100, 'Phaser Text with Tint');
        text1.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);

        const text2 = this.add.text(100, 200, 'Phaser Text with Tint', { font: '64px Arial' });
        text2.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);

        const text3 = this.add.text(100, 400, 'Phaser Text with Tint Fill', { font: '64px Arial' });
        text3.setTint(0xff00ff, 0xff00ff, 0x0000ff, 0x0000ff).setTintMode(Phaser.TintModes.FILL);
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene:  [ Example ]
};

const game = new Phaser.Game(config);

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

В Phaser для добавления текста в сцену используется метод this.add.text. Он принимает координаты X, Y, строку текста и опциональный объект стилей.

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

const text1 = this.add.text(100, 100, 'Phaser Text with Tint');
text1.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);

Тонирование текста с увеличенным размером шрифта

Принцип работы setTint не зависит от размера или стиля шрифта. Тонировка применяется к итоговому растровому представлению текста. В следующем примере создается текст большего размера, но применяется точно такая же комбинация цветов. Это демонстрирует универсальность подхода.

const text2 = this.add.text(100, 200, 'Phaser Text with Tint', { font: '64px Arial' });
text2.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);

Использование режима TintModes.FILL

По умолчанию тонировка (Phaser.TintModes.ADD) накладывается поверх исходного цвета текста. Однако существует альтернативный режим Phaser.TintModes.FILL. Он заменяет исходный цвет текста (обычно белый) на указанные оттенки, что дает более яркий и чистый результат. Режим устанавливается методом setTintMode.

В примере ниже для двух углов задан пурпурный цвет (0xff00ff), а для двух других — синий (0x0000ff), что создает вертикальный градиент, полностью замещающий белый цвет шрифта.

const text3 = this.add.text(100, 400, 'Phaser Text with Tint Fill', { font: '64px Arial' });
text3.setTint(0xff00ff, 0xff00ff, 0x0000ff, 0x0000ff).setTintMode(Phaser.TintModes.FILL);

Важно: метод setTintMode должен вызываться после setTint, так как он применяется к уже установленным цветам тонировки.

Конфигурация игры и запуск сцены

Для отображения примера необходима стандартная конфигурация игры Phaser. В данном случае используется рендерер WEBGL, который поддерживает эффекты тонировки. Единственная сцена, Example, передается в массив scene.

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene:  [ Example ]
};

const game = new Phaser.Game(config);

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

Метод setTint — мощный инструмент для стилизации текста в Phaser, позволяющий выйти за рамки однотонной заливки. Для экспериментов попробуйте

  1. Использовать меньше четырех цветов в setTint (например, только два для горизонтального градиента)
  2. Анимировать цвета тонировки с помощью tweens для создания мерцающих или плавно меняющихся надписей
  3. Комбинировать режимы тонировки с прозрачностью (setAlpha) для сложных эффектов наложения