Über die Grundlagen hinaus Sprites

In allen bisherigen Crafty-Tutorials haben Sie quadratische oder rechteckige Felder verwendet, um verschiedene Konzepte wie Animations- und Tastatur- oder Berührungsereignisse zu verstehen. Dies ist zwar eine großartige Möglichkeit, schnell mehr über die Bibliothek zu lernen, Sie werden jedoch höchstwahrscheinlich Bilder in Ihren aktuellen Spielen verwenden.

In diesem Lernprogramm erfahren Sie, wie Sie Sprite-Sheets laden, um verschiedene Bilder in Ihrem Spiel zu verwenden. Danach lernen Sie, wie Sie verschiedene Charaktere mit Sprite-Animation animieren.

Ein Sprite-Sheet laden

Für diejenigen, die mit Sprite-Sheets nicht vertraut sind, handelt es sich um Bilddateien, die mehrere kleinere Grafiken enthalten, die in einem Raster angeordnet sind. Jede dieser kleineren Grafiken oder Sprites kann alleine oder zusammen mit anderen Bildern verwendet werden, um verschiedene Objekte zu animieren.

Sie können ein Sprite-Sheet nicht direkt in Crafty laden und verwenden. Außerdem müssen Sie die Breite und Höhe der verschiedenen Fliesen oder Sprites in Ihrem Sprite-Sheet angeben. Sie können einzelnen Bildern auch bestimmte Namen geben. Zum Beispiel kann ein Sprite mit einem kleinen Stein zum leichteren Nachschlagen "small_stone" genannt werden. Das Erinnern an einen Fliesennamen ist viel einfacher als das Erinnern an die tatsächlichen Koordinaten verschiedener Bilder. 

Wir verwenden das folgende Sprite-Sheet von tokka in verschiedenen Demos dieses Tutorials.

Es gibt viele Bilder, die verwendet werden können, wenn der Spieler geht, springt, im Leerlauf steht oder erschossen wird. In diesem Fall betragen die Breite und Höhe der meisten Kacheln 80 px bzw. 94 px. Einige Sprite-Blätter haben möglicherweise zusätzliche Polsterung um einzelne Fliesen oder das gesamte Sprite-Blatt. Diese können während des Ladens des Sprite-Blattes mit der angegeben werden paddingX, paddingY, und paddingAroundBorder Eigenschaften. 

Hier ist der Code, den wir benötigen, um das obige Sprite-Sheet in unser Spiel zu laden:

var game_assets = "sprites": "hero_spritesheet.png": Kachel: 80, tileh: 94, karte: hero_idle: [0, 0], hero_walking: [1, 1], hero_jumping: [2, 3] hero_sitting: [0, 4]; Crafty.load (game_assets);

Die Kacheln werden mithilfe eines Zahlenpaares referenziert. Die erste Zahl bestimmt die Spalte unseres Sprites und die zweite Zahl bestimmt ihre Zeile. Die Zahlen basieren auf Null. Auf das Sprite in der ersten Spalte und der ersten Zeile kann beispielsweise mit zugegriffen werden [0, 0]. Ebenso kann auf das Sprite in der dritten Spalte und in der vierten Zeile mit zugegriffen werden [2, 3]. Wie bereits erwähnt, können Sie den einzelnen Sprites zur Vereinfachung der Verwendung unterschiedliche Namen geben.

Statische Sprites rendern

Nachdem Sie ein Sprite-Blatt geladen haben, können Sie die Bilder mit dem folgenden Code auf dem Bildschirm rendern:

var idle_hero = Crafty.e ("2D, Canvas, hero_idle") .attr (x: 10, y: 10);

Das x und y Attribute bestimmen den Ort, an dem die Sprites gerendert werden. Sie können auch die Breite und Höhe einzelner Sprites mithilfe von festlegen w und h Attribute.

Da hat der Sprite einen 2D Komponente können Sie alle Eigenschaften und Attribute der 2D Bestandteil dieser Bilder. Zum Beispiel können Sie unseren Helden horizontal so drehen, dass er in die andere Richtung zeigt this.flip ("X"). Auf ähnliche Weise können Sie ein Sprite mit dem Symbol drehen Drehung Attribut oder machen Sie es transparent mit der Alpha Attribut.

var sitting_hero = Crafty.e ("2D, Canvas, hero_sitting") .attr (x: 440, y: 250) .flip ("X");

Angenommen, Sie müssen nur einen Teil eines bestimmten Sprites auf der Leinwand rendern. Sie können dies mit Hilfe der .Ernte (Anzahl x, Anzahl y, Anzahl w, Anzahl h) Methode. Die ersten beiden Parameter bestimmen die x- und y-Versatzwerte des Sprites. Die letzten beiden Parameter bestimmen die Breite und Höhe des zugeschnittenen Sprites. Alle Werte sollten in Pixel angegeben werden.

Animieren von Sprites

Bis zu diesem Punkt haben Sie verschiedene Entitäten bewegt, indem Sie deren Elemente geändert haben x und y Attribute. Es war kein Problem, da Sie die meiste Zeit nur rechteckige Boxen bewegten. Wenn Sie unsere Hauptfigur jedoch verschieben, indem Sie sie so verschieben, wird das sehr unnatürlich aussehen. Das Hinzufügen von Animationen zu Objekten wie Münzen, die ein Spieler sammeln kann, macht das Spiel auch noch angenehmer.

Für alle Animationen im Zusammenhang mit Sprites müssen Sie die SpriteAnimation Komponente an die Entität. Diese Komponente behandelt die verschiedenen Bilder in einer Sprite-Map als Animationsframes.

Die Informationen zu einer Animation werden im gespeichert Spule Objekt. Das Rollenobjekt hat fünf verschiedene Eigenschaften: 

• ein Ich würde Welches ist der Name der Rolle
• ein Frames Array mit einer Liste von Frames für die Animation im Format [xpos, ypos]
• ein currentFrame Eigenschaft, die den Index des aktuellen Frames zurückgibt
• ein Lockerung Eigenschaft, die bestimmt, wie sich die Animation vorwärts bewegen soll
• ein Dauer Eigenschaft, die die Animationsdauer in Millisekunden festlegt

Es gibt vier verschiedene Ereignisse, die durch eine Sprite-Animation ausgelöst werden können. Diese sind:

• StartAnimation: Dieses Ereignis wird ausgelöst, wenn die Animation abgespielt wird oder aus dem angehaltenen Zustand fortgesetzt wird.
• AnimationEnd: Dieses Ereignis wird ausgelöst, wenn eine Animation endet.
  
• FrameChange: Dieses Ereignis wird jedes Mal ausgelöst, wenn sich der Frame in der aktuellen Rolle ändert.
  
• ReelChange: Dieses Ereignis wird ausgelöst, wenn die Rolle selbst geändert wird.
  

Alle diese Ereignisse erhalten die Spule Objekt als Parameter.

neben dem Spule Objekt gibt es auch ein .Spule() Methode, mit der Sprite-Animationen definiert werden. Du kannst den ... benutzen .animieren() Methode, um eine der definierten Animationen abzuspielen. 

Der Prozess der Sprite-Animation beginnt mit der Erstellung eines statischen Sprites auf der Leinwand.

var walking_hero = Crafty.e ('2D, Canvas, hero_walking, SpriteAnimation') .attr (x: 40, y: 20);

Das hero_walking Im obigen Fall ist das Bild das erste Bild, das der Benutzer vor der Animation sieht. Die Attribute werden verwendet, um den Ort der aktuellen Entität anzugeben. Nachdem die Entität erstellt wurde, können Sie das verwenden .Spule() Methode zur Definition der eigentlichen Animation.

Walking_hero.reel ("Walking", 1000, [[0,1], [1, 1], [2, 1], [3, 1], [4, 1], [5, 1]));

Diese Methode akzeptiert drei Parameter. Der erste Parameter ist der Ich würde der erstellten Animation. Der zweite Parameter wird verwendet, um die Länge der Animation in Millisekunden festzulegen. Der dritte Parameter ist ein Array von Arrays, das die Spaltenposition (x) und die Zeilenposition (y) aufeinander folgender Frames enthält. In diesem Fall enthält das Array die Position aller Sprites in der zweiten Zeile.

Eine andere Version dieser Methode erfordert fünf Parameter. Die ersten beiden Parameter sind die Rolle Ich würde und Animationslänge. Mit dem dritten und vierten Parameter wird die Startposition für x und y für die Animation auf der Sprite-Map festgelegt. Der letzte Parameter legt die Anzahl der aufeinander folgenden Frames in der Animation fest. Bei einem negativen Wert wird die Animation rückwärts abgespielt.

Die obige Rollenanimation kann auch mit folgendem Code erstellt werden:

walking_hero.reel ("walking", 1000, 0, 1, 6);

Obwohl diese Version knapp ist, ist sie etwas eingeschränkt. Diese Methode ist nur nützlich, wenn sich alle Sprites, die Sie in die Animation einfügen möchten, in einer einzigen Zeile befinden. Darüber hinaus zeigt die Animation diese Bilder in der Reihenfolge, in der sie im Sprite-Blatt erscheinen. 

Nachdem Sie die Animation definiert haben, können Sie sie mit der Taste abspielen .animate (reel_Id [, Schleifenzahl]) Methode. Der erste Parameter ist die Animation, die Sie abspielen möchten, und der zweite Parameter bestimmt, wie oft Sie diese Animation abspielen möchten. Die Animationen werden standardmäßig einmal abgespielt. Rahmen loopCount zu -1 wird die Animation unbegrenzt abspielen.

In bestimmten Situationen möchten Sie möglicherweise eine Animation nur einmal basierend auf einem Ereignis wiedergeben. Zum Beispiel sollte eine Sprunganimation abgespielt werden, wenn der Benutzer eine Taste drückt, um den Spieler zu springen. Sie können es in der obigen Demo ausprobieren. Drücken Sie die Aufwärtspfeil Taste macht den zweiten Sprite-Sprung. Hier ist der Code zum Erkennen des Tastendrucks:

jumping_hero.bind ('KeyDown', Funktion (evt) if (evt.key == Crafty.keys.UP_ARROW) jumping_hero.animate ("springend", 1);;

Sie können Animationen auch in der Mitte anhalten und fortsetzen, indem Sie die .pauseAnimation () und .resumeAnimation () Methoden. 

Wenn an ein einzelnes Sprite mehrere Animationen angehängt sind, können Sie mithilfe von das bestimmen, ob gerade eine bestimmte Animation abgespielt wird .isPlaying ([String reelId]) Methode. Wenn nein Ich würde bereitgestellt wird, wird geprüft, ob überhaupt Animationen abgespielt werden.

Fazit

Nach Abschluss dieses Lernprogramms sollten Sie in Crafty in der Lage sein, eigene Sprite-Sheets zu laden und sie anstelle von verschiedenen Rechtecken für die Darstellung verschiedener Spielelemente zu verwenden. Sie können jetzt auch verschiedene Animationen basierend auf verschiedenen Ereignissen auf eine Entität anwenden. Ich sollte Sie daran erinnern, dass ich Crafty Version 0.7.1 in diesem Tutorial verwendet habe und die Demos möglicherweise nicht mit anderen Versionen der Bibliothek funktionieren. 

JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Im nächsten Lernprogramm erfahren Sie, wie Sie Ihrem Spiel Sounds hinzufügen.