Eine Einführung in die Spritesheet Animation,
Dieses Tutorial ist Teil einer besonderen Zusammenarbeit zwischen einem Künstler, Animator und ein gamedev!
Animation: Bevor wir reden beginnen kann, wie eine spritesheet Animation zu codieren, sollten wir zuerst einige Begriffe definieren. Sprite. und spritesheet.
Zurück im Jahr 1872, wurde Eadweard Muybridge in Auftrag gegeben zu beweisen, ob ein Pferd gehoben alle vier Beine vom Boden ab sofort, wenn es läuft. Dazu stellte er eine Reihe von Kameras entlang einer Spur auf und nahm Bilder in schneller Folge als ein Pferd lief. Dieses Verfahren erlaubt ihm 16 Bilder des Pferdes Lauf zu erfassen. In einem der Bilder, hat das Pferd in der Tat haben alle vier Beine vom Boden ab.
Muybridges „The Horse in Motion“ Fotos mit dem ersten Foto entfernt.
Muybridge später wiederholte das Experiment und platziert jedes Foto auf ein Gerät, das die Fotos in schnellen Folge Projekt könnte die Illusion des Pferd am Laufen zu geben, den ersten Filmprojektor zu schaffen.
Der Prozess der Bilder in schneller Folge wechselnden die Illusion von Bewegung zu geben, wird Animation genannt.
Ein Sprite ist ein einzelnes grafisches Bild, das in eine größere Szene aufgenommen wird, so dass es ein Teil der Szene zu sein scheint.
Sprites sind ein beliebter Weg, um große, komplexe Szenen zu erstellen, wie Sie jeden Sprit getrennt vom Rest der Szene manipulieren können. Dies ermöglicht eine größere Kontrolle darüber, wie die Szene gerendert wird, sowie darüber, wie die Spieler mit der Szene interagieren können.
Es ist nicht ungewöhnlich für Spiele Dutzende bis Hunderte von Sprites zu haben. jeder von ihnen als Einzel Lade Bild würde viel Speicher und Rechenleistung verbrauchen. Um Sprites zu verwalten und vermeiden spritesheets mit so vielen Bildern, verwenden viele Spiele.
Spritesheet
Wenn Sie viele Sprites in einem einzigen Bild setzen, erhalten Sie eine spritesheet.
Spritesheets werden verwendet, um den Prozess der Anzeige von Bildern auf dem Bildschirm zu beschleunigen; Es ist viel schneller zu einem Bild zu holen und nur einen Teil des Bildes angezeigt werden, als es viele Bilder zu holen und sie anzuzeigen.
Spritesheet Animation ist nichts anderes als ein spritesheet und Wechsel nehmen die Sprite in schneller Folge wiedergegeben wird, um die Illusion von Bewegung zu geben, ähnlich wie ein Filmprojektor einen Film anzuzeigen.
Teile eines Spritesheet
Spritesheets bestehen aus zwei Teilen: Rahmen und Zyklen
Ein Rahmen ist ein einzelnes Bild (oder Sprite) vom spritesheet. zurück zum Pferd Beispiel des Muybridge gehen, jedes Bild des Pferdes in dem Bild würde ein Rahmen sein.
Wenn der Rahmen in einer Reihenfolge gebracht werden, die eine kontinuierliche Bewegung schafft, schafft es einen Zyklus.
Setzt man die Fotos des Pferdes in der Reihenfolge, die sie aufgenommen wurden erzeugt einen „run“ Zyklus, da das Pferd läuft (im Gegensatz zu einem „Spaziergang“ oder „Leerlauf“ -Zyklus im Gegensatz).
Coding Spritesheet Animationen
Es gibt drei Teile eine spritesheet Animation Codierung:
- Erstellen des Bildes
- Aktualisierung des Bildes zu jedem Bild der Animation
- Zeichnen Sie den Rahmen auf dem Bildschirm
Erstellen des Bild
Wir werden durch die Schaffung der Funktion (oder Klasse) starten, die unsere spritesheet Animation behandelt. Mit dieser Funktion wird das Bild erstellen und den Pfad festgelegt, so dass wir sie ziehen können.
Da verschiedene spritesheets unterschiedliche Rahmengrößen haben können, müssen wir die Rahmenbreite und Höhe passieren, so dass wir genau, wie viele Bilder sind in einer Reihe und Spalte des Bildes berechnen kann. Wir werden diese Informationen benutzen, später die Animation auf den Bildschirm zu zeichnen.
Es ist wichtig, daß jeder Rahmen des spritesheet ist die gleiche Breite und die Höhe; Andernfalls wird die Animation auf den Bildschirm zeichnen, sehr schwierig.
Aktualisierung des Bildes
Um die spritesheet Animation zu aktualisieren, alles, was wir tun müssen, ist zu ändern, welcher Rahmen wir ziehen werden. Unten ist die spritesheet in jedem seiner Bilder und nummerierte geteilt.
Bei jedem Rahmen des Spiels, werden wir die spritesheet aktualisieren. Allerdings wollen wir nicht die Animation zum nächsten Bild wechseln jeden Rahmen, so müssen wir unsere spritesheet sagen, wie viele Frames zu warten, vor dem Übergang.
Es ist wichtig zu beachten, dass nicht jede spritesheet einen Sprit in jedem verfügbaren Rahmen (wie das Bild von Muybridges „The Horse in Motion“). Wenn wir versuchen würden, unsere spritesheet mit einem leeren Rahmen zu animieren, es würde jedes Mal ein Ausrutscher in der Animation sein die leeren Rahmen auf den Bildschirm gezeichnet.
Um dies zu kompensieren, werden wir auch die spritesheet sagen, was die letzte Rahmennummer ist, so dass wir keine leeren Rahmen animieren.
Durch die Verwendung des Modulo-Operator (%) für die current. wir können eine Endlosschleife-jedes Mal, schaffen die endFrame erreicht ist, wird die current auf 0 wieder zurück damit die Animation Looping.
Der Modulo-Operator für den Zähler verhindert Ganzzahlüberlauf.
Zeichnen der Bild
ein Bild aus einer spritesheet Zeichnung arbeitet in genau der gleichen Weise wie ein Bild aus einer Fliese Karte zeichnen.
Wir berechnen die Zeile des Bildes wir, indem der Modulo des aktuellen Rahmens und die Anzahl der Bilder pro Zeile zeichnen möchten. Wir berechnen die Säule durch den aktuellen Frame Dividieren durch die Anzahl der Frames pro Zeile.
Unter Verwendung dieser Zeile und Spalte, können wir berechnen dann die Koordinaten des Rahmens zu ziehen, indem sie Frame und frameHeight multipliziert wird. beziehungsweise:
Mit der spritesheet Funktion vorhanden ist, können wir es jetzt verwenden, um eine spritesheet Animation zu erstellen:
Mehrere Zyklen in One Spritesheet
Der obige Code wird für jede spritesheet Arbeit einen Zyklus enthält. Allerdings ist es nicht ungewöhnlich, dass ein spritesheet mehrere Zyklen zu halten, was bedeutet, dass es mehrere Animationen in einem einzigen spritesheet sein wird.
Wir müssen ändern, wie unsere spritesheet funktioniert, um mehrere Animationen von einem einzigen spritesheet zu handhaben.
Erstellen des Bild
Da das Bild das gleiche zwischen Animationen bleibt, werden wir unsere spritesheet in zwei Funktionen teilen: ein für das Bild, und einem für jede Animation aus dem spritesheet.
Ein spritesheet die Informationen über das Bild und die Rahmengrößen halten.
Aktualisierung und Zeichnen der Bild
Eine Animation wird die spritesheet verantwortlich für die Aktualisierung und Zeichnung sein.
Da die spritesheet mehr Frames als jede einzelne Animation enthalten benötigen, müssen wir wissen, welche Rahmennummer zu starten und die Animation zu beenden. Mit diesen Informationen werden wir eine Reihe von Rahmennummern erstellen, so dass wir current verwenden, um die richtige Rahmennummer zuzugreifen.
die Spritesheet Putting zu verwenden
Mit der Animation bereit, jede spritesheet zu handhaben, können wir es verwenden, um einen einfacher Canabalt-Stil unendlichen Läufer zu machen:
Sie können den vollständigen Quellcode für diese in unserem GitHub Repo finden. Was ist Ihre hohe Punktzahl?