Processing: Programmieren für Anfänger
Seite 5: Spieltrieb
Die folgenden zwei Programme sind deutlich umfangreicher als die bisher besprochenen. Wer sie im Detail verstehen will, muss in den Quellcode schauen und dort die Kommentare lesen – nur die wichtigsten Aspekte können hier zur Sprache kommen.
Solopong ist eine Art Squash für eine Person, das mit der Maus gespielt wird. Intern baut das Programm auf die gleiche Geometrie wie die Stern-Programme auf: So wie dort der Endpunkt eines Strahls aus dessen Richtung und Länge berechnet wurde, ergibt sich bei Solopong die neue Position des Balls aus dessen Flugrichtung und Geschwindigkeit.
Die Anweisung frameRate(30) stellt sicher, dass Processing die Funktion draw() höchstens dreißig Mal pro Sekunde ausführt – damit ist der Ball auch auf schnellen Rechnern noch zu kriegen. Dank Double Buffering bei der Anzeige bringt die Laufzeitumgebung selbst solche Actionspiele flimmerfrei auf den Bildschirm.
Um die errungene Punktzahl ins Programmfenster schreiben zu können, muss man zuerst einen Font importieren. Der Dialog Tools/Schrift erstellen bietet dazu alle auf dem System installierten Schriftarten an. Das Vorschaufenster zeigt den Font in der gewählten Schriftgröße an. Auswahlboxen legen fest, ob die Buchstaben pixelig oder mit Anti-Aliasing erscheinen sollen, Characters/All Characters holt auch die Umlaute mit ins Boot.
Hinter den Kulissen speichert Processing die Buchstaben der Schrift als Pixel-Texturen in einer Datei, deren Namen dem Muster Schriftname-Größe.vwl folgt. Diese Schrift steckt in einem Unterverzeichnis namens data, das am gleichen Ort abgelegt wird wie die Codedatei. Die Schrift wandert ins Programm über die Zeilen
PFont schrift = loadFont("Georgia-14.vlw");
textFont(schrift);
text("Text", x, y);
Der Text zwischen den Anführungszeichen erscheint anschließend im Programmfenster. Die Grundlinie der Textzeile liegt auf Höhe y, der erste Buchstabe beginnt bei Koordinate x. Die Schriftfarbe gilt unter Processing als Füllung, lässt sich also über fill() festlegen.
Ein Druck auf die Taste "n" ("N" geht auch) startet bei Solopong ein neues Spiel. Im Code passiert die Tastaturabfrage innerhalb von draw() über die Zeilen
if(keyPressed) {
if (key == 'n' || key == 'N') {
newGame();
}
Das doppelte Gleichheitszeichen prüft, ob das an die Taste gebundene Zeichen der Erwartung entspricht. Die beiden senkrechten Striche bedeuten "oder": Ist eine der Bedingungen erfüllt, wirft die Funktion newGame() den nächsten Ball ein.
Verwirrspiel
Das Programm Schiebepuzzle importiert ein Pixelbild, teilt es in 25 Quadrate auf und wirft eines davon weg. Dann mischt es die Bildquadrate gründlich durch: Ein zufällig ausgewähltes Nachbarquadrat schließt die Lücke und reißt eine neue auf, in das der nächste Stein rutscht und so fort. Nach tausend Verschiebe-Aktionen bekommt schließlich der Spieler ein konfuses Puzzle zu Gesicht und kann dann versuchen, anhand einer verkleinerten Abbildung das Bild wieder in Ordnung zu bringen.
Wem das Beispielmotiv nicht gefällt, der kann über Sketch/Datei hinzufügen eine andere Bilddatei vom Typ GIF, JPG, TGA oder PNG aus dem eigenen Dateibestand auswählen, muss anschließend allerdings eventuell die Kantenlänge eines Puzzleteils und die Anzahl der Quadrate an die andere Bildgröße anpassen. Eine Kopie des importierten Bilds legt Processing im bereits bekannten Unterverzeichnis data an. Von dort aus lädt man sie ins Programm über die Zeilen
PImage bild;
...
bild = loadImage("Bilddatei.jpg");
Für den Bildtyp PImage stellt Processing eine Reihe nützlicher Funktionen zur Verfügung. So kopiert bild.get(x, y, b, h) einen Teil der Pixel in ein neues PImage. Wie beim Rechteck-Befehl rect() bestimmen auch hier die ersten beiden Parameter x und y die Koordinaten der rechten oberen Ecke, die beiden letzten legen Breite und Höhe des Ausschnitts fest. Mit zwei ineinander geschachtelten for-Schleifen zerhackt Verschiebepuzzle das Ursprungsbild in handliche Quadrate, die es im zweidimensionalen PImage-Array namens bilder unterbringt. Ein Array ist so etwas wie eine Liste, ein zweidimensionales Array funktioniert wie eine Tabelle: Zum Verschieben der Quadrate muss man ab jetzt nur noch mit Zeilen- und Spalten-Indizes hantieren und kann Pixel-Koordinaten komplett vergessen. Anschließend schickt bilder[LEERX][LEERY] = null jenes Bildquadrat ins Nirwana, das an der vorgesehenen Leerstelle hockt.
Zum Schluss von setup() legt der Befehl noLoop() fest, dass draw() nur ein einziges Mal automatisch aufgerufen wird. Anschließend harrt das Programm der Dinge, die da kommen. Für die Rettung vor endloser Langeweile sorgt keyPressed(). Ähnlich wie mousePressed() bei Stern_3 ruft Processing diese Funktion selbstständig auf, sobald der Anwender sich am Eingabegerät zu schaffen macht.
Ein Druck auf die Cursortaste mit dem Pfeil nach unten schließt die Lücke, indem das Programm das darüberliegende Quadrat herunterschiebt, die Cursortaste "nach links" bewegt das Quadrat rechts von der Lücke nach links. Die anderen Cursortasten sind nach dem gleichen Prinzip belegt:
if (key == CODED) {
if (keyCode == UP){
puzzleschritt(1);
...
} else if (key == 'v') {
verwirre();
}
Da den Cursortasten kein Buchstabe zugeordnet ist, identifiziert Processing diese über einen Code, was die zweite Fallunterscheidung nötig macht. Gewöhnliche Tasten wie "v" hingegen prüft man ohne Umschweife direkt auf ihren zugeordneten Buchstaben. Die eigentliche Bewegung der Bildquadrate erledigt die Funktion puzzleschritt(), die eine Zahl zwischen 1 und 4 als Richtungscode erwartet. Auch die Mischfunktion verwirre() greift auf puzzleschritt() zurück, als Parameter dient dabei jeweils eine Zufallszahl. Ist die Tastatureingabe ausreichend gewürdigt worden, weist der Befehl redraw() die Processing-Laufzeitumgebung an, einmal die Funktion draw() aufzurufen. Diese kommt im Schiebepuzzle mit zwei Zeilen aus und bringt über zwei selbst gestrickte Funktionen das Puzzle selbst und danach die Seitenleiste inklusive Spielanleitung und Vorlagenbild auf den Schirm.
