Spritesheets werden seit langem in Spielen verwendet. Klassische Spiele wie Legend of Zelda: A Link to the Past und sogar moderne Spiele wie Cut the Rope haben sie verwendet.
In diesem Artikel werden wir darüber sprechen, was Spritesheet-Animationen sind und wie man sie coded.
Zudem werden wir ihnen zeigen, wie man sie in einem kleinen Spiel verwendet. Wir werden hier JavaScript für den Code verwenden, aber Sie sollten in der Lage sein, den Ausführungen in jeder Programmiersprache zu folgen.
Bevor wir darüber sprechen können, wie man eine Spritesheet-Animation coded, sollten wir zuerst ein paar Begriffe klären: Animation, Sprite und Spritesheet.
Animation.
Bereits 1872 wurde Eadweard Muybridge beauftragt zu beweisen, ob ein Pferd beim Laufen alle vier Beine auf einmal vom Boden hob. Dazu richtete er eine Reihe von Kameras entlang einer Strecke ein und fotografierte schnell mehrere Male ein vorbeilaufendes Pferd. Auf diese Weise konnte er 16 Bilder vom Lauf des Pferdes aufnehmen. Auf einem der Bilder hatte das Pferd tatsächlich alle vier Beine über dem Boden.
Muybridge wiederholte später das Experiment und legte jedes Foto auf ein Gerät, das die Fotos in rascher Folge projizieren konnte, um die Illusion des Pferderennens zu vermitteln und so den ersten Filmprojektor zu schaffen.
Der Prozess, Bilder in schneller Folge zu verändern, um die Illusion von Bewegung zu erzeugen, wird als Animation bezeichnet.
Ein Sprite ist ein einzelnes grafisches Bild, das in eine größere Szene eingebunden wird, so dass es als Teil der Szene erscheint.
Sprites sind eine beliebte Möglichkeit, große, komplexe Szenen zu erstellen, da man jedes Sprite separat vom Rest der Szene manipulieren kann. Dies ermöglicht eine bessere Kontrolle darüber, wie die Szene gerendert wird und wie die Spieler mit der Szene interagieren können.
Es ist nicht ungewöhnlich, dass Spiele Dutzende bis Hunderte von Sprites haben. Jedes dieser Bilder als Einzelbild zu laden, würde viel Speicher und Rechenleistung verbrauchen. Um Sprites zu verwalten und zu vermeiden, dass so viele Bilder verwendet werden, nutzen viele Spiele Spritesheets.
Wenn Sie nach vorgefertigten, kreativen Grafiken suchen, entdecken Sie Game Sprites und Sheets, die genau das Richtige für ihre Bedürfnisse sind oder Sie können ihr eigenes, individuelles Spielcharakter-Sprite bei verschiedenen Anbietern bestellen.
Spritesheet.
Wenn viele Sprites in ein einzlenes Bild gepackt werden, spricht man von einem Spritesheet.
Spritesheets werden verwendet, um den Prozess der Anzeige von Bildern auf dem Bildschirm zu beschleunigen. Es geht viel schneller, ein Bild zu holen und nur einen Teil des Bildes anzuzeigen, als viele Bilder zu holen und anzuzeigen.
Spritesheet-Animation ist nichts anderes als ein Spritesheet zu nehmen und zu ändern, welches Sprite in schneller Folge gerendert wird, um die Illusion von Bewegung zu erzeugen, ähnlich wie ein Filmprojektor, der einen Film anzeigt.
Teile eines Spritesheets.
Spritesheets bestehen aus zwei Teilen: Frames und Cycles.
Ein Frame ist ein einzelnes Bild (oder Sprite) aus dem Spritesheet. Zurück zum Beispiel des Muybridge-Pferdes, jedes Bild des Pferdes im Bild wäre ein Frame.
Wenn die Frames in eine Reihenfolge gebracht werden, die eine kontinuierliche Bewegung erzeugt, entsteht ein Cycle.
Wenn Sie die Fotos des Pferdes in der Reihenfolge ihrer Aufnahme platzieren, entsteht ein „Run“-Cycle, da das Pferd läuft (im Gegensatz zu einem „Walk“- oder „Idle“-Cycle).
Spritesheet-Animationen coden.
Es gibt drei Teile zum Coden einer Spritesheet-Animation:
- Erstellen des Bildes.
- Aktualisierung des Bildes in jedem Frame der Animation.
- Zeichnen des Frames auf dem Bildschirm.
Das Bild erstellen.
Wir beginnen mit der Erstellung der Funktion (oder Klasse), die unsere Spritesheet-Animation behandelt. Diese Funktion erstellt das Bild und legt seinen Pfad fest, so dass wir es zum Zeichnen verwenden können.
Da verschiedene Spritesheets unterschiedliche Framegrößen haben können, müssen wir die Framebreite und -höhe übergeben, damit wir genau berechnen können, wie viele Frames in einer Reihe und Spalte des Bildes sind. Wir werden diese Informationen später verwenden, um die Animation auf den Bildschirm zu zeichnen.
Es ist wichtig, dass jeder Frame des Spritesheets die gleiche Breite und Höhe hat. Andernfalls ist es sehr schwierig, die Animation auf dem Bildschirm zu zeichnen.
Aktualisierung des Bildes.
Um die Spritesheet-Animation zu aktualisieren, müssen wir nur den Frame ändern, den wir zeichnen. Unten ist das Spritesheet in jeden seiner Frames unterteilt und nummeriert.
Bei jedem Frame des Spiels werden wir das Spritesheet aktualisieren. Wir wollen jedoch nicht, dass die Animation bei jedem Frame zum nächsten Frame wechselt, also müssen wir unserem Spritesheet sagen, wie viele Frames vor dem Übergang zu erwarten sind.
Es ist wichtig zu beachten, dass nicht jedes Spritesheet ein Sprite in jedem verfügbaren Frame hat (wie das Bild von Muybridges „The Horse in Motion“). Wenn wir versuchen würden, unser Spritesheet mit einem leeren Frame zu animieren, würde jedes Mal, wenn der leere Frame auf dem Bildschirm gezeichnet wird, ein Blip in der Animation erscheinen.
Um dies zu kompensieren, werden wir dem Spritesheet auch die letzte Framenummer mitteilen, damit wir keinen leeren Frames animieren.
Durch die Verwendung des Modulo-Operators (%) für den currentFrame können wir eine kontinuierliche Schleife erzeugen – jedes Mal, wenn der EndFrame erreicht ist, wird der currentFrame wieder auf 0 zurückgesetzt, wodurch die Animation durchlaufen wird.
Der Modulo-Operator für den Zähler verhindert einen Integer-Überlauf.
Zeichnen des Bildes.
Das Zeichnen eines Bildes aus einem Spritesheet funktioniert genauso wie das Zeichnen eines Bildes aus einer Kachelkarte.
Wir berechnen die Zeile des Bildes, welches wir zeichnen möchten, indem wir das Modulo des aktuellen Frames und die Anzahl der Frames pro Zeile nehmen. Wir berechnen die Spalte, indem wir den aktuellen Frame durch die Anzahl der Frames pro Zeile dividieren.
Mit dieser Zeile und Spalte können wir dann die Koordinaten des zu zeichnenden Frames berechnen, indem wir sie mit frameWidth bzw. frameHeight multiplizieren:
Mit der Spritesheet-Funktion können wir nun eine Spritesheet-Animation erstellen:
Mehrere Cycles in einem Spritesheet.
Der obige Code funktioniert für jeden Spritesheet, welches einen Cycle enthält. Es ist jedoch nicht ungewöhnlich, dass ein Spritesheet mehrere Cycle enthält, was bedeutet, dass es mehrere Animationen in einem einzigen Spritesheet gibt.
Wir müssen die Funktionsweise unseres Spritesheets ändern, um mehrere Animationen aus einem einzigen Spritesheet zu verarbeiten.
Das Bild erstellen.
Da das Bild zwischen den Animationen gleich bleibt, teilen wir unser Spritesheet in zwei Funktionen auf. Eine für das Bild und eine für jede Animation aus dem Spritesheet.
Ein Spritesheet enthält die Informationen über das Bild und die Rahmengrößen.
Aktualisieren und Zeichnen des Bildes.
Eine Animation wird das Spritesheet aktualisieren und zeichnen.
Da das Spritesheet mehr Frames enthält, als jede einzelne Animation benötigt, müssen wir wissen, welche Framenummer die Animation starten und beenden soll. Anhand dieser Informationen erstellen wir ein Array von Bildnummern, so dass wir mit currentFrame auf die richtige Bildnummer zugreifen können.
Verwendung des Spritesheets.
Mit der Animation, die bereit ist, jedes Spritesheet zu bearbeiten, können wir es verwenden, um ein einfaches Runner-Spiel zu erzeugen. Den vollständigen Quellcode zu dem Spiel finden Sie nach einen Klick auf den folgenden Link.
Vielen Dank für ihren Besuch.