Schriftarten einrichten

Definition einer Bitmap-Schriftart

Die Schriftarten deines Spiels legst du im Bereich „Fonts“ des Editors an. Visionaire Studio kennt zwei Arten:

  • TrueType-Schriftarten: Du fügst deinem Projekt .ttf- oder .otf-Dateien hinzu und stellst Größe, Farbe und weitere Eigenschaften im Editor ein.
  • Bitmap-Schriftarten: Du zeichnest in deinem Grafikprogramm ein Zeichenblatt (das „Schriftbild“), aus dem die Engine eine Schriftart macht. Das ist aufwendiger, erlaubt dir aber Schriften, die es nicht als TrueType gibt, oder solche, denen Sonderzeichen oder Zeichen für weitere Sprachen fehlen. Oder du möchtest eine besondere Farbgestaltung, die mit TrueType-Schriften in Visionaire nicht möglich ist.


Aktiviere in den Eigenschaften der Schriftart „TrueType-Schriftart“, wenn du eine .ttf- oder .otf-Datei verwenden möchtest; sonst ist es eine Bitmap-Schriftart. Der Editor ändert sich dabei kaum: Alle Felder bleiben sichtbar, aber manche gelten nur für TrueType-Schriften [TTF], manche nur für Bitmap-Schriften [BF]:

  • Schriftbild: Die Datei mit dem Zeichenblatt einer Bitmap-Schriftart. Wie sie aussehen muss, steht weiter unten. [BF]
  • TrueType-Schriftartdatei: Verknüpfe eine .ttf- oder .otf-Datei. [TTF]
  • Schriftart: Wähle eine TrueType-Schriftart, die du schon angelegt hast, und ändere Farbe, Größe usw. Eine eigene Schriftdatei brauchst du dann nicht. [TTF]
  • Größe: Die Schriftgröße. Mit der linken Maustaste erhöhst du den Wert, mit der rechten verringerst du ihn. [TTF]
  • Automatischer Zeilenumbruch: Textzeilen werden nicht breiter als eine bestimmte Pixelzahl (siehe nächste Einstellung). [TTF/BF]
  • Max. Zeilenbreite (Pixel): Die maximale Breite einer Zeile; nur wirksam, wenn der Zeilenumbruch aktiviert ist. [TTF/BF]
  • Buchstabenabstand (Pixel): Der Abstand zwischen zwei Buchstaben. [BF]
  • Zeilenabstand (Pixel): Der Abstand zwischen Textzeilen. [TTF/BF]
  • Leerzeichenbreite (Pixel): Die Breite des Leerzeichens (das du im Schriftbild ja nicht zeichnen kannst). [BF]
  • Farbe: Die Textfarbe. [TTF]
  • Rand: Gibt den Buchstaben einen Rand. [TTF]
  • Randfarbe: Die Farbe des Rands; nur wirksam, wenn der Rand aktiviert ist. [TTF]
  • Randgröße: Die Breite des Rands; nur wirksam, wenn der Rand aktiviert ist. Mit der linken Maustaste erhöhst du den Wert, mit der rechten verringerst du ihn. [TTF]
  • Schatten: Gibt dem Text einen Schatten. [TTF]
  • Schattenversatz: Der waagerechte und senkrechte Versatz des Schattens; nur wirksam, wenn der Schatten aktiviert ist. [TTF]
  • Schrift-Untertypen: Bis zu 6 weitere Schriftarten, die du über Tags auf Teile eines Texts anwendest. So formatierst du Texte (z. B. fett, kursiv). Mehr dazu auf der Seite Texte. [TTF]


Mit Bitmap-Schriftarten arbeiten

Schriftbild

Beispiel für das Schriftbild einer Bitmap-Schriftart

Das Schriftbild einer Bitmap-Schriftart muss eine .png- oder .webp-Datei mit transparentem Hintergrund sein. Zwischen den Zeichen muss eine Lücke sein, damit die Engine sie trennen kann; deshalb müssen auch alle Pixel eines Zeichens zusammenhängen. Du kannst die Zeichen auf mehrere Zeilen verteilen, aber am Anfang jeder Zeile muss eine Hilfslinie für die Grundlinie stehen (siehe Bild), an der die Engine die Zeichen senkrecht ausrichtet. Diese Hilfslinie zählt nicht als Zeichen.

Sobald du eine Datei verknüpft hast, erscheint sie im Ansichtsfenster. Jedes erkannte Zeichen ist von einem gestrichelten Rahmen umgeben.


Kerning

Beispiel für Kerning: Ohne Kerning entsteht durch die Form des „Q“ eine große Lücke; das „u“ muss in den Bereich des „Q“ hineinragen

Standardmäßig werden Buchstaben einfach nebeneinander gesetzt, egal welche Form sie haben. Das kann unschöne Abstände ergeben (im Bild ein extremes Beispiel). TrueType-Schriften bringen dafür eigene Kerning-Angaben mit; bei Bitmap-Schriften kannst du das selbst einstellen.

Im Feld Kerning legst du fest, wie weit bestimmte Zeichen oder Zeichenpaare zusammenrücken. Einige Beispiele:

  • „Q=2“: Der Abstand zwischen Q und jedem folgenden Zeichen wird um 2 Pixel kleiner
  • „VA=5“: Der Abstand zwischen V und A wird um 5 Pixel kleiner
  • „To=2“: Der Abstand zwischen T und o wird um 2 Pixel kleiner


Gib diese einzelnen Definitionen getrennt durch einen senkrechten Strich (|) ein: 

Q=2|VA=5|To=2


Alphabet

Bei einer Bitmap-Schriftart musst du Visionaire sagen, welche Zeichen du gezeichnet hast. Trage alle Zeichen in der Reihenfolge, in der sie im Schriftbild stehen, in das Feld Alphabet ein. So kann die Engine jedes Zeichen seiner Grafik zuordnen.

Für neue Schriftarten ist ein einfaches Alphabet schon eingetragen, das du anpassen kannst. Das Beispielbild oben bräuchte diese Alphabet-Zeile:

abcdefghijklmnopqrstuvwxyzäöüßABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ@€1234567890°^!"§$%&/(){}[]=?\+*~'#,.;:-–—|_<>„“”‚‘’»«›‹