Stunde #2-11: Zeichnen der Spielfigur aus der StartingClass Klasse
Nun müssen wir viel Code in unser Programm implementieren. Ich versuche dabei, alles so einfach wie möglich zu halten und auch zu erklären. Trotzdem kann es passieren, dass euch ein paar Teile etwas schwammig erklärt vorkommen oder ihr euch wundert, wie man auf solche Lösungen kommt, wenn man selber programmiert. Dies ist einer der Fälle, wo es nicht unbedingt nötig ist, sich alles zu merken oder vollständig zu verstehen, weil es wirklich einfach ist, diesen Code in das Programm zu implementieren, aber sehr schwer ist, diesen komplett zu verstehen.
Wir werden in StartingClass.Java arbeiten.
1. Als erstes werden wir java.awt.Graphics; importieren.
2. Nun werden wir in der run() Methode (wo ist egal, am einfachsten ist es, alles, was zusammengehört, auch zusammen zu schreiben) ein paar Methoden einfügen: update(Graphics g) und paint(Graphics g). Dies haben wir schon mehrfach getan. Wir schreiben nach der run() Methode einfach update und drücken STRG + Leertaste und wählen in diesem Fall die erste Option, das Selbe tun wir mit paint.
Die update() Methode wird automatisch in einer Schleife ausgeführt und die paint() Methode wird durch repaint() in der run() Methode auch als Schleife immer und immer wieder ausgeführt.
I. Definieren der update ()-Methode:
Wir werden eine doppelte Pufferung (double buffering) verwenden, die Technik wird dazu genutzt, ein Flackern zu verhindern. Das Grundkonzept besteht darin, dass das momentane Bild für eine kurze Zeit gehalten wird, so wird eine glatte und natürliche Bewegung dargestellt.
1. Hinzufügen von Variablen unter private Robot robot;
private Image image;
private Graphics second;
2. Falls wir hier einen Fehler bekommen, importieren wir die nötigen Pakete mit Shift + STRG + O
3. Nun werden wir den folgenden Code anstelle der momentanen update()-Methode einfügen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@Override public void update(Graphics g) { // TODO Auto-generated method stub if (image == null) { image = createImage(this.getWidth(), this.getHeight()); second = image.getGraphics(); } second.setColor(getBackground()); second.fillRect(0, 0, getWidth(), getHeight()); second.setColor(getForeground()); paint(second); g.drawImage(image, 0, 0, this); } |
Die einzelnen Code Zeilen zu verstehen, sollte kein Problem sein, da wir diese alle schon behandelt haben. Zu verstehen, wie hier nun eine doppelte Pufferung erzeugt wird, ist jedoch wesentlich schwerer und mein Tipp ist: ignoriert und akzeptiert es einfach und lasst uns weiter machen. Wir werden zu einem späteren Zeitpunkt darauf zurück kommen.
II. Definieren der paint()-Methode
Diese Methode wird dazu verwendet, unsere Grafik auf dem Bildschirm zu zeigen. Momentan muss diese nur unseren Roboter anzeigen, daher besitzt diese auch nur ein Statement:
|
1 2 3 4 5 |
@Override public void paint(Graphics g) { // TODO Auto-generated method stub g.drawImage(character, robot.getCenterX() - 61, robot.getCenterY() - 63, this); } |
Nun ergeben sich hierdurch einige Fehler, auf welche wir nun nach und nach eingehen werden.
Die g.drawImage()-Methode verwendet die folgenden Parameter: g.drawImage(img, x, y, observer) – eine Bildvariable, die X- und Y-Koordinaten und einen ImageObserver (einen Bildbetrachter, was aber momentan noch etwas zu kompliziert ist und wir später behandeln werden).
In unserem Beispiel wird die character Variable unser Roboter Bild repräsentieren und soll diese 61 Pixel nach links und 63 Pixel über (centerX, centerY) zeichnen, und das Wort „this“ ist unser ImageObserver.
Momentan sollten wir folgende Fehler sehen und werden diese nach und nach beheben:
I. Die character Variable
1. Die character Variable ist noch nicht definiert, also müssen wir dies als erstes tun. Dazu gehen wir nach ganz oben n unserer StartingClass und suchen dort private Image image; und ergänzen es mit „, character“:
private Image image, character;
2. Nun müssen wir dieser Variable noch einen Wert geben. In diesem Fall werden wir der Variable ein Bild als Wert zuweisen. Um dies zu tun, müssen wir ein URL Objekt einfügen, womit wir Adressen wie C:\Bilder\bild.jpg einfügen können. Dazu schreiben wir unter private Image image,character; folgendes:
private URL base;
Hier müssen wir dann noch URL importieren.
3. In der init()-Methode werden wir nun URL definieren und der character Variable ein Bild zuweisen. Dazu müssen wir folgende Veränderungen tätigen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@Override public void init() { // TODO Auto-generated method stub setSize(800, 480); setBackground(Color.BLACK); setFocusable(true); addKeyListener(this); Frame frame = (Frame) this.getParent().getParent(); frame.setTitle("Q-Bot Alpha"); <span style="color: #ff0000"><strong>try { base = getDocumentBase(); } catch (Exception e) { // TODO: handle exception } // Bildeinstellung character = getImage(base, "data/character.png");</strong></span> } |
4. Zuletzt müssen wir noch das Bild importieren. Dazu gehen wir im Package Explorer mit einem Rechtsklick auf src und erstellen dort mit New > Folder einen neuen Ordner, welchen wir data nennen. Nun ladet ihr das folgende Bild herunter, speichert es auf eurem PC und zieht es einfach in den data Ordner.
Damit sollten wir den charater Fehler aus der paint()-Methode gelöst haben. Falls dies nicht der Fall ist geht auf Project > Clean > OK.
Damit sollten wir alle beim folgendem Stand des Codes sein:
|
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
package basteldroid; import java.applet.Applet; import java.awt.Color; import java.awt.Frame; import java.awt.Graphics; import java.awt.Image; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.net.URL; public class StartingClass extends Applet implements Runnable, KeyListener { private Robot robot; private Image image,character; private URL base; private Graphics second; @Override public void init() { // TODO Auto-generated method stub setSize(800, 480); setBackground(Color.BLACK); setFocusable(true); addKeyListener(this); Frame frame = (Frame) this.getParent().getParent(); frame.setTitle("Q-Bot Alpha"); try { base = getDocumentBase(); } catch (Exception e) { // TODO: handle exception } // Bildeinstellung character = getImage(base, "data/character.png"); } @Override public void start() { robot = new Robot(); // TODO Auto-generated method stub Thread thread = new Thread(this); thread.start(); } @Override public void stop() { // TODO Auto-generated method stub } @Override public void destroy() { // TODO Auto-generated method stub } @Override public void run() { // TODO Auto-generated method stub while (true) { repaint(); try { Thread.sleep(17); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } @Override public void update(Graphics g) { // TODO Auto-generated method stub if (image == null) { image = createImage(this.getWidth(), this.getHeight()); second = image.getGraphics(); } second.setColor(getBackground()); second.fillRect(0, 0, getWidth(), getHeight()); second.setColor(getForeground()); paint(second); g.drawImage(image, 0, 0, this); } @Override public void paint(Graphics g) { // TODO Auto-generated method stub g.drawImage(character, robot.getCenterX() - 61, robot.getCenterY() - 63, this); } @Override public void keyTyped(KeyEvent e) { // TODO Auto-generated method stub } @Override public void keyPressed(KeyEvent e) { // TODO Auto-generated method stub switch (e.getKeyCode()) { case KeyEvent.VK_UP: System.out.println("Bewege dich hoch"); break; case KeyEvent.VK_DOWN: System.out.println("Bewege dich runter"); break; case KeyEvent.VK_LEFT: System.out.println("Bewege dich links"); break; case KeyEvent.VK_RIGHT: System.out.println("Bewege dich rechts"); break; case KeyEvent.VK_SPACE: System.out.println("Spring"); break; } } @Override public void keyReleased(KeyEvent e) { // TODO Auto-generated method stub switch (e.getKeyCode()) { case KeyEvent.VK_UP: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_DOWN: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_LEFT: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_RIGHT: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_SPACE: System.out.println("Stop zu springen"); break; } } } |
II. Die get… Fehler
Nun haben wir noch die get… Fehler in unserer StartingClass:
Im ersten Teil dieser Lektion habe ich geschrieben, dass wir wie folgt vorgehen:
1. Ständig aktualisierte Methoden, die bei jedem Durchlauf der Spielschleife aufgerufen werden.
2. Methoden, die nur bei Spielereingaben gebraucht werden.
3. Hilfsmethoden, welche die Werte der Variablen in der Klasse abrufen und ändern.
Diese Hilfsmethoden haben wir nie erstellt, nun werden wir dies nachholen.
1. Öffnen wir Robot.java
2. Nun machen wir einen Rechtsklick irgendwo in den Weißraum der Robot.java. Im sich öffnenden Dialogfenster wählen wir Source > Generate Getters and Setters…
3. Im Fenster „Generate Getters and Setters“ wählen wir Select all und bei Sort by weiter unten wählen wir First getters, then setters und bestätigen mit OK.
Was sind diese Getters und Setters?
In Java ist es üblich, Variablen, die nur in der Klasse benötigt werden, als private zu deklarieren. Wenn nun andere Klassen auf diese Variablen zugreifen wollen, benötigen sie Hilfsfunktionen, die Getters and Setters genannt werden.
Lasst und hierzu zwei kurze Beispiele ansehen:
public int getSpeedX() {
return speedX;
}
und
public void setSpeedX(int speedX) {
this.height = speedX;
}
Immer wenn eine Getter-Methode aufgerufen wird, gibt sie den Wert an meine neue Variable, hier speedX ab.
Wenn ich sage: setSpeed (10); dann bekommt die Variable speedX einen Wert von 10.
Nun sollten wir folgenden Stand 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
package basteldroid; import java.awt.Graphics; 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. private int centerX = 100; private int centerY = 382; private boolean jumped = false; private int speedX = 0; private int speedY = 1; public void update() { // Bewegt den Roboter oder passt den Hintergrund an. if (speedX < 0) { centerX += speedX; //Hier wird speedX zu centerX addiert } else if (speedX == 0) { System.out.println("Hintergrund nicht bewegen."); } else { if (centerX <= 150) { //Falls centerX in den linken 150 Pixeln ist, centerX += speedX; // ändere centerX durch Addieren von speedX. } else { System.out.println("Hintergrund bewegen"); } } // Update der Y-Position if (centerY + speedY >= 382) { centerY = 382; // 382 bedeutet, unsere Figur steht auf dem Boden. }else{ centerY += speedY; // Addiert speedY zu centerY, um die neue Position zu berechnen. } // Hier wird das Springen kontrolliert. if (jumped == true) { speedY += 1; // Solange die Figur in der Luft ist, addiere 1. // Dadurch fällt die Figur auf den Boden. if (centerY + speedY >= 382) { centerY = 382; speedY = 0; jumped = false; } } // 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; } } public int getCenterX() { return centerX; } public int getCenterY() { return centerY; } public boolean isJumped() { return jumped; } public int getSpeedX() { return speedX; } public int getSpeedY() { return speedY; } public void setCenterX(int centerX) { this.centerX = centerX; } public void setCenterY(int centerY) { this.centerY = centerY; } public void setJumped(boolean jumped) { this.jumped = jumped; } public void setSpeedX(int speedX) { this.speedX = speedX; } public void setSpeedY(int speedY) { this.speedY = speedY; } public void moveRight() { speedX = 6; } public void moveLeft() { speedX = -6; } public void stop() { speedX = 0; } public void jump() { if (jumped == false) { speedY = -15; jumped = true; } } } |
Stunde #2-12: Unsere Spielfigur bewegt sich
Startet mal die StartingClass und wir sollten alle nun folgendes sehen:
Nun werden wir die letzten Änderungen am Code vornehmen, um unsere Spielfigur zu bewegen.
Wir gehen nun in der StartingClass zur keyPressed()-Methode und ersetzen
|
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 |
@Override public void keyPressed(KeyEvent e) { // TODO Auto-generated method stub switch (e.getKeyCode()) { case KeyEvent.VK_UP: System.out.println("Bewege dich hoch"); break; case KeyEvent.VK_DOWN: System.out.println("Bewege dich runter"); break; case KeyEvent.VK_LEFT: <strong><span style="color: #ff0000">System.out.println("Bewege dich links");</span></strong> break; case KeyEvent.VK_RIGHT: <span style="color: #ff0000"><strong>System.out.println("Bewege dich rechts");</strong></span> break; case KeyEvent.VK_SPACE: <span style="color: #ff0000"><strong>System.out.println("Spring");</strong></span> break; } } |
mit
|
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 |
@Override public void keyPressed(KeyEvent e) { // TODO Auto-generated method stub switch (e.getKeyCode()) { case KeyEvent.VK_UP: System.out.println("Bewege dich hoch"); break; case KeyEvent.VK_DOWN: System.out.println("Bewege dich runter"); break; case KeyEvent.VK_LEFT: <span style="color: #ff0000"><strong>robot.moveLeft();</strong></span> break; case KeyEvent.VK_RIGHT: <span style="color: #ff0000"><strong>robot.moveRight();</strong></span> break; case KeyEvent.VK_SPACE: <span style="color: #ff0000"><strong>robot.jump();</strong></span> break; } } |
und unter der keyReleased()-Methode
|
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 |
@Override public void keyReleased(KeyEvent e) { // TODO Auto-generated method stub switch (e.getKeyCode()) { case KeyEvent.VK_UP: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_DOWN: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_LEFT: <span style="color: #ff0000"><strong>System.out.println("Stop dich zu bewegen");</strong></span> break; case KeyEvent.VK_RIGHT: <span style="color: #ff0000"><strong>System.out.println("Stop dich zu bewegen");</strong></span> break; case KeyEvent.VK_SPACE: System.out.println("Stop zu springen"); break; } } |
mit
|
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 |
@Override public void keyReleased(KeyEvent e) { // TODO Auto-generated method stub switch (e.getKeyCode()) { case KeyEvent.VK_UP: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_DOWN: System.out.println("Stop dich zu bewegen"); break; case KeyEvent.VK_LEFT: <span style="color: #ff0000"><strong>robot.stop();</strong></span> break; case KeyEvent.VK_RIGHT: <span style="color: #ff0000"><strong>robot.stop();</strong></span> break; case KeyEvent.VK_SPACE: System.out.println("Stop zu springen"); break; } } |
Als nächstes müssen wir noch in der run()-Methode robot.update(); aufrufen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@Override public void run() { // TODO Auto-generated method stub while (true) { <span style="color: #ff0000"><strong>robot.update();</strong></span> repaint(); try { Thread.sleep(17); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } |
Wenn wir nun unser Programm starten, können wir mit den Pfeiltasten rechts und links unseren Roboter bewegen. Dies ist dann auch das Ende dieser Lektion. In der nächsten Lektion werden wir uns mit dem Hintergrund beschäftigen und unsere Spielfigur springen und sich ducken lassen
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.
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 – Spielfigur einbinden Teil 1 Lektion 5 – Hintergrund und Bewegungen