Einführung

Hallo! Mein Name ist Hira Karmachela und dies ist mein erster Beitrag. Bei dieser Gelegenheit werde ich meine Erfahrungen mit der Erstellung von Sprite-Animationen mit Schleifen mit Clip Studio Paint teilen. Früher habe ich an Grafikdesign-Projekten für Gaming-Anforderungen gearbeitet. Oft sind die Spiele, an denen ich arbeite, im 8-Bit-Stil oder allgemein Pixelspiele genannt.

 

Ich hoffe, dieser Beitrag enthält interessante Tipps für diejenigen unter Ihnen, die nach Möglichkeiten suchen, Pixelkunst mit CSP zu erstellen. Außerdem werden wir versuchen, es zum sich wiederholenden Sprite zu animieren.

Was ist Looping-Sprite-Animation?

Bevor wir mit der Übung beginnen, werde ich einen kleinen Einblick in die Definition der Sprite-Animation geben. In der Grafikdesign- oder Multimediabranche bezieht sich der Begriff Sprite auf einen kleinen Teil einer großen Szene in Form von statischen und animierten Bildern. Für die Bedürfnisse der Animation, genauer gesagt als Sprite-Animation.

 

In der Industrie wird Sprite-Animation häufig für interaktive Medienanforderungen wie Spiele oder Anwendungsprogramme verwendet. Sprite-Animationen werden normalerweise auf Spielfiguren angewendet, damit sie sich mit verschiedenen Gesten bewegen können, oder als visueller Effekt, der die Szene oder Benutzeroberfläche unterstützt (z. B. Symbole und Schaltflächen).

 

Technisch gesehen wird die Sprite-Animation Bild für Bild nach dem Prinzip von Pose zu Pose und geradeaus erstellt. Daher ist ihre Verwendung oft eine Schleife, bei der das letzte Bild mit dem anfänglichen Bild verbunden wird, um endlose Bewegungen auszuführen.

 

Normalerweise verwende ich in Spielprojekten Sprite-Animationen, um verschiedene Bewegungen von Charakteren zu erzeugen. Zum Beispiel: müßige Bewegungen, Gehen, Laufen, Angreifen, Verteidigen, Verletzen und Sterben. Jede Bewegung ist eine Sequenz, die in einem Format namens Sprite Sheet verpackt wird.

Datei für Pixel Art vorbereiten

OK! Wir beginnen mit der Erstellung einer neuen Datei. Wir wählen die Voreinstellung „Animation“, damit der Arbeitsbereich nach unseren Bedürfnissen organisiert wird, um das sich wiederholende Sprite zu erstellen. Pixelkunst erfordert keine großen Leinwandabmessungen, insbesondere für Sprite-Anforderungen, die Leinwand wird nur mit einzelnen Objekten oder Zeichen gefüllt. Daher verwende ich normalerweise nur Vielfache von 32 Pixeln für Abmessungen.

 

In diesem Projekt habe ich eine Leinwand mit den Größen B = 192 px und H = 192 px erstellt. Diese Größe reicht vollkommen aus, um selbst mit einer zusätzlichen Kopffreiheit eine Charaktergeste zu machen.

 

Sie können den Einstellungen folgen, die ich wie folgt vorgenommen habe.

 

Nachdem die Leinwand erstellt wurde, muss als nächstes das „Raster“ vorbereitet werden, eine imaginäre Linie, die uns wirklich dabei hilft, Pixel so anzuordnen, dass sie ein Bild bilden.

 

Der Schritt besteht darin, das Menü Ansicht > Raster aufzurufen. Nur wenn Sie es überprüfen, sehen Sie Quer- und Längslinien in Form von Schachmustern auf der Leinwand.

 

 

Gehen Sie danach zurück zum Menü Ansicht > Rastereinstellungen. Das Fenster mit den Rastereinstellungen wird angezeigt. Ändern Sie hier Gap = 1 px und Number of divisions = 0. Dann sehen Sie ein Schachmuster mit kleineren, dichteren Quadraten.

 

 

Pixel zeichnen

Jetzt können wir Pixel zeichnen oder anordnen, um ein Sprite zu erstellen. In diesem Projekt werde ich einen Goblin-Charakter mit Angriffsbewegung erstellen. Bevor wir eine Animation erstellen, müssen wir natürlich zuerst die Figur erstellen.

 

Das Wichtigste beim Erstellen animierter Charaktere ist das Organisieren von Bildern im Schichtsystem. Dies soll den Animationsprozess erleichtern, sodass wir nur bestimmte Ebenen neu zeichnen müssen, um bestimmte Posen zu erstellen. Denken Sie daran, dass die Sprite-Animation stark vom Pose-zu-Pose-Prinzip abhängt.

 

Hier ist die Ebene, die ich für jede Pose erstellt habe.

 

Ich mache das einfach. Zu Beginn müssen wir nur einen Ebenenordner mit dem Namen "pose_01" erstellen. Später können wir diesen Ordner für die nächsten Posen kopieren. Erstellen Sie als Nächstes eine Ebene für den ersten Körperteil. Wir fangen besser zuerst mit dem Kopf an.

Wie bei Zeichentechniken im Allgemeinen können wir mit der Erstellung von Strichzeichnungen beginnen. Glücklicherweise verfügt CSP über ein Tool, mit dem Pixel angeordnet werden können. Verwenden Sie den "Marker"-Typ "Dot Pen", damit jeder Strich Gitterboxen mit Pixeln füllt.

Bilden Sie dann den gewünschten Kopf der Figur, indem Sie Pixel anordnen. In diesem Projekt habe ich einen Goblin-Charakter mit einer 3/4-Ansicht gemacht.

 

Normalerweise erstelle ich verschiedene Ebenen zwischen Strichzeichnungen und Farbgebung. Basierend auf meiner Erfahrung in der Herstellung von Pixelkunst ist es jedoch effizienter, alle Prozesse auf einer Ebene zu kombinieren. Das einfache Trennen von Ebenen basierend auf dem Körperteil der Figur hängt von den Animationsanforderungen ab.

 

Also zum Kolorieren einfach den Farbton von Nuance zu Tönung nach den Bedürfnissen der Schicht arrangieren.

 

Ebenensystem für Animation

Erstellen Sie als Nächstes andere Körperteile mit separaten Ebenen. Ich teile den Körper dieser Koboldfigur in Schichten nacheinander von oben nach unten in die folgenden Abschnitte: Kopf, linke Hand, Körper, Waffe, rechte Hand, linkes Bein und rechtes Bein.

 

Das Ebenensystem soll den Animationsprozess erleichtern. Denken Sie daran, dass wir derzeit nur einen Ebenenordner haben, um eine Pose darzustellen. Als nächstes brauchen wir andere Posen, um eine Reihe von Bewegungen auszuführen. Durch das Ebenensystem müssen wir, anstatt Charaktere für verschiedene Posen neu zu zeichnen, nur die erforderlichen Ebenen neu zeichnen und einfach die anderen Ebenen kopieren, ohne die Pose zu ändern.

 

 

Zeitstrahl vorbereiten

Wenn alle Körperteile vollständig sind, versuchen Sie, jedes Teil zu überprüfen, damit es richtig aneinandergereiht werden kann und eine proportionale Körpereinheit bildet. Als nächstes erstellen wir andere Posen, indem wir "pose_01" zusammen mit dem erstellten Ebenensystem verwenden.

 

Davor bereiten wir die Timeline für den Animationsprozess vor. Der Schritt besteht darin, das Menü Window > Timeline aufzurufen. Dann erscheint das Timeline-Bedienfeld auf dem unteren Bildschirm.

 

Kopieren Sie als Nächstes den Ebenenordner „pose_01“, indem Sie zum Menü „Ebene“ > „Ebene duplizieren“ gehen.

 

Konvertieren Sie dann die Kopie des Ebenenordners in Ebene (Normal), indem Sie zum Menü Ebene > Ebene konvertieren gehen. Ein Dialogfeld wird angezeigt, um den Namen der Ebene zu ändern. Wechseln Sie zu "animating_pose_01". Jetzt haben wir 1 Zelle, die animiert werden soll.

Verschieben Sie die Ebene „animating_pose_01“ in den Animationsordner (der Ebenenordner, der automatisch erstellt wird, wenn eine neue Datei mit Animationsvorgaben erstellt wird – jede in diesem Ordner angegebene Ebene wird als Animations-Cel betrachtet).

 

Im Animationsordner finden wir eine leere Ebene, die bereits vorhanden ist. Wählen Sie die Ebene aus und löschen Sie sie.

 

Jetzt müssen wir die Ebene „animating_pose_01“ als Animations-Cel angeben. Einfach ausgedrückt können wir die unterstützenden Symbole im Timeline-Bedienfeld verwenden. Wählen Sie Frame 1 in der Timeline aus und klicken Sie dann auf das Symbol "Cels angeben", wie unten gezeigt. Es erscheint ein Dialogfeld zur Bestätigung, wählen Sie „animation_pose_01“ und klicken Sie dann auf OK.

Pose für Pose

Jetzt haben wir den ersten Keyframe in unserer Animation. Als nächstes müssen wir eine zweite Pose machen und so weiter. Der Schritt besteht darin, den Ebenenordner „pose_01“ erneut zu kopieren und dann auf den Ebenennamen zu doppelklicken, um ihn in „pose_02“ umzubenennen.

Wählen Sie den Ebenenordner „pose_01“ und ändern Sie die Deckkraft auf 50 %, um ihn transparent zu machen. Wir können also Änderungen an der Pose im Ebenenordner „pose_02“ vornehmen.

 

Ich verschiebe einfach ein paar Pixel auf bestimmten Ebenen entsprechend der beabsichtigten Bewegung, um eine neue Pose zu erstellen, die mit der vorherigen Pose aufrechterhalten wird. In der Zwischenzeit habe ich die Pixelstruktur der anderen Ebenen wie der Ebene "Kopf" nicht geändert und nur ihre Position geändert, um der neuen Pose zu folgen.

 

Wenn die zweite Pose fertig ist, besteht der nächste Schritt darin, den Ebenenordner "pose_02" in Layer (Normal: animating_pose_02) zu konvertieren. Dann im Animationsordner gespeichert und als Animations-Cel angegeben. Für den Cel-Spezifikationsprozess speichere ich animating_pose_02 in Frame 4. Das heißt, ich gebe eine Dauer von etwa 0,1 Sekunden für den ersten Keyframe (animating_pose_01) oder gleich drei Frames an.

 

Führen Sie die obigen Schritte aus, um die Pose bis zur letzten Pose zu machen. In diesem Projekt habe ich 7 Posen für den Goblin-Charakter gemacht, um Angriffsbewegungen zu haben. Zu beachten ist, dass die letzte Pose, d. h. pose_07, mit der Anfangspose, d. h. pose_01, fortgesetzt werden muss. Es wird also eine endlose Bewegung oder eine Schleifenanimation erzeugt.

 

Animieren

Tatsächlich wird dieser Vorgang sehr einfach sein, da wir bereits Posen haben, die den Keyframe darstellen, den wir benötigen, um eine Reihe von Bewegungen zu werden. Stellen Sie zuvor sicher, dass die Animation in der Timeline gut läuft. Bedingen Sie alle Ebenenordner in einem ausgeblendeten Zustand.

 

Stellen Sie dann sicher, dass sich alle Zellen in ihren jeweiligen Frames in der Timeline befinden. Ein interessantes Feature in der CSP-Timeline ist „Onion Skin“. Diese Funktion ermöglicht es uns, die Pose vor und nach der Pose zu sehen, die wir überprüfen.

 

Sie können die Animation testen, indem Sie auf das Wiedergabesymbol in der Timeline klicken. Wenn die Animation nicht stoppt und die Timeline-Nadel weiterläuft, obwohl wir die Zelle nur bis zum 23. Frame füllen, machen Sie sich keine Sorgen. Dies geschieht, weil wir zu Beginn der Dateierstellung die Wiedergabezeit nicht richtig eingestellt haben. Dies kann einfach nach rechts scrollen und die blaue Timeline-Nadel auf der rechten Seite finden, dann ziehen und auf dem Frame speichern, den wir benötigen.

 

Veröffentlichung

Nachdem wir uns von der Bewegung auf unserer Animation überzeugt haben, fühlt es sich gut an. Dann ist es an der Zeit, es zu veröffentlichen. Normalerweise packe ich Sprite-Animationen gemäß den Anforderungen des Kunden in ein Sprite-Sheet. Spritesheets werden in PNG mit transparentem Hintergrund erstellt, um Spieleentwicklern die Erstellung zu erleichtern. Dann wird das Sprite per Codierung animiert.

 

Als Client-Übermittlungs- oder Genehmigungsprozess exportiere ich jedoch normalerweise Sprite-Animationen in geloopte animierte GIFs. Der Schritt besteht darin, zum Menü Datei > Animation exportieren > Animiertes GIF zu gehen. Dann erscheinen ein paar Kästchen und wir müssen es nur nach Bedarf bestätigen.

 

OK! Das ist alles, was ich teilen kann. Hoffe, es ist nützlich und bitte unterstützen Sie mich, um weitere Tipps zu geben, indem Sie:

 

Folgen Sie meinem Instagram:

 

Abonnieren Sie meinen YouTube-Kanal:

Lies meine anderen Beiträge:

Vielen Dank :)