Willy 02

In unserem zweiten Beispiel bewegen wir unseren Willy mit den Pfeiltasten über das Spielfeld. Momentan hüpft er eher, als daß er läuft, aber das ändern wir in weiteren Beispielen noch. Die Steuerung der Spielfigur erfolgt mit den Pfeiltasten.

Erläuterungen

Auch hier habe ich zuerst ein paar Konstanten deklariert. Der xOffset ist das, was abgezogen werden muß, damit Willy genau in der Mitte eines Tiles steht. Rechnerisch wäre das eigenlich die Weite des Bildchens von Willy geteilt durch vier, also 16, aber 17 abgezogen sah einfach besser aus. Um das zu kontrollieren, habe ich auch das Hilfsraster aufgezogen, daß die Spielfläche in 32 Pixel weite und hohe Kacheln unterteilt.

Willys Bilder kennen noch weitere Richtungen, nämlich Nordost, Nordwest, Südost und Südwest. Die besetzen die ungeraden Dateinummern. Wir brauchen sie momentan noch nicht, daher sind unsere Richtungen mit den geraden Zahlen belegt.

Der grüne Rasenboden ist ein größeres Tile aus der Bibliothek, gekachelt ist es auch größer als unsere Spielfläche. Das stört uns aber nicht, Processing schneidet den nicht sichtbaren Teil einfach ab.

Zu Beginn richten wir unseren Helden nach Süden aus und laden dann alle Bilder. Das Laden von Bildern ist ein zeitaufwendiger Prozess und sollte daher immer in der setup()-Funktion erfolgen.

In der draw()-Funktion zeichnen wir zuerst den Hintergrund. Wie schon erwähnt, habe ich darüber zur Veranschaulichung das Raster gelegt, das trägt aber nichts zum eigentlichen Spielverlauf bei und kann daher weggelassen werden. Solche Tests sind aber in der Entwicklungsphase durchaus hilfreich.

Das Zeichnen von Willy ist dank der mächtigen Image-Methoden sehr einfach. Wir geben einfach die Richtung und den Ort an, wo wir Willy sehen möchten.

Processing besitzt sehr mächtige Event-Methoden, mit denen auf Benutzereingabe reagiert werden kann. Um die draw()-Schleife nicht zu stören, werden diese außerhalb definiert und kommen in eine Warteschlange bis die aktuelle Schleife fertig durchgelaufen ist. Die in unserer keyPressed()-Methode vorgenommenen Änderungen werden also erst beim nächsten Schleifendurchlauf wirksam. Dadurch wird eine Konsistenz erreicht, die man sonst erst mühsam selber programmieren müßte.

Processing besitzt einige Konstanten für Spezialtasten, wie in unserem Beispiel die Pfeiltasten. Damit die allerdings wirksam aufgerufen werden können, müssen sie in einer if (key == CODED)-Abfrage geklammert werden. Warum, ist mir nicht klar, aber ohne dies funktioniert es nicht.

Quellcode

int numFrames = 8;
int tileSize = 32;
int xOffset = -17;  // eigentlich:  - hero[dir].width/4 = -16
int south = 0;
int west  = 2;
int north = 4;
int east  = 6;
int dir;
int x, y;
int row, col;
PImage[] hero = new PImage[numFrames];
PImage greenFloor;

void setup() {
  size(15*tileSize, 10*tileSize);
  row = width/tileSize;
  col = height/tileSize;
  frameRate(30);
  dir = south;  // Anfangsrichtung
  x = row/2;    // Startposition etwa in der Mitte der Welt
  y = col/2 - 1;
  for (int i = 0; i < numFrames; i++) {
    String imageName = "willy_steht" + nf(i, 4) + ".png";
    hero[i] = loadImage(imageName);
  }
  greenFloor = loadImage("grasstile.png");
}

void draw() {
  /* Hintergrund zeichnen */
  background(102, 204, 51);
  for (int x = 0; x < row; x+=8) {
    for (int y = 0; y < col; y+=6) {
      image(greenFloor, x*tileSize, y*tileSize);
    }
  }
  /* Nur zur Veranschaulichung */
  for (int i = tileSize; i < width; i+=tileSize) {
    for (int j = 0; j < height; j++) {
      point(i, j);
    }
  }
  for (int i = tileSize; i < height; i+=tileSize) {
    for (int j = 0; j < width; j++) {
      point(j, i);
    }
  }
  /* Ende Raster *

  /* Jetz kommt Willy */
  image(hero[dir], x*tileSize + xOffset, y*tileSize);
}

void keyPressed() {
  if(key == CODED) {
    if (keyCode == UP) {
      dir = north;
      if (y > 0) {
        y--;
      }
    }
    else if (keyCode == RIGHT) {
      dir = east;
      if (x < (row - 1)) {
        x++;
      }
    }
    else if (keyCode == DOWN) {
      dir = south;
      if (y < (col - 2)) {
        y++;
      }
    }
    else if (keyCode == LEFT) {
      dir = west;
      if (x > 0) {
        x--;
      }
    }
  }
}

Jetzt wird es langsam Zeit, daß wir Willy in ein Objekt kapseln, um den Code besser zu strukturieren. Das machen wir im nächsten Beispiel.

Zurück zu Willy 01.



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


Suche

Werkzeuge