Heute werden wir uns mit Animationen beschäftigen, was viel neuen Code bedeutet. Theoretisch sind Animationen recht einfach. Alles was ihr dazu benötigt, ist eine Folge von Bildern, welche wir künftig als Frames bezeichnen, und die Dauer bzw. Zeitspanne, wie lange jedes dieser Bilder angezeigt wird. Als nächstes müssen wir nur noch den aktuellen Frame der Sequenz für die gewünschte Zeitspanne anzeigen.
In Wirklichkeit bedeutet dies leider etwas mehr Arbeit, also lasst uns damit beginnen.
Stunde #2-24: Erstellen der Animation-Klasse
Wie immer werden wir einen Entwurf bzw. Plan für alle Animationen erstellen, die wir entwickeln werden. Diese Klasse wird aber etwas anders als die, die wir bisher kennen (ihr werdet eine verschachtelte Klasse kennen lernen).
Tipp: Die Animation-Klasse kann immer und immer wieder verwendet werden (mit bestimmten Modifikationen). Darum nennen wir dies auch Framework (Rahmen oder Gerüst), weil es sich im Wesentlichen um wiederverwendbaren Code handelt, der uns auch bei künftigen Projekten nützlich sein kann.
I. Erstellen eines Pakets und der Animation-Klasse
Als erstes erstellen wir ein neues Paket, dies hilft uns dabei, ein wenig Ordnung zu halten.
1. Rechtsklick auf src, danach New > Package auswählen.
2. Wir nennen es basteldroid.framework
3. Rechtsklickt auf basteldroid.framework und erstellt eine neue Klasse namens Animation.
Was benötigen wir alles in dieser Klasse?
1. Wir benötigen Variablen für Folgendes: Frames, aktueller Frame, Animationszeit und komplette Zeit.
2. Wir müssen einen Konstrukteur erstellen.
3. Eine Methode die
- einen Frame zur neuen Animation hinzufügt
- den aktuellen Frame mit dem richtigen Bild aktualisiert
- den richtigen Frame ausgibt, so dass wir diesen in der StartingClass ausgeben können
- den richtigen Frame Index ausgibt
4. Wir erstellen eine Klasse in der Klasse namens AnimFrame, welches dazu benutzt wird, Objekte zu erzeugen, welche das aktuelle Bild und dessen Anzeigedauer beinhalten.
Wir werden jedes Einzelne genauer beleuchten, wenn wir dies implementieren.
II. Definieren der Animationsklasse
Momentan solltet ihr nur eine leere Klasse haben:
|
1 2 3 4 5 |
package basteldroid.framework; public class Animation { } |
1. Variablen
Nun werden wir die folgenden Variablen hinzufügen und die entsprechenden Pakete importieren:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package basteldroid.framework; import java.util.ArrayList; public class Animation { <span style="color: #ff0000">private ArrayList frames; private int currentFrame; //long benötigt mehr Speicher als int, kann aber mehr und genauer Werte speichern private long animTime; private long totalDuration;</span> } |
- ArrayList frames werden die AnimFrame, welche wir später erstellen, mit folgenden Werten beinhalten: Bild und Anzeigedauer
- currentFrame beinhaltet den Index unserer ArrayList, den Platz in der Liste, welche mit 0 beginnt
- animTime controlliert, wie lange das aktuelle Bild angezeigt wurde und sobald eine gewisse Zeit erreicht ist, wird ein neues Bild angezeigt
- totalDuration bezieht sich auf die Zeit, die jedes Bild angezeigt wird
Beispiel:
Stellen wir uns vor, wir haben eine ArrayList namens frames und diese beinhaltet das Folgende:
AnimFrame(Bild1, 100);
AnimFrame(Bild2, 200);
AnimFrame(Bild3, 400);
AnimFrame(Bild2, 200);
AnimFrame(Bild1, 100);
- Diese Gruppe von AnimFrame Objekten bezeichnen wir als frame ArrayList.
- currentFrame: nehmen wir an, Bild3 wird gerade angezeigt, dies bedeutet, dass wir bei Index 2 sind, die Liste beginnt bei 0
- animTime: wird nun überprüfen, wie lange das Bild schon angezeigt wird
- totalDuration: in diesem Fall ist die Anzeigedauer 400
2. Der Konstrukteur
Dieser wird sehr einfach, er ruft einfach die vier erzeugten Variablen auf.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package basteldroid.framework; import java.util.ArrayList; public class Animation { private ArrayList frames; private int currentFrame; //long benötigt mehr Speicher als int, kann aber mehr und genauer Werte speichern private long animTime; private long totalDuration; <span style="color: #ff0000"> public Animation() { frames = new ArrayList(); totalDuration = 0; synchronized (this) { animTime = 0; currentFrame = 0; } }</span> } |
Von diesem Code ist uns bisher nur synchronized neu, dies bedeutet Synchronisieren. Um es etwas verständlicher zu machen, müssen wir über Threads reden. Falls ihr nicht wisst, was das ist, schaut in Kapitel 1 Lektion 11 nach.
Wenn wir mehrere Threads haben, laufen diese technisch gesehen nicht immer simultan. Sie springen nur zwischen einander hin und her, wie bei einem Schalter.
Wenn wir nun synchronized benutzen, wird animTime und currentFrame immer zusammen aufgerufen. Falls wir dies nicht tun, könnte erst das eine, dann ein komplett anderer Thread und dann das andere aufgerufen werden. Das klingt jetzt vielleicht etwas verwirrend, aber wahrscheinlich erkennt ihr die Bedeutung dessen erst später. Zurzeit sollten wir es einfach so betrachten, dass es uns künftig das Programmieren erleichtert..
3. Methoden
Wir werden nun vier Methoden zu unserem Code hinzufügen.
- addFrame()-Methode: Diese Methode nimmt ein AnimFrame und hängt es an die ArrayList namens frames. Auch hier werden wir synchronized nutzen.
|
1 2 3 4 |
public synchronized void addFrame(Image image, long duration) { totalDuration += duration; frames.add(new AnimFrame(image, totalDuration)); } |
- update()-Methode: Was wir mit dieser Methode vor haben, sollte jedem klar sein. elapsedTime ist die Zeit, welche seit dem letzten Durchlaufen der Methode vergangen ist.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public synchronized void update(long elapsedTime) { if (frames.size() > 1) { animTime += elapsedTime; if (animTime >= totalDuration) { animTime = animTime % totalDuration; currentFrame = 0; } while (animTime > getFrame(currentFrame).endTime) { currentFrame++; } } } |
- getImage()-Methode: Diese Methode gibt das Bild aus, welches zu currentFrame gehört. In dieser Methode benutzen wir Image anstelle von Void. Dies bedeutet, dass diese Methode einen Wert an die Methode zurück gibt, welche sie aufgerufen hat.
|
1 2 3 4 5 6 7 |
public synchronized Image getImage() { if (frames.size() == 0) { return null; } else { return getFrame(currentFrame).image; } } |
- getFrame()-Methode: Hier lassen wir uns den aktuellen Frame ausgeben.
|
1 2 3 |
private AnimFrame getFrame(int i) { return (AnimFrame) frames.get(i); } |
4. Die Nested (geschachtelte) AnimFrame Klasse
Wir haben nun schon einige Male über AnimFrame Objekte gesprochen, aber wir haben noch keine Klasse angelegt, um diese zu erzeugen. Wir könnten nun eine neue Klasse erstellen und diese in der Animation-Klasse aufrufen. Einfacher ist es jedoch, diese direkt in der Animation-Klasse zu platzieren und genau das bedeutet nesting (eine Klasse in einer anderen Klasse schreiben).
Nun werden wir AnimFrame bearbeiten und alles Nötige mit STRG + Shift + O importieren:
|
1 2 3 4 5 6 7 8 9 10 |
private class AnimFrame { Image image; long endTime; public AnimFrame(Image image, long endTime) { this.image = image; this.endTime = endTime; } } |
Nun sollten wir alle den selben 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 |
package basteldroid.framework; import java.awt.Image; import java.util.ArrayList; public class Animation { private ArrayList frames; private int currentFrame; private long animTime; private long totalDuration; public Animation() { frames = new ArrayList(); totalDuration = 0; synchronized (this) { animTime = 0; currentFrame = 0; } } public synchronized void addFrame(Image image, long duration) { totalDuration += duration; frames.add(new AnimFrame(image, totalDuration)); } public synchronized void update(long elapsedTime) { if (frames.size() > 1) { animTime += elapsedTime; if (animTime >= totalDuration) { animTime = animTime % totalDuration; currentFrame = 0; } while (animTime > getFrame(currentFrame).endTime) { currentFrame++; } } } public synchronized Image getImage() { if (frames.size() == 0) { return null; } else { return getFrame(currentFrame).image; } } private AnimFrame getFrame(int i) { return (AnimFrame) frames.get(i); } private class AnimFrame { Image image; long endTime; public AnimFrame(Image image, long endTime) { this.image = image; this.endTime = endTime; } } } |
Stunde #2-25: Animieren unserer Spielfiguren
Ladet die folgenden Bilder herunter und speichert sie in eurem Data Ordner:
Bitte überschreibt die Dateien heliboy.png und background.png mit den beiden Bildern. Ich hatte in der vorherigen Lektion eine falsche Datei eingefügt. Das neue Hintergrundbild ist für das Auge.
Wenn wir das getan haben, gehen wir auf Project > Clean > OK.
Nun haben wir unser Projekt etwas aufräumen lassen und gehen in die StartingClass. Um unsere neue Animationsklasse verwenden zu können, müssen wir diese erst importieren:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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; import java.util.ArrayList; <span style="color: #ff0000">import basteldroid.framework.Animation;</span> public class StartingClass extends Applet implements Runnable, KeyListener { |
Das ist einer der Momente, wo alles plötzlich einen Sinn ergibt. Ihr habt schon eine Menge importiert, ohne zu wissen, wozu das eigentlich nötig ist, aber jetzt habt ihr zum ersten Mal eure eigene Klasse importiert. Nun solltet ihr verstehen, wie es wirklich funktioniert.
1. Bilder Variablen anpassen
Wir haben neue Bilder in unseren data Ordner kopiert. Um diese auch nutzen zu können, müssen wir sie als Variable deklarieren:
|
1 2 3 4 5 6 7 8 |
public class StartingClass extends Applet implements Runnable, KeyListener { private Robot robot; <span style="color: #ff0000"> private Image image, currentSprite, character, character2, character3, characterDown, characterJumped, background, heliboy, heliboy2, heliboy3, heliboy4, heliboy5;</span> private URL base; private Graphics second; private static Background bg1, bg2; private Heliboy hb, hb2; |
2. Animationsobjekte erstellen
Um unseren Roboter zu animieren, benutzen wir anim und um den Heliboy zu animieren, benutzen wir hanim.
|
1 2 3 4 5 6 7 8 9 |
public class StartingClass extends Applet implements Runnable, KeyListener { private Robot robot; private Image image, currentSprite, character, character2, character3, characterDown, characterJumped, background, heliboy, heliboy2, heliboy3, heliboy4, heliboy5; private URL base; private Graphics second; private static Background bg1, bg2; private Heliboy hb, hb2; <span style="color: #ff0000"> private Animation anim, hanim;</span> |
3. Bildeinstellungen
Nun müssen wir die von uns neu hinzugefügten Bilder initialisieren. Dazu werden wir Änderungen an der init()-Methode vornehmen. Wir werden die neuen Bilder ergänzen und anim und hanim, welche die Frames erstellen mit den jeweiligen Bildern und der Anzeigedauer.
|
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 |
@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 <span style="color: #ff0000">character = getImage(base, "data/character.png"); character2 = getImage(base, "data/character2.png"); character3 = getImage(base, "data/character3.png"); characterDown = getImage(base, "data/down.png"); characterJumped = getImage(base, "data/jumped.png"); heliboy = getImage(base, "data/heliboy.png"); heliboy2 = getImage(base, "data/heliboy2.png"); heliboy3 = getImage(base, "data/heliboy3.png"); heliboy4 = getImage(base, "data/heliboy4.png"); heliboy5 = getImage(base, "data/heliboy5.png"); background = getImage(base, "data/background.png"); anim = new Animation(); anim.addFrame(character, 1250); anim.addFrame(character2, 50); anim.addFrame(character3, 50); anim.addFrame(character2, 50); hanim = new Animation(); hanim.addFrame(heliboy, 100); hanim.addFrame(heliboy2, 100); hanim.addFrame(heliboy3, 100); hanim.addFrame(heliboy4, 100); hanim.addFrame(heliboy5, 100); hanim.addFrame(heliboy4, 100); hanim.addFrame(heliboy3, 100); hanim.addFrame(heliboy2, 100); currentSprite = anim.getImage();</span> } |
4. Aufrufen unserer Bilder
Um unsere neu erzeugten Animationen aufzurufen, müssen wir diese in der run()-Methode auch ändern. Wenn ihr vergleicht, was wir ändern und hinzufügen, sollte es sich selbst erklären.
|
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 |
@Override public void run() { // TODO Auto-generated method stub while (true) { bg1.update(); bg2.update(); robot.update(); hb.update(); hb2.update(); if (robot.isJumped()){ currentSprite = characterJumped; }else if (robot.isJumped() == false && robot.isDucked() == false){ <span style="color: #ff0000">currentSprite = anim.getImage();</span> } ArrayList projectiles = robot.getProjectiles(); for (int i = 0; i < projectiles.size(); i++) { Projectile p = (Projectile) projectiles.get(i); if (p.isVisible() == true) { p.update(); } else { projectiles.remove(i); } } <span style="color: #ff0000">animate();</span> repaint(); try { Thread.sleep(17); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } |
5. Animation
Wir erstellen eine animate()-Methode. Mit den Parametern, welche wir darin bestimmen, können wir leichter ändern, wie schnell unsere Figuren animiert werden. Je höher der Wert, desto schneller die Animation, passt diesen Wert je nach Belieben an. Schreibt diese Methode nach der run()-Methode.
|
1 2 3 4 |
public void animate() { anim.update(10); hanim.update(50); } |
6. Bildschirmausgabe
Um unsere neuen Animationen auch auf dem Bildschirm zu sehen, müssen wir die paint()-Methode entsprechend ändern. Dazu werden wir nur unsere beiden Heliboys in dieser Methode ändern, den Roboter haben wir schon in der run()-Methode bearbeitet.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@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); 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.drawImage(currentSprite, robot.getCenterX() - 61, robot.getCenterY() - 63, this); g.drawImage(<span style="color: #ff0000">hanim.getImage()</span>, hb.getCenterX() - 48, hb.getCenterY() - 48, this); g.drawImage(<span style="color: #ff0000">hanim.getImage()</span>, hb2.getCenterX() - 48, hb2.getCenterY() - 48, this); } |
Damit sind wir eigentlich am Ende dieser Lektion, ich muss aber noch einen Fehler aus der Lektion 5 klar stellen. Natürlich kann unser Roboter auch springen, dazu braucht ihr einfach nur die Leertaste zu betätigen. Ich bin mir nicht ganz sicher, was mich dabei geritten hat, dass zu schreiben.
Heute haben wir es geschafft, dass sich die Rotorblätter unserer Helikopter drehen und unser Roboter blinzelt. Ich denke, das ist sehr gut für eine Lektion. Falls es noch etwas gibt, wo ihr nicht genau wisst, wie es funktioniert wie beispielsweise die Abfolge der Bilder, dann spielt einfach ein wenig mit dem Code oder stellt mir Fragen.
In der nächsten Lektion werden wir uns mit 2D-Feldern beschäftigen. Damit bereiten wir uns darauf vor, unsere eigenen Level zu erstellen. Wir werden dies in den nächsten beiden Lektionen lernen und schließen damit Kapitel 2 ab. Da ich in den nächsten Tagen im Ski-Urlaub bin, werden frühestens nächste Woche neue Lektionen veröffentlicht.
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