Share
In diesem Lernprogramm konzentrieren wir uns auf die knochenbasierten 2D-Animationswerkzeuge, die von der Unity Engine bereitgestellt werden. 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 Beitrag richten wir das Projekt ein, definieren die Assets und nehmen die ersten Vorbereitungen für die Animation vor.
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.
Dieses Tutorial richtet sich in erster Linie an zwei Gruppen von Spieleentwicklern:
Wir gehen davon aus, dass Sie über einige Programmierkenntnisse verfügen, so dass wir den Code nicht ausführlich behandeln. Um diesem Tutorial folgen zu können, müssen Sie natürlich Unity herunterladen.
Um einen schnellen Einstieg in Unity zu erhalten, folgen Sie unserem vorherigen Lernprogramm, in dem Sie die Unity 2D-Umgebung und ihre Werkzeuge und Merkmale kennen lernen. Wir empfehlen dringend, dies zu tun, wenn Sie mit Unity nicht vertraut sind.
Diese Demo zeigt den animierten Drachen, auf den wir abzielen:
Starten Sie Unity und erstellen Sie ein neues Projekt, indem Sie auswählen Neues Projekt… von dem Datei Speisekarte. Das Projektassistent wird auftauchen. Erstellen Sie jetzt ein neues 2D Projekt, gefolgt von einem neuen Ordner namens Sprites (in deinem Vermögenswerte Verzeichnis).
Nachdem Sie nun den Projektordner organisiert haben, können Sie die Spielassets importieren. Sie finden sie im Ordner Assets des GitHub-Repos dieses Tutorials. (Sie können nur klicken ZIP herunterladen auf der letzten Seite, wenn Sie mit GitHub nicht vertraut sind.) Beachten Sie, dass dieser Ordner Assets für die gesamte Tutorialserie enthält. Es gibt also einige, die Sie erst später verwenden werden.
Vergleichen Sie vor dem Fortfahren die folgenden zwei Bilder:
Im ersten Bild ist der Drache in mehrere Körperteile (Kopf, Körper, Arme usw.) unterteilt. In der zweiten wird der Ninja in mehreren Posen gezeigt, mit einer Folge von Posen für verschiedene Aktionen. So können Sie sich klar vorstellen, wie sich der Avatar in Ihrem Spiel bewegen wird.
Das Ninja-Sprite nennen wir a Sprite-Blatt oder Sprite Atlas. Dieser Sprite-Typ war bei den klassischen 2D-Spielen sehr beliebt und ist bis heute sehr verbreitet.
Das Drachen-Sprite erfordert eine neuere 2D-Animationstechnik, die normalerweise aufgerufen wird knochenbasierte Animation. Wie der Name vermuten lässt, erfolgt die Animation auf Knochenbasis, wobei jeder Körperknochen eine bestimmte Aktion oder Animation haben kann. Wenn alle Hauptkörperteile des Charakters getrennt sind, können Entwickler die Animationen direkt in der Engine erstellen. Diese neue Animationstechnik ist der in der 3D-Animation verwendeten sehr ähnlich.
In diesem Tutorial konzentrieren wir uns auf knochenbasierte Animationen. Beachten Sie jedoch, dass Unity dies nicht tut wahr knochenbasierte Animation, also werden wir sie simulieren.
Ziehen Sie die Sprite-Datei in den Editor und legen Sie sie auf dem Ordner ab Sprites Ordner wie folgt:
Bevor ein Charakter für eine Animation bereit ist, müssen Sie ein hinzufügen Szene zum Projekt. Ein ... kreieren Szenen Ordner in Ihrem Vermögenswerte erstellen Sie eine neue Szene und speichern Sie sie als Test.szene in diesem Ordner. Am Ende dieses Schrittes sollten Sie Folgendes haben:
Jetzt noch im Projekt Wählen Sie die Registerkarte aus Drachen Sprite, dann schau dir das an Inspektor Panel:
Wie man im sehen kann Sprite-Modus Eigentum in der Inspektor, das Sprite-Modus ist eingestellt auf Single. Dies bedeutet, dass die Engine beim Erstellen eines neuen Sprites die gesamte Textur als Ganzes verwendet. Da haben wir die Körperteile im getrennt Drachen, wir wollen das nicht. Wir müssen daher das ändern Sprite-Modus von Single zu Mehrere.
Wenn Sie die Option ändern, wird eine neue Schaltfläche beschriftet Sprite-Editor erscheint:
Derzeit ist die Sprite-Editor Das Slicing-Tool funktioniert bei komprimierten Bildern nicht gut. Um das beste Ergebnis für die animierten Sprites zu gewährleisten, müssen Sie das ändern Format Wert auf der Unterseite des Inspektor Registerkarte von der Standardoption, Komprimiert, zu Wahre Farbe. Dann klick Sich bewerben.
Wählen Sie nun das Drachen-Sprite aus und klicken Sie auf Sprite-Editor Taste. Ein neues Fenster wird geöffnet:
In der oberen linken Ecke des Fensters finden Sie die Scheibe Taste. Klicken Sie darauf und ein anderes Menü wird erscheinen:
In diesem Menü können Sie die Parameter für die Aufteilung des Sprites durch die Engine ändern. Wenn Sie die Slices auf setzen Automatik, Die Engine versucht, die verschiedenen Teile der Figur, die Sie im Bild haben, zu erkennen. Sie können eine Mindestgröße für die Slices, einen Pivot (den Punkt, um den sich das Slice dreht) und eine von drei Methoden definieren:
Sie können auch einstellen Art Parameter zu Gitter. Dies gibt Ihnen andere Optionen:
Wie im automatischen Modus können Sie den Drehpunkt des Sprites auswählen, Sie haben jedoch auch die Möglichkeit, die Pixelgröße zu definieren. Dieser Wert bestimmt die Höhe und Breite der Kacheln in Pixel.
Wählen Sie für dieses Bild die Option Automatik Modus und drücken Sie die Scheibe Taste. Das Ergebnis sollte ähnlich sein:
Wie Sie sehen können, hat der Editor die verschiedenen Teile des Sprites in verschiedene Rechtecke aufgeteilt. Dies sind die Teile, die Sie zum Aufbau Ihres Charakters verwenden werden. Wie oben erwähnt, ist dies keine perfekte Knochenanimation, aber jeder Teil wird separat animiert.
Wenn Sie in eines der erzeugten Rechtecke doppelklicken, wird ein Popup-Fenster mit den Eigenschaften dieses bestimmten Teils des Sprites geöffnet:
Sie können den Namen des generierten Sprites, seine Position, Größe und seinen Drehpunkt ändern. Sie können die Werte für Position und Größe auch ändern, indem Sie die blauen Punkte auf den Eckpunkten der Rechtecke ziehen. Der blaue Kreis in der Mitte des ausgewählten Rechtecks zeigt den Drehpunkt an.
Für dieses Sprite ist es sicher, dass Unity die einzelnen Sprites automatisch erstellt. In komplexeren Sprites möchten Sie die Sprites jedoch möglicherweise manuell definieren. Klicken Sie dazu mit der linken Maustaste auf das Bild, um ein Rechteck zu definieren.
Sobald Sie die Maustaste loslassen, erstellt Unity aus diesem Rechteck ein Sprite.
Sie können die Taste drücken Trimmen Schaltfläche, um das Rechteck an das Sprite anzupassen. Wiederholen Sie diesen Vorgang anschließend für alle Sprites, die Sie generieren möchten.
Da der automatische Modus für dieses Bild gut funktioniert, müssen Sie die Sprites nicht manuell definieren.
Als nächstes müssen Sie die Drehpunkte der verschiedenen generierten Sprites anpassen. Dieser Schritt ist für die Animation sehr wichtig.
Grundsätzlich müssen Sie den Drehpunkt in den Bereich ziehen, in dem das Sprite mit dem übergeordneten Körperteil verbunden wird. Beispielsweise möchten Sie den Drehpunkt des Kopfes in die Nähe des Halsbereichs bewegen. Dadurch wird sichergestellt, dass sich alle Bewegungen, z. B. die Drehungen, wenn Sie den Charakter animieren, um diesen Punkt herum orientieren, so dass sich der Charakter realistisch bewegen kann. Wenn Sie die Drehpunkte an ihren ursprünglichen Stellen belassen, erhalten Sie seltsame Animationen, da sich der Charakter nicht realistisch bewegen kann.
Stellen Sie sich die Drehpunkte der Glieder als die Gelenke einer Puppe vor. Damit sich die Puppe bewegen kann, müssen die Gelenke richtig platziert sein, oder? Für die Drehpunkte gelten die gleichen Regeln.
Um den Drehpunkt zu verschieben, ziehen Sie den blauen Kreis in der Mitte jedes Sprites an die richtige Stelle (die Stelle, an der es sich mit dem übergeordneten Körperteil verbinden soll). In der folgenden Abbildung sehen Sie das Kopfgelenk an der richtigen Stelle:
Das Heckteil sollte so aussehen:
Hast du die Idee bekommen? Großartig! Wiederholen Sie den Vorgang für die restlichen Teile. (Sie können den Drehpunkt für den schwarzen Fleck in der Mitte belassen; dazu werden wir im nächsten Abschnitt mehr erklären.) Denken Sie daran, Sie möchten eine Drachenanimation und keine Frankenstein-Animation.
Wenn Sie fertig sind, klicken Sie auf Sich bewerben:
Wenn Sie einen kurzen Blick auf den Ordner werfen, in dem sich die Sprites befinden, können Sie feststellen, dass neben dem Drachen-Sprite jetzt ein Pfeil angezeigt wird:
Drücken Sie den Pfeil, um alle Teile, aus denen sich unser Drachen zusammensetzt, separat zu sehen:
Nachdem Sie nun Ihren Charakter in verschiedene Sprites geschnitten haben, können Sie die Sprites in die Szene einfügen. Da der Drache aus mehreren Körperteilen besteht, müssen Sie den Charakter bauen.
Als erstes ziehen Sie den schwarzen Punkt des Drachen-Sprites auf die Szene. Dieses Objekt funktioniert als Massezentrum für deinen Charakter Später werden Sie Ihre Aufmerksamkeit dort konzentrieren. Aber fürs Erste weißt du, dass dies die Basis für deinen Charakter ist.
Nimm nun den Körper des Drachen und platziere ihn wie folgt über dem schwarzen Punkt:
Wiederholen Sie diesen Vorgang, bis Sie Ihren Drachen zusammengebaut haben. Am Ende sollte es ungefähr so aussehen:
Sie haben endlich Ihren Drachen bereit - aber wie Sie vielleicht bemerken, sieht er komisch aus. Einige Teile, die sich unter dem Körper befinden sollten, sind darüber oder umgekehrt. Dies geschieht, weil wir die Drachenteile ohne bestimmte Reihenfolge hinzugefügt haben.
Bevor wir das Problem lösen, machen wir das Drachen-Sprite zu einem einzigen Spielobjekt. Wie Sie vielleicht bereits bemerkt haben, funktionieren die verschiedenen Teile des Drachen als einzelne Spielobjekte. Sie müssen sie in einem einzigen Spielobjekt gruppieren, bevor Sie mit der Animation beginnen können.
Um alle Sprites korrekt zu gruppieren, verwenden Sie das Sprite mit dem schwarzen Punkt als Hauptspielobjekt. Alle anderen Körperteile sollten unter der Sprite-Masse zusammengefasst werden. Ziehen Sie einfach ein Sprite auf das schwarze Punktsprite im Hierarchie um es unter dem schwarzen Punkt zu gruppieren.
Auf dem nächsten Bild können Sie sehen, wie die Sprite-Hierarchie aussehen soll, nachdem Sie die Spielobjekte gruppiert haben.
Bevor Sie fortfahren, benennen Sie Ihr Basisspielobjekt in um Drachen. Wenn Sie den bewegen Drachen Spielobjekt können Sie jetzt alle Teile der Figur auf der Szene bewegen.
Aber was ist, wenn Sie nur ein einziges Sprite verschieben möchten? Wenn Sie beispielsweise nur die Hand bewegen möchten, wissen Sie, dass der Arm mit der Hand verbunden ist. Wenn Sie also die Hand bewegen, sollten sich auch alle Hände bewegen, richtig? Wenn Sie dies versuchen, werden Sie feststellen, dass dies nicht der Fall ist. Wenn Sie den Arm auswählen und bewegen, bleiben die restlichen Körperteile ruhig. Um den gesamten Körperteil verschieben zu können, müssen Sie eine Hierarchie in Ihrem Sprite erstellen.
Um diesen Prozess intuitiver zu gestalten, benennen Sie die Körperteile um (durch Klicken mit der rechten Maustaste und Auswählen) Umbenennen) mit ihren jeweiligen Namen wie:
Stellen Sie sich den Charakter als Hierarchie als Baum mit Wurzeln, einem Stamm und Zweigen vor. Der schwarze Punkt verhält sich wie die Wurzel des Baumes; Wenn Sie es bewegen, bewegt sich der gesamte Charakterkörper. Nach der Wurzel kommt der Stamm; In diesem Fall ist der Rumpf der Rumpf des Zeichens. Dies ist also das nächste Sprite in der Hierarchie. Alle anderen Körperteile sind Äste des Baumes. Sie können jedoch noch Zweige von Zweigen haben, z. B. im Schwanz Schwanzspitze ist ein Zweig der Schwanz, und so weiter…
Organisieren Sie die Sprites Ihres Charakters nach dieser Hierarchie:
Wenn Sie nun den Oberarm bewegen, folgen alle Teile des Arms. Großartig, nicht wahr??
Bevor Sie die Figur animieren können, müssen wir uns noch um ein letztes Detail kümmern. Wie bereits erwähnt, werden die Sprite-Teile nicht in der richtigen Reihenfolge gezeichnet. Um dies zu lösen, müssen Sie den Wert von ändern Reihenfolge in der Schicht Parameter für jedes einzelne Sprite.
Um sicherzustellen, dass das Lernprogramm erfolgreich ist, verwenden Sie für jedes Sprite die folgenden Werte:
Accentsconagua
0 3 4 4 5 4 5 1 2 1 2 4 5 Am Ende sollte dein Drache ungefähr so aussehen:
Um diesen Teil zu beenden, zentrieren Sie einfach Ihren Charakter auf dem Bildschirm. Tun Sie dies, indem Sie das ändern Verwandeln Werte der Mittelposition auf (0, 0, 0).
Damit ist der erste Teil der Serie abgeschlossen. Sie haben jetzt ein 2D-Zeichen mit der richtigen Reihenfolge und Hierarchie der Sprites.
Wenn Sie Fragen oder Feedback zu dem haben, was wir bisher behandelt haben, können Sie unten einen Kommentar hinterlassen.
