Knochenbasierte Unity-2D-Animation Erstellen der tatsächlichen Animationen

In dieser Serie konzentrieren wir uns auf die knochenbasierten 2D-Animationswerkzeuge der Unity Engine. Die Grundidee ist, die Grundlagen der 2D-Animation zu präsentieren und zu vermitteln, damit Sie sie auf Ihre eigenen Spiele anwenden können. In diesem Lernprogramm fügen wir die Animationen für Leerlauf, Sprung und Fall hinzu.

Bevor wir mit dem Tutorial beginnen, möchten wir uns bei Chenguang (DragonBonesTeam) für die Bereitstellung der Game-Art bedanken, mit der diese Tutorial-Serie erstellt wurde.

Wo wir aufgehört haben

Im vorherigen Tutorial haben wir ein 2D-Sprite importiert, das den Spielcharakter darstellt, mit dem Unity Sprite-Editor in Scheiben geschnitten und die Basis des Charakters konstruiert. Wenn Sie das vorherige Tutorial nicht abgeschlossen haben, empfehlen wir Ihnen dringend, dies zu tun, da Sie den 2D-Charakter benötigen, um dieses Tutorial zu befolgen.

Endgültige Vorschau

Diese Demo zeigt den animierten Drachen, den wir treffen wollen Platz um es zum springen zu bringen:

Allgemeine Animationstheorie

Es gibt mehrere wichtige Konzepte, die Sie beim Animieren beachten müssen. In diesem Tutorial gehen wir davon aus, dass Sie keine Erfahrung mit Animationen (2D oder 3D) haben und noch nie mit Animationssoftware gearbeitet haben.

Die Animation, wie wir sie kennen, hat sich von Farbe zu Digital entwickelt. Es gibt Dutzende von Hybrid-Animationstechniken, aber alle haben die gleichen Grundprinzipien wie Lippensynchronisation, Squash oder Laufzyklen.

Um die Animation zu verstehen, müssen Sie zuerst das Konzept von a lernen Rahmen. Ein Rahmen ist eines von vielen Standbildern, aus denen sich eine Animation zusammensetzt. Wenn Sie einen Cartoon anhalten, besteht das Bild, das Ihr Fernsehgerät zeigt, aus einem einzigen Bild.

Der Hauptunterschied zwischen herkömmlichen Animationen und Computeranimationen liegt in den verwendeten Tools. Traditionelle Animationen sind ein sehr praktischer Prozess, bei dem die Künstler Tausende von Einzelbildern zeichnen oder komponieren müssen. Computeranimation macht viele Werkzeuge überflüssig und vereinfacht im Allgemeinen den gesamten Prozess. 

Während bei herkömmlichen Animationen der Künstler beispielsweise fast jeden einzelnen Frame einer Animation zeichnen muss, kann er bei Computeranimationen das verwenden, was wir nennen Key Frame Punkte. Diese Keyframe-Punkte sind, wie der Name sagt, Schlüsselschritte der Animation. Grundsätzlich erstellt der Künstler diese Schlüsselbildpunkte, und der Computer interpoliert zwischen ihnen, um die fehlenden Rahmen zu erzeugen. Wie Sie sich vorstellen können, ist dieser Prozess weniger arbeitsintensiv.

Sie können ein Keyframe als einzelnes Standbild in einer animierten Sequenz definieren, die an einem wichtigen Punkt in dieser Sequenz stattfindet. Ein gutes Beispiel wäre eine Animation des Felsens. Die ursprüngliche Position des Felsens in der Luft wäre ein Schlüsselbild, und die Endposition des Felsens auf dem Boden wäre eine andere. Der Computer generiert dann alle anderen Frames. Wir nennen die Frames zwischen Keyframes getweened Rahmen, und sie sind verantwortlich für die Illusion von Bewegung.

Der Rahmen kann auch als Zeiteinheit verwendet werden. Sie können beispielsweise sagen, dass eine Animation 20 Frames dauert. Die tatsächliche Dauer einer Animation hängt von der Bildrate ab, die mit dem Format der Animation variieren kann. In Nordamerika und Japan liegt der Standard bei 30 Bildern pro Sekunde (fps), während der Standard in der übrigen Welt üblicherweise 25 fps beträgt.

Animationen

Da Sie nun die Grundlagen der Animation und der Computeranimation genau kennen, kehren wir jetzt zu Unity zurück, um mit der Animation unserer Figur zu beginnen.

Der erste Schritt ist das Erstellen eines Ordners in der Vermögenswerte Verzeichnis aufgerufen Animationen, in dem Sie die Animationen Ihrer Charaktere speichern.

Als nächstes öffnen Sie die Animation Panel in Unity (Fenster > Animation):

Wie Sie sehen, enthält das Bedienfeld eine horizontale Zeitleiste, eine Aufnahmetaste, eine Wiedergabetaste und einige Schaltflächen zum Navigieren durch die Frames. 

Packe die Animation Fenster und docken es neben dem Konsole Registerkarte (Beachten Sie, dass Sie die 2D-Layout erstellt im Unity 2D Arkanoid-Tutorial). Auf diese Weise können Sie an Ihrer Szene arbeiten, während das Animationsfenster noch geöffnet ist.

Animation im Leerlauf

Sie erstellen drei verschiedene Animationen für den Drachen: eine Animation im Leerlauf, eine Sprunganimation und eine Herbstanimation. 

Wählen Sie zum Erstellen der ersten Animation die Option Drachen Spielobjekt und klicken Sie auf Kurve hinzufügen auf der Animation Panel. In einem neuen Fenster werden Sie aufgefordert, der Animationsdatei und dem Zielordner einen Namen zu geben, in dem sie gespeichert werden sollen. Unity-Animationsdateien verfügen über .anim Erweiterung, und Sie speichern sie in der Animationen Ordner, den Sie zuvor erstellt haben. Erstellen Sie die Idle.anim Datei.

Wie Sie vielleicht bemerken, ändert sich nach dem Speichern der Datei im Editor-Layout einiges:

Wenn Sie die Wiedergabeschaltflächen oben in Ihrer Szene betrachten, werden Sie feststellen, dass sie rot sind. In dem Animation Die Aufnahme-Schaltfläche ist jetzt auch rot und Sie sehen eine rote Linie in der Timeline. Das heißt, du bist dabei Aufzeichnung Modus. Auch wenn man sich das anschaut Inspektor, Sie werden sehen, dass Unity Ihrem Spielobjekt automatisch eine neue Komponente hinzugefügt hat: die Animator.

Das Animator Komponente ist ein Verweis auf eine Animator-Controller Damit wird das Verhalten eines Charakters festgelegt. Dies beinhaltet ein Setup für Zustandsmaschinen, Bäume mischen und Ereignisse, die per Skript gesteuert werden können. Grundsätzlich die Animator ist die Verbindung zwischen dem Charakter und seinem Verhalten.

Wir werden das abdecken Animator Komponente mit mehr Tiefe später; Im Moment konzentrieren wir uns nur auf die Animation. In deiner Drachen Spielobjekt, wählen Sie das Kopf:

Auf der Animation Zeitlinie ziehen Sie die rote Linie nach 1:00 (eine Minute in).

Nun auf der Inspektor, stellen Sie das ein Z-Drehung zu 7,9. Wie Sie vielleicht bemerken, haben Sie jetzt einige kleine Formen auf Ihrer Timeline. Diese Markierungen zeigen die Keyframes der Animation an.

Verschieben Sie die rote Linie nach 2:00 und setze das Z-Drehung vom Kopf bis 0.

Drücken Sie die Aufnahmetaste erneut, um den Aufnahmemodus zu deaktivieren. Sie können jetzt die Wiedergabetaste drücken, um Ihre Animation zu testen. Wenn alles funktioniert hat, sollte der Kopf Ihres Drachen auf und ab bewegt werden.

Anpassen der Animation

Der Drachenkopf scheint sich etwas zu sehr zu drehen. Da wir nur ein kleines Nicken wollen, müssen wir die Animation bearbeiten. 

Schalten Sie den Aufnahmemodus erneut ein, indem Sie die Taste drücken, und verschieben Sie die rote Linie auf 1:00 Minute. Ändern Sie die Z-Drehung Wert zu 2,05.

Drücken Sie die Aufnahmetaste, um den Aufnahmemodus zu verlassen und die Animation erneut zu testen. 

Wie Sie sehen können, müssen Sie zum Bearbeiten einer Animation nur das gewünschte Keyframe auswählen und es ändern. Wenn Sie das Timing einer Animation ändern müssen, beispielsweise wenn die Animation zu schnell oder zu langsam ist, können Sie die Markierung in der Timeline auf das gewünschte Bild ziehen.

Okay, jetzt haben Sie den Kopf animiert, aber Sie möchten den gesamten Körper animieren. Da Sie Ihren Charakter als Hierarchie anstelle von isolierten Spielobjekten erstellt haben, müssen Sie nicht für jeden Teil des Körpers eine einzige Animation erstellen. Drücken Sie stattdessen einfach die markierte Taste Kurve hinzufügen und wählen Sie einen anderen Körperteil aus. Klicken Sie auf die Schaltfläche und wählen Sie den Schwanz des Drachen aus.

Versuchen Sie, den Schwanz auf und ab gehen zu lassen. Verwenden Sie genau wie Sie das Z-Drehung Achse und die Zeitleiste zwischen null und zwei Minuten. 

Dank der von Ihnen erstellten Hierarchie bewegt die Engine beim Verschieben des Endes automatisch auch die Spitze. Sie können den Tipp jedoch auch einzeln animieren, wenn Sie ihn auswählen.

Großartig! Animieren Sie nun die restlichen Körperteile für die Animation im Leerlauf. Nehmen Sie sich die Zeit, die Sie zum Bearbeiten der Animation benötigen, bis Sie vollständig zufrieden sind. Die Animation braucht Zeit und Sie erhalten beim ersten Versuch nie die gewünschten Ergebnisse. Am Ende sollte Ihre Timeline so aussehen:

Beachten Sie, dass für die Im Leerlauf Animation, Sie ändern keine Werte des Massenmittelpunkts des Drachen (der schwarze Punkt).

Die Sprunganimation

Für die Springen Animation, müssen Sie eine neue Animationsdatei erstellen. Um das zu tun, in der Animation Klicken Sie im Panel auf das Etikett mit der Aufschrift Im Leerlauf und wählen Sie Neuen Clip erstellen.

Nennen Sie es Jump.anim und speichern Sie es in der Animationen Mappe.

Für diese Animation möchten Sie, dass Ihr Drache beim Springen nach oben blickt. Da wir bereits die Grundlagen zum Erstellen von Animationen mit Unity behandelt haben, geben wir Ihnen lediglich einige Hinweise, anstatt Sie durch den Prozess zu führen.

Wie zuvor müssen Sie das auswählen Drachen Spielobjekt und beginnen Sie mit dem Hinzufügen von Kurven. Beginnen wir mit dem Kopf. Diese Animation wird also kurz sein 0:30 Sekunden reichen aus. Drehen Sie den Kopf um die Z-Achse, um nach oben zu schauen.

Um zu verhindern, dass der Kopf vollständig statisch ist, können Sie ihm etwas Bewegung hinzufügen. Sie können dies erreichen, indem Sie eine kleine Drehung hinzufügen.

Wiederholen Sie den Vorgang für die restlichen Körperteile. Denken Sie daran, dass die Animation so aussehen sollte, als befände sich der Charakter in der Luft. 

Wir zeigen Ihnen später, wie Sie den kompletten Sprung machen. Versuchen Sie, Ihren Charakter in Posen zu bringen, die der folgenden ähneln:

Hast du es gemacht? nett!

Nun konzentrieren wir uns auf die endgültige Animation: die Herbstanimation.

Die Herbst-Animation

Ihr Charakter kann jetzt aufspringen, aber zwei Teile bilden einen vollen Sprung: Der Sprung selbst, bei dem der Charakter vom Boden abgehoben wird, und der Fall, wenn sich der Charakter wieder nach unten bewegt. Jetzt fehlt dir der zweite Teil des Sprungs, der FallenAnimation.

Genau wie vorher in der Animation Klicken Sie im Panel auf das Etikett mit dem aktuellen Animationsnamen und wählen Sie Neuen Clip erstellen.

Speichern Sie die neue Animation in der Animationen Ordner mit dem Namen Fall.anim.

Diesmal soll der Charakter aussehen Nieder während fallen. Dazu müssen Sie die Taste drücken Kurve hinzufügen knöpfen Sie und stellen Sie den Drachen auf. Genau wie das Springen Animation, 30 Sekunden funktionieren für diesen Fall.

Wiederholen Sie den Vorgang zum Auswählen der Körperteile und zum Erstellen der entsprechenden Keyframes für das gesamte Zeichen (außer dem schwarzen Punkt). Wieder können Sie mittlere Keyframes hinzufügen, um sicherzustellen, dass der Charakter während des Fallens nicht statisch ist.

Nächstes Mal

Damit ist das zweite Tutorial abgeschlossen, in dem erläutert wird, wie eine knochenbasierte 2D-Animation mit Unity erstellt wird. Sie haben jetzt die Grundlagen der Animation gelernt und mit Hilfe von Keyframes drei Arten von Animationen erstellt. Beim nächsten Mal verbinden Sie die verschiedenen Animationen, mischen diese und rufen sie per Skript auf.

Wenn Sie Fragen oder Feedback zu dem haben, was wir bisher behandelt haben, hinterlassen Sie bitte einen Kommentar.

Verweise

  • Drachen-Sprite-Sheet: Wird mit Genehmigung von Chenguang vom DragonBonesTeam verwendet