← К блогу

VberAI Bitmap Font: загрузка глифов / auto-split sprite sheet → BMFont

VberAI Studio: загрузка изображений глифов или sprite sheet с авто-разрезкой, экспорт AngelCode BMFont (.fnt + PNG), правка на canvas, Unity / Godot / Cocos.

Опубликовано
  • vberai
  • ai-studio
  • bitmap-font
  • bmfont
  • fnt
  • angelcode
  • sprite-sheet
  • glyph
  • game-ui
  • unity
  • godot
  • cocos
  • tutorial
VberAI Bitmap Font: загрузка глифов / auto-split sprite sheet → BMFont

VberAI Studio (сокращённо: AI Studio, ≠ Google AI Studio) включает генератор растровых шрифтов: создайте игровой атлас шрифта с метриками для символов, которые реально использует ваш проект. Результат остаётся на том же игровом холсте для пикселизации, матирования или экспорта. Формат обмена между движками — AngelCode BMFont .fnt + PNG (параметры экспорта зависят от панели).

Начните здесь: AI Studio. Глоссарий: растровый шрифт.

Почему играм всё ещё нужны растровые шрифты

Динамический TTF / OTF подходит для длинных текстов и произвольных размеров. HUD, счёт, счётчики монет, пиксельные заголовки и цифры с обводкой обычно требуют другого: зафиксированного размера, стиля, запечённого в текстуру, отсутствия размытия при масштабировании и предсказуемой загрузки в движке.

Три распространённых обходных пути:

  1. Принудительно использовать динамический шрифт — обводки рассыпаются при увеличении; пиксельный шрифт мутнеет при уменьшении; билинейная фильтрация размывает края ячеек.
  2. Нарисованные вручную PNG для каждого глифа без метрик — движок не знает ширину, высоту, базовую линию или продвижение, поэтому вы компонуете разрозненные спрайты.
  3. Настольный или онлайн-инструмент BMFont с последующей загрузкой — вы получаете атлас и .fnt, а затем открываете другие инструменты, чтобы очистить края, пикселизировать и импортировать в Unity / Godot / Cocos.

AI Studio сохраняет генерацию на редактируемом игровом верстаке: шрифт — это ассет, а не zip-архив, завершающий работу.

Отдельный инструмент BMFontГенератор растровых шрифтов VberAI
ВходДругое настольное приложение или сайтТот же холст AI Studio
InputMostly rasterize from TTF / system fontsPanel generate, upload glyphs, upload sprite sheet + auto-split
ВыводОбычно загрузка .fnt + атласаАтлас попадает на холст для дальнейшего редактирования
Внешний видИсходный TTF плюс эффекты инструментаСтилизованные цифры / пиксельный шрифт по панели
ПослеВ основном «импорт в движок»Завершение на холсте, затем отправка в движок

Что такое растровый шрифт / BMFont

Готовое к поставке определение:

  1. Атлас — растеризация нужных глифов в один (или несколько) PNG-листов.
  2. Файл метрик — обычно AngelCode BMFont .fnt: UV, ширина/высота, xoffset / yoffset, xadvance для каждого символа.
  3. Среда выполнения — движок сэмплирует атлас для сборки Label вместо тесселяции векторных контуров на лету.

Он покрывает игровой текст фиксированного размера и стиля. Это не основной шрифт TextMesh Pro SDF, и это не полноценный динамический шрифт CJK.

Растровый шрифт (BMFont)Динамический TTFSDF / MSDF
Внешний видСтиль запечён в текстуру; пиксели можно зафиксироватьВектор растеризуется для каждого размераМасштабируется относительно чисто
Лучше всего дляHUD, счёт, пиксельные заголовки, стилизованные цифрыДлинные тексты, чат, настройкиUI-текст, который должен масштабироваться
СтоимостьНовый размер / набор символов означает новый атласКонтуры и пиксельный вид трудно контролироватьФиксация пиксельной сетки слабее, чем у настоящего растра

Когда использовать — и когда нет

Используйте для: чисел здоровья, счёта уровня, счётчиков монет / самоцветов, перезарядки навыков, пиксельных заголовков, полос цифр с обводкой или металлическим эффектом. Небольшой набор символов, фиксированный размер.

Пропустите для: диалогов, почты, чата, текста настроек; UI-текста, который должен свободно масштабироваться; полного набора иероглифов / каны / хангыля. Полный набор CJK раздувает размер атласа — для этого оставьте динамические шрифты или SDF.

Как сгенерировать его в AI Studio

Названия кнопок соответствуют текущей панели. Путь состоит из четырёх шагов.

1. Откройте генератор растровых шрифтов

На холсте AI Studio откройте генератор растровых шрифтов.

Bitmap font generator panel

2. Pick an input path, then lock charset and size

Choose panel generate, upload glyph images, or upload a sprite sheet and auto-split (per the panel). Either way, list the characters that will actually appear in-game.

HUD sets often need only 0123456789, +$%/.,, and a few Latin letters. Missing glyphs become blanks or tofu at runtime; extra glyphs bloat the atlas.

Set size to the final HUD pixel size — do not design large and scale down. Scaling a bitmap font scales the texture. After a sprite-sheet split, check cell padding and advance so digits do not collide.

3. Сгенерируйте и просмотрите атлас

Проверьте базовые линии, не съедают ли обводки соседей, грязное свечение на полупрозрачных краях и потраченное впустую пустое пространство. Для пиксельного вида подключите пикселизацию изображения на том же холсте; для чистого альфа-канала подключите матирование.

4. Экспортируйте, затем в движок

Параметры экспорта зависят от панели. Для Unity / Godot / Cocos Creator убедитесь, что у вас есть:

  • Один (или набор) PNG-атлас листов
  • Файл .fnt (AngelCode BMFont текстовый или бинарный; документация движков опирается на .fnt)

Имена файлов, индексы страниц и ссылки на текстуры внутри .fnt должны совпадать — иначе движок может принять шрифт и всё равно показать пурпурные или пустые глифы.

Импорт в Unity / Godot / Cocos

Это чек-листы приёмки, а не полные туры по редакторам. После импорта отобразите 0123456789SCORE и проверьте выравнивание, трекинг и альфа-края.

BMFont score display in engine

Unity

  • Установите Filter Mode атласа в Point, чтобы зафиксировать пиксельные края; билинейная фильтрация их размывает.
  • Legacy UGUI: Custom Font + материал, использующий атлас, затем назначьте его Text.
  • TextMesh Pro: создайте растровый ассет шрифта в Font Asset Creator или импортируйте пару BMFont (следуйте вашей версии TMP).
  • Обычная доработка: пустой слот материала или имя текстуры в .fnt ≠ имя импортированной текстуры.

Godot 4

Godot поддерживает BMFont (.fnt). Держите .fnt и PNG в одной папке, импортируйте и назначьте в слот шрифта Label (или RichTextLabel). Один PNG не содержит прямоугольников глифов.

Cocos Creator

Растровый шрифт Cocos — это .fnt + .png: .fnt индексирует миниатюру каждого символа. Поместите оба в папку ассетов и установите тип шрифта Label в bitmap font (названия меню соответствуют панели 3.x). Не путайте это с LabelAtlas (полосы цифр с фиксированными ячейками) — LabelAtlas не несёт полных метрик BMFont.

Чек-лист доработки

  • Отсутствующие глифы — расширьте набор символов и перегенерируйте; не подмешивайте второй TTF внутри движка.
  • Неровная базовая линия — 1 против 0, запятые и десятичные точки показывают это первыми.
  • Трекинг слишком плотный / слишком свободный — отредактируйте xadvance в .fnt или перенастройте интервалы в генераторе.
  • Грязные обводки — свечение перекрывает соседей; оставьте 1–2 px отступа в атласе.
  • Размытие при масштабировании — не обращайтесь с растром как с вектором; используйте SDF / MSDF или динамический шрифт, если нужно масштабировать.
  • Атлас слишком большой — сократите набор символов или разделите набор «цифры» и набор «заголовок».

Границы

  • Первый атлас редко бывает готовым к поставке финалом; глифы товарных знаков, отсутствующие локали и дополнительные разрешения всё ещё требуют проверки человеком.
  • Сжатие, упаковка, материалы шрифта и режим фильтрации попадают в проект движка.
  • Текст панели, входные данные (исходный шрифт / референс стиля) и формат экспорта соответствуют текущему AI Studio.
  • VberAI Studio ≠ Google AI Studio; см. сравнение.

Итог

Вам не нужен «ещё один онлайн-BMFont». Вам нужны стилизованные цифры и пиксельный шрифт, которые поставляются как игровые ассеты с метриками. Сгенерируйте → просмотрите атлас → очистите края или пикселизируйте на холсте → .fnt + PNG в Unity / Godot / Cocos — всё в AI Studio.

FAQ

Что такое растровый шрифт / BMFont?
Растровый шрифт отрисовывает глифы в PNG-атлас и использует файл метрик, чтобы движок знал, как нарезать каждый символ. AngelCode BMFont (.fnt + PNG) — это пара для обмена, которую понимают Unity, Godot и Cocos.

Может ли VberAI генерировать игровые bitmap-шрифты?
Да. Генератор на canvas AI Studio — charset, глифы или sprite sheet — правка и экспорт на том же canvas (по панели).

Можно загрузить глифы или sprite sheet?
Да. Загрузка изображений глифов (PNG на символ и т.д.) в шрифт. Или sprite sheet + auto-split (полосы цифр, сетки) для BMFont .fnt + atlas (по панели).

Растровый против динамического TTF против SDF?
Фиксированный размер HUD, пиксельные заголовки и стилизованные цифры → растровый. Длинные тексты и UI, который должен масштабироваться → динамический TTF или SDF / MSDF.

Что важно при импорте в Unity?
Точечная фильтрация атласа; Custom Font или TMP bitmap могут оба использовать пару BMFont, но имена текстур должны совпадать с .fnt, а слот материала не может быть пустым.

Можно ли запечь полный китайский атлас?
Практически нет. Полный набор CJK раздувает атлас. Оставьте растровые шрифты для цифр, латинских букв и нескольких глифов заголовков; основной текст держите на динамическом шрифте.

Другие статьи, которые могут вам понравиться

Всплывающие числа урона: приёмка передачи и реализация в движке

Критерии провала: размытые попапы, пропущенные глифы, неверная сортировка, фризы; выбор TMP или битмап-цифр, пулы и порядок Canvas, приёмка в Unity UGUI и подключение арта цифр.

  • game-ui-design
  • game-dev-ai
  • ui-to-engine
  • bitmap-font
Читать