Форматы Bitmap-шрифтов: Angelcode, XML

Bitmap-шрифты представляют собой текстуры, в которых каждый символ отрисован как отдельное изображение. В игровой разработке использование bitmap-шрифтов часто оправдано высокой производительностью и точным контролем над визуальным стилем текста. Phaser, как популярная библиотека для разработки 2D-игр на JavaScript, поддерживает загрузку и отображение bitmap-шрифтов через стандартные форматы Angelcode и XML.

Принципы работы bitmap-шрифтов

Bitmap-шрифты состоят из двух основных компонентов:

  1. Текстура (spritesheet) – изображение, содержащее все символы шрифта.
  2. Метаданные – файл, описывающий положение каждого символа на текстуре, его ширину, высоту, смещение и возможные кернинги.

Примерная структура метаданных включает:

  • char id — уникальный идентификатор символа (код Unicode).
  • x, y — координаты верхнего левого угла символа на текстуре.
  • width, height — размеры символа.
  • xoffset, yoffset — смещение при отрисовке относительно базовой линии.
  • xadvance — расстояние, на которое следует сдвинуть курсор после отрисовки символа.

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

Формат Angelcode

Angelcode — это наиболее популярный формат для bitmap-шрифтов, поддерживаемый инструментом BMFont для Windows.

Структура файла

Файл шрифта в формате Angelcode может быть в текстовом или XML-подобном виде. Текстовый формат .fnt выглядит так:

info face="Arial" size=32 bold=0 italic=0
common lineHeight=40 base=26 scaleW=512 scaleH=512 pages=1
page id=0 file="arial_0.png"
chars count=3
char id=65   x=34   y=45    width=30  height=32  xoffset=0  yoffset=8  xadvance=32
char id=66   x=66   y=45    width=28  height=32  xoffset=1  yoffset=8  xadvance=30
char id=67   x=96   y=45    width=29  height=32  xoffset=1  yoffset=8  xadvance=31

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

  • info — базовые сведения о шрифте, размер, стиль.
  • common — параметры страницы и высоты строки (lineHeight, base).
  • page — имя файла с текстурой символов.
  • char — описание каждого символа, включающее координаты, смещения и advance.

Phaser загружает текстуру через this.load.bitmapFont('fontKey', 'font.png', 'font.fnt'), автоматически разбирая формат Angelcode.

Формат XML

XML-формат является альтернативой текстовому и более структурированным, его удобно использовать для парсинга и генерации. Структура XML выглядит так:

<font>
  <info face="Arial" size="32" bold="0" italic="0"/>
  <common lineHeight="40" base="26" scaleW="512" scaleH="512" pages="1"/>
  <pages>
    <page id="0" file="arial_0.png"/>
  </pages>
  <chars count="3">
    <char id="65" x="34" y="45" width="30" height="32" xoffset="0" yoffset="8" xadvance="32"/>
    <char id="66" x="66" y="45" width="28" height="32" xoffset="1" yoffset="8" xadvance="30"/>
    <char id="67" x="96" y="45" width="29" height="32" xoffset="1" yoffset="8" xadvance="31"/>
  </chars>
</font>

Особенности XML-формата:

  • Более строгая структура с тегами <info>, <common>, <pages>, <chars>, <char>.
  • Удобство для автоматической генерации и интеграции в инструменты конвейера разработки.
  • Phaser поддерживает XML через тот же метод загрузки: this.load.bitmapFont('fontKey', 'font.png', 'font.xml').

Работа с bitmap-шрифтами в Phaser

  1. Загрузка шрифта
this.load.bitmapFont('arcade', 'assets/fonts/arcade.png', 'assets/fonts/arcade.fnt');
  1. Создание текста
this.add.bitmapText(100, 100, 'arcade', 'HELLO PHASER', 32);
  • Первый параметр — координата X.
  • Второй параметр — координата Y.
  • Третий — ключ шрифта.
  • Четвёртый — текстовая строка.
  • Пятый — размер шрифта (масштабирование).
  1. Особенности позиционирования
  • x и y задают верхний левый угол текста.
  • Символы позиционируются с учётом xoffset, yoffset.
  • Расстояние между символами определяется xadvance.
  1. Масштабирование и анимации

Bitmap-шрифты можно масштабировать через setScale():

text.setScale(1.5);

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

Сравнение Angelcode и XML

Характеристика Angelcode (текстовый) XML
Структура Плоский текст, ключ-значение Иерархический, теговый
Простота генерации Высокая Средняя
Поддержка инструментов BMFont, Littera BMFont, Glyph Designer
Читаемость Средняя Высокая
Интеграция в Phaser Полностью поддерживается Полностью поддерживается

Вывод: оба формата функционально эквивалентны для Phaser, выбор зависит от удобства генерации и необходимости интеграции в автоматизированные пайплайны.

Практические советы

  • Для шрифтов с большим количеством символов (например, поддержка кириллицы или иероглифов) предпочтительнее использовать XML, так как структурированные файлы проще проверять и модифицировать.
  • Для мобильных проектов важен размер текстуры и количество страниц, поскольку от этого зависит производительность и объем памяти.
  • Использовать lineHeight и base для корректного вертикального выравнивания текста в интерфейсе.
  • Экспериментировать с xoffset и yoffset для точной подгонки визуального расположения символов.

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

Оглавление