VberAI Bitmap Font: Glyphen hochladen / Sprite-Sheet auto-split → BMFont

VberAI Studio (kurz: AI Studio, ≠ Google AI Studio) enthält einen Bitmap-Font-Generator: Zeichenmenge im Panel erzeugen, Glyphenbilder hochladen oder Sprite-Sheet hochladen und automatisch splitten — daraus entsteht ein Game-Font-Atlas mit Metriken. Ergebnisse bleiben auf demselben Game-Canvas für Pixelung, Freistellen oder Export. Das Austauschformat ist AngelCode BMFont .fnt + PNG (Exportoptionen folgen dem Panel).

Start hier: AI Studio. Glossar: Bitmap-Font.

Das ist der Game-Bitmap-Font- / BMFont-Workflow: feste Zeichenmenge und Stil, mit .fnt-Metriken nach Unity / Godot / Cocos.

Warum Spiele noch immer Bitmap-Fonts brauchen

Dynamische TTF / OTF ist richtig für lange Texte und beliebige Größen. HUD, Scores, Münzzähler, Pixel-Titel und konturierte Ziffern brauchen meist etwas anderes: eine feste Größe, einen in die Textur eingebackenen Stil, keine Unschärfe beim Skalieren und eine vorhersehbare Engine-Last.

Drei häufige Umwege:

1. Einen dynamischen Font erzwingen — Konturen zerbrechen beim Vergrößern; Pixel-Schrift wird beim Verkleinern matschig; bilineares Filtern weicht Zellränder auf.
2. Handgezeichnete PNGs pro Glyphe ohne Metriken — die Engine kennt weder Breite, Höhe, Grundlinie noch Vorlauf, also setzt du lose Sprites zusammen.
3. Desktop- oder Online-BMFont, dann herunterladen — du gehst mit einem Atlas und einer .fnt raus und öffnest dann andere Tools, um Kanten zu säubern, zu pixeln und in Unity / Godot / Cocos zu importieren.

AI Studio hält die Generierung auf einer editierbaren Game-Workbench: Der Font ist ein Asset, keine Zip-Datei, mit der die Arbeit endet.

	Standalone-BMFont-Tool	VberAI Bitmap-Font-Generator
Einstieg	Andere Desktop-App oder Website	Derselbe AI-Studio-Canvas
Eingabe	Meist aus TTF / Systemfonts rasterisieren	Panel-Generierung, Glyphen hochladen, Sprite-Sheet + Auto-Split
Ausgabe	Meist .fnt + Atlas-Download	Atlas landet auf dem Canvas zur Weiterbearbeitung
Look	Quell-TTF plus Tool-Effekte	Panel-Stil oder hochgeladene Glyphen / Sprite-Art
Danach	Meist „in die Engine importieren“	Auf dem Canvas fertigstellen, dann in die Engine

Drei Wege in den Generator

Panel-Labels folgen dem Produkt. Typische Pfade:

Pfad	Wann nutzen
Aus Zeichenmenge generieren	Noch keine Art — HUD-Ziffern, Pixel-Schrift oder stilisierte Zahlen
Glyphenbilder hochladen	Künstler haben PNGs pro Glyphe; .fnt-Breite, -Höhe, advance fehlen
Sprite-Sheet hochladen + Auto-Split	0123456789-Streifen, Glyphenraster oder Ziffern-Sheet schneiden und metrisieren

Sprite-Sheet-Splitting ähnelt In-Place-Slice / Layer-Split, aber die Ausgabe ist ein BMFont-Atlas + .fnt, kein UI-Prefab.

Was ein Bitmap-Font / BMFont ist

Eine auslieferbare Definition:

1. Atlas — rastere die benötigten Glyphen in ein (oder wenige) PNG-Blätter.
2. Metrik-Datei — meist AngelCode BMFont .fnt: UV, Breite/Höhe, xoffset / yoffset, xadvance pro Zeichen.
3. Runtime — die Engine sampelt den Atlas, um ein Label zusammenzusetzen, statt Vektor-Konturen zur Laufzeit zu tessellieren.

Er deckt festgrößen-, feststilisierten Spieltext ab. Er ist kein TextMesh Pro SDF-Body-Font und kein vollständiger dynamischer CJK-Font.

	Bitmap-Font (BMFont)	Dynamische TTF	SDF / MSDF
Look	Stil in die Textur eingebacken; Pixel können einrasten	Vektor wird bei jeder Größe neu gerastert	Skaliert relativ sauber
Am besten für	HUD, Scores, Pixel-Titel, stilisierte Ziffern	Lange Texte, Chat, Einstellungen	UI-Body, der skalieren muss
Kosten	Neue Größe / Zeichensatz bedeutet neuen Atlas	Konturen und Pixel-Look sind schwer zu kontrollieren	Pixel-Raster-Einrastung ist schwächer als bei einem echten Bitmap

Wann du es einsetzt — und wann nicht

Nutze es für: Lebenspunkte-Zahlen, Stage-Scores, Münz- / Edelstein-Zähler, Skill-Cooldowns, Pixel-Titel, konturierte oder metallische Ziffernleisten. Kleiner Zeichensatz, feste Größe.

Lass es weg bei: Dialogen, Mail, Chat, Einstellungstexten; UI-Body, der frei skalieren muss; einem vollständigen Han- / Kana- / Hangul-Wortschatz. Ein kompletter CJK-Satz sprengt die Atlasgröße — behalte dafür dynamische Fonts oder SDF.

So generierst du ihn in AI Studio

Button-Beschriftungen folgen dem aktuellen Panel. Der Weg besteht aus vier Schritten.

1. Bitmap-Font-Generator öffnen

Öffne auf dem AI Studio-Canvas den Bitmap-Font-Generator.

2. Eingabeweg wählen, dann Zeichenmenge und Größe festlegen

Wähle Panel-Generierung, Glyphenbilder hochladen oder Sprite-Sheet hochladen und auto-splitten (laut Panel). In jedem Fall zuerst auflisten, welche Zeichen im Spiel wirklich vorkommen.

HUD-Sets brauchen oft nur 0123456789, +$%/., und wenige lateinische Buchstaben. Fehlende Glyphen werden Lücken oder Tofu; zu viele blähen den Atlas auf.

Größe auf die finale HUD-Pixelgröße setzen — nicht groß entwerfen und runterskalieren. Skalieren skaliert die Textur. Nach einem Sprite-Sheet-Split Zell-Padding und advance prüfen, damit Ziffern nicht kollidieren.

3. Generieren und Atlas in der Vorschau prüfen

Prüfe Grundlinien, ob Konturen in Nachbarn hineinfressen, schmutziges Glühen an halbtransparenten Rändern und verschwendeten Leerraum. Für einen Pixel-Look hänge Bild-Pixelung auf demselben Canvas an; für ein sauberes Alpha hänge Freistellen an.

4. Exportieren, dann in die Engine

Exportoptionen folgen dem Panel. Für Unity / Godot / Cocos Creator stelle sicher, dass du hast:

• Ein (oder mehrere) PNG-Atlas-Blätter
• Eine .fnt-Datei (AngelCode BMFont Text oder Binär; Engine-Dokumentation bezieht sich auf .fnt)

Dateinamen, Seitenindizes und die Texturreferenzen innerhalb der .fnt müssen übereinstimmen — sonst akzeptiert die Engine den Font möglicherweise und zeigt trotzdem Magenta- oder leere Glyphen.

Import in Unity / Godot / Cocos

Dies sind Abnahme-Checklisten, keine vollständigen Editor-Touren. Rendere nach dem Import 0123456789SCORE und prüfe Ausrichtung, Laufweite und Alpha-Kanten.

Unity

• Setze den Filter Mode des Atlas auf Point, um Pixelkanten einzurasten; bilineares Filtern verwischt sie.
• Legacy UGUI: Custom Font + ein Material, das den Atlas verwendet, dann dem Text zuweisen.
• TextMesh Pro: Baue ein Bitmap-Font-Asset im Font Asset Creator oder importiere das BMFont-Paar (folge deiner TMP-Version).
• Übliche Nacharbeit: leerer Material-Slot oder .fnt-Texturname ≠ importierter Texturname.

Godot 4

Godot unterstützt BMFont (.fnt). Halte .fnt und PNG im selben Ordner, importiere und weise sie einem Label- (oder RichTextLabel-)Font-Slot zu. Ein PNG allein hat keine Glyphen-Rechtecke.

Cocos Creator

Ein Cocos-Bitmap-Font ist .fnt + .png: Die .fnt indiziert jedes Zeichen-Thumbnail. Lege beide in den Asset-Ordner und setze den Label-Font-Typ auf Bitmap-Font (Menünamen folgen dem 3.x-Panel). Verwechsle das nicht mit LabelAtlas (Ziffernleisten mit festen Zellen) — LabelAtlas trägt keine vollständigen BMFont-Metriken.

Nacharbeits-Checkliste

• Fehlende Glyphen — erweitere den Zeichensatz und generiere neu; mische keine zweite TTF in der Engine dazu.
• Ungleichmäßige Grundlinie — 1 vs. 0, Kommas und Dezimalpunkte zeigen es zuerst.
• Laufweite zu eng / zu locker — bearbeite xadvance in der .fnt oder justiere den Abstand im Generator.
• Schmutzige Konturen — Glühen überlappt Nachbarn; lasse 1–2 px Padding im Atlas.
• Unschärfe beim Skalieren — behandle ein Bitmap nicht als Vektor; nutze SDF / MSDF oder einen dynamischen Font, wenn du skalieren musst.
• Atlas zu groß — kürze den Zeichensatz oder trenne ein „Ziffern“-Set von einem „Titel“-Set.

Für wen das gedacht ist

Indie-Devs und kleine Teams, die HUD-Scores, Pixel-Titel und stilisierte Ziffern ausliefern — kleiner Zeichensatz, feste Größe, .fnt + PNG im Build, ohne zwischen Desktop-BMFont-Tool und Engine zu pendeln.

Grenzen

• Der erste Atlas ist selten eine auslieferbare Endversion; Marken-Glyphen, fehlende Locales und zusätzliche Auflösungen brauchen weiterhin einen menschlichen Durchgang.
• Kompression, Packing, Font-Materialien und Filter Mode landen im Engine-Projekt.
• Panel-Texte, Eingaben (Quell-Font / Stilreferenz) und Exportformat folgen dem aktuellen AI Studio.
• VberAI Studio ≠ Google AI Studio; siehe den Vergleich.

Fazit

Du brauchst nicht „noch ein Online-BMFont“. Du brauchst stilisierte Ziffern und Pixel-Schrift, die als Game-Assets mit Metriken ausgeliefert werden. Generieren → Atlas in der Vorschau prüfen → Kanten säubern oder auf dem Canvas pixeln → .fnt + PNG in Unity / Godot / Cocos — alles in AI Studio.

FAQ

Was ist ein Bitmap-Font / BMFont?
Ein Bitmap-Font malt Glyphen in einen PNG-Atlas und verwendet eine Metrik-Datei, damit die Engine weiß, wie jedes Zeichen zerschnitten wird. AngelCode BMFont (.fnt + PNG) ist das Austauschpaar, das Unity, Godot und Cocos alle verstehen.

Kann VberAI Game-Bitmap-Fonts erzeugen?
Ja. Nutze den Bitmap-Font-Generator auf dem AI-Studio-Canvas — Zeichenmenge, Glyphen oder Sprite-Sheet — und bearbeite oder exportiere auf demselben Canvas (laut Panel).

Kann ich Glyphenbilder oder ein Sprite-Sheet hochladen?
Ja. Glyphenbilder hochladen (PNG pro Zeichen usw.) in den Font. Oder Sprite-Sheet hochladen und auto-splitten (Ziffernstreifen, Glyphenraster) für BMFont .fnt + Atlas (laut Panel).

Bitmap vs. dynamische TTF vs. SDF?
Festgrößen-HUD, Pixel-Titel und stilisierte Ziffern → Bitmap. Lange Texte und UI, die skalieren muss → dynamische TTF oder SDF / MSDF.

Was ist beim Unity-Import wichtig?
Point-Filterung auf dem Atlas; Custom Font oder TMP-Bitmap können beide ein BMFont-Paar konsumieren, aber Texturnamen müssen zur .fnt passen und der Material-Slot darf nicht leer sein.

Kann ich einen vollständigen chinesischen Atlas backen?
Nicht praktikabel. Ein kompletter CJK-Satz sprengt den Atlas. Überlasse Bitmap-Fonts den Ziffern, lateinischen Buchstaben und ein paar Titel-Glyphen; halte Fließtext auf einem dynamischen Font.