How to Erstellen Sie eine Multi-State-Animation in Ihrem HTML5-Spiel

Mit all dieser Bewegung in Ihrem HTML5-Spiel sind Sie sicher, mehrere anspruchsvolle Animationen zu haben. Sie können die Funktion changeImage () oder setImage () verwenden (es sind zwei verschiedene Namen für dieselbe Sache), um das Bild, das einem Sprite zugeordnet ist, jederzeit zu ändern. Manchmal möchten Sie jedoch anspruchsvollere Animationen. Schauen Sie sich walkAnim an. html.

Hier wird sehr viel Bild ausgetauscht. Die gehende Animation ist wirklich eine Reihe von acht verschiedenen Bildern, die schnell ausgetauscht werden, um die Illusion des Gehens zu geben. Es gibt 4 verschiedene Animationen (eine für jede Himmelsrichtung), also insgesamt 32 verschiedene Bilder. Wenn Sie jedoch über den Code schauen, sehen Sie, dass das Charakter-Sprite nur ein Bild enthält.

Dieses Bild ist eine zusammengesetzte Animation. Jede Zeile stellt eine Richtung dar, und jede Zeile enthält einen Zyklus oder eine Reihe von Bildern, die wiederholt werden sollen.

Der rpg_sprite_walk. png Bild wurde von Franck Dupont erstellt. Er hat dieses Bild großzügig auf der OpenGameArt gepostet. org site, wo er als "Arikel. "Er veröffentlichte seine Arbeit unter einer speziellen Lizenz namens" Attribution - Share Alike. "Das bedeutet, dass Leute seine Arbeit kostenlos verwenden oder remixen können, solange sie dem ursprünglichen Autor zugerechnet werden.

Das Hintergrundbild stammt von einem Autor namens Hyptosis, der Bilder unter der Public Domain auf derselben Site veröffentlicht hat. Talentierte und nachdenkliche Mitwirkende wie Franck und Hyptosis sind der Schlüssel zur blühenden kreativen Gemeinschaft. Fühlen Sie sich frei, über die geöffnete Spielkunstaufstellungsort für mehr großes Kunstwerk zu schauen, um in Ihren Spielen zu verwenden, aber seien Sie sicher, den Autoren zu danken und zuzuschreiben, wie sie verdienen.

Das einfache Spiel. Die Bibliothek von js enthält eine Funktion zum einfachen Erstellen von Mehrbildanimationen. Schauen Sie sich den Code für walkAnim an. html, um zu sehen, wie es funktioniert:

walkAnim. html var Spiel; var Hintergrund; var-Zeichen; function init () {game = neue Szene (); background = new Sprite (Spiel, "rpgMap. png", 800, 600); Hintergrund. setSpeed ​​(0, 0); Hintergrund. setPosition (400, 300); character = new Sprite (Spiel, "rpg_sprite_walk.png", 192, 128); Zeichen. loadAnimation (192, 128, 24, 32); Zeichen. generateAnimationCycles (); Zeichen. renameCycles (neues Array ("unten", "oben", "links", "rechts")); Zeichen. setAnimationSpeed ​​(500); // angehaltenes Zeichen. setPosition (440, 380); Charakter. setSpeed ​​(0); Zeichen. pauseAnimation (); Zeichen. setCurrentCycle ("down"); Spiel.start ();} // end init Funktion update () {Spiel. klar(); checkKeys (); Hintergrund. aktualisieren(); Charakter. update ();} // ende update function checkKeys () {if (keysDown [K_LEFT]) { Zeichen. setSpeed ​​(1); Zeichen. playAnimation () Zeichen. setMoveAngle (270); Zeichen. setCurrentCycle ("links"); } if (keysDown [K_RIGHT]) {Zeichen. setSpeed ​​(1); Charakter. playAnimation () - Zeichen setMoveAngle (90); Charakter. setCurrentCycle ("rechts");} if (keysDown [K_UP]) {Zeichen. setSpeed ​​(1); Charakter. playAnimation () - Zeichen setMoveAngle (0); Charakter. setCurrentCycle ("up");} if (SchlüsselDown [K_DOWN]) {Zeichen. setSpeed ​​(1); Charakter. playAnimation () - Zeichen setMoveAngle (180); Charakter. setCurrentCycle ("down");} if (SchlüsselDown [K_SPACE]) { Zeichen. setSpeed ​​(0); Zeichen. pauseAnimation (); Zeichen. setCurrentCycle ("down"); }}

Sie müssen ein paar neue Schritte ausführen, um eine Animation zu erstellen, aber die Ergebnisse sind die Mühe wert.

1. Beschafft ein Animationsbild.

   Sie können entweder selbst ein Bild erstellen oder sich die hervorragenden Ressourcen wie OpenGameArt ansehen. org, um Arbeit zu finden, die andere getan haben. Natürlich haben Sie die Verantwortung, die Arbeit anderer zu respektieren, aber es gibt heute eine großartige Arbeit in sehr freizügigen Lizenzen. Stellen Sie sicher, dass das Bild in Zeilen und Spalten organisiert ist und dass jedes Teilbild genau dieselbe Größe hat.

   Möglicherweise müssen Sie sich mit Ihrem Bildbearbeitungsprogramm auseinandersetzen, um sicherzustellen, dass das Bild im richtigen Format vorliegt und Sie die Größe jedes Teilbilds kennen.

2. Fügen Sie das Animationsbild Ihrem Sprite hinzu.

   Sie werden das gesamte Bild an Ihr Sprite anhängen, aber nur einen kleinen Teil davon gleichzeitig anzeigen. Dies ist einfacher als mit einer Reihe von Bildern zu arbeiten, und es ist auch effizienter.

3. Erstellen Sie ein Animationsobjekt mit der Methode loadAnimation ().

   Wenn Sie die loadAnimation () -Methode eines Objekts aufrufen, erstellen Sie ein Animationstool, mit dem Sie die Animation verwalten können. Die ersten beiden Parameter sind die Größe des gesamten Bildes (Breite und Höhe), und die zweiten beiden Parameter sind die Breite und Höhe jedes Teilbilds. Wenn Sie diese Werte falsch erhalten, wird die Animation angezeigt. Spielen Sie weiter, bis Sie diese Werte richtig eingestellt haben:

   Zeichen. loadAnimation (192, 128, 24, 32);
   

4. Erstellen Sie die Animationszyklen.

   Jede Zeile wird in einen Animationszyklus umgewandelt. Die Standardversion (ohne Parameter) funktioniert in den meisten Situationen gut. Schlagen Sie in der Dokumentation zu den erweiterten Funktionen dieses Tools nach:

   Zeichen. generateAnimationCycles ();
   

5. Benennen Sie die Zyklen um.

   Die mit dem Befehl buildAnimationCycles () erstellten Animationen haben Standardnamen, aber es ist fast immer besser, eigene, aussagekräftigere Namen beizufügen. Fügen Sie ein Array mit einem Namen hinzu, der angibt, was jede Zeile repräsentiert:

   Zeichen. renameCycles (neues Array ("unten", "oben", "links", "rechts"));
   

6. Stellen Sie die Animationsgeschwindigkeit ein.

   Die Animationsgeschwindigkeit gibt an, wie schnell die Animation ausgeführt wird. Ein Wert von 500 scheint für die meisten Anwendungen richtig zu sein, aber Sie können diesen Wert so anpassen, dass der Laufzyklus des Charakters so aussieht, als würde er das Zeichen:

   schreiben.setAnimationSpeed ​​(500);
   

7. Legen Sie fest, welchen Zyklus Sie anzeigen möchten.

   Mit der Methode setCurrentCycle () können Sie den Zyklus mit einem der Namen auswählen, die Sie im Schritt renameAnimationCycles () angegeben haben:

   . setCurrentCycle ("down");
   

8. Verwenden Sie den Befehl pauseAnimation (), um die Animation anzuhalten.

   Der Befehl pauseAnimation () stoppt die Animation vorübergehend.

9. Verwenden Sie playAnimation (), um die Animation zu starten.

   Diese Methode durchläuft den aktuellen Animationszyklus kontinuierlich.

Wie Sie sehen, bringt Animation Spielspaß und macht das ganze Reich der Rollenspiele zu Ihrem Repertoire.