Text in Greenfoot 3 anzeigen (Punktestand, Sieg-Meldungen etc.)

Uns interessieren hier nur Texte, die direkt auf der Welt (also auf dem Spielfeld) angezeigt werden. Wenn wir eine Konsolenausgabe mit

System.out.println("Ein Text") // oder
System.out.println("Ein Text, " + this.einAttribut + "!")

erzeugen, öffnet sich ein neues Fenster, in dem dieser Text unformatiert steht. Das nervt bei einem Spiel, deshalb betrachten wir es nicht weiter.

Die World-Methode showText(…)

Wir können direkt auf die Welt einen (relativ hässlichen) Text packen, indem wir z.B. in der Klasse Spielfigur schreiben:

this.getWorld().showText("Ein Text", 100, 200)

Mit this.getWorld() holen wir das Objekt der Welt-Klasse, auf dem sich die Spielfigur gerade befindet (wenn wir diese Methode also in der Weltklasse aufrufen, genügt this.showText(…)). Die beiden Werte geben die x- und y-Position an. Links oben ist die Position (0;0). Es ist zu beachten, dass diese Werte immer das Zentrum des Textes angeben. Wenn ein Text also auf der Position 0,0 ausgegeben wird, werden 75% davon nicht sichtbar sein.

Screenshot: showText(…)-Methode in Greenfoot 3

Die x- und y-Angabe in der showText(…)-Methode gibt immer das Zentrum des Textes an.

Wenn der Text direkt über einer Spielfigur „Schneemann“ stehen soll, so könnte man in der act()-Methode des Schneemanns schreiben:

this.getWorld().showText("Text", this.getX(), this.getY()-50)

Wir benutzen für den Text die x-Position des Schneemanns (this.getX()) und die y-Position abzüglich 50 Pixeln. Wenn der Schneemann also den y-Wert 200 hat, wird der Text auf der y-Position 150 angezeigt – 50 Pixel über der Mitte des Schneemanns.

GreenfootImage zur Textausgabe benutzen

Dieses Vorgehen ist etwas komplizierter, dafür wesentlich flexibler und eleganter. Die Idee besteht darin, ein Actor-Objekt zu erzeugen, auf das wir ein Bild mit dem Text setzen.

Wir legen also eine Actor-Unterklasse an, die wir für die Textausgabe benutzen, z.B. Punkteanzeige:

Screenshot: Actor-Unterklasse 'Punkteanzeige' in Greenfoot 3

Actor-Unterklasse ‚Punkteanzeige‘ in Greenfoot 3

Dieses Objekt setzen wir jetzt im Konstruktor der Welt-Klasse auf die Welt mit

this.addObject(new Punkteanzeige(),100,100)

(Wie das genau funktioniert, können Sie hier nachlesen: Tutorial: Objekte einer Welt hinzufügen)

Screenshot: Konstruktor der Weltklasse, fügt Punkteanzeige-Objekt hinzu

Neues Objekt der Klasse Punkteanzeige der Welt hinzufügen

Einfache drawString(…)-Methode

In der Klasse Punkteanzeige definieren wir ein Attribut vom Typ GreenfootImage. Also schreiben wir unter Fields:

private GreenfootImage bild = new GreenfootImage(100,50)

Das brauchen wir, um den Text darzustellen. Wir geben nur die Größe des Bildes an, zum Beispiel 100 Pixel breit und 50 Pixel hoch.

Screenshot: GreenfootImage - Breite / Höhe angeben

Wir definieren ein GreenfootImage mit den Ausmaßen 100×50

Welche weiteren Möglichkeiten Sie außer der hier genannten haben, finden Sie in der Greenfoot-API -> GreenfootImage, Abschnitt „Constructor Summary“.

Im Konstruktor der Klasse Punkteanzeige (ins Feld „Constructors“ klicken und Taste c drücken, um einen Konstruktor anzulegen) schreiben wir

this.setImage(bild)
this.getImage().drawString("0 Punkte",0,10)

Wir packen unser bild auf die Punkteanzeige und schreiben den Text „0 Punkte“ auf die Position (0;10).

Einfacher Konstruktor für eine Klasse Punkteanzeige

Einfacher Konstruktor für eine Klasse Punkteanzeige

(0;0) kennzeichnet die linke untere Ecke des Textes, wenn Sie also bei drawString die Koordinaten 0,0 angeben, werden Sie nichts sehen:

Koordinaten bei der Textdarstellung auf GreenfootImages

drawString(…) benutzt in Greenfoot 3 immer die linke untere Ecke des Textes als Koordinatenursprung

Nun müssen wir den Punktestand nur noch aktualisieren (wie man Punkte in Greenfoot 3 zählt: Punktezähler in Greenfoot 3 bauen). Dazu erstellen wir eine Methode punktestandAktualisieren(…), der wir als Parameter den aktuellen Punktestand übergeben:

public void punktestandAktualisieren(int punktestand)
    this.getImage().clear()
    this.getImage().drawString(punktestand + " Punkte", 0, 10)

Wenn wir diese Methode aufrufen, wird die bisherige Aufschrift auf dem Bild gelöscht, anschließend der Punktestand aktualisiert.

Beachten Sie, dass der Parameter punktestand ein int-Wert ist (also eine Ganzzahl). Die Methode drawString möchte aber gerne einen String. Entweder Sie verknüpfen den int mit einem String (wie im Beispiel oben), dann wird ein String daraus; wenn Sie nur die Zahl ausgeben möchten, müssen Sie aus dem int einen String machen, so:

this.getImage().drawString(String.valueOf(punktestand), 0, 10)

Schriftgröße, Schriftart, Schriftfarbe verändern

Oben haben wir im Konstruktor der Klasse Punkteanzeige lediglich das (noch leere) Bild zugeordnet und den Text „0 Punkte“ draufgeschrieben. Wir haben verschiedene Möglichkeiten, das Ding zu stylen:

this.getImage().setColor(Color.RED)

ändert die Farbe von allem, was wir anschließend mit drawString(…) auf das Bild zeichnen. Sie können die Farben BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, YELLOW verwenden oder noch tiefer in die Java-Klasse Color eintauchen.

this.getImage().setFont(new Font("Verdana",Font.PLAIN,15))

verändert die Schriftart. Wählen Sie als ersten Parameter eine Schriftart aus (im Beispiel Verdana), dann einen Stil (es gibt Font.PLAIN für normale Schrift, Font.BOLD für fett und Font.ITALIC für kursiv), außerdem die Schriftgröße in Pixeln (im Beispiel 10).

ACHTUNG: Um die Klasse Font zu benutzen, müssen Sie bei den Importen oben in der Klasse java.awt.Color ändern in java.awt.* (oder einen neuen Import java.awt.Font hinzufügen).

Screenshot Greenfoot 3: Klasse Font importieren

Um die Klasse Font zu benutzen, müssen wir sie oben in der Klasse importieren

this.getImage().drawRect(0,0,bild.getWidth()-1,bild.getHeight()-1)

zeichnet einen Rahmen um Ihren Punktezähler. 0,0 bezeichnet die x- und y-Startposition, dann kommen die Breite und die Höhe des Rechtecks. In diesem Fall haben wir die Breite und Höhe des Bildes genommen, jeweils abzüglich 1 Pixel (da wir sonst rechts und links den Rahmen nicht sehen).

Die ganze Klasse sieht dann also so aus:

Klasse Punkteanzeige in Greenfoot 3

So sieht die fertige Klasse Punkteanzeige aus

PDF erzeugen