7 days of WordPress themes, graphics & videos - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Programming

Animieren mit Asset Sheets: Eine Alternative zum Blitting

Scroll to top
Read Time: 10 mins

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Sie haben also ein großartiges Spiel in Arbeit, es hat alle Arten von komplexer Physik, epischer feindlicher KI oder was-haben-Sie. Aber es fühlt sich leblos an. Sie wollen etwas OOMPH, Sie wollen ein bisschen Animation!

Wenn Sie nachschlagen, wie Sie animieren können, ist die erste Antwort, auf die Sie stoßen, höchstwahrscheinlich eine Methode, bei der Spritesheets und Blitting verwendet werden. Tatsächlich sprechen fast alle Tutorials im Web nur über Blitting, als gäbe es keine andere Möglichkeit zum Animieren. Aber meiner Erfahrung nach gibt es einen besseren Weg, um deine Orks und Goblins zu animieren!

Diese Methode kann als Animieren mit Asset-Sheets bezeichnet werden - oder technisch gesehen als Tweening mit Asset-Sheets - im Gegensatz zur Verwendung von Sprite-Sheets. Bevor wir genau wissen, was dies bedeutet, betrachten wir eine wichtige Frage:


Was ist falsch am Blitting?

Im Folgenden finden Sie einige Gründe, warum Sie in bestimmten Fällen das Blitting nicht verwenden möchten.

1. Es nimmt viel Platz ein

Unabhängig davon, ob es sich um RAM oder Speicherplatz handelt, können Sprite-Blätter die Dinge leicht verstopfen. Vor allem, wenn Sie versuchen, HD-Grafiken zu erstellen. Riesige Sprite-Blätter müssen möglicherweise in mehrere PNGs aufgeteilt werden, die wertvollen Arbeitsspeicher beanspruchen und die Größe Ihres Spiels in die Höhe schnellen lassen, wenn Sie nicht vorsichtig sind.

2. Es ist nicht dynamisch

Was passiert, wenn Sie eine Animation beschleunigen möchten? Sie könnten einige Frames überspringen, aber wie wäre es mit einer Verlangsamung? Die Animation würde abgehackt und hässlich aussehen. Selbst wenn Sie nur 60 fps unterstützen möchten, was ist, wenn ein Computer das Spiel schneller ausführen kann? Sie könnten atemberaubend flüssige Animationen bei höheren Bildraten ohne zusätzliche Arbeit haben, und es würde auch gut aussehen, wenn Sie die Bildrate des Spiels jederzeit ändern würden.

Und was ist, wenn Sie wollten, dass etwas passiert, wenn die Arme des Spielers irgendwo ankommen? Oder ihn etwas abholen zu lassen? Sie müssen seinen Arm während der gesamten Animation manuell markieren, was zeitaufwändig sein kann, da Sie keine Daten darüber erhalten können, wo sich seine Gliedmaßen von einem Sprite-Blatt befinden.

3. Sie können keine Übergänge vornehmen

Was passiert, wenn der Spieler rennt und plötzlich springt? Es springt sofort zur Sprunganimation. Dies sieht abgehackt aus und geschieht jedes Mal, wenn die Animation in einen neuen Zustand übergeht. Sie müssten für jedes Animationspaar einen Übergang vornehmen, was nicht nur wahnsinnig zeitaufwändig ist, sondern auch den nachteiligen Effekt hat, die RAM-Nutzung zu erhöhen, wie bereits erläutert.


Die Alternative

Die Verwendung von Asset-Sheets ermöglicht nicht nur, dass die Animationen dynamisch sind und mit jedem FPS skaliert werden können, sondern auch reibungslos zwischen zwei beliebigen Zuständen wechseln kann, sondern benötigt im Vergleich zum Blitting auch eine winzige Menge an Speicherplatz und RAM!

Das ist nicht einmal sehr neu. Einige beliebte Spiele verwenden es, wie das kürzlich beliebte Closure. Die einzige Einschränkung besteht darin, dass keine FBF-Animation (Frame-by-Frame) ausgeführt werden kann, da Tweening erforderlich ist. Wenn Sie also komplexe Explosionen haben, müssen Sie Sprite-Blätter verwenden.

In vielen Fällen werden Sie jedoch feststellen, dass dies nicht erforderlich ist, und es ist mehr als die Mühe wert, ein solches System für Ihr Spiel zu haben, da einige Spiele sich vollständig darauf verlassen und eine Menge Overhead sparen könnten . Es ist auch sehr cool, weil es ähnlich ist, wie Sie ein 3D-Spiel animieren könnten!

Um es zusammenzufassen:

Gamedev Animation With Asset-Sheets: An Alternative to BlittingGamedev Animation With Asset-Sheets: An Alternative to BlittingGamedev Animation With Asset-Sheets: An Alternative to Blitting

Lassen Sie uns gleich eintauchen

Dies ist ein Charakter und sein Vermögensblatt.

Gamedev Animation With Asset-Sheets: An Alternative to BlittingGamedev Animation With Asset-Sheets: An Alternative to BlittingGamedev Animation With Asset-Sheets: An Alternative to Blitting

Wie der Name schon sagt, ist ein Asset Sheet ein PNG, bei dem alle Glieder/Assets des Charakters oder Objekts getrennt sind.
Und hier sind die Animationsdaten in JSON (natürlich können Sie jedes Format verwenden, mit dem Sie arbeiten möchten):

Wenn Sie diese beiden Elemente in einem fantastischen Motor kombinieren, erhalten Sie:

Gamedev Animation With Asset-Sheets: An Alternative to Blitting

Und im Gegensatz zu einer blittenen Animation kann dies beschleunigt oder beschleunigt werden oder sehr reibungslos übergehen. Das werden wir also tun.


Schritt 1: Exportieren Ihres Asset Sheets

Der erste Schritt besteht darin, Ihr Asset-Sheet fertig zu machen. Sie können dies auf verschiedene Arten tun. Am Ende steht ein Blatt mit den Assets und eine Datendatei mit den Positionen der Assets im Blatt. Dies ist genau die gleiche Methode wie beim Erstellen eines Spritesheets, außer dass Sie anstelle von Sprites separate Assets hinzufügen.

Exportieren Sie die Gliedmaßen und Teile Ihres Players als einzelne PNGs und gruppieren Sie sie dann mit einem Programm wie Texture Packer zu einem Blatt. Es gibt andere Programme, aber ich persönlich bevorzuge Texture Packer, weil es vielseitig und funktionsreich ist.

Tipp: Unabhängig davon, mit welcher Software Sie Ihre Blätter erstellen, stellen Sie sicher, dass zwischen jedem Asset und 1 Pixel Extrusion mindestens 2 Pixel Polsterung vorhanden sind. Dies wird in Zukunft einige böse Probleme verhindern.

Schritt 2: Exportieren Ihrer Animationsdaten

Dies ist wohl der wichtigste Schritt, da dies die Daten sind, mit denen Sie alle Animationen zur Laufzeit erstellen. Es ist auch wichtig, weil es plattformunabhängig ist. Sie können auf einer PS3 dieselben Animationsdaten verwenden wie auf einem iPhone.

Die Daten, die Sie benötigen, sind die x-Position, die y-Position, der Rotationswert und andere solche Eigenschaften jedes Assets für jeden Frame Ihrer Animation.

Wenn Sie zum Animieren Adobe Flash verwenden, können Sie Ihre Animationsdaten problemlos exportieren. Theoretisch müssen Sie nur die untergeordneten Elemente des MovieClip durchlaufen und die Frames durchlaufen, während Sie die Daten abrufen.

Dies kann jedoch störend sein. Zum Glück gibt es Werkzeugs, die dies bereits tun. Zum Beispiel ist Grapefrukt ein großartiges Werkzeug mit einer Vielzahl von Funktionen, einschließlich des Exportierens von Spritesheets sowie von Animationsdaten in XML.

Hinweis: Sie müssen sicherstellen, dass die Namen Ihrer Assets in den Daten mit den Namen im Asset Sheet übereinstimmen, damit sie leicht verknüpft werden können.

Wenn Sie versuchen, es zu ändern, oder wenn Sie nur die einfache Funktion zum Exportieren von Animationen verwenden möchten, können Sie meine eigene Animationsexporterklasse verwenden, die Animationsdaten automatisch in eine JSON-Datei im selben Verzeichnis exportiert. Sie können es hier zusammen mit einem Beispiel-Asset-Sheet und einer Beispielanimation herunterladen.

Wenn Sie eine andere Animationssoftware (oder Ihre eigene) verwenden, sollte es nicht zu schwierig sein, ein Plugin zu finden oder zu schreiben, das die Koordinaten und Daten der Assets in jedem Frame exportiert.

Hier ist eine Liste aller Attribute, die die Flash-Exporteure für jedes Asset ausgeben:

  • x und y
  • rotation (in Grad oder Bogenmaß)
  • scaleX und scaleY (wie stark das Asset auf jeder Achse skaliert ist)
  • alpha (Transparenz)
  • colorMatrix (ermöglicht das Exportieren von Daten wie Helligkeit, Farbton und Kontrast)

Es gibt keine Begrenzung, wie viele Daten Sie ausgeben können. Zum Beispiel habe ich meinem Exporter ein zusätzliches depth feld hinzugefügt, das mir die Tiefe jedes Assets angibt. Wenn der Animator die Assets in einer bestimmten Reihenfolge anordnet oder die Ebenen ändert, werden sie automatisch in der Engine aktualisiert.

Wie Sie sehen können, können Sie mit den richtigen Daten viele verschiedene Arten von Animationen und Funktionen erstellen.


Schritt 3: Analysieren der Daten

Jetzt haben Sie Ihr Asset Sheet, seine Datendatei und die Animation JSON fertig. Als nächstes kommt der schwierige Teil: Schreiben des Animationssystems, das unsere Daten versteht und die separaten Assets und Rohdaten in schöne Animationen konvertiert.

Der erste Schritt ist das Laden der Animationsdaten. Dies sollte einfach sein, da die meisten Sprachen einen JSON- oder XML-Parser haben.

Anschließend spleißen Sie jedes Asset aus dem Blatt (oder rendern das Rechteck nur mit Ihrem Asset) und speichern es in einem Array.

Jetzt haben unsere Spielobjekte zwei Arrays: ein assetArray mit den tatsächlichen Assets und ein animationsArray mit den Animationsdaten.

Hinweis: Sie möchten das animationArray indizieren und den Assets Namen geben. Auf diese Weise können Sie problemlos über das Animationsarray auf die richtigen Daten zugreifen. Wenn ich also den Wert von object.assetArray[5].name drucke, wird beispielsweise "leg" angezeigt. Wenn ich dann auf object.animationArray["leg"] zugreife, sollte ich die Animationsdaten für das Bein des Charakters abrufen.

Jetzt sehen wir uns einen Code an!

Bisher durchlaufen wir alle Assets, um ihre x, y und rotation auf die des Mutterobjekts festzulegen. Dies ist wichtig, damit Sie Ihre Objekte bewegen können, ohne die Animation zu ruinieren, sodass die Animationskoordinaten relativ zu diesem Punkt sind.

Hier haben wir die Zeile +animationArray[assetArray[i].name[currentFrame].x hinzugefügt, wobei currentFrame eine Ganzzahl ist, die den aktuellen Frame darstellt, in dem Sie sich befinden.

Jetzt befinden sich alle Assets an ihren ersten Frame-Positionen. Wenn Sie also currentFrame erhöhen, befinden sie sich an den Positionen von Frame 2 und so weiter.

Herzlichen Glückwunsch, Sie haben eine Animation erstellt! Es sieht genauso aus wie wenn Sie es mit einem Spritesheet gemacht hätten, außer dass es Sie nur ein paar Kilobyte statt Megabyte gekostet hat.

Dies ist nur ein sehr einfaches Beispiel. Normalerweise möchten Sie separate Animationen haben, z. B. eine "laufende" Animation mit 30 Bildern und eine "Jump" - Animation mit 12 Bildern. Dazu fügen Sie Ihrer Animationsarray - Hierarchie einfach eine weitere Ebene hinzu, sodass sie ungefähr so aussieht:

Gamedev Animation With Asset-Sheets: An Alternative to BlittingGamedev Animation With Asset-Sheets: An Alternative to BlittingGamedev Animation With Asset-Sheets: An Alternative to Blitting

Schritt 4: Interpolation

Wir müssen hier nicht aufhören. Wir möchten versuchen, unsere Animationen so flüssig und dynamisch wie versprochen zu gestalten.

Normalerweise wäre dies etwas ziemlich schwierig - wir müssten den vollständigen Status des vorherigen Frames speichern, um auf den aktuellen zu interpolieren. Aber zum Glück speichert unser System diese Informationen bereits!

Sie wissen immer, wo sich das vorherige Bild befand und wo sich das nächste Bild befinden wird. So einfach ist das Interpolieren zwischen Bildern:

Hier erhalten wir die Differenz zwischen dem nächsten Frame und dem aktuellen Frame, multipliziert mit einem timeFactor, der die Zeit zwischen den beiden Frames ist.

Dies bedeutet, dass Ihre Animation in Zeitlupe nicht so aussieht:

Gamedev Animation With Asset-Sheets: An Alternative to Blitting
Gamedev Animation With Asset-Sheets: An Alternative to Blitting

... es würde so aussehen:

Gamedev Animation With Asset-Sheets: An Alternative to Blitting
Gamedev Animation With Asset-Sheets: An Alternative to Blitting

Nehmen Sie das, blitting!


Bonusschritt: Farbmatrix

Wenn Sie Flash zum Animieren verwenden, sieht Ihre Farbmatrix möglicherweise folgendermaßen aus:

{1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0}

Nicht sehr gut lesbar, oder?

Flash speichert dort alle Helligkeits-, Kontrast- und Sättigungsdaten. Zum Glück haben sie ihre Formel veröffentlicht, damit wir nicht versuchen müssen, dies rückzuentwickeln.

Die folgende Formel zeigt Ihnen, wie Sie die endgültigen RGBA-Werte des Pixels unter Berücksichtigung der Quellfarbe und der Farbmatrix berechnen (a ist das Farbmatrix-Array):

Weitere Informationen zur ColorMatrix-Klasse von Flash finden Sie hier.


Schlussfolgerung und Fallstudie

Obwohl es auf den ersten Blick etwas beängstigend erscheinen mag, ist diese Methode wirklich einfach anzuwenden, wenn alles eingerichtet ist, und das Einrichten einer geeigneten Basis ist einige Zeit und Mühe wert.

Das heißt nicht, dass diese Methode für jede Situation ideal ist. Wie bereits erwähnt, würde dies nicht wirklich funktionieren, wenn Ihr Spiel auf Einzelbildanimationen oder Dingen basiert, die mit Tweening nicht möglich sind. (Obwohl Sie Methoden immer mischen und anpassen können.)

Nachdem dies gesagt ist, werfen wir einen Blick auf ein letztes Beispiel aus der Praxis für die Verwendung dieser Methode.

Das ist eine Tür:

Gamedev Animation With Asset-Sheets: An Alternative to Blitting

Es öffnet und schließt sich und Sie möchten, dass der Spieler nicht durchkommt.

Es ist einfach, oder? Je nachdem, wie viele Frames die Animation enthält, muss nur eine Kollisionsbox vertikal verschoben werden. Das Problem ist jedoch, dass diese Animation nicht linear ist: Es gibt eine leichte Lockerung. Wenn Sie die vertikale Position der Kollisionsbox an den aktuellen Frame der Animation anpassen, wird die Kollisionsbox nicht mit der Animation synchronisiert, sodass die Dinge so aussehen, als würden sie entweder durch die Tür gehen oder in der Luft stehen.

Zum Glück haben Sie das x, y, die height und die width des animierten Tür-Assets, sodass Sie Ihre Kollision perfekt synchronisieren können!

Gamedev Animation With Asset-Sheets: An Alternative to Blitting
Blitting vs Asset Sheets
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.