Pixel

setzer

.de
Aktuellste Kommentare:
  • Stefan schrieb:
    Schöner Beitrag und nützliche Links, vielen Dank dafür!...
    [lesen]
  • Pixelsetzer schrieb:
    Hi Marius, danke für den Hinweis. Ich hab das gar nicht gesehen, dass die Zeichen unformatiert wurden. Ich habe es gleich mal geändert. ;-) Wegen...
    [lesen]
  • Marius Gerum schrieb:
    Sehr schön, gefällt mir gut :-) OOP ftw ;-) Marius...
    [lesen]
  • Marius Gerum schrieb:
    upps, im letzten Kommentar ... wusste nicht dass HTML funzt, ich meinte > und < ^^...
    [lesen]
  • Marius Gerum schrieb:
    Hi, schöner Artikel und gut strukturierter Code. 2 Dinge würden mir an dieser Stelle vielleicht noch fehlen, und zwar das fertige Applet zum sofo...
    [lesen]

Einfache Kollisionserkennung in Processing

Da man mit Processing recht schnell und einfach “ansehnliche” Ergebnisse erzielen kann, habe ich mir gedacht, dass Processing die perfekte Umgebung ist, um eine einfache Kollisionserkennung zu programmieren.

An dieser Stelle möchte ich darauf hinweisen, dass ich mich vorher noch nie mit der Programmierung einer Kollisionserkennung beschäftigt hatte und dies ein kurz Projekt war. Deshalb ist es auch nicht sehr komplex und evtl. auch nicht die beste Lösung, die man erreichen kann.

Kollisionserkennung in Processing

Sollte jemand etwas interessantes zu dem Thema finden (auf Processing bezogen), kann er mir gerne ein Link dazu, in einem Kommentar hinterlassen. zwinkern.png

Mein Beispielprogramm umfasst einen Block, der als “Spieler” fungiert und mit den Tasten W A S und D bewegt werden kann. Zusätzlich gibt es einen weiteren Block, der als Mauer dient. Berührt der Spieler-Klotz die Mauer, wird er gebremst und rot eingefärbt.

Dazu habe ich erst mal zwei Klassen geschrieben. Einmal die Klasse Player und einmal die Klasse Wall.

Das System hinter meiner Kollisionserkennung ist simpel:

Ich prüfe jedes mal die Koordinaten ab, ob sich der Player oder die Wall überschneiden. Sollte dies der Fall sein, wird der Player wieder an die vorherige Position gesetzt und die Farbe von grau nach rot gewechselt. Je nach dem, welche Taste gedrückt wird, wird die Seite abgefragt, ob dort der “Weg frei ist”.

Quelltext zur Demo

Falls jemand an der “Demo” Interesse hat, kann sich gerne den Quelltext dazu anschauen, allerdings ist dieser unkommentiert. zwinkern.png

Ich habe das Programm in vier verschiedene Tabs aufgeteilt:

Tab: GameTest

Player ego;
Wall mainWall;
 
void setup() {
  size(600, 600);
  frameRate(24);
  background(255);
 
  ego = new Player(width/2, height/2);
  mainWall = new Wall(150, 500, width/2, 50);
}
 
void draw() {
  background(0);
 
  playerControl();
 
  ego.drawPlayer();
  mainWall.drawWall();
}

Tab: Player

class Player {
  int posX, posY;
  int dimX, dimY;
  float winkel;
 
  int rot, gruen, blau, trans;
 
  Player(int posX, int posY) {
    this.posX = posX;
    this.posY = posY;
 
    this.winkel = 0;
 
    this.dimX = 100;
    this.dimY = 100;
 
    this.rot = 255;
    this.gruen = 255;
    this.blau = 255;
    this.trans = 255;
  }  
 
  /**
    * Bewegungs-Funktion
    */
  void moveLeft(int step) {
    this.posX = this.posX - step;
  }
 
  void moveRight(int step) {
    this.posX = this.posX + step;
  }
 
  void moveUp(int step) {
    this.posY = this.posY - step;
  }
 
  void moveDown(int step) {
    this.posY = this.posY + step;
  }
 
  void turnLeft(float winkel) {
    this.winkel = this.winkel - radians(winkel);
  }
 
  void turnRight(float winkel) {
    this.winkel = this.winkel + radians(winkel);
  }
 
  /**
    * Darstellung
    */
  void setFarbe(int rot, int gruen, int blau, int trans) {
    this.rot = rot;
    this.gruen = gruen;
    this.blau = blau;
    this.trans = trans;
  }
 
  /**
    * Gets
    */
  int getPosX() {
    return this.posX;
  }  
 
  int getPosY() {
    return this.posY;
  }
 
  int getDimX() {
    return this.dimX;
  }
 
  int getDimY() {
    return this.dimY;
  }
 
  /**
    *
    */
  void drawPlayer() {
    fill(rot, gruen, blau, trans);
     pushMatrix();
      rotate(winkel);
      rect(posX, posY, dimX, dimY);
     popMatrix();
  }
}

Tab: PlayerControl

void playerControl() {
  int step;
 
  step = 10;
 
  if(keyPressed) {
    if(key == 'W' || key == 'w') {
      playerColision('w', step);
    } else if(key == 'S' || key == 's') {
      playerColision('s', step);
    } else if(key == 'A' || key == 'a') {
      playerColision('a', step);
    } else if(key == 'D' || key == 'd') {
      playerColision('d', step);
    }
  }
}
 
void playerColision(char direction, int step) {
  playerMove(direction, step);
  if((ego.getPosY()+ego.getDimY() > mainWall.getPosY()) && (ego.getPosX()+ego.getDimX() > mainWall.getPosX()) && (ego.getPosY() < (mainWall.getPosY()+mainWall.getDimY())) && (ego.getPosX() < mainWall.getPosX()+mainWall.getDimX())) {
    playerCorection(direction, step);
    ego.setFarbe(255, 0, 0, 255);
  } else {
    ego.setFarbe(255, 255, 255, 255);
  }
}
 
void playerCorection(char direction, int step) {
  switch(direction) {
    case 'w': ego.moveDown(step);
              break;
    case 's': ego.moveUp(step);
              break;
    case 'a': ego.moveRight(step);
              break;
    case 'd': ego.moveLeft(step);
              break;
  }
}  
 
void playerMove(char direction, int step) {
  switch(direction) {
    case 's': ego.moveDown(step);
              break;
    case 'w': ego.moveUp(step);
              break;
    case 'd': ego.moveRight(step);
              break;
    case 'a': ego.moveLeft(step);
              break;
  }
}

Tab: Wall

class Wall {
  int dimX, dimY;
  int posX, posY;
  int rot, gruen, blau, trans;
 
  Wall(int posX, int posY, int dimX, int dimY) {
    this.dimX = dimX;
    this.dimY = dimY;
    this.posX = posX;
    this.posY = posY;
 
    this.rot = 255;
    this.gruen = 255;
    this.blau = 255;
    this.trans = 255;
  }
 
  /**
    * Gets
    */
  int getPosX() {
    return this.posX;
  }  
 
  int getPosY() {
    return this.posY;
  }
 
  int getDimX() {
    return this.dimX;
  }
 
  int getDimY() {
    return this.dimY;
  }
  /**
    * Darstellung
    */
  void setFarbe(int rot, int gruen, int blau, int trans) {
    this.rot = rot;
    this.gruen = gruen;
    this.blau = blau;
    this.trans = trans;
  }  
 
  void drawWall() {
    fill(rot, gruen, blau, trans);
    pushMatrix();
      rect(posX, posY, dimX, dimY);
    popMatrix();
  }
}
  • Marius Gerum schrieb:
    Hi, schöner Artikel und gut strukturierter Code. 2 Dinge würden mir an dieser Stelle vielleicht noch fehlen, und zwar das fertige Applet zum sofort-ansehen, und eventuell den Projektordner gepackt als .rar oder .zip zum Download. Achja, für die Anzeige des Codes musst du die ">" und "<" nicht mit > bzw < schreiben zwinkern.png Ansonsten jedoch wirklich nice freuen.png Marius
    30. Juni 2011, 00:04  

  • Marius Gerum schrieb:
    upps, im letzten Kommentar ... wusste nicht dass HTML funzt, ich meinte &gt; und &lt; ^^
    30. Juni 2011, 00:06  

  • Pixelsetzer schrieb:
    Hi Marius, danke für den Hinweis. Ich hab das gar nicht gesehen, dass die Zeichen unformatiert wurden. Ich habe es gleich mal geändert. zwinkern.png Wegen Applet und Download muss ich mal gucken ob ich das mache.
    30. Juni 2011, 15:14  

Kommentar schreiben:

Mit der Eingabe des Sicherheits-Codes stimmen Sie der Speicherung ihrer IP-Adresse und ihrer anderen angegebenen Daten zu.
Die IP-Adresse und ihre E-Mail wird nur für die Spam-Abwehr benötigt.