Класс BitmapText: принцип работы

Класс BitmapText в PixiJS предназначен для рендеринга текста с использованием заранее подготовленных битмап-шрифтов. В отличие от стандартного текстового объекта Text, BitmapText не рендерит символы через Canvas или WebGL динамически, а использует готовые изображения каждого символа, что значительно повышает производительность при большом объёме текста и анимациях.

Ключевая особенность — использование текстур из атласа. Каждому символу соответствует отдельный фрейм в JSON- или XML-описании шрифта (формат BMFont). Это позволяет минимизировать количество операций отрисовки и обеспечивать точное позиционирование каждого символа на экране.

Создание BitmapText

Для создания объекта используется конструктор:

const bitmapText = new PIXI.BitmapText("Привет, мир!", {
    fontName: "Desyrel",
    fontSize: 36,
    tint: 0xffffff,
    align: "center",
    letterSpacing: 2,
    maxWidth: 400
});
  • fontName — имя шрифта, зарегистрированного через PIXI.BitmapFont.from.
  • fontSize — размер шрифта, автоматически масштабирует текстуры.
  • tint — цвет текста, применяется к тексту через мультипликативный фильтр.
  • align — выравнивание текста: "left", "center", "right".
  • letterSpacing — дополнительный интервал между символами.
  • maxWidth — максимальная ширина строки, при превышении текст автоматически переносится.

Регистрация шрифта

Перед использованием шрифта необходимо зарегистрировать его в PixiJS:

PIXI.BitmapFont.from("Desyrel", {
    fill: "#ffffff",
    fontSize: 36,
    padding: 10
});
  • fill — цвет заливки символов.
  • padding — отступ вокруг каждого символа в текстуре, чтобы избежать артефактов при масштабировании.
  • Шрифт можно генерировать динамически из любого шрифта веба или загружать готовый .fnt и атлас .png.

Особенности рендеринга

BitmapText строится как набор спрайтов, каждый символ — отдельный объект PIXI.Sprite, объединённый в контейнер. Это даёт несколько преимуществ:

  1. Высокая производительность при большом количестве текста, особенно на WebGL.
  2. Точное управление позиционированием каждого символа.
  3. Возможность анимации отдельных символов (вращение, масштаб, перемещение) без пересоздания текстового объекта.

Недостаток — текст не редактируется динамически так же легко, как стандартный Text. Для изменения текста нужно присвоить новое значение свойству text или пересоздать объект:

bitmapText.text = "Новый текст";
bitmapText.updateTransform();

Свойства и методы

Основные свойства:

  • text — содержимое текста.
  • fontName — имя шрифта.
  • fontSize — размер шрифта.
  • align — выравнивание.
  • letterSpacing — интервал между символами.
  • maxWidth — ограничение ширины строки.

Методы:

  • updateTransform() — пересчитывает позиции символов после изменения текста или свойств.
  • destroy({ children, texture, baseTexture }) — корректная очистка ресурсов.

Дополнительные возможности:

  • Использование tint для динамического изменения цвета текста.
  • Применение фильтров PixiJS ко всему контейнеру или к отдельным символам.
  • Поддержка многострочного текста с автоматическим переносом.

Работа с многострочным текстом

Если maxWidth задан, строки автоматически переносятся. Выравнивание регулируется свойством align. Пример:

const longText = new PIXI.BitmapText(
    "Это длинный текст, который переносится автоматически при достижении максимальной ширины строки.",
    { fontName: "Desyrel", fontSize: 24, maxWidth: 300, align: "left" }
);

Каждая строка создаётся отдельно и располагается с учётом межстрочного интервала (lineHeight), который по умолчанию равен размеру шрифта.

Анимация символов

Поскольку каждый символ — спрайт, возможны тонкие анимации, недоступные обычному тексту:

app.ticker.add(() => {
    for (let i = 0; i < bitmapText.children.length; i++) {
        bitmapText.children[i].rotation += 0.01;
    }
});

Можно изменять прозрачность, цвет, масштаб или смещение каждого символа независимо. Это делает BitmapText идеальным для игровых интерфейсов, HUD и эффектного отображения титров.

Оптимизация и советы

  • Использовать BitmapText при динамически обновляющемся тексте с большим количеством символов — это быстрее, чем CanvasText.
  • Для статичного текста и интерфейса с минимальными анимациями можно применять обычный Text, чтобы уменьшить размер загружаемых текстур.
  • Следить за размером атласа: слишком большой атлас может замедлять загрузку и потреблять лишнюю память.
  • При необходимости мультиязычных шрифтов создавать отдельные атласы для символов разных алфавитов.

Класс BitmapText сочетает высокую производительность, гибкость анимации символов и точное позиционирование, что делает его незаменимым инструментом для сложных интерфейсов и визуально насыщенных приложений на PixiJS.

Оглавление