Градиентная заливка текста

В библиотеке PixiJS текстовые объекты создаются с помощью класса PIXI.Text, который позволяет задавать различные стили текста через объект PIXI.TextStyle. Для реализации градиентной заливки текста используется свойство fill, которое поддерживает не только единичные цвета, но и массивы цветов или даже текстурные градиенты.

Использование массивов цветов

Простейший способ задать градиент — указать массив из двух и более цветов в формате HEX, RGB или CSS-строк:

const style = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 60,
    fontWeight: "bold",
    fill: ["#ff0000", "#0000ff"], // градиент от красного к синему
    fillGradientType: PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL, // тип градиента
});

const gradientText = new PIXI.Text("Градиентный текст", style);
gradientText.x = 50;
gradientText.y = 100;
app.stage.addChild(gradientText);

Ключевые моменты:

  • fill принимает массив цветов, создавая плавный переход между ними.

  • fillGradientType определяет направление градиента:

    • PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL — горизонтальный градиент.
    • PIXI.TEXT_GRADIENT.LINEAR_VERTICAL — вертикальный градиент.

  • Можно комбинировать более двух цветов, чтобы получить сложный градиент.

Настройка градиента через координаты

PixiJS версии 7+ позволяет задавать кастомный градиент с точными координатами через объект fillGradientStops. Это позволяет управлять не только цветами, но и позицией перехода:

const style = new PIXI.TextStyle({
    fontFamily: "Verdana",
    fontSize: 72,
    fontWeight: "bold",
    fill: ["#ffcc00", "#ff00cc", "#00ccff"],
    fillGradientType: PIXI.TEXT_GRADIENT.LINEAR_VERTICAL,
    fillGradientStops: [0, 0.5, 1] // позиции цветов от 0 до 1
});

const customGradientText = new PIXI.Text("Многоцветный текст", style);
customGradientText.x = 50;
customGradientText.y = 200;
app.stage.addChild(customGradientText);

Особенности fillGradientStops:

  • Значения от 0 до 1 определяют, где на тексте начинается и заканчивается каждый цвет.
  • Позволяет создавать неравномерные переходы, например резкие цветовые акценты.

Градиент с использованием текстуры

Для более сложных эффектов можно использовать текстуры в качестве заливки текста. Это дает возможность применить градиенты с изображениями или паттернами:

const texture = PIXI.Texture.from('gradient.png');

const style = new PIXI.TextStyle({
    fontFamily: "Times New Roman",
    fontSize: 80,
    fill: texture
});

const texturedText = new PIXI.Text("Текст с текстурой", style);
texturedText.x = 50;
texturedText.y = 350;
app.stage.addChild(texturedText);

Примечания:

  • Текстура автоматически масштабируется под размеры текста.
  • Можно комбинировать с fillGradientType и массивами цветов для создания сложных многослойных эффектов.

Анимация градиента

Градиент можно анимировать, изменяя параметры заливки в реальном времени через цикл app.ticker:

let hue = 0;

app.ticker.add(() => {
    hue += 1;
    gradientText.style.fill = [
        `hsl(${hue % 360}, 100%, 50%)`,
        `hsl(${(hue + 120) % 360}, 100%, 50%)`
    ];
});

Особенности анимации:

  • Можно использовать HSL для плавного изменения цвета.
  • Позволяет создавать эффекты радужного текста и динамических градиентов.

Рекомендации по производительности

  • Использование текстурной заливки тяжелее для рендеринга, чем обычный массив цветов.
  • Для часто обновляемого текста лучше использовать малое количество цветов в градиенте.
  • Анимация больших текстовых объектов с градиентом может потребовать оптимизации через ререндер текста только при изменении, а не каждый кадр.

Итоговые возможности

PixiJS предоставляет гибкие средства для работы с градиентами текста:

  • Массив цветов с линейными переходами.
  • Настройка позиций градиента через fillGradientStops.
  • Использование текстур для сложных эффектов.
  • Анимация градиентов для динамических визуальных решений.

Эти инструменты позволяют создавать как простые плавные переходы, так и сложные многослойные визуальные эффекты для интерфейсов и игр.

Оглавление