Implementieren von Sprite-Sheet-Animationen

Verifikations-Umgebung

Fenster

• Windows 11

Unity-Editor

• 2020.3.25f1

Eingabesystem-Pakete

• 1.2.0

Voraussetzungen für diesen Tipp

Die folgenden Einstellungen sind als Voraussetzung für die Erläuterung dieser Tipps vorkonfiguriert.

• Einführung in das Eingabesystempaket
• Ausrichten der Kamera (2D) an der Leinwand

Was ist Sprite Sheet Animation?

In modernen Spielen werden Charaktere und Effekte animiert, indem sie 3D-Modelle bewegen, Explosionen in Echtzeit berechnen und Effekte anzeigen. Dies ist möglich geworden, weil die Rechenleistung von Spielkonsolen gestiegen ist, aber da die alten Spielkonsolen nicht so viel Leistung hatten, war die Sprite-Sheet-Animation, die ständig zwischen den Bildern wechselte, um es so aussehen zu lassen, als würde sie sich bewegen, der Mainstream. Das Prinzip ist das gleiche wie bei Anime, die im Fernsehen gespielt werden. Sprite-Sheet-Animationen werden von weniger Spielen als in der Vergangenheit verwendet, aber sie werden immer noch häufig verwendet, da die Last für Berechnungen viel geringer ist.

Die Spritesheet-Animation schaltet um und zeigt mehrere Bilder hintereinander an. Es ist selten, dass so viele Bilddateien vorbereitet werden, und im Grunde sind alle Anzeigemuster in einem Bild enthalten. Dies erleichtert die Verwaltung von Bilddateien und reduziert die Last beim Laden von Bilddateien. Die Bilddatei, die diese Animation zusammenfasst, wird als "Sprite Sheet" bezeichnet.

Erstellen eines Spritesheets

Ein Spritesheet ist im Wesentlichen nur eine Bilddatei. Da es nichts mit Unity zu tun hat, erstellen Sie es bitte mit einem Bildbearbeitungstool. Das endgültige Dateiformat ist eine PNG-Datei, die von Unity verarbeitet werden kann.

Darüber hinaus gibt es die folgenden Regeln für die Erstellung von Spritesheets.

• Vereinheitlichen Sie die Bildgröße aller Frames. Wenn das erste Bild beispielsweise 32 x 32 Pixel groß ist, sind das zweite und die folgenden Bilder 32 x 32 Pixel groß. Wenn Sie beispielsweise ein Spritesheet im Format "3x2" mit 6 Frames vorbereiten, beträgt die Größe des Spritesheets 96 x 64 Pixel.
• Sie können das Bild frei ausrichten, z. B. "6x4" oder "2x8", aber stellen Sie sicher, dass Sie es unter der Annahme erstellen, dass alle Rahmen gefüllt werden. Wenn es "6x4" ist, sind es 24 Frames und so weiter. Wenn es sich um eine 13-Frame-Animation handelt, bereiten Sie sie mit "1x13" oder "13x1" vor.
• Da es sich um eine Animation handelt, ist sie richtig ausgerichtet, sodass es keine Fehlausrichtung in den Frames davor und danach gibt.
• Die Richtung der Animation beginnt in der oberen linken Zelle und geht nach rechts, und wenn Sie ganz rechts gehen, beginnt sie von links eine Stufe nach unten und geht wieder nach rechts.

Tatsächlich müssen Sie das oben Genannte nicht strikt in Unity tun, aber es ist viel einfacher, sich im Voraus für die Spezifikationen zu entscheiden.

Dieses Mal werde ich ein Sprite-Sheet verwenden, um die folgenden Zahlen zu vertauschen. Ein Quadrat ist 32x32 Pixel groß. Es besteht aus 24 "6x4" Frames, also beträgt die Bildgröße 192x128 Pixel.

Konfigurieren des Spritesheets im Unity-Editor

Nachdem Sie Ihr Projekt erstellt haben, fügen Sie Ihrem Projekt eine Spritesheet-Datei hinzu. Hier wird davon ausgegangen, dass der Dateiname .NumberAnimation

NumberAnimation Wählen Sie die Datei aus und füllen Sie den Inspektor wie folgt aus:

Es gibt viele andere Einstellungen, die konfiguriert werden können, aber lassen wir es vorerst so, wie es ist. Klicken Sie nach der Konfiguration auf die Schaltfläche "Sprite Editor".

Wenn der folgende Dialog angezeigt wird, klicken Sie auf die Schaltfläche "Übernehmen". Tatsächlich sollen die Einstellungen dieses Inspektors gespeichert werden, und wenn Sie nach unten scrollen, gibt es eine Schaltfläche "Übernehmen", so dass Sie die Einstellungen mit dieser Schaltfläche speichern müssen. Es wird auch durch "Übernehmen" im Dialog gespeichert, es spielt also keine Rolle, wie Sie es speichern.

Der Sprite-Editor wird angezeigt. In diesem Abschnitt werden wir daran arbeiten, das Sprite vom Sprite-Sheet zu trennen.

In der oberen linken Ecke befindet sich eine Schaltfläche namens "Slice", klicken Sie darauf und ändern Sie den Typ in "Raster nach Zellengröße". In diesem Spritesheet ist eine Größe des Sprites "32x32" Pixel, also geben Sie 32 für jede Pixelgröße ein. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Slice.

Dieses Bild ist schwer zu verstehen, da es von Anfang an klar geteilt zu sein scheint, aber es ist durch 1 Sprite 32px geteilt. Drücken Sie die "Strg"-Taste und die Trennlinie wird grün angezeigt.

Speichern Sie es nach dem Teilen mit der Schaltfläche "Übernehmen".

Wenn du auf das Dreieck in der Bilddatei des Projekts klickst, um es zu erweitern, kannst du sehen, dass das Sprite geteilt wurde.

Platzierung und Animation von Sprites

Ziehen Sie das Set-Sprite in die Ansicht und platzieren Sie es.

Dann erscheint ein Dialog, also speichern Sie NumberAnimation ihn als . Diese Datei enthält die Animationseinstellungen.

Das erste Sprite wird in der Ansicht platziert, und im Projekt werden ein Animationscontroller und ein Animationsclip erstellt. Wenn das Bild klein ist, legen Sie den Maßstab fest, um es größer zu machen.

Zu diesem Zeitpunkt werden die Standardeinstellungen für die Animation angewendet, sodass Sie das Spiel einfach ausführen können. Du solltest sehen können, dass sich die Sprite-Animation bewegt, sobald das Spiel beginnt.

Verhindern, dass Animationen in einer Schleife abgespielt werden

Wählen Sie die Animationsclipdatei (NumberAnimation.anim) aus Ihrem Projekt aus.

Im Inspektor gibt es ein Kontrollkästchen für "Schleifenzeit", also deaktivieren Sie es.

Wenn Sie das Spiel ausführen, werden Sie sehen, dass die Animation bei 24 stoppt. Es ist effektiv für einmalige Explosionseffekte.

Ändern der Geschwindigkeit der Animation

Wählen Sie das Sprite, das Sie animieren möchten, aus der Hierarchie aus.

Wählen Sie dann die Registerkarte Animation aus. Wenn Sie nicht über die Registerkarte "Animation" verfügen, wählen Sie im Menü "Fenster" > "Animation" > "Animation" aus.

Es gibt eine Zahl, die "Sample" genannt wird, was bedeutet, dass die Bilder mehrmals in einer Sekunde gewechselt werden müssen. In diesem Beispiel umfasst die Animation 24 Frames, sodass die Animation alle 2 Sekunden wiederholt wird.

Wenn Sie diese Zahl verringern, wird die Animationsgeschwindigkeit langsamer, und wenn Sie sie erhöhen, erhöht sich die Geschwindigkeit.

Informationen zu anderen erweiterten Animationseinstellungen

Die verschiedenen Animationseinstellungen werden in den animationsspezifischen Tipps separat erläutert. Diese Einstellungen sind nicht exklusiv für Sprite-Animationen, aber nicht exklusiv für die Dies entspricht dem Einrichten anderer Bewegungsanimationen und 3D-Animationen.

In diesem Tipp erklären wir Ihnen, wie Sie von einem Sprite-Sheet zu einer Animation wechseln.