Bitmap-Fonts erstellen (mit Hilfe von jME)

Veröffentlicht am

Als ich vor einiger Zeit ein eigenes, kleines Spielchen schreiben wollte, habe ich verzweifelt nach einem Programm gesucht, mit dessen Hilfe ich einen Bitmap-Font erstellen könnte. Nachdem ich einige kleine Tools erfolglos ausprobiert hatte, habe ich dann Pixel für Pixel meinen eigenen Font gemalt.

Einige Zeit später ist mir dann aber aufgefallen, dass die Entwicklungsumgebung der jMonkeyEngine ein gutes, kleines Tool dafür beinhaltet…

Zunächst eine kurze Erklärung, wofür das Ganze gut sein soll: ein Bitmap-Font kann für alle Programme eingesetzt werden, die auf einem Canvas alles selbst rendern, was angezeigt werden soll. Das Programm lädt dann eine Bitmap-Datei, die alle darstellbaren Zeichen enthält und splittet diese in Einzelgrafiken auf. So können Texte dann auf dem Canvas aus diesen Einzelgrafiken zusammengesetzt werden.

Wer möchte, und über Java-Kenntnisse verfügt, kann sich die prinzipielle Vorgehensweise an Hand des Spiels Catacomb Snatch ansehen. Interessant ist die Klasse Font und die Bitmap-Fonts im res/art/fonts-Ordner.

An dieser Stelle möchte ich auf die jMonkeyEngine nicht näher eingehen. Es ist ja noch gar nicht so lange her, dass ich jME hier vorgestellt habe. In der Zwischenzeit ist allerdings aus der Beta-Version ein RC2 geworden.

Vorgehensweise

Auswahl des Fonts

Die Vorgehensweise ist denkbar einfach:

  • Startet jME und erzeugt darin ein neues Projekt. Das Projekt wird nur temporär benötigt.
  • Führt einen Rechtsklick auf den Projektnamen aus und wählt im Kontextmenü dann NewOther... aus.
  • Wählt im Dialog New File dann die Kategorie GUI aus und darin den Dateityp Font.
  • Bestätigt dann mit Next >
  • Nun könnt ihr den Font auswählen, den ihr als Bitmap umsetzen wollt. Es werden alle im System installierten Fonts angezeigt. Wählt einen aus und bestätigt wieder mit Next >
  • Font-Einstellungen vornehmen

    Nun könnt ihr den Stil (Plain, Bold, Italic), die Schriftgröße und den Zeichenabstand festlegen. Außerdem können noch ein paar Einstellungen zum Aufbau der Bitmap-Grafik verändert werden. Besonders wichtig ist hier, die Bildgröße so anzupassen, dass alle bzw. alle benötigten Zeichen darauf Platz haben.

  • Erzeugt den Font mit Klick auf Finish.

Die erzeugten Dateien findet ihr dann im Projekt unterhalb von Project AssetsInterfaceFonts.

Wenn ihr den Font ähnlich wie bei Catacomb Snatch verwenden wollt, dann müsst ihr darauf achten einen nicht proportionalen Font wählt. So ist sichergestellt, dass das Programm das Font-Bitmap in Buchstaben-Teile gleicher Größe schneiden kann.

Der Font-Editor von jME lässt auch proportionale Fonts zu, da ohnehin zu jedem Font-Bitmap eine .fnt-Datei erzeugt wird. Diese enthält dann Informationen darüber, wie das Programm die Bitmapdatei aufteilen muss, um an jeden einzelnen Buchstaben zu kommen. Wer also in jME entwickelt kann natürlich auch einen proportionalen Font verwenden.

Einfärben / Aufpeppen

Einfärben des Fonts mit GIMP

Um noch etwas Farbe ins Spiel zu bekommen, könnt ihr dann den Font mit GIMP nett einfärben. Ich möchte hier nicht zu sehr ins Detail gehen – ich denke und hoffe, dass ihr mit den folgenden Stichpunkten auskommen werdet:

  • Datei in GIMP laden. Eine neue Ebene einfügen und diese mit der gewünschten Grundfarbe füllen.
  • Dann der neuen Ebene eine neue Ebenenmaske mit voller Transparenz hinzufügen (Schwarz).
  • Dann den Font (also die andere Ebene) in die Ebenenmaske übertragen (per Copy & Paste). Die ursprüngliche Ebene kann jetzt gelöscht werden.
  • Jetzt sollte man den Font in der Grundfarbe sehen.
  • Nun kann man mit dem Pinsel noch andere Farben in die Farbenmaske reinbringen.

Das nur als Idee. Der Fantasie sind da ja keine Grenzen gesetzt…

Fazit

Es mag etwas overdozed zu sein, sich extra jMonkeyEngine zu installieren, nur um daraus einen kleinen Wizard zu verwenden. Aber tatsächlich habe ich vor ein paar Monaten kein einziges Tool gefunden, das ordentlich funktioniert hat. Falls ihr ein Tool habt/kennt, bin ich natürlich für euren Tipp dankbar.


Dieser Artikel wurde in der/den Kategorie(n) Planet-U, Praxis, Programmierung und Skripting veröffentlicht und mit den Tags , , , , versehen.

4 Kommentare zu Bitmap-Fonts erstellen (mit Hilfe von jME)

  1. Kommentar von Daria
    19. Dezember 2012, 10:05 Uhr.

    und was für ein Spiel ist es geworden?

    • Kommentar von Gerald
      19. Dezember 2012, 10:18 Uhr.

      Ein einfaches Jump’n’Run. Die Steuerung funktioniert, Gegner gibt es auch – auf die man Mario-like springen kann. Und einen Editor.
      Allerdings fehlt noch der Rahmen – man kann noch nicht „sterben“ und so und es gibt weder Punkte noch ein Ziel. Außerdem fehlt noch die Musik, da bin ich leider noch nicht sehr vorangekommen.
      Und, wie es so ist, habe ich derzeit jede Menge anderes Zeug zu tun. Öffentlich gemacht habe ich bisher nichts, weil da eben auch noch sehr viel fehlt.
      Aber bisher war das schon mal eine tolle Erfahrung… :)
      Gruß, Gerald

  2. Kommentar von Klaus Schwarzkopf
    28. Dezember 2012, 12:24 Uhr.

    Hast Du schon Hiero ausprobiert?

    http://www.badlogicgames.com/wordpress/?p=1247

    Java Programm:
    http://libgdx.badlogicgames.com/downloads/hiero.jar

    Ursprünglich von Slick2D wird mehr oder weniger von libgdx weiterentwickelt.

    Gruß Klaus

    • Kommentar von Gerald
      28. Dezember 2012, 15:05 Uhr.

      Nein, das hatte ich leider nicht gefunden… :( Daher: vielen Dank, Klaus. Werde ich mir mal genauer ansehen…

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>