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.
- vberai
- ai-studio
- bitmap-font
- bmfont
- fnt
- angelcode
- sprite-sheet
- glyph
- game-ui
- unity
- godot
- cocos
- tutorial
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:
- 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.
- 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.
- 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 independiente | Generador de fuentes bitmap de VberAI | |
|---|---|---|
| Entrada | Otra app de escritorio o sitio | El mismo lienzo de AI Studio |
| Input | Mostly rasterize from TTF / system fonts | Panel generate, upload glyphs, upload sprite sheet + auto-split |
| Salida | Normalmente una descarga de .fnt + atlas | El atlas llega al lienzo para seguir editando |
| Aspecto | TTF de origen más los efectos de la herramienta | Dígitos estilizados / tipografía pixel según el panel |
| Después | Casi 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:
- Atlas — rasteriza los glifos que necesitas en una (o unas pocas) hojas PNG.
- Archivo de métricas — normalmente AngelCode BMFont
.fnt: UV, ancho/alto, xoffset / yoffset, xadvance por carácter. - 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ámica | SDF / MSDF | |
|---|---|---|---|
| Aspecto | Estilo integrado en la textura; los píxeles pueden fijarse | Vector rasterizado en cada tamaño | Escala relativamente limpio |
| Ideal para | HUD, marcadores, títulos pixel, dígitos estilizados | Textos largos, chat, ajustes | UI de cuerpo que debe escalar |
| Coste | Un nuevo tamaño / charset implica un nuevo atlas | Los contornos y el aspecto pixel son difíciles de controlar | El 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.

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.

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 —
1frente a0, las comas y los puntos decimales lo muestran primero. - Espaciado demasiado ajustado / suelto — edita xadvance en
.fnto 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.
Seguir leyendo
Más guías que te pueden interesar
Cómo generar fotogramas de secuencias de juego y tráileres con IA y luego llevarlos a Unity / Godot / Cocos
VberAI Studio genera fotogramas de secuencias de juego y CG promocional/historia desde texto, imagen o primer-último fotograma; recorta y divide en el lienzo, y entrega a Unity, Godot y Cocos. Incluye tutorial, lista de verificación y por qué no reemplaza a Timeline/Sequencer.
- ai-studio
- game-video
- sequence-frames
- sprite-frames
Cómo Configurar Cocos Creator MCP con Cursor y Claude (Tutorial en Video)
Conecta Cocos Creator MCP a Cursor o Claude: instala el plugin, configura el Model Context Protocol y verifica que la IA controle el editor.
- cocos
- cocos-creator
- mcp
- cursor
Cómo Construimos un Servidor MCP en Tiempo Real para Godot
Arquitectura MCP de Godot en VberAI: cómo un servidor MCP en tiempo real conecta el editor de Godot con clientes de IA sin congelar el árbol de escenas.
- vberai
- godot
- mcp
- architecture