Text-Alignment

Tutorial
Text-Alignment
Autor	cheater
Programmier­sprache	C#
Kategorie	XNA
Diskussion	Thread im Forum
Lizenz	indiedev article license
http://blog.pre3d.de/2012/02/19/text-alignment/

Auf pre3d’s Wunsch hin habe ich mich einfach mal hingesetzt, und für ihn ein Tutorial geschrieben. Den genauen Beweggrund, dass er mich gefragt hat, den habe ich nicht richtig verstanden, aber da ich eine gute Seele habe und er uns auch bei unserem Projekt hilft, habe ich ihm zugestimmt.

Motivation

Texte in XNA darstellen lassen ist ja nicht so schwer. Damit lassen sich auch alle möglichkeiten moderner Textverarbetung realisieren. Neben allerlei Schriftarten, Größen und Farben ist natürlich auch die korrekte Positionierung des Textes wichtig. Natürlich kann man einfach verschiedene Vektoren für die Textposition ausprobieren, oder in einem Zeichenprogramm alles skizzieren und die korrekte Position ausmessen. Diese Methode kann man allerdings spätestens dann vergessen, wenn man die Texte dynamisch haben will. Allerdings gibt es natürlich auch einen Trick, diese Ausrichtung (engl. “Alignment”) zur Laufzeit zu berechnen und die Position dynamisch festzulegen.

Linksbündig

Das ist selbstverständlich die einfachste Variante, da bei Texten sowieso die linke, obere Ecke angiebt. Damit es jedoch in mein Shema passt, nehm ich das hier auch rein. Folgende Ausgangssituation:

SpriteBatch spriteBatch;
SpriteFont font;
Color fontColor;
string text = "Linksbündig: Das haben wir gern!";
int yPos;
int xPos;

Wir haben also ein SpriteBatch zum Zeichnen des Textes, einen SpriteFont, der die Schriftart darstellt, die Textfarbe, sowie den Text den wir Anzeigen lassen wollen und die Position des Textes vom oberen Rand und vom linken. Zum Code, der zum Zeichnen benötigt wird, sag ich jetzt mal nichts.

Vector2 position = new Vector2(xPos, yPos);
spriteBatch.DrawString(font, text, position, fontColor);

Ich möchte noch erwähnen, dass der Umlaut “ü” nicht im Standard-Zeichensatz von XNA enthalten ist. Wie man den Zeichensatz erweitert kann man hier nachlesen.

Rechtsbündig

Die Augangssituation ist gleich wie im ersten Beispiel, jedoch brauchen wir natürlich die rechte Begrenzung des Textes (vom linken Rand aus gemessen).

//SpriteBatch spriteBatch;
SpriteFont font;
Color fontColor;
string text = "Rechtbündig: Ist auch nicht schwer!";
int yPos;
int xPos;

Wir wissen bereits, dass in XNA immer die Linke obere Ecke angegeben werden muss. Den Abstand von oben haben wir ja, aber um auf den Linken Rand des Textes schließen zu können, müssen wir wissen, wie lang der Text später (in Pixel gemessen) sein wird. Dafür müssen eine neue Funktion von XNA kennenlernen:

Vector2 size = font.MeasureString(text);

Diese Funktion von SpriteFont gibt uns die größe des Textes als Vector2, mit der Breite als X und der höhe als Y. Nun haben wir also die Breite des Textes und können somit die Position ausrechnen und den Text auch gleich zeichnen.

Vector2 position = new Vector2(xPos - size.X, yPos);
spriteBatch.DrawString(font, text, position, fontColor);

Zentriert

Die letzte Etappe ist, den Text genau mittig zu platzieren, sodass die Mitte des Textes sich an einer bestimmten wagrechten Position befindet. diese wagrechte Position ist wieder einmal unsere xPos.

SpriteBatch spriteBatch;
SpriteFont font;
Color fontColor;
string text = "Zentriert: Die goldene Mitte!";
int yPos;
int xPos;

Der unterschied zu Rechtsbündig ist nur der, dass wir nicht mehr die ganze Breite von der Horizontalen abziehen, sondern nur mehr die Hälfte.

Vector2 size = font.MeasureString(text);
Vector2 position = new Vector2(xPos - size.X / 2, yPos);
spriteBatch.DrawString(font, text, position, fontColor);

Das war auch schon der ganze Zauber.

Schlusswort

Das ganze lässt sich natürlich auch nochmal in der Senkrechte machen, was ich aber nicht näher erläutere, da der Code im Prinzip gleich ist, und nur x und y vertauscht werden müssen. Die letzte Ausrichtungsart wäre noch der Blocksatz. Ich denke allerdings, dass man dafür entweder ziemlich viel Code braucht (String in einzelne Wörter aufteilen und diese dann in richtigen Abständen Zeichnen) oder unschöne ergebnisse kriegt (einfach zwischen die Wörter doppelte Leerzeichen setzen oder noch einfacher den Text auf die breite skalieren). Deshalb wird das hier nicht eingehend erläutern. Zum Abschluss wünsche ich euch auch noch viel Spaß mit diesem neuen Wissen und Erfolg bei zukünftigen Projekten.