VberAI Bitmap Font: upload glifi / sprite sheet auto-split → BMFont
VberAI Studio: caricare glifi o sprite sheet con auto-split, esportare AngelCode BMFont (.fnt + PNG), modificare su canvas, Unity / Godot / Cocos.
- vberai
- ai-studio
- bitmap-font
- bmfont
- fnt
- angelcode
- sprite-sheet
- glyph
- game-ui
- unity
- godot
- cocos
- tutorial
VberAI Studio (abbreviazione: AI Studio, ≠ Google AI Studio) include un generatore di bitmap font: crea un atlante di font per il gioco con le metriche per i caratteri che il tuo progetto usa davvero. I risultati restano sulla stessa canvas di gioco per pixelazione, matting o esportazione. Il formato di interscambio tra i motori è AngelCode BMFont .fnt + PNG (le opzioni di esportazione seguono il pannello).
Inizia qui: AI Studio. Glossario: bitmap font.
Perché i giochi hanno ancora bisogno dei bitmap font
Un TTF / OTF dinamico è giusto per testi lunghi e dimensioni arbitrarie. HUD, punteggi, contatori di monete, titoli pixel e cifre con contorno di solito richiedono qualcos’altro: una dimensione bloccata, uno stile cotto nella texture, nessuna sfocatura in scala e un caricamento prevedibile nel motore.
Tre deviazioni comuni:
- Forzare un font dinamico — i contorni si frantumano quando ingranditi; il pixel type diventa fangoso quando ridotto; il filtro bilineare ammorbidisce i bordi delle celle.
- PNG per glifo disegnati a mano senza metriche — il motore non conosce larghezza, altezza, baseline o avanzamento, quindi stai componendo sprite sciolti.
- BMFont desktop o online, poi download — esci con un atlante e un
.fnt, poi apri altri strumenti per pulire i bordi, pixelare e importare in Unity / Godot / Cocos.
AI Studio mantiene la generazione su un banco di lavoro di gioco modificabile: il font è un asset, non uno zip che termina il lavoro.
| Strumento BMFont autonomo | Generatore di bitmap font VberAI | |
|---|---|---|
| Ingresso | Un’altra app desktop o sito | Stessa canvas di AI Studio |
| Input | Mostly rasterize from TTF / system fonts | Panel generate, upload glyphs, upload sprite sheet + auto-split |
| Output | Di solito un download di .fnt + atlante | L’atlante arriva sulla canvas per ulteriori modifiche |
| Aspetto | TTF sorgente più gli effetti dello strumento | Cifre stilizzate / pixel type secondo il pannello |
| Dopo | Per lo più “importa nel motore” | Finisci sulla canvas, poi spedisci al motore |
Three ways to feed the generator
Panel labels follow the product. Common paths:
| Path | When to use it |
|---|---|
| Generate from charset | No art yet—need HUD digits, pixel type, or stylized numbers |
| Upload glyph images | Artists already drew per-glyph PNGs; you need .fnt width, height, advance |
| Upload sprite sheet + auto-split | A full 0123456789 strip, glyph grid, or digit sprite sheet to slice and metric |
Sprite-sheet splitting is similar to in-place slice / layer split, but the output is a BMFont atlas + .fnt, not a UI Prefab.
Cos’è un bitmap font / BMFont
Una definizione pronta alla spedizione:
- Atlante — rasterizza i glifi che ti servono in uno (o pochi) fogli PNG.
- File delle metriche — di solito AngelCode BMFont
.fnt: UV, larghezza/altezza, xoffset / yoffset, xadvance per carattere. - Runtime — il motore campiona l’atlante per assemblare una Label, invece di tassellare i contorni vettoriali al volo.
Copre testo di gioco a dimensione e stile fissi. Non è un font di corpo TextMesh Pro SDF, e non è un font dinamico CJK completo.
| Bitmap font (BMFont) | TTF dinamico | SDF / MSDF | |
|---|---|---|---|
| Aspetto | Stile cotto nella texture; i pixel possono bloccarsi | Vettore rasterizzato a ogni dimensione | Scala in modo relativamente pulito |
| Ideale per | HUD, punteggi, titoli pixel, cifre stilizzate | Testi lunghi, chat, impostazioni | Corpo UI che deve scalare |
| Costo | Nuova dimensione / charset significa un nuovo atlante | Contorni e look pixel sono difficili da controllare | Il blocco della griglia di pixel è più debole di un vero bitmap |
Quando usarlo — e quando no
Usalo per: numeri di salute, punteggi di livello, contatori di monete / gemme, cooldown delle abilità, titoli pixel, strisce di numeri con contorno o metallizzate. Charset piccolo, dimensione fissa.
Salta per: dialoghi, posta, chat, testi delle impostazioni; corpo UI che deve scalare liberamente; un vocabolario completo Han / kana / Hangul. Un set CJK completo fa esplodere la dimensione dell’atlante — per quello mantieni font dinamici o SDF.
Come generarlo in AI Studio
Le etichette dei pulsanti seguono il pannello corrente. Il percorso è in quattro passi.
1. Apri il generatore di bitmap font
Sulla canvas di AI Studio, apri il generatore di bitmap font.

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 e visualizza l’atlante
Controlla le baseline, se i contorni mangiano i vicini, glow sporco sui bordi semi-trasparenti e spazio vuoto sprecato. Per un look pixel, concatena image pixelate sulla stessa canvas; per un alpha pulito, concatena matting.
4. Esporta, poi nel motore
Le opzioni di esportazione seguono il pannello. Per Unity / Godot / Cocos Creator, conferma di avere:
- Uno (o un set di) fogli PNG dell’atlante
- Un file
.fnt(AngelCode BMFont testo o binario; la documentazione del motore si basa su.fnt)
I nomi dei file, gli indici delle pagine e i riferimenti alle texture dentro .fnt devono corrispondere — altrimenti il motore può accettare il font e mostrare comunque glifi magenta o vuoti.
Importa in Unity / Godot / Cocos
Queste sono checklist di accettazione, non tour completi degli editor. Dopo l’importazione, renderizza 0123456789SCORE e ispeziona allineamento, spaziatura e bordi alpha.

Unity
- Imposta il Filter Mode dell’atlante su Point per bloccare i bordi dei pixel; il filtro bilineare li sfoca.
- UGUI legacy: Custom Font + un materiale che usa l’atlante, poi assegnalo a Text.
- TextMesh Pro: crea un font asset bitmap in Font Asset Creator, oppure importa la coppia BMFont (segui la tua versione di TMP).
- Rilavorazione tipica: slot materiale vuoto, o nome texture
.fnt≠ nome texture importata.
Godot 4
Godot supporta BMFont (.fnt). Tieni .fnt e PNG nella stessa cartella, importa e assegna allo slot font di una Label (o RichTextLabel). Un PNG da solo non ha rettangoli di glifi.
Cocos Creator
Un bitmap font di Cocos è .fnt + .png: il .fnt indicizza ogni miniatura di carattere. Metti entrambi nella cartella degli asset e imposta il tipo di font della Label su bitmap font (i nomi dei menu seguono il pannello 3.x). Non confonderlo con LabelAtlas (strisce di numeri a celle fisse) — LabelAtlas non porta le metriche BMFont complete.
Checklist di rilavorazione
- Glifi mancanti — estendi il charset e rigenera; non mescolare un secondo TTF dentro il motore.
- Baseline irregolare —
1vs0, virgole e punti decimali lo mostrano per primi. - Spaziatura troppo stretta / troppo larga — modifica xadvance in
.fnto ritocca la spaziatura nel generatore. - Contorni sporchi — glow che si sovrappone ai vicini; lascia 1–2 px di padding nell’atlante.
- Sfocatura in scala — non trattare un bitmap come un vettore; usa SDF / MSDF o un font dinamico se devi scalare.
- Atlante troppo grande — riduci il charset, o separa un set “cifre” da un set “titolo”.
Confini
- Il primo atlante è raramente un final pronto alla spedizione; glifi di marchi, locale mancanti e risoluzioni extra richiedono comunque un passaggio umano.
- Compressione, packing, materiali dei font e filter mode finiscono nel progetto del motore.
- Testi del pannello, input (font sorgente / riferimento di stile) e formato di esportazione seguono l’AI Studio corrente.
- VberAI Studio ≠ Google AI Studio; vedi il confronto.
Conclusione
Non ti serve “un altro BMFont online”. Ti servono cifre stilizzate e pixel type che si spediscono come asset di gioco con metriche. Genera → visualizza l’atlante → pulisci i bordi o pixelizza sulla canvas → .fnt + PNG in Unity / Godot / Cocos — tutto in AI Studio.
FAQ
Cos’è un bitmap font / BMFont?
Un bitmap font dipinge i glifi in un atlante PNG e usa un file di metriche così il motore sa come ritagliare ogni carattere. AngelCode BMFont (.fnt + PNG) è la coppia di interscambio che Unity, Godot e Cocos comprendono tutti.
VberAI può generare bitmap font per giochi?
Sì. Usa il generatore sul canvas AI Studio — charset, glifi o sprite sheet — e continua edit o export sullo stesso canvas (secondo il panel).
Posso caricare glifi o una sprite sheet?
Sì. Carica immagini di glifi (PNG per carattere ecc.) nel font. Oppure sprite sheet + auto-split (strisce cifre, griglie) per emettere .fnt BMFont + atlas (secondo il panel).
Bitmap vs TTF dinamico vs SDF?
HUD a dimensione fissa, titoli pixel e cifre stilizzate → bitmap. Testi lunghi e UI che deve scalare → TTF dinamico o SDF / MSDF.
Cosa conta nell’importazione in Unity?
Filtro Point sull’atlante; Custom Font o TMP bitmap possono entrambi consumare una coppia BMFont, ma i nomi delle texture devono corrispondere a .fnt e lo slot del materiale non può essere vuoto.
Posso cuocere un atlante cinese completo?
Non in pratica. Un set CJK completo fa esplodere l’atlante. Lascia i bitmap font per cifre, lettere latine e alcuni glifi di titoli; mantieni il corpo del testo su un font dinamico.
Continua a leggere
Altre guide che potrebbero interessarti
VberAI In-Place Slice: Importa Immagini di UI di Gioco in Unity / Godot / Cocos con un Clic
VberAI Studio suddivide le immagini UI di gioco a schermo intero, mantenendo layout e dimensioni, ed esporta in Unity, Godot e Cocos con un clic.
- vberai
- ai-studio
- inplace-slice
- game-ui
Numeri di danno fluttuanti: accettazione del handoff e implementazione nel motore
Criteri di fallimento quando i popup sono sfocati, mancano glifi, ordinano male o scattano; scelta tra TMP e cifre bitmap, pool e ordine Canvas, passi di accettazione Unity UGUI e come si integra l'arte delle cifre.
- game-ui-design
- game-dev-ai
- ui-to-engine
- bitmap-font
Gerarchia delle informazioni nell'HUD mobile: cosa mostrare in combattimento, lobby e modali
Visibilità e priorità dell'HUD per stato di gioco; legame con Safe Area, livelli di testo fluttuante e impilamento dei modali—tabelle più passi di accettazione su Play e dispositivo.
- game-ui-design
- game-dev-ai
- ui-to-engine
- hud