Phaser 031 – Bitmap Text für schönere Schrift

Text in einem Phaser-Game auszugeben ist leicht. Die Standardtexte sehen aber unspektakulär aus. Daher formatiert man Text in einem zum Game passenden Style. Dazu werden sogenannte Bitmap-Fonts verwendet die man sich online generieren kann.

Tutorial Level: Easy 2 out of 5 stars (2 / 5)

Wie man ein Bitmap-Font mit Littera erstellt habe ich hier kurz beschrieben.

Beispiel
Phaser Bitmaptext Example

Standard links, Bitmaptext rechts

Die bisherige Schrift war immer ein Standard und schaute eher langweilig aus. Rechts im Bild wurde eine mit Littera erstellte Bitmapschrift.

Wie funktionierts?
Standardschrift

Zum Vergleich noch einmal die Codezeilen zur Standardschrift.

Hier haben wir den text der geaddet wird, dann in den Klammern die Koordinaten bzw. Seitenabstände, den Text und anschließend die Schriftgröße in Pixel, die Schriftart (Arial) und dann das fill, wo die Farbe definiert wird.

BitmapText

Hier der neue Scriptcode. Zu der Schrift gehören zwei Dateien, die scifi.png (die Bilddatei mit den Buchstaben) und die scifi.fnt (Textdatei mit Koordinaten der Buchstaben auf dem Bild). Beide Dateien müssen in der function preload() geladen werden.

Danach die Codezeilen für den Text in der function create ()Fast identisch wie die beim Standardtext.

In Klammern erscheinen auch hier wieder die Koordinaten, dann die Schriftart (scifi), dann erst der Text selbst und dann, statt der Farbe die Schriftgröße.

Das könnte Dich auch interessieren …

Translate »