Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:spiele:sprites [2021/01/14 15:00] – [Beispiel 1: Raumschiff und Smilies] Martin Pabst
+++ api:documentation:spiele:sprites [2022/05/09 20:05] – [Animation von Sprites] Martin Pabst
@@ Zeile 8: / Zeile 8: @@
 <HTML>
-<div class="java-online" style="height: 400px; width: 80%" data-java-online="{'withBottomPanel': false, 'id': 'Sprite_1'}">
+<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Sprite_1'}">
 <script type="text/plain" title="Sprite_1.java">
@@ Zeile 27: / Zeile 27: @@
 </HTML>
-<WRAP center round info 60%>
+<WRAP left round info 80%>
 Ein Sprite wird durch die Angabe der x- und y-Koordinate seines "Mittelpunktes", des Namens der Bilderfolge und des Index innerhalb dieser Folge instanziert.
 <code myJava>
@@ Zeile 36: / Zeile 36: @@
-===== Sprite-Bibliothek =====
+===== Übersicht über die Bilderfolgen =====
-[[https://www.mathe-pabst.de/java/spriteLibrary.html|Einen Überblick über alle Bilderfolgen erhaltet Ihr hier.]]
+[[https://www.online-ide.de/spriteLibrary.html|Einen Überblick über alle Bilderfolgen erhaltet Ihr hier.]]
 ===== Animation von Sprites =====
-<WRAP center round info 60%>
+<WRAP left round info 80%>
 Es gibt Bilderfolgen, die - schnell hintereinander abgespielt - einen kleinen "Film" (Animation) ergeben. Diese Animationen kann man mit der Methode ''playAnimation'' abgespielt werden.
 <code myJava>
-</code>
 Sprite explosion = new Sprite(400, 300, SpriteLibrary.Explosion_1, 0);
 explosion.playAnimation(0, 63, RepeatType.loop, 15);
@@ Zeile 52: / Zeile 51: @@
 <HTML>
-<div class="java-online" style="height: 400px; width: 80%" data-java-online="{'withBottomPanel': false, 'id': 'Sprite_2'}">
+<div class="java-online" style="height: 200px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Sprite_2'}">
 <script type="text/plain" title="Sprite_2.java">
@@ Zeile 63: / Zeile 62: @@
 </div>
+</HTML>
+===== Kollision =====
+Wie bei allen anderen Grafikobjekten kann auch bei Sprites mit er Methode ''collidesWith'' ausgewertet werden, ob ein Sprite mit einem anderen Objekt überlappt. Soll die Kollision mit vielen gleichartigen Objekten ausgewertet werden, so empfiehlt es sich aus Performancegründen, diese Objekte in einer Gruppe zusammenzufassen und die Kollision mithilfe der Methode ''getCollidingShapes'' der Gruppe zu suchen.
+<HTML>
+<div class="java-online" style="height: 600px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Sprite_3'}">
+<script type="text/plain" title="Sprite_3.java">
+new RechteckAngriff();
+class RechteckAngriff extends Actor {
+   Group rechtecke = new Group();
+   Sprite ship = new Sprite(200, 300, SpriteLibrary.Ship_1, 0);
+   public RechteckAngriff() {
+      super();
+      ship.scale(0.5);
+   }
+   public void act() {
+      if(Math.random() < 0.3) {
+         rechtecke.add(new FliegendesRechteck());
+      }
+      Shape[] kollidierendeRechtecke = rechtecke.getCollidingShapes(ship);
+      for(Shape shape : kollidierendeRechtecke) {
+         Sprite explosion = new Sprite(shape.getCenterX(), shape.getCenterY(), SpriteLibrary.Explosion_1, 0);
+         explosion.scale(3);
+         explosion.rotate(Math.random() * 360);
+         explosion.playAnimation(0, 60, RepeatType.once, 30);
+         shape.destroy();
+      }
+   }
+}
+class FliegendesRechteck extends Rectangle {
+   double vy = Math.random() * 10 - 5;
+   double vAngle = Math.random() * 4;
+   public FliegendesRechteck() {
+      super(800, Math.random() * 600, Math.random() * 50 + 20, Math.random() * 100 + 20);
+      this.setBorderColor(null);
+      this.setFillColor((int)(Math.random() * 0xffffff), 0.5);
+   }
+   public void act() {
+      move(-15, vy);
+      rotate(vAngle);
+      if(getCenterX() < 0) {
+         destroy();
+      }
+   }
+}
+</script>
+</div>
+</HTML>
+===== Tiled Sprites =====
+{{ :api:documentation:spiele:pasted:20210621-180539.png?350}}
+<WRAP left round info 50%>
+  * Die Methode ''makeTiling(double width, double height)'' macht aus einem Sprite eine "Kachelfläche" der Breite ''width'' und der Höhe ''height'', indem das Sprite-Bild geeignet oft neben- und untereinander gezeichnet wird.
+  * Alle Methodenaufrufe des Sprites (z.B. ''move'', ''scale'', ...) beziehen sich auf die Kachelfläche als Ganzes.
+  * Möchte man die einzelnen Kachelbilder verändern, so erhält man mit der Methode ''getTileImage()'' ein Objekt, das einem geeignete Methoden ''move'' und ''scale'' hierzu bietet.
+  * Die Methode ''getTileImage().move(double dx, double dy)'' verschiebt die Bilddaten um die angegebene Verschiebung und fügt sie zyklisch in der gegenüberliegenden Richtung wieder an. Dadurch entsteht ein Scroll-Effekt. Starte am besten das nachfolgende Beispielprogramm, dann siehst Du sofort, was gemeint ist!
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Sprite_4'}">
+<script type="text/plain" title="Sprite_4.java">
+new Beweger();
+class Beweger extends Actor {
+   Sprite s;
+   Beweger() {
+      s = new Sprite(200, 200, SpriteLibrary.Boulders, 0);
+      s.makeTiling(160, 96);
+      s.scale(3);
+   }
+   void act() {
+      s.getTileImage().move(2, 1);
+   }
+}
+</script>
 </HTML>