Загрузка BitmapFont из внешнего файла

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

Для работы с внешними файлами шрифтов требуется два ключевых ресурса:

  1. Файл шрифта в формате .fnt или .xml — содержит метаданные о каждом символе, позиции и отступах.
  2. Текстура шрифта в формате изображения (.png) — содержит визуальное представление всех символов.

Подключение PixiJS и подготовка приложения

Для начала создается экземпляр приложения PixiJS с канвой и сценой:

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

Загрузка BitmapFont

PixiJS использует Loader для асинхронной загрузки ресурсов. Для шрифтов это делается аналогично загрузке изображений:

app.loader
    .add('desyrelFont', 'fonts/desyrel.fnt')
    .load(onAssetsLoaded);
  • 'desyrelFont' — уникальный ключ для шрифта.
  • 'fonts/desyrel.fnt' — путь к XML или FNT файлу, который содержит описание символов.
  • onAssetsLoaded — функция обратного вызова после завершения загрузки всех ресурсов.

Создание текста с помощью BitmapText

После загрузки шрифта можно создавать текстовые объекты с классом PIXI.BitmapText:

function onAssetsLoaded() {
    const bitmapText = new PIXI.BitmapText('Привет, PixiJS!', {
        fontName: 'Desyrel',
        fontSize: 36,
        tint: 0xffffff
    });

    bitmapText.position.set(100, 100);
    app.stage.addChild(bitmapText);
}

Пояснение параметров:

  • fontName — должен совпадать с именем шрифта внутри FNT/XML файла.
  • fontSize — размер шрифта, который будет масштабировать базовую текстуру.
  • tint — цвет текста. Можно использовать шестнадцатеричный код.

Работа с несколькими шрифтами

Loader позволяет одновременно загружать несколько шрифтов:

app.loader
    .add('desyrelFont', 'fonts/desyrel.fnt')
    .add('arcadeFont', 'fonts/arcade.fnt')
    .load(() => {
        const text1 = new PIXI.BitmapText('Первый шрифт', { fontName: 'Desyrel', fontSize: 28 });
        const text2 = new PIXI.BitmapText('Второй шрифт', { fontName: 'Arcade', fontSize: 32 });
        
        text1.position.set(50, 50);
        text2.position.set(50, 120);
        
        app.stage.addChild(text1, text2);
    });

Изменение масштаба и позиционирование

BitmapText является объектом DisplayObject, поэтому его можно трансформировать:

bitmapText.scale.set(1.5);  // Увеличение на 150%
bitmapText.rotation = Math.PI / 8;  // Поворот текста
bitmapText.anchor.set(0.5); // Центрирование объекта

Использование anchor позволяет управлять точкой привязки текста, что удобно при анимации и центрировании на экране.

Анимация текста

PixiJS позволяет легко анимировать BitmapText через изменение свойств:

app.ticker.add((delta) => {
    bitmapText.x += 2 * delta;  // Движение по оси X
    bitmapText.rotation += 0.01 * delta;  // Медленный поворот
});

delta отражает масштаб времени, что обеспечивает одинаковую скорость анимации на различных устройствах.

Управление памятью

После удаления BitmapText с stage важно учитывать удаление текстуры, если она больше не нужна:

app.stage.removeChild(bitmapText);
bitmapText.destroy({ texture: true, baseTexture: true });

Аргументы texture и baseTexture освобождают память, предотвращая утечки ресурсов.

Динамическое обновление текста

BitmapText поддерживает обновление текста в реальном времени:

bitmapText.text = 'Новый текст';
bitmapText.updateTransform(); // Обновление трансформации при необходимости

Это эффективно для игровых счетчиков, HUD и таймеров, где текст постоянно меняется.

Преимущества использования BitmapFont

  • Высокая производительность — все символы рендерятся как спрайты, что снижает нагрузку на Canvas/WebGL.
  • Стабильный стиль — текст всегда выглядит одинаково на всех устройствах.
  • Поддержка сложных эффектов — легко применять тени, цветовые фильтры и анимацию.

Использование внешних файлов FNT/XML вместе с текстурами PNG позволяет создавать кастомные шрифты без ограничений стандартных web-шрифтов, обеспечивая полный контроль над визуальным стилем текста в PixiJS.

Оглавление