Littera – Bitmap Font Generator Tutorial

Mit Littera erstellen wir uns die passenden Schriften für unsere Games. Hätten wir keine Bitmap-Schriften könnten wir ansonsten nur Standard-Schriften in Phaser nutzen und das, wie man am Bild sieht, schaut nur selten passend und geglückt aus.

 

In diesem Game hatte ich bisher eine einfache Schrift namens Arial verwendet. Das soll sich ab jetzt ändern.

unschöne Standardschrift

Standard Schrift

 

Schriften finden

Für Littera braucht man Schriften um daraus ein Bitmap zu machen. Schriften kann man sich bei zum Beispiel dafont die passende heraussuchen. Die Schriften sind nach Themen sortiert und man kann, wenn man glaubt eine geeignete gefunden zu haben, Wörter oder kurze Sätze in einer Vorschau schreiben. Gefällt das, klickt man auf Download, speichert das Zip-Verzeichnis ab und entpackt das Paket. Drinnen liegt dann die Schriftdatei mit der Dateiendung .ttf (true type Font)oder auch .otf (open type font).

Schriftvorschau bei Dafont

Beispiel

 

Schriften umwandeln mit Littera

Hinweis: Littera arbeitet auf der Basis von Flash. Ob man sich Flash auf den Rechner holt nur, um Schriften umzuwandeln, muss jeder selbst entscheiden.

Jetzt kommt der eigentliche Part. Man geht online und öffnet die Seite kvazars.com/littera/, dann ist man auch schon auf der Arbeitsoberfläche. Als erstes lädt man dann seine Schrift hoch, die die man sich vorher heruntergeladen hat.

Wo man die Schrift hochlädt sieht man auf dem Bild bei Punkt 1. Danach kann man die Schriftgröße anpassen (siehe Bild, Punkt 2).

Schritte 1 bis 3

Vorgaben treffen

Dann kann man noch überlegen, ob man alle Schriftzeichen braucht. Das kann man ändern (siehe Bild, Punkt 3). Je mehr Zeichen man abbilden lässt, um so größer wird natürlich auch später die Ausgabedatei. In den meisten Fällen komme ich hin mit A-Z in Großbuchstaben, a-z in Kleinbuchstaben, Ziffern von 0 bis 9 und die Sonderzeichen Doppelpunkt, Fragezeichen, Bindestrich und Punkt.

Als Nächstes kommen noch Dinge wie ein Farbverlauf für die Buchstaben hinzu, oder eine Kontur, oder ein Schatten. Den Farbverlauf kann man verändern, die Kontur verstärken oder dünner machen und am Schatten kann man ebenfalls Werte verändern. Wie diese Änderungen ausschauen kann man dann im Vorschaufenster (Preview) betrachten (siehe Bild).

Optionen und Vorschau

Einfach ein bisschen herumspielen mit allen Möglichkeiten und Werten. Immer dran denken: Weniger ist oft mehr. Verpasst man einer Schrift zu viele Extras, kann sie schnell mickrig und/oder verschroben ausschauen.

 

Schrift aus Littera heraus exportieren

Der letzte Schritt ist das Exportieren. Das Format lässt man wie es ist bzw. wählt XML (.fnt), bei Name gibt man einen kurzen aussagekräftigen Namen (ein Wort, zum Beispiel: ritterschrift) und dann klickt man auf Export.

Exporteinstellungen

Exportiert wird dann ein Zip-Verzeichnis. In diesem Zip-Paket liegen nach dem Entpacken 2 Dateien. Bleiben wir beim Beispiel mit dem Namen, wäre das eine Datei, die heißt: ritterschrift.png (das ist das Bild) und eine Datei Namens: ritterschrift.fnt (das ist die Beschreibung wo genau auf dem Bild sich welcher Buchstabe, Zahl usw. befindet). Beide Dateien sind für uns wichtig!

Wie man dann weiter in Phaser damit umgeht, habe ich hier in diesem Teil phaser 030 – bitmap-text-fuer-schoenere-schrift beschrieben.

Das könnte Dich auch interessieren …

Translate »