Создание BitmapFont вручную и через инструменты

BitmapFont в PixiJS представляет собой способ отображения текста с использованием заранее подготовленных растровых изображений шрифтов. Такой подход обеспечивает высокую производительность, особенно при необходимости отображения большого объёма текста с эффектами или в играх с интенсивной графикой. BitmapFont состоит из двух основных компонентов: текстуры, содержащей глифы, и метаданных (XML или JSON), описывающих положение каждого символа в текстуре.

Ручное создание BitmapFont

Ручное создание BitmapFont подразумевает самостоятельное формирование текстур и метаданных. Этот подход даёт полный контроль над шрифтом, но требует внимательности и точности.

1. Подготовка текстуры

  1. Создать изображение, содержащее все символы шрифта. Обычно используют формат PNG с прозрачным фоном.
  2. Расположить символы в виде сетки или произвольным образом, обеспечив уникальные координаты для каждого глифа.
  3. Определить размеры каждого символа (ширину, высоту) и их смещение относительно базовой линии.

2. Создание метаданных

Метаданные описывают положение каждого символа в текстуре. Они могут быть в формате XML или JSON:

Пример JSON-структуры:

{
  "info": {"face": "MyFont", "size": 32},
  "common": {"lineHeight": 36},
  "chars": [
    {"id": 65, "x": 0, "y": 0, "width": 32, "height": 32, "xoffset": 0, "yoffset": 0, "xadvance": 32},
    {"id": 66, "x": 32, "y": 0, "width": 32, "height": 32, "xoffset": 0, "yoffset": 0, "xadvance": 32}
  ]
}
  • id — код символа (ASCII или Unicode).
  • x, y — координаты верхнего левого угла глифа в текстуре.
  • width, height — размеры глифа.
  • xoffset, yoffset — смещение глифа относительно позиции курсора.
  • xadvance — горизонтальное смещение курсора после отображения символа.

3. Регистрация шрифта в PixiJS

После создания текстуры и метаданных шрифт регистрируется через PIXI.BitmapFont.install:

PIXI.BitmapFont.install({
    font: "MyFont",
    size: 32,
    chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    texture: PIXI.BaseTexture.from("myfont.png"),
    lineHeight: 36
});

Можно также использовать PIXI.BitmapText для отображения текста:

const bitmapText = new PIXI.BitmapText("HELLO PIXI", { fontName: "MyFont" });
app.stage.addChild(bitmapText);

Создание BitmapFont через инструменты

Для упрощения процесса создания BitmapFont существуют специализированные инструменты, автоматизирующие генерацию текстур и метаданных.

1. Littera

  • Онлайн-редактор для создания BitmapFont.
  • Позволяет импортировать системные или кастомные шрифты.
  • Генерирует PNG и JSON/XML, готовые для использования в PixiJS.
  • Можно настроить стиль: жирность, наклон, интервал между символами.

2. BMFont (AngelCode)

  • Классическое десктоп-приложение для Windows, поддерживающее генерацию XML и текстур.
  • Позволяет создавать шрифты с тенью, контуром и различными эффектами.
  • Формат метаданных совместим с PixiJS через парсеры.

3. Glyph Designer (macOS)

  • Профессиональный инструмент для дизайнеров шрифтов.
  • Поддерживает экспорт в PNG и XML для PixiJS.
  • Включает инструменты оптимизации текстур и уменьшения их размера без потери качества.

Интеграция с PixiJS

После получения текстуры и метаданных, созданных инструментами, подключение в PixiJS выглядит следующим образом:

PIXI.Assets.load(['myfont.png', 'myfont.fnt']).then(() => {
    const bitmapText = new PIXI.BitmapText("TEXT USING BITMAP FONT", { fontName: "MyFont", fontSize: 32 });
    app.stage.addChild(bitmapText);
});
  • PIXI.Assets.load обеспечивает асинхронную загрузку ресурсов.
  • Важно соблюдать соответствие имени шрифта в файле .fnt и параметра fontName в BitmapText.

Особенности и рекомендации

  • Оптимизация текстур: минимизация прозрачного пространства снижает использование видеопамяти.
  • LineHeight и kerning: корректная настройка этих параметров улучшает читаемость и визуальное выравнивание текста.
  • Динамические шрифты: для часто изменяющихся текстов комбинируют BitmapFont с обычными векторными шрифтами, используя BitmapText для статических элементов, а обычные Text для динамичных.
  • Совместимость: PixiJS поддерживает форматы .fnt (XML) и .json для метаданных. Важно правильно указывать кодировку символов.

Автоматизация с использованием PixiJS

Можно создать BitmapFont программно из системного шрифта без ручной подготовки текстуры:

const fontStyle = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 32,
    fill: "#ffffff"
});

const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
PIXI.BitmapFont.from("ArialBitmap", fontStyle, { chars });
  • Этот метод генерирует текстуру и метаданные на лету.
  • Удобно для прототипирования и проектов без необходимости сложных эффектов.

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

Оглавление