Willy 01

Hiermit möchte ich eine kleine Serie beginnen, die in die Grundzüge der Spieleprogrammierung einführt. Als Programmierumgebung habe ich Processing gewählt, da es plattformunabhängig ist und den Programmierer durch den hohen Grad der Abstraktion von vielen nervenden Kleinigkeiten befreit.

Soweit nicht anders erwähnt, sind die Graphiken der frei nutzbaren Sammlung Reiner’s Tilesets entnommen (vgl. auch hier). Unser Held Willy ist natürlich auch von dort. Wenn Ihr das Beispiel nachprogrammieren wollt, müßt Ihr erst auf den Link klicken und Euch Willy herunterladen.

Die Bilder

Beginnen wir also erst einmal damit, wie man eine Graphik bearbeitet, in das Programm lädt und animiert:

Die einzelnen Bilder der Animation sind im Original 96x96 Pixel groß, ich habe sie mit Hilfe einer Bildverarbeitungssoftware erst einmal an allen vier Rändern um 16 Pixel abgeschnitten um 64x64 Pixel große Bilder zu erhalten. Außerdem liegen sie im Windowsformat als BMP-Dateien vor, sie mußten also von mir auch noch in das PNG-Format konvertiert werden. Dabei muß man darauf achten, daß man die Transparenz in einem separaten Alpha-Kanal erzeugt, sonst funktioniert sie in Processing nicht. Und die Dateinamen enthalten Leerzeichen und Umlaute, auch dies sollte geändert werden, damit das Programm überall läuft.

Und nicht vergessen: Damit Processing die Bilder auch findet, müssen sie im data-Folder des Programms liegen. Das erreicht Ihr am Einfachsten, indem Ihr die Bilder mit der Maus in das Sketch-Fenster, indem Ihr Euren Programmcode schreibt, schiebt. Falls noch kein data-Ordner vorhanden ist, legt ihn Processing dann automatisch an.

Der Code

int numFrames = 8;
int tileSize = 64;
PImage[] hero = new PImage[numFrames];

void setup() {
  size(3*tileSize, 3*tileSize);
  frameRate(15);
  for (int i = 0; i < numFrames; i++) {
    String imageName = "willy_laeuft_e" + nf(i, 4) + ".png";
    hero[i] = loadImage(imageName);
  }
}

void draw() {
  background(102, 204, 51);
  int frame = (frameCount % numFrames);
  image(hero[frame], width/2-tileSize/2, height/2-tileSize/2);
}

Der Code ist von erfrischender Kürze (dank Processing). Zuerst einmal habe ich einige globale Konstanten und Variablen deklariert. Die Animation besteht aus 8 Bildern mit den Namen willy_laeuft_e0000.png bis willy_laeuft_e0007.png, daher ist die Anzahl der Frames (numFrames) = 8. Und wie oben schon erwähnt, beträgt die Größe der Bilder 64x64 Pixel, das ist in diesem Programm dann auch die Größe der Kacheln (tileSize).

Nun noch ein Image-Array erzeugen, das die Einzelbilder der Animation aufnehmen soll und schon ist der Deklarationsteil erledigt.

Im setup() legen wir erst einmal die Größe des Applets fest und damit Willy auch läuft und nicht rennt, reduzieren wir die Framerate auf 15 (ich werde in einem späteren Beitrag noch zeigen, wie man die Animationsgeschwindigkeit der einzelnen Sprites von der Framerate trennen kann, aber hier genügt uns das erst einmal).

In einer Schleife laden wir dann die einzelnen Bilder in unser Image-Array. Die Processing-Funktion nf() füllt eine Ziffer mit führenden Nullen auf (in unserem Fall vier, aus 1 wird so 0001 usw.).

In der draw()-Schleife erzeugen wir zuerst einmal einen grünen Hintergrund. frameCount wird von Processing bei jedem Durchlauf der Schleife um eins hochgezählt, daher nutzen wir den Modulo-Operator (%) um die Schleifenvariable frame wieder auf Null zurückzusetzen, sobald sie größer als Sieben geworden ist.

Und schon läuft unser Willy. Wenn auch noch auf der Stelle.

Hier geht es zum zweiten Teil



Sie sind hier: Start → Programmierung → Creative Coding → Processing → willy01.txt


Suche

Werkzeuge