Wie baue ich eine Multi-State-Animation in Ihrem HTML5 Spiel

Mit all diese Bewegung in HTML5-Spiel geht, sind Sie sicher, mehrere anspruchsvolle Animationen zu wollen. Sie können die Verwendung Changeimage () oder setImage () Funktion (sie sind zwei verschiedene Namen für die gleiche Sache), um das Bild mit einem Sprite jederzeit verbunden zu ändern. Manchmal, wenn Sie viel anspruchsvoller Animationen. Werfen Sie einen Blick auf walkAnim.html.

Es gibt eine ganze Menge von Bild-Swapping hier los ist. Die Walking Animation ist eigentlich eine Serie von acht verschiedenen Bilder getauscht schnell die Illusion des Gehens zu geben. Es gibt 4 verschiedene Animationen (eine für jede der vier Himmelsrichtungen), das ist also insgesamt 32 verschiedene Bilder. Wenn Sie jedoch den Code schauen vorbei, sehen Sie, dass die Charakter Sprite enthält nur ein Bild.

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

Das rpg_sprite_walk.png Bild wurde von Franck Dupont erstellt. Er gab großzügig dieses Bild auf die OpenGameArt.org Website, wo er ist bekannt als "Arikel." Er veröffentlichte seine Arbeit unter einer speziellen Lizenz genannt # 147-Attribution -. Share Alike # 148- Dies bedeutet, dass Menschen kann seine Arbeit kostenlos nutzen oder remixen, solange sie den ursprünglichen Autor zuschreiben.

Das Hintergrundbild ist von einem Autor namens Hyptosis, die Bilder unter dem öffentlichen Bereich auf der gleichen Website veröffentlicht. Talentierte und nachdenklichen Beiträgen wie Franck und Hyptosis sind der Schlüssel für die blühende kreative Gemeinschaft. Fühlen Sie sich frei über das offene Spielkunst Standort zu suchen, um weitere großartige Kunstwerke in Ihre Spiele zu verwenden, aber sicher sein, die Autoren zu danken und Attribut wie sie es verdienen.

Das simpleGame.js Bibliothek enthält eine Funktion für ganz leicht Multi-Image-Animationen machen. Schauen Sie über den Code für walkAnim.html um zu sehen, wie es funktioniert:

Sie müssen ein paar neue Schritte zu unternehmen, um eine Animation zu bauen, aber die Ergebnisse sind völlig die Mühe wert.

1. Erhalten Sie Animationsbild.

   Sie können entweder ein Bild selbst, oder schauen Sie sich die exzellente Ressourcen wie OpenGameArt.org schaffen, Arbeit zu finden, die andere gemacht haben. heute in sehr freizügigen Lizenzen Natürlich haben Sie eine Verantwortung, die Arbeit der anderen zu respektieren, aber es gibt einige großartige Arbeit. Sicherstellen, daß das Bild in Zeilen organisiert ist, und Spalten, und daß jedes Teilbild ist genau die gleiche Größe.

   Sie können mit Ihrem Bildeditor zu verwirren, um sicherzustellen, dass das Bild im richtigen Format ist, und dass Sie die Größe jedes Teilbildes kennen.

2. Bringen Sie die Animation Bild auf Ihrem Sprite.

   Sie finden das gesamte Bild zu Ihrem Sprite anbringen, aber nur ein kleiner Teil davon zu einem Zeitpunkt angezeigt wird. Das ist einfacher als mit einem Bündel von Bildern zu arbeiten, und es ist auch effizienter.

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

   Wenn Sie die aufrufen loadAnimation () Methode eines Objekts, sind Sie eine Animation-Tool zu schaffen, das die Animation hilft bei der Verwaltung. Die beiden ersten Parameter sind die Größe des gesamten Bildes (Breite und Höhe) und die zweiten zwei Parameter sind die Breite und Höhe jedes Teilbild. Wenn Sie diese Werte falsch, wird die Animation zu bewegen scheinen. Halten Sie spielen, bis Sie diese Werte richtig zu machen:

   character.loadAnimation (192, 128, 24, 32) -

4. Bauen Sie die Animationszyklen.

   Jede Zeile wird in einen Animationszyklus gedreht. Die Standard-Version (ohne Parameter) funktioniert in den meisten Situationen gut. Schauen Sie in der Dokumentation zu den fortgeschritteneren Nutzungen dieses Werkzeug nach oben:

   character.generateAnimationCycles () -

5. Benennen Sie die Zyklen.

   Die Animationen mit der erstellt buildAnimationCycles () Befehl haben Standardnamen, aber es ist fast immer besser Sie Ihre eigenen, aussagekräftigere Namen zu befestigen. Fügen Sie ein Array mit einem Namen angibt, was jede Zeile darstellt:

   character.renameCycles (new Array ( "unten", "oben", "links", "rechts")) -

6. Stellen Sie die Animationsgeschwindigkeit.

   Die Animationsgeschwindigkeit gibt an, wie schnell die Animation ausgeführt wird. Ein Wert von 500 scheint für die meisten Anwendungen gut, aber Sie können diesen Wert einstellen, so dass die zu Fuß Zyklus Charakter sieht aus wie es auch richtig treibt den Charakter:

   character.setAnimationSpeed ​​(500) -

7. Set, welcher Zyklus Sie anzeigen möchten.

   Das setCurrentCycle () Methode ermöglicht es Ihnen, den Zyklus mit einer der Namen zu wählen, die Sie in der angegebenen renameAnimationCycles () Schritt:

   character.setCurrentCycle ( "down") -

8. Verwenden Sie die pauseAnimation () Befehl, um die Animation zu unterbrechen.

   Das pauseAnimation () Befehl macht die Animation vorübergehend zu stoppen.

9. Benutzen Animationabspielen () die Animation zu starten.

   Diese Methode wird die aktuelle Animationszyklus kontinuierlich Schleife.

Wie Sie sehen können, fügt Animation eine riesige Menge an Spaß an Spiel und öffnet sich zu Ihrem Repertoire das ganze Reich der Rollenspiele auf.