Einleitung

Hallo! Mein Name ist Hira Karmachela und dies ist mein erster Beitrag. Bei dieser Gelegenheit werde ich meine Erfahrungen beim Erstellen von Loop-Sprite-Animationen mit Clip Studio Paint teilen. Ich habe früher an Grafikdesign-Projekten für Spiele gearbeitet. Oft sind die Spiele, an denen ich arbeite, im 8-Bit-Stil oder werden gemeinhin als Pixelspiele bezeichnet.

 

Ich hoffe, dieser Beitrag enthält interessante Tipps für diejenigen unter Ihnen, die nach Möglichkeiten suchen, Pixelkunst mit CSP zu erstellen. Darüber hinaus werden wir versuchen, sie als Loop-Sprite zu animieren.

Was ist Loop-Sprite-Animation?

Bevor wir mit der Praxis beginnen, werde ich einen kleinen Einblick in die Definition von Sprite-Animation geben. In der Grafikdesign- oder Multimedia-Branche bezieht sich der Begriff Sprite auf einen kleinen Teil einer großen Szene in Form von Bildern, sowohl statisch als auch animiert. Für Animationszwecke wird sie genauer als Sprite-Animation bezeichnet.

 

In der Praxis wird Sprite-Animation häufig für interaktive Medienanforderungen wie Spiele oder Anwendungsprogramme verwendet. Sprite-Animation wird normalerweise auf Spielcharaktere 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 Sprite-Animation Frame für Frame nach dem Prinzip von Pose zu Pose und Straight Ahead erstellt. Daher wird ihre Verwendung oft als Schleife (Looping) bezeichnet, wobei der letzte Frame mit dem Anfangsframe verbunden wird, um endlose Bewegungen zu erzeugen.

 

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

Dateivorbereitung für Pixelkunst

OK! Wir beginnen mit dem Erstellen einer neuen Datei. Wir wählen die Voreinstellung „Animation“, damit der Arbeitsbereich entsprechend unseren Anforderungen für die Erstellung der Loop-Sprites organisiert ist. Pixelkunst erfordert keine großen Leinwandabmessungen, insbesondere für Sprite-Anforderungen wird die Leinwand nur mit einzelnen Objekten oder Charakteren gefüllt. Daher verwende ich normalerweise nur Vielfache von 32 Pixeln für die Abmessungen.

 

In diesem Projekt habe ich eine Leinwand mit den Abmessungen B = 192 px und H = 192 px erstellt. Diese Größe ist mehr als ausreichend, um eine Charaktergeste zu erstellen, selbst mit zusätzlichem Kopffreiheit.

 

Sie können die von mir vorgenommenen Einstellungen wie unten gezeigt befolgen.

 

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

 

Der Schritt ist, das Menü Ansicht > Raster aufzurufen. Nur durch das Aktivieren sehen Sie dann Quer- und Längslinien, die Schachmuster auf der Leinwand bilden.

 

 

Danach gehen Sie zurück zum Menü Ansicht > Rastereinstellungen. Das Fenster der Rastereinstellungen wird angezeigt. Ändern Sie hier Abstand = 1 px und Anzahl der Unterteilungen = 0. Dann sehen Sie ein Schachmuster mit kleineren, engeren Quadraten.

 

 

Pixel zeichnen

Jetzt sind wir bereit, Pixel zu zeichnen oder anzuordnen, um einen Sprite zu erstellen. In diesem Projekt werde ich einen Goblin-Charakter mit Angriffs animation erstellen. Bevor wir eine Animation erstellen, müssen wir natürlich zuerst den Charakter erstellen.

 

Das Wichtigste beim Erstellen animierter Charaktere ist die Organisation der Bilder im Ebenensystem. Dies soll den Animationsprozess erleichtern, sodass wir nur bestimmte Ebenen neu zeichnen müssen, um bestimmte Posen zu erstellen. Denken Sie daran, dass Sprite-Animationen stark vom Pose-zu-Pose-Prinzip abhängen.

 

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

 

Ich werde es einfach machen. Am Anfang 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. Als Nächstes erstellen Sie eine Ebene für den ersten Körperteil. Wir beginnen am besten zuerst mit dem Kopf.

Wie bei allgemeinen Zeichentechniken können wir mit dem Erstellen von Line Art beginnen. Zum Glück verfügt CSP über ein Werkzeug, mit dem Pixel angeordnet werden können. Verwenden Sie den „Marker“-Typ „Punktstift“, damit jeder Strich die Rasterfelder einfach mit Pixeln füllt.

Formen Sie dann den gewünschten Charakterkopf, indem Sie Pixel anordnen. In diesem Projekt habe ich einen Goblin-Charakter in 3/4-Ansicht erstellt.

 

Normalerweise erstelle ich verschiedene Ebenen für Lineart und Kolorierung. Basierend auf meiner Erfahrung bei der Erstellung von Pixelkunst ist es jedoch effizienter, alle Prozesse auf einer Ebene zu kombinieren. Die einfache Trennung von Ebenen basierend auf dem Körperteil des Charakters hängt von den Animationsbedürfnissen ab.

 

Für die Kolorierung ordnen Sie also einfach den Farbton von Schatten zu Tönung entsprechend den Anforderungen der Ebene an.

 

Ebenensystem für Animation

Als Nächstes erstellen Sie andere Körperteile mit separaten Ebenen. Ich teile den Körper dieses Goblin-Charakters in die folgenden Abschnitte in Ebenen, nacheinander von oben nach unten: 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 benötigen wir weitere Posen, um eine Reihe von Bewegungen zu erstellen. Durch das Ebenensystem müssen wir, anstatt Charaktere für verschiedene Posen neu zu zeichnen, nur die erforderlichen Ebenen neu zeichnen und die anderen Ebenen einfach kopieren, ohne die Pose zu ändern.

 

 

Zeitleiste vorbereiten

Wenn alle Körperteile vollständig sind, überprüfen Sie jedes Teil, damit es richtig zusammengefügt werden kann und eine proportionale Körpereinheit bildet. Als Nächstes erstellen wir weitere Posen, indem wir „pose_01“ zusammen mit dem erstellten Ebenensystem verwenden.

 

Zuvor bereiten wir die Zeitleiste für den Animationsprozess vor. Der Schritt ist, das Menü Fenster > Zeitleiste aufzurufen. Dann erscheint das Zeitleisten-Panel am unteren Bildschirmrand.

 

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

 

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

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

 

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

 

Jetzt müssen wir die Ebene „animating_pose_01“ als Animationszelle festlegen. Vereinfacht ausgedrückt können wir die unterstützenden Symbole im Zeitleisten-Panel verwenden. Wählen Sie Frame 1 in der Zeitleiste aus und klicken Sie dann auf das Symbol „Zellen festlegen“ wie unten gezeigt. Ein Dialogfeld zur Bestätigung wird angezeigt, wählen Sie „animation_pose_01“ aus und klicken Sie dann auf OK.

Pose zu Pose

Nun haben wir den initialen Keyframe in unserer Animation. Als Nächstes müssen wir eine zweite Pose und so weiter erstellen. Der Schritt ist, den Ebenenordner „pose_01“ erneut zu kopieren und dann doppelt auf den Ebenennamen zu klicken, um ihn in „pose_02“ umzubenennen.

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

 

Einfach ausgedrückt verschiebe ich einige Pixel auf bestimmten Ebenen entsprechend der beabsichtigten Bewegung, um so eine neue Pose zu erstellen, die mit der vorherigen Pose nachhaltig ist. In der Zwischenzeit habe ich die Pixelstruktur der anderen Ebenen wie der Ebene „head“ nicht geändert und nur deren Position angepasst, um der neuen Pose zu folgen.

 

Wenn die zweite Pose abgeschlossen ist, besteht der nächste Schritt darin, den Ebenenordner „pose_02“ in eine Ebene (Normal: animating_pose_02) zu konvertieren. Dann wird sie im Animationsordner gespeichert und als Animationszelle festgelegt. Für den Zellenspezifikationsprozess speichere ich animating_pose_02 in Frame 4. Das bedeutet, ich gebe eine Dauer von etwa 0,1 Sekunden für den ersten Keyframe (animating_pose_01) oder gleich drei Frames.

 

Führen Sie die obigen Schritte aus, um die Pose bis zur letzten Pose zu erstellen. In diesem Projekt habe ich 7 Posen für den Goblin-Charakter erstellt, um eine angreifende Bewegung zu haben. Zu beachten ist, dass die letzte Pose, d.h. pose_07, in die Anfangspose, d.h. pose_01, übergehen muss. So entsteht eine endlose Bewegung oder Loop-Animation.

 

Animieren

Tatsächlich wird dieser Prozess sehr einfach sein, da wir bereits Posen haben, die den Keyframe darstellen, den wir benötigen, um eine Reihe von Bewegungen zu werden. Bevor Sie sicherstellen, dass die Animation in der Zeitleiste gut läuft. Versetzen Sie alle Ebenenordner in einen ausgeblendeten Zustand.

 

Stellen Sie dann sicher, dass sich alle Zellen in ihren jeweiligen Frames in der Zeitleiste befinden. Eine interessante Funktion in der CSP-Zeitleiste ist „Zwiebelschale“. Diese Funktion ermöglicht es uns, die Pose vor und nach der von uns überprüften Pose zu sehen.

 

Sie können die Animation testen, indem Sie auf das Wiedergabesymbol in der Zeitleiste klicken. Wenn die Animation nicht stoppt und der Zeitleistenzeiger weiterläuft, obwohl wir die Zelle nur bis zum 23. Frame füllen, machen Sie sich keine Sorgen. Dies geschieht, weil wir bei der Dateierstellung die Wiedergabezeit nicht korrekt eingestellt haben. Dies kann einfach behoben werden, indem Sie nach rechts scrollen und den blauen Zeitleistenzeiger auf der rechten Seite finden, ihn dann ziehen und auf dem gewünschten Frame speichern.

 

Veröffentlichung

Nachdem wir uns davon überzeugt haben, dass die Bewegung unserer Animation gut aussieht. Dann ist es Zeit, sie zu veröffentlichen. Normalerweise verpacke ich Sprite-Animationen in ein Sprite-Sheet entsprechend den Kundenbedürfnissen. Sprite-Sheets werden im transparenten PNG-Format erstellt, um Spieleentwicklern das Komponieren zu erleichtern. Dann wird der Sprite durch Codierung animiert.

 

Als Kundenlieferung oder Genehmigungsprozess exportiere ich Sprite-Animationen jedoch normalerweise als Schleifen-Animierte GIFs. Der Schritt ist, zum Menü Datei > Animation exportieren > Animiertes GIF zu gehen. Dann erscheinen einige Felder, und wir müssen es nur noch nach Bedarf bestätigen.

 

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

 

Folgen Sie mir auf Instagram:

 

Abonnieren Sie meinen YouTube-Kanal:

Lesen Sie meine anderen Beiträge:

Danke :)