Eigenen Bitmapfont erstellen und nutzen

[Farbfinsternis]

I. Worum geht es?

Gerade für klassische Pixel Art Games ist es großartig wenn man seinen eigenen, ganz individuellen Font verwenden kann anstelle von irgendwelchen OTF oder TTF Schriften. Dieses Tutorial zeigt Dir wie Du das bewerkstelligen kannst.

II. Die benötigten Zeichen

Um einen eigenen Bitmapfont (Pixel Font) erstellen zu können ist es zunächst notwendig eine Zeichenkette mit allen Zeichen die man später verwenden möchte zu erstellen. Wer nur Großbuchstaben und Zahlen verwenden will hat hier weniger Arbeit als jemand der gern den kompletten ASCII Satz anbieten möchte. Für meinen Font sieht die Zeichenkette so aus:

Code:

ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜabcdefghijklmnopqrstuvwxyzäöüß0123456789!"§$%&/()=?´`[]{}\*+~'#-_.:,;<>|@

Speichere Dir Deine Zeichenkette als Textdatei ab denn wir werden sie später noch dringend brauchen. Zudem ist es ganz praktisch beim pixeln hin und wieder nachschauen zu können welches Zeichen denn als nächstes kommt. Die Zeichen in Deiner Pixel Grafik müssen nämlich in exakt der Reihenfolge stehen wie sie auch in der Zeichenkette auftauchen.

III. Die Zeichenkomfortzone

Bevor Du anfängst Deinen Font zu pixeln muss klar sein dass sich die Zeichen in einem Raster (Grid) befinden müssen. Für meinen Font habe ich eine Größe von 10x12 Pixel gewählt. Die Zeichen sind etwas breiter als hoch um auch ausreichend Platz für die breiteren Zeichen wie das "W" oder das "@" zu haben.
Außerdem ist es wichtig zu wissen dass die Software, mit der wir später den fertigen Font erstellen, ordentlich Raum zwischen den Zeichen benötigt. Aus diesem Grund habe ich zwischen meinen Zeichen immer ein komplettes Rasterfeld leer gelassen. Sowohl horizontal als auch vertikal. Schlussendlich sieht meine Pixelgrafik also so aus:

   

Beachte dass der Hintergrund transparent sein sollte. Speichere Deine Grafik also am besten als PNG ab. Mit welcher Software man seinen Font zusammen pixelt ist hierbei komplett unerheblich.

IV. Ein Schuhkarton!

Die Software mit der man aus der o.g. Zeichenkette und der eigenen Pixel Grafik einen Bitmapfont bauen kann nennt sich ShoeBox. Ein kleines Open Source Tool das sogar noch mehr kann als nur Bitmapfonts zu generieren, aber darum soll es an dieser Stelle nicht gehen.
ShoeBox kannst Du Dir von der Seite http://renderhjs.net/shoebox/ herunterladen. Nach dem Start wirkt das Tool zunächst recht unspektaktulär.



Auch die Bedienung ist an mancher Stelle etwas gewöhnungsbedürftig. Das fängt bereits damit an dass wir, um unseren Font zu konfigurieren, mit der rechten Maustaste auf "Bitmap Font" klicken müssen. Es öffnet sich ein neues Fenster mit einigen wenigen Einstellungen. Das liegt aber daran dass wir uns gerade im Reiter "Basic" befinden. Klicke einfach einmal oben auf "Advanced" und schon sind wir dort wo wir hin wollen:



Bei Dir befindet sich in diesem Fenster natürlich kein roter Balken. Ich habe hier nur schon mal den Punkt markiert zu dem wir jetzt müssen. Er definiert nämlich welche Zeichen, in welcher Reihenfolge in unserem Font enthalten sein sollen. Wenn Du jetzt noch Deine Zeichenkette vom Anfang dieses Tutorial hast, kann es weiter gehen. Kopiere die Zeichenkette einfach über die bereits vorhandene bei dem Punkt "Txt Chars". Sollte bei Dir, eine Zeile tiefer bei "TxtLine Height" ein kleinerer Wert als 13 stehen, oder Dein Font ohnehin höher als 13 Punkte sein dann trage hier Deine Font Höhe in Pixel ein, mindestens aber 13. Das hat den Hintergrund dass kleinere Zeilenhöhen bewirken dass der Font in GODOT Schaltflächen (Label, Buttons etc.) am oberen Rand kleben und damit ein unschönes Gesamtbild geben.
Zum Schluss genügt ein Klick auf "Apply", das Einstellungsfenster schließt sich und das Hauptfenster von ShoeBox steht wieder allein da.

V. Funktioniert mein Font?

Um jetzt herauszufinden ob Dein Font funktioniert, also dass alle Zeichen an der richtigen Stelle stehen und auch die Abstände zwischen den Zeichen passen, musst Du jetzt Deine Font Pixel Grafik aus dem Explorer auf den Button "Bitmap Font" ziehen und dort "fallen lassen". Es öffnet sich jetzt ein Fenster mit einer Vorschau Deines Fonts. Bei mir sieht diese so aus:



Wenn Du hier in Deiner eigener Schrift geschrieben lesen kannst: "The quick brown fox jumps over the lazy dog!" und auch sonst alle Zeichen korrekt angezeigt werden, ist Dein Font fast fertig um in GODOT und Deinem Spiel genutzt zu werden. Aber bevor es soweit ist musst Du erst einmal auf "Save Font" klicken. Beachte dass ShoeBox die Font-Datei und eine neue Grafikdatei an den Ort sichert an dem auch Deine Pixel Grafik liegt! Bei mir liegt jetzt also neben meiner Grafikdatei "Font-light-12x10.png" noch die Font-Datei "Font-light-12x10-export.fnt" und die optimierte Grafikdatei "Font-light-12x10-export.png". Wie man den Standard-Exportnamen dieser Dateien ändert und andere Feinheiten können wir ja in den Kommentaren besprechen. Wichtig ist jetzt erst einmal dass wir die neue Font-Datei (.fnt) noch anpassen müssen, denn da stehen noch Sachen drin die GODOT verwirren und das wollen wir ja nicht.

VI. Fit machen für GODOT

Öffne die neu erzeugte Font-Datei mit einem Texteditor Deines geringsten Misstrauens. Gleich in Zeile 1 siehst Du den kompletten Pfad zum exportieren Font. Bei mir steht dort:

Code:

C:\Dev\Projekte\Godot\OH LECK!\__work\Font-light-12x10-export

Das benötigen wir so nicht. Entferne einfach alles inklusive dem letzten Backslash (\). Bei mir bleibt dann übrig:

Code:

Font-light-12x10-export

In Zeile 2 findest Du irgendwo die Zuweisung alphaChnl=1. Ändere hier die 1 in eine 0, ansonsten ist Dein Font in GODOT nicht transparent! An dieser Stelle geht ein fettes Danke an whiteshampoo auf dem deutschsprachigen GODO Discord-Server raus! Ohne ihn wäre ich nie darauf gekommen dass das die Lösung für meine nicht transparenten Fonts ist.
Weiter geht es in Zeile 3 in der wieder ein kompletter Pfad zu finden ist. Diesmal zu Deiner Pixel Grafik mit dem Font. Entferne hier alles aus dem Pfad so dass nur noch der Dateiname übrig bleibt. Speichere jetzt die Datei.

VII. Zeit zum Testen

Kopiere jetzt die exportierte Pixel Grafik und die neue Font-Datei in Dein GODOT Projekt Verzeichnis. Ich habe bei mit eine Verzeichnisstruktur als "assets\fonts\" angelegt, wo ich meine Schrift hin kopiere. GODOT wird diese Daten nun importieren und wir können den Font ausprobieren. Das erste Indiz dass Dein Font erfolgreich importiert wurde ist das Icon der Font-Datei. Es sollte so aussehen:



Jetzt erstelle eine 2D Scene und hänge ein Label an die Node2D. Im Inspektor erzeugst Du ein neues "LabelSettings" Objekt. Wenn Du dieses dann anklickst hast Du die Möglichkeit einen Font für Dein Label anzugeben. Wie man das global einstellt damit man nicht für jedes UI Element einen Font angeben muss soll nicht Teil dieses Tutorials sein.



Wenn alles geklappt hat sollte Dein Label nun seinen Text mit Deinem eigenen Font anzeigen. Herzlichen Glückwunsch!