← Volver al blog

VberAI Bitmap Font: subir glifos / sprite sheet auto-split → BMFont

VberAI Studio: subir imágenes de glifos o sprite sheets con auto-split, exportar AngelCode BMFont (.fnt + PNG), editar en canvas, Unity / Godot / Cocos.

Publicado
  • vberai
  • ai-studio
  • bitmap-font
  • bmfont
  • fnt
  • angelcode
  • sprite-sheet
  • glyph
  • game-ui
  • unity
  • godot
  • cocos
  • tutorial
VberAI Bitmap Font: subir glifos / sprite sheet auto-split → BMFont

VberAI Studio (abreviado: AI Studio, ≠ Google AI Studio) incluye un generador de fuentes bitmap: crea un atlas de fuente para juegos con métricas para los caracteres que tu proyecto realmente usa. Los resultados permanecen en el mismo lienzo de juego para pixelado, recorte o exportación. El formato de intercambio entre motores es AngelCode BMFont .fnt + PNG (las opciones de exportación siguen el panel).

Empieza aquí: AI Studio. Glosario: fuente bitmap.

Por qué los juegos siguen necesitando fuentes bitmap

Las fuentes dinámicas TTF / OTF son adecuadas para textos largos y tamaños arbitrarios. El HUD, los marcadores, los contadores de monedas, los títulos pixel y los dígitos con contorno suelen necesitar otra cosa: un tamaño fijo, un estilo integrado en la textura, sin desenfoque al escalar y una carga predecible en el motor.

Tres desvíos comunes:

  1. Forzar una fuente dinámica — los contornos se rompen al ampliar; la tipografía pixel se vuelve borrosa al reducir; el filtrado bilineal suaviza los bordes de las celdas.
  2. PNG dibujados a mano por glifo sin métricas — el motor no conoce el ancho, la altura, la línea base ni el avance, así que estás componiendo sprites sueltos.
  3. BMFont de escritorio o en línea, y luego descargar — te vas con un atlas y un .fnt, y después abres otras herramientas para limpiar bordes, pixelar e importar a Unity / Godot / Cocos.

AI Studio mantiene la generación en un banco de trabajo de juego editable: la fuente es un recurso, no un zip que termina el trabajo.

Herramienta BMFont independienteGenerador de fuentes bitmap de VberAI
EntradaOtra app de escritorio o sitioEl mismo lienzo de AI Studio
InputMostly rasterize from TTF / system fontsPanel generate, upload glyphs, upload sprite sheet + auto-split
SalidaNormalmente una descarga de .fnt + atlasEl atlas llega al lienzo para seguir editando
AspectoTTF de origen más los efectos de la herramientaDígitos estilizados / tipografía pixel según el panel
DespuésCasi siempre “importar al motor”Terminar en el lienzo y luego enviar al motor

Qué es una fuente bitmap / BMFont

Una definición lista para producción:

  1. Atlas — rasteriza los glifos que necesitas en una (o unas pocas) hojas PNG.
  2. Archivo de métricas — normalmente AngelCode BMFont .fnt: UV, ancho/alto, xoffset / yoffset, xadvance por carácter.
  3. Runtime — el motor muestrea el atlas para ensamblar un Label, en lugar de teselar contornos vectoriales sobre la marcha.

Cubre texto de juego de tamaño fijo y estilo fijo. No es una fuente de cuerpo SDF de TextMesh Pro, y no es una fuente dinámica CJK completa.

Fuente bitmap (BMFont)TTF dinámicaSDF / MSDF
AspectoEstilo integrado en la textura; los píxeles pueden fijarseVector rasterizado en cada tamañoEscala relativamente limpio
Ideal paraHUD, marcadores, títulos pixel, dígitos estilizadosTextos largos, chat, ajustesUI de cuerpo que debe escalar
CosteUn nuevo tamaño / charset implica un nuevo atlasLos contornos y el aspecto pixel son difíciles de controlarEl ajuste a la rejilla de píxeles es más débil que un bitmap real

Cuándo usarla — y cuándo no

Úsala para: números de vida, puntuaciones de nivel, contadores de monedas / gemas, enfriamientos de habilidades, títulos pixel, tiras de números con contorno o metálicos. Charset pequeño, tamaño fijo.

Evítala para: diálogos, correo, chat, textos de ajustes; UI de cuerpo que debe escalar libremente; un vocabulario completo de han / kana / hangul. Un conjunto CJK completo dispara el tamaño del atlas — para eso, mantén fuentes dinámicas o SDF.

Cómo generarla en AI Studio

Las etiquetas de los botones siguen el panel actual. El recorrido tiene cuatro pasos.

1. Abre el generador de fuentes bitmap

En el lienzo de AI Studio, abre el generador de fuentes bitmap.

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. Genera y previsualiza el atlas

Revisa las líneas base, si los contornos invaden a los vecinos, el brillo sucio en bordes semitransparentes y el espacio vacío desperdiciado. Para un aspecto pixel, encadena pixelado de imagen en el mismo lienzo; para un alfa limpio, encadena recorte.

4. Exporta y luego al motor

Las opciones de exportación siguen el panel. Para Unity / Godot / Cocos Creator, confirma que tienes:

  • Una (o un conjunto de) hojas de atlas PNG
  • Un archivo .fnt (AngelCode BMFont en texto o binario; la documentación del motor se basa en .fnt)

Los nombres de archivo, los índices de página y las referencias de textura dentro de .fnt deben coincidir — de lo contrario, el motor puede aceptar la fuente y aun así mostrar glifos magenta o vacíos.

Importar a Unity / Godot / Cocos

Estas son listas de verificación de aceptación, no recorridos completos del editor. Tras importar, renderiza 0123456789SCORE e inspecciona la alineación, el espaciado y los bordes alfa.

Puntuación BMFont en el motor

Unity

  • Pon el Filter Mode del atlas en Point para fijar los bordes de píxel; el filtrado bilineal los difumina.
  • UGUI heredado: Custom Font + un material que use el atlas, y luego asígnalo a Text.
  • TextMesh Pro: crea un recurso de fuente bitmap en Font Asset Creator, o importa el par BMFont (según tu versión de TMP).
  • Retrabajo habitual: ranura de material vacía, o nombre de textura en .fnt ≠ nombre de textura importada.

Godot 4

Godot admite BMFont (.fnt). Mantén .fnt y el PNG en la misma carpeta, importa y asigna a la ranura de fuente de un Label (o RichTextLabel). Un PNG por sí solo no tiene rectángulos de glifos.

Cocos Creator

Una fuente bitmap de Cocos es .fnt + .png: el .fnt indexa cada miniatura de carácter. Coloca ambos en la carpeta de recursos y pon el tipo de fuente del Label en fuente bitmap (los nombres de menú siguen el panel 3.x). No lo confundas con LabelAtlas (tiras de números de celdas fijas) — LabelAtlas no lleva las métricas completas de BMFont.

Lista de verificación de retrabajo

  • Glifos ausentes — amplía el charset y vuelve a generar; no mezcles un segundo TTF dentro del motor.
  • Línea base desigual — 1 frente a 0, las comas y los puntos decimales lo muestran primero.
  • Espaciado demasiado ajustado / suelto — edita xadvance en .fnt o reajusta el espaciado en el generador.
  • Contornos sucios — el brillo se solapa con los vecinos; deja 1–2 px de relleno en el atlas.
  • Desenfoque al escalar — no trates un bitmap como un vector; usa SDF / MSDF o una fuente dinámica si necesitas escalar.
  • Atlas demasiado grande — recorta el charset, o separa un conjunto de “dígitos” de uno de “títulos”.

Límites

  • El primer atlas rara vez es un final listo para producción; los glifos de marca registrada, las configuraciones regionales ausentes y las resoluciones extra aún necesitan una revisión humana.
  • La compresión, el empaquetado, los materiales de fuente y el filter mode se resuelven en el proyecto del motor.
  • El texto del panel, las entradas (fuente de origen / referencia de estilo) y el formato de exportación siguen el AI Studio actual.
  • VberAI Studio ≠ Google AI Studio; consulta la comparación.

Cierre

No necesitas “una BMFont en línea más”. Necesitas dígitos estilizados y tipografía pixel que se entreguen como recursos de juego con métricas. Genera → previsualiza el atlas → limpia bordes o pixela en el lienzo → .fnt + PNG a Unity / Godot / Cocos — todo en AI Studio.

Preguntas frecuentes

¿Qué es una fuente bitmap / BMFont?
Una fuente bitmap pinta los glifos en un atlas PNG y usa un archivo de métricas para que el motor sepa cómo cortar cada carácter. AngelCode BMFont (.fnt + PNG) es el par de intercambio que Unity, Godot y Cocos entienden.

¿Puede VberAI generar fuentes bitmap para juegos?
Sí. Usa el generador en el canvas de AI Studio — charset, glifos o sprite sheet — y sigue editando o exportando en el mismo canvas (según el panel).

¿Puedo subir glifos o una sprite sheet?
Sí. Subir imágenes de glifos (PNG por carácter, etc.) a la fuente. O sprite sheet + auto-split (tiras de dígitos, rejillas) para emitir .fnt BMFont + atlas (según el panel).

¿Bitmap frente a TTF dinámica frente a SDF?
HUD de tamaño fijo, títulos pixel y dígitos estilizados → bitmap. Textos largos y UI que debe escalar → TTF dinámica o SDF / MSDF.

¿Qué importa al importar en Unity?
El filtrado Point en el atlas; tanto Custom Font como el bitmap de TMP pueden consumir un par BMFont, pero los nombres de textura deben coincidir con .fnt y la ranura de material no puede estar vacía.

¿Puedo hornear un atlas chino completo?
No de forma práctica. Un conjunto CJK completo dispara el atlas. Deja las fuentes bitmap para dígitos, letras latinas y unos pocos glifos de título; mantén el texto de cuerpo en una fuente dinámica.

Más guías que te pueden interesar