In der letzten Lektion haben wir uns um das gelbe und das orange Rechteck gekümmert:
Nun werden wir uns um die Hände kümmern und hier auch gleich beide Arten, also vertikal und horizontal, programmieren. Aber bevor wir damit beginnen, lasst uns erst nochmal darüber reden, wie wir das genau anstellen wollen.
Für unseren Zweck müssen wir zwei Sachen überprüfen. Als Erstes müssen wir feststellen, ob der Roboter in der Luft oder am Boden ist, und als zweites, welches Rechteck eine Kollision hat.
Wenn wir nun in der Luft sind und auf den Boden zurück fallen, wollen wir nicht, dass unsere Hände mit irgendetwas kollidieren. Darum geben wir vor, dass wir dabei keine ausgestreckten Hände haben, sie also gar nicht existieren. Dies gibt uns aber wieder ein Problem, wenn wir auf dem Boden sind und die Hände mit etwas Kollidieren. Daher müssen wir uns darum auch kümmern.
Wenn wir uns auf dem Boden befinden, die geduckte Haltung ist hier komplett außen vor, wollen wir, dass als Erstes überprüft wird, ob die Arme mit etwas Kollidieren. Danach soll der Körper überprüft werden. Je nach Höhe unserer Plattformen wird die Kollision angezeigt. So muss nicht nach einer Kollision des Körpers geschaut werden, wenn die Hände schon kollidieren.
Nun, da wir uns eine Strategie ausgelegt haben, können wir beginnen. Versucht dies auch zu verinnerlichen, während wir programmieren. Alles ergibt einen Sinn, wenn wir die Strategie verstehen.
Seitliche Kollisionserkennung
Wir gehen nun fast genauso vor wie bei der Erstellung der beiden großen Rechtecke.
Erstellen der Rechtecke
Um die Rechtecke zu erstellen, öffnen wir die Robot Klasse und fügen diese hinzu. Wir werden für die linke Hand rect3 und für die rechte rect4 verwenden.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public class Robot { //Variablen welche nur in einer Klasse benötigt werden, sollten Privat sein //So können nur die dazugehörigen Methoden diese ändern. final int JUMPSPEED = -15; final int MOVESPEED = 5; private int centerX = 100; private int centerY = 377; private boolean jumped = false; private boolean movingLeft = false; private boolean movingRight = false; private boolean ducked = false; private boolean readyToFire = true; private ArrayList projectiles = new ArrayList(); private static Background bg1 = StartingClass.getBg1(); private static Background bg2 = StartingClass.getBg2(); private int speedX = 0; private int speedY = 0; public static Rectangle rect = new Rectangle(0, 0, 0, 0); public static Rectangle rect2 = new Rectangle(0, 0, 0, 0); <span style="color: #ff0000">public static Rectangle rect3 = new Rectangle(0, 0, 0, 0); public static Rectangle rect4 = new Rectangle(0, 0, 0, 0);</span> |
Als Nächstes müssen wir die Position der Rechtecke immer wieder neu anpassen, wenn sich unser Roboter bewegt. Dazu fügen wir den folgenden Code zur update()-Methode hinzu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
public void update() { // Bewegt den Roboter oder passt den Hintergrund an. if (speedX < 0) { centerX += speedX; } if (speedX == 0 || speedX < 0) { bg1.setSpeedX(0); bg2.setSpeedX(0); } if (centerX <= 200 && speedX > 0) { centerX += speedX; } if (speedX > 0 && centerX > 200){ bg1.setSpeedX(-MOVESPEED/5); bg2.setSpeedX(-MOVESPEED/5); } // Update der Y Position centerY += speedY; // Hier wird das Springen kontrolliert if (jumped == true) { speedY += 1; } // Verhindert das unsere Spielfigur einen gewissen Punkt // in X Richtung überschreitet if (centerX + speedX <= 60) { // falls bei addieren von speedX centerX auf kleiner als 60 fällt, // ist speedX = 61 centerX = 61; } rect.setRect(centerX - 34, centerY - 63 , 68, 63); rect2.setRect(rect.getX(), rect.getY() + 63, 68, 64); <span style="color: #ff0000">rect3.setRect(rect.getX() - 26, rect.getY()+32, 26, 20); rect4.setRect(rect.getX() + 68, rect.getY()+32, 26, 20);</span> } |
Wer gerne möchte, kann die beiden Rechtecke noch zeichnen lassen, dies ist nicht zwingend erforderlich. Dazu gehen wir in die paint()-Methode der StartingClass Klasse.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@Override public void paint(Graphics g) { // TODO Auto-generated method stub g.drawImage(background, bg1.getBgX(), bg1.getBgY(), this); g.drawImage(background, bg2.getBgX(), bg2.getBgY(), this); paintTiles(g); ArrayList projectiles = robot.getProjectiles(); for (int i = 0; i < projectiles.size(); i++) { Projectile p = (Projectile) projectiles.get(i); g.setColor(Color.YELLOW); g.fillRect(p.getX(), p.getY(), 10, 5); } g.drawRect((int)robot.rect.getX(), (int)robot.rect.getY(), (int)robot.rect.getWidth(), (int)robot.rect.getHeight()); g.drawRect((int)robot.rect2.getX(), (int)robot.rect2.getY(), (int)robot.rect2.getWidth(), (int)robot.rect2.getHeight()); <span style="color: #ff0000"> g.drawRect((int)robot.rect3.getX(), (int)robot.rect3.getY(), (int)robot.rect3.getWidth(), (int)robot.rect3.getHeight()); g.drawRect((int)robot.rect4.getX(), (int)robot.rect4.getY(), (int)robot.rect4.getWidth(), (int)robot.rect4.getHeight());</span> g.drawImage(currentSprite, robot.getCenterX() - 61, robot.getCenterY() - 63, this); g.drawImage(hanim.getImage(), hb.getCenterX() - 48, hb.getCenterY() - 48, this); g.drawImage(hanim.getImage(), hb2.getCenterX() - 48, hb2.getCenterY() - 48, this); } |
Wann soll nach Kollisionen geschaut werden?
In der letzten Lektion haben wir in der update()-Methode der Robot Klasse folgendes Statement geschrieben:
if (true)
Damit wird immer und überall nach Kollisionen geschaut. Das ist aber natürlich so nicht richtig und auch nicht Sinn vom Programmieren. Wir wollen nur, dass das Programm in der näheren Umgebung des Roboters nach Kollisionen schaut. Dazu nehmen wir nur diese 25 Felder:
Nun müssen wir unsere Statements mit diesen 25 Feldern ersetzen. Dazu müssen wir alle tileX Werte dieser 25 Felder nehmen, die unter den roten Balken gehören und alle Werte von tileY, die innerhalb des gelben Balkens liegen.
Also werden wir nun noch ein rotes Rechteck für die Breite und ein gelbes Rechteck für die Höhe erstellen. Alle Felder, die nun innerhalb dieser Abmessung sind, werden auf Kollisionen geprüft.
Erstellen des roten und des gelben Rechtecks
Dazu müssen wir nur zwei Änderungen an der Robot Klasse vornehmen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
public class Robot { //Variablen, welche nur in einer Klasse benötigt werden, sollten private sein. //So können nur die dazugehörigen Methoden diese ändern. final int JUMPSPEED = -15; final int MOVESPEED = 5; private int centerX = 100; private int centerY = 377; private boolean jumped = false; private boolean movingLeft = false; private boolean movingRight = false; private boolean ducked = false; private boolean readyToFire = true; private ArrayList projectiles = new ArrayList(); private static Background bg1 = StartingClass.getBg1(); private static Background bg2 = StartingClass.getBg2(); private int speedX = 0; private int speedY = 0; public static Rectangle rect = new Rectangle(0, 0, 0, 0); public static Rectangle rect2 = new Rectangle(0, 0, 0, 0); public static Rectangle rect3 = new Rectangle(0, 0, 0, 0); public static Rectangle rect4 = new Rectangle(0, 0, 0, 0); <span style="color: #ff0000">public static Rectangle yellowRed = new Rectangle(0, 0, 0, 0);</span> public void update() { // Bewegt den Roboter oder passt den Hintergrund an. if (speedX < 0) { centerX += speedX; } if (speedX == 0 || speedX < 0) { bg1.setSpeedX(0); bg2.setSpeedX(0); } if (centerX <= 200 && speedX > 0) { centerX += speedX; } if (speedX > 0 && centerX > 200){ bg1.setSpeedX(-MOVESPEED/5); bg2.setSpeedX(-MOVESPEED/5); } // Update der Y-Position centerY += speedY; // Hier wird das Springen kontrolliert if (jumped == true) { speedY += 1; } // Verhindert, dass unsere Spielfigur einen gewissen Punkt // in X Richtung überschreitet. if (centerX + speedX <= 60) { // Falls beim Addieren von speedX centerX auf kleiner als 60 fällt, // ist speedX = 61. centerX = 61; } rect.setRect(centerX - 34, centerY - 63 , 68, 63); rect2.setRect(rect.getX(), rect.getY() + 63, 68, 64); rect3.setRect(rect.getX() - 26, rect.getY()+32, 26, 20); rect4.setRect(rect.getX() + 68, rect.getY()+32, 26, 20); <span style="color: #ff0000">yellowRed.setRect(centerX - 110, centerY - 110, 180, 180);</span> } |
Falls ihr dieses Rechteck nun auch ausgeben wollt, nehmt folgende Ergänzung an der paint()-Methode in der StartingClass Klasse vor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@Override public void paint(Graphics g) { // TODO Auto-generated method stub g.drawImage(background, bg1.getBgX(), bg1.getBgY(), this); g.drawImage(background, bg2.getBgX(), bg2.getBgY(), this); paintTiles(g); ArrayList projectiles = robot.getProjectiles(); for (int i = 0; i < projectiles.size(); i++) { Projectile p = (Projectile) projectiles.get(i); g.setColor(Color.YELLOW); g.fillRect(p.getX(), p.getY(), 10, 5); } g.drawRect((int)robot.rect.getX(), (int)robot.rect.getY(), (int)robot.rect.getWidth(), (int)robot.rect.getHeight()); g.drawRect((int)robot.rect2.getX(), (int)robot.rect2.getY(), (int)robot.rect2.getWidth(), (int)robot.rect2.getHeight()); g.drawRect((int)robot.rect3.getX(), (int)robot.rect3.getY(), (int)robot.rect3.getWidth(), (int)robot.rect3.getHeight()); g.drawRect((int)robot.rect4.getX(), (int)robot.rect4.getY(), (int)robot.rect4.getWidth(), (int)robot.rect4.getHeight()); <span style="color: #ff0000">g.drawRect((int)robot.yellowRed.getX(), (int)robot.yellowRed.getY(), (int)robot.yellowRed.getWidth(), (int)robot.yellowRed.getHeight());</span> g.drawImage(currentSprite, robot.getCenterX() - 61, robot.getCenterY() - 63, this); g.drawImage(hanim.getImage(), hb.getCenterX() - 48, hb.getCenterY() - 48, this); g.drawImage(hanim.getImage(), hb2.getCenterX() - 48, hb2.getCenterY() - 48, this); } |
Kollisionserkennung
Dazu müssen wir als Erstes die Tile Klasse öffnen. Mit dem Erstellen des roten und des gelben Rechtecks können wir nun den entsprechenden Code dem Programm hinzufügen. Dazu ändern wir den Konstrukteur wie folgt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
public Tile(int x, int y, int typeInt) { tileX = x * 40; tileY = y * 40; type = typeInt; r = new Rectangle(); if (type == 5) { tileImage = StartingClass.tiledirt; } else if (type == 8) { tileImage = StartingClass.tilegrassTop; } else if (type == 4) { tileImage = StartingClass.tilegrassLeft; } else if (type == 6) { tileImage = StartingClass.tilegrassRight; } else if (type == 2) { tileImage = StartingClass.tilegrassBot; } <span style="color: #ff0000">else{ type = 0; }</span> } |
Damit stellen wir sicher, dass die leeren Felder nicht mit dem Roboter kollidieren. Diese Änderung haben wir auch schon in der letzten Lektion vorgenommen.
Wenn wir das getan haben, müssen wir die update()-Methode anpassen. Die Fehler die entstehen, werden wir gleich korrigieren. Wir programmieren nun, dass nur unsere 25 Felder nach Kollisionen überprüft werden.
|
1 2 3 4 5 6 7 8 9 10 11 |
public void update() { // TODO Auto-generated method stub speedX = bg.getSpeedX() * 5; tileX += speedX; r.setBounds(tileX, tileY, 40, 40); <span style="color: #ff0000">if (r.intersects(Robot.yellowRed) && type != 0) { checkVerticalCollision(Robot.rect, Robot.rect2); checkSideCollision(Robot.rect3, Robot.rect4, Robot.footleft, Robot.footright); }</span> } |
Fehlerbehebung
Diese Änderungen haben nun zu einigen Fehlern in unserem Code geführt. Als Erstes fangen wir mit den footleft, footright Fehlern an.
Wir öffnen die Robot Klasse und erstellen zwei neue Variablen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
public class Robot { //Variablen, welche nur in einer Klasse benötigt werden, sollten private sein. //So können nur die dazugehörigen Methoden diese ändern. final int JUMPSPEED = -15; final int MOVESPEED = 5; private int centerX = 100; private int centerY = 377; private boolean jumped = false; private boolean movingLeft = false; private boolean movingRight = false; private boolean ducked = false; private boolean readyToFire = true; private ArrayList projectiles = new ArrayList(); private static Background bg1 = StartingClass.getBg1(); private static Background bg2 = StartingClass.getBg2(); private int speedX = 0; private int speedY = 0; public static Rectangle rect = new Rectangle(0, 0, 0, 0); public static Rectangle rect2 = new Rectangle(0, 0, 0, 0); public static Rectangle rect3 = new Rectangle(0, 0, 0, 0); public static Rectangle rect4 = new Rectangle(0, 0, 0, 0); public static Rectangle yellowRed = new Rectangle(0, 0, 0, 0); <span style="color: #ff0000">public static Rectangle footleft = new Rectangle(0,0,0,0); public static Rectangle footright = new Rectangle(0,0,0,0);</span> |
Nun gehen wir in die update()-Methode und fügen diese zwei neuen Rechtecke auch dort ein.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
public void update() { // Bewegt den Roboter oder passt den Hintergrund an. if (speedX < 0) { centerX += speedX; } if (speedX == 0 || speedX < 0) { bg1.setSpeedX(0); bg2.setSpeedX(0); } if (centerX <= 200 && speedX > 0) { centerX += speedX; } if (speedX > 0 && centerX > 200){ bg1.setSpeedX(-MOVESPEED/5); bg2.setSpeedX(-MOVESPEED/5); } // Update der Y-Position centerY += speedY; // Hier wird das Springen kontrolliert. if (jumped == true) { speedY += 1; } // Verhindert, dass unsere Spielfigur einen gewissen Punkt // in X-Richtung überschreitet. if (centerX + speedX <= 60) { // Falls beim Addieren von speedX centerX auf kleiner als 60 fällt, // ist speedX = 61. centerX = 61; } rect.setRect(centerX - 34, centerY - 63 , 68, 63); rect2.setRect(rect.getX(), rect.getY() + 63, 68, 64); rect3.setRect(rect.getX() - 26, rect.getY()+32, 26, 20); rect4.setRect(rect.getX() + 68, rect.getY()+32, 26, 20); yellowRed.setRect(centerX - 110, centerY - 110, 180, 180); <span style="color: #ff0000">footleft.setRect(centerX - 50, centerY + 20, 50, 15); footright.setRect(centerX, centerY + 20, 50, 15);</span> } |
Diese zwei Rechtecke sind für die seitlichen Kollisionen da. Wir benutzen sie, wenn unsere Felder niedriger als die Arme sind. Die Rechtecke sind ein wenig neben unseren Füßen platziert und stehen dadurch etwas raus.
Nun müssen wir unsere oben erwähnten zwei Methoden noch einfügen. Dazu öffnen wir die Tile Klasse und nehmen folgende Änderungen bzw. Ergänzungen vor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
public void checkVerticalCollision(Rectangle rtop, Rectangle rbot) { if (rtop.intersects(r)) { } if (rbot.intersects(r) && type == 8) { robot.setJumped(false); robot.setSpeedY(0); robot.setCenterY(tileY - 63); } } public void checkSideCollision(Rectangle rleft, Rectangle rright, Rectangle leftfoot, Rectangle rightfoot) { if (type != 5 && type != 2 && type != 0){ if (rleft.intersects(r)) { robot.setCenterX(tileX + 102); robot.setSpeedX(0); }else if (leftfoot.intersects(r)) { robot.setCenterX(tileX + 85); robot.setSpeedX(0); } if (rright.intersects(r)) { robot.setCenterX(tileX - 62); robot.setSpeedX(0); } else if (rightfoot.intersects(r)) { robot.setCenterX(tileX - 45); robot.setSpeedX(0); } } } |
Wie ihr sicherlich bemerkt habt, sind in diesen beiden Methoden zahlreiche checks/tests enthalten. Bitte schaut euch diesen Code sehr genau an, bis ihr jeden Teil auch versteht.
Letzte Änderungen
Nun müssen wir noch eine kleine Änderung in der Robot Klasse vornehmen. Da wir nun das Fallen in unserem Kollisionscode überprüfen, können wir den Teil der update()-Methode ändern, wo wir das Springen programmiert haben.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
public void update() { // Bewegt den Roboter oder passt den Hintergrund an. if (speedX < 0) { centerX += speedX; } if (speedX == 0 || speedX < 0) { bg1.setSpeedX(0); bg2.setSpeedX(0); } if (centerX <= 200 && speedX > 0) { centerX += speedX; } if (speedX > 0 && centerX > 200){ bg1.setSpeedX(-MOVESPEED/5); bg2.setSpeedX(-MOVESPEED/5); } // Update der Y-Position centerY += speedY; <span style="color: #ff0000"> // Hier wird das Springen kontrolliert. speedY += 1; if (speedY > 3){ jumped = true; }</span> // Verhindert, dass unsere Spielfigur einen gewissen Punkt // in X-Richtung überschreitet. if (centerX + speedX <= 60) { // Falls beim Addieren von speedX centerX auf kleiner als 60 fällt, // ist speedX = 61. centerX = 61; } rect.setRect(centerX - 34, centerY - 63 , 68, 63); rect2.setRect(rect.getX(), rect.getY() + 63, 68, 64); rect3.setRect(rect.getX() - 26, rect.getY()+32, 26, 20); rect4.setRect(rect.getX() + 68, rect.getY()+32, 26, 20); yellowRed.setRect(centerX - 110, centerY - 110, 180, 180); footleft.setRect(centerX - 50, centerY + 20, 50, 15); footright.setRect(centerX, centerY + 20, 50, 15); } |
Als Letzes können wir ohne Probleme noch unsere Rechtecke aus der paint()-Methode der StartingClass entfernen, da wir diese Anzeige nicht mehr benötigen.
Wenn ihr nun unser Spiel startet, habt ihr eine komplette Kollisionserkennung für den Roboter. Spielt ein wenig , aber passt auf die Schluchten auf. In der nächsten Lektion kümmern wir uns um unseren Heliboy.
Falls ihr Fragen habt, immer raus damit, ich helfe euch sehr gerne. Hinterlasst bitte einfach einen Kommentar.
Teilt diese Seite mit euren Freunden und besucht uns mal auf Facebook und auf Google+, dass würde dieser Seite wirklich weiterhelfen, danke sehr. Auch ein Klick auf die Werbung hilft dabei, diese Seite am Laufen zu halten.
Source Code
Für diejenigen unter euch, die hier einsteigen möchten, ohne den ganzen Code abtippen zu müssen, habe ich das Projekt exportiert. Mit der Importfunktion könnt ihr das Projekt bequem bei euch einfügen. Unter der Kategorie Eclipse und Java > Import und Export habe ich erklärt, was dafür zu tun ist.
Quelle: Original Anleitung auf englisch von Kilobolt Studios
Lektion 5 – Kollisionserkennung Teil 1 Lektion 7 – Kollisionserkennung Teil 3