← Torna al blog

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.

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

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:

  1. 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.
  2. PNG per glifo disegnati a mano senza metriche — il motore non conosce larghezza, altezza, baseline o avanzamento, quindi stai componendo sprite sciolti.
  3. 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 autonomoGeneratore di bitmap font VberAI
IngressoUn’altra app desktop o sitoStessa canvas di AI Studio
InputMostly rasterize from TTF / system fontsPanel generate, upload glyphs, upload sprite sheet + auto-split
OutputDi solito un download di .fnt + atlanteL’atlante arriva sulla canvas per ulteriori modifiche
AspettoTTF sorgente più gli effetti dello strumentoCifre stilizzate / pixel type secondo il pannello
DopoPer 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:

PathWhen to use it
Generate from charsetNo art yet—need HUD digits, pixel type, or stylized numbers
Upload glyph imagesArtists already drew per-glyph PNGs; you need .fnt width, height, advance
Upload sprite sheet + auto-splitA 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:

  1. Atlante — rasterizza i glifi che ti servono in uno (o pochi) fogli PNG.
  2. File delle metriche — di solito AngelCode BMFont .fnt: UV, larghezza/altezza, xoffset / yoffset, xadvance per carattere.
  3. 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 dinamicoSDF / MSDF
AspettoStile cotto nella texture; i pixel possono bloccarsiVettore rasterizzato a ogni dimensioneScala in modo relativamente pulito
Ideale perHUD, punteggi, titoli pixel, cifre stilizzateTesti lunghi, chat, impostazioniCorpo UI che deve scalare
CostoNuova dimensione / charset significa un nuovo atlanteContorni e look pixel sono difficili da controllareIl 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.

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 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.

Punteggio BMFont nel motore

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 — 1 vs 0, virgole e punti decimali lo mostrano per primi.
  • Spaziatura troppo stretta / troppo larga — modifica xadvance in .fnt o 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.

Altre guide che potrebbero interessarti