Da wir nun alle ein grundlegendes Verständnis von Kollisionen haben, können wir damit beginnen, diese in unser Spiel zu implementieren. In den nächsten Lektionen werden wir einige der angesprochenen Methoden genauer diskutieren. Da dies aber zum Einstieg in die Programmierung dient, werden wir keine komplexen Systeme behandeln. Dies werden wir gegebenenfalls zu einem späteren Zeitpunkt tun.
Begrenzungsrechtecke
In der vorhergehenden Lektion haben wir umhüllende Konturen kennengelernt, welche zur Kollisionserkennung benutzt werden. Für unseren Roboter werden wir vier umhüllende Rechtecke benutzen, wie an der Grafik unten zu sehen ist.
Heute werden wir nur die vertikalen Kollisionen behandeln und dabei werden wir uns nur mit dem gelben und dem orangen Rechteck beschäftigen.
Java besitzt schon eine implementierte Klasse, welche mit Rechtecken arbeiten kann, daher werden wir diese importieren. Wir werden die oben gezeigten Rechtecke darauf überprüfen, ob sie mit den in Lektion 3 gezeichneten Feldern kollidieren.
Kollisionserkennung ist eigentlich nur die Überprüfung, ob sich zwei Objekte überlappen oder eben nicht. Des Weiteren wird die Position eines der beiden Objekte angepasst auf einen Punkt, wo es keine Überlappung mehr gibt. Und dies sollte geschehen, bevor das Spiel etwas Falsches darstellt.
Und wie zeichnen wir nun das gelbe und das orange Rechteck?
In unserer Roboter Klasse müssen wir die folgenden Variablen hinzufügen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public class Robot { //Variablen welche nur in einer Klasse benötigt werden, sollten private sein. //So können nur die zugehö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; <span style="color: #ff0000"> public static Rectangle rect = new Rectangle(0, 0, 0, 0); public static Rectangle rect2 = new Rectangle(0, 0, 0, 0);</span> |
Damit erzeugen wir zwei Objekte, hier Rechtecke, mit den Namen rect und rect2. Dazu nutzen wir (X, Y, Breite und Höhe) und wir müssen noch Rectangles (Rechtecke) importieren, am einfachsten mit STRG + Shift + O.
Als Nächstes gehen wir in die update()-Methode und fügen zwei Zeilen hinzu, welche bewirken, dass die Rechtecke beim Bewegen des Roboters immer wieder neu gezeichnet werden.
|
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 |
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 kleiner als 60 wird, // ist speedX = 61. centerX = 61; } <span style="color: #ff0000"> rect.setRect(centerX - 34, centerY - 63 , 68, 63); rect2.setRect(rect.getX(), rect.getY() + 63, 68, 64);</span> } |
Am Anfang ist es sinnvoller, die Rechtecke zeichnen zu lassen, damit wir uns alles vorstellen können. Daher gehen wir nun in die StartingClass Klasse und ändern die paint()-Methode wie folgt.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@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); } <span style="color: #ff0000"> 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> 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); } |
Damit haben wir diesen Stand:
Es kann sein, dass bei einigen von euch Fehler auftreten und ihr daher das Spiel nicht starten könnt. Einer kann in der Robot Klasse sein, hier ist noch ein Getter and Setter vom Ground vorhanden. Den können wir einfach löschen. Ein Weiterer könnte in der StartingClass Klasse sein. Hier nutzen wir einfach die Hilfe von Eclipse und das Problem ist gelöst. Damit müsste jeder das Beispiel sehen.
Kollisionserkennung
Nun, da wir diese beiden Rechtecke gezeichnet haben, müssen wir überprüfen, ob sie mit den von uns gezeichneten Feldern kollidieren. Dazu öffnen wir die Tile Klasse.
Wie bei unserem Roboter müssen unsere gezeichneten Felder auch ein Rechteck bekommen. Dies ist recht einfach. Dazu müssen wir nur ein Rechteck im Tile Konstrukteur zeichnen lassen und in der update()-Methode immer wieder neu anpassen.
1. Wir erstellen eine neue Variable. Das r repräsentiert die Grenzen unseres Rechtecks. Wenn wir nun ein neues Feld erstellen, wird diesem automatisch ein Rechteck zugewiesen.
|
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 |
public class Tile { private int tileX, tileY, speedX, type; public Image tileImage; private Robot robot = StartingClass.getRobot(); private Background bg = StartingClass.getBg1(); <span style="color: #ff0000"> private Rectangle r;</span> public Tile(int x, int y, int typeInt) { tileX = x * 40; tileY = y * 40; type = typeInt; <span style="color: #ff0000"> r = new Rectangle();</span> 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; } } |
2. Danach müssen wir eine neue Methode erstellen, welche nach Kollisionen Ausschau hält. Daher werden wir am Ende der Klasse die folgenden Methode erstellen, welche einfach zwei Rechtecke nimmt und ein entsprechende Reaktion ausgibt.
|
1 2 3 4 5 6 7 8 9 |
public void checkVerticalCollision(Rectangle rtop, Rectangle rbot){ if (rtop.intersects(r)){ System.out.println("Kollision oben"); } if (rbot.intersects(r)){ System.out.println("Kollision unten"); } } |
3. Nun müssen wir diese noch in der update()-Methode aufrufen und wir müssen die Rechtecke immer wieder neu anpassen.
|
1 2 3 4 5 6 7 8 9 10 |
public void update() { // TODO Auto-generated method stub speedX = bg.getSpeedX() * 5; tileX += speedX; <span style="color: #ff0000"> r.setBounds(tileX, tileY, 40, 40); if (true && type != 0){ checkVerticalCollision(Robot.rect, Robot.rect2); }</span> } |
4. Als Letztes müssen wir noch sichergehen, dass unser Roboter nicht mit den leeren Feldern kollidiert. Um dies zu erreichen, müssen wir eine kleine Anpassung am Konstrukteur 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 |
public class Tile { private int tileX, tileY, speedX, type; public Image tileImage; private Robot robot = StartingClass.getRobot(); private Background bg = StartingClass.getBg1(); private Rectangle r; 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 haben wir schon alle vertikalen Kollisionen unseres Roboters programmiert. Da das Ganze in den nächsten Lektionen noch ein bisschen komplexer wird, kümmern wir uns um eventuelle Fehler später .
Wenn ihr nun das Spiel startet und mit dem Roboter umher lauft, gibt eure Konsole aus, ob es unten und oder oben zu Kollisionen kommt. Mehr haben wir auch noch nicht programmiert. In der nächsten Lektion machen wir hier weiter.
Es gibt diesmal keinen Code, da wir mit der Kollisionserkennung noch nicht fertig sind.
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+, das würde dieser Seite wirklich weiterhelfen, danke sehr. Auch ein Klick auf die Werbung hilft dabei, diese Seite am Laufen zu halten.
Quelle: Original Anleitung auf englisch von Kilobolt Studios
Lektion 4 – Kollisionserkennung Grundlagen Lektion 6 – Kollisionserkennung Teil 2