Was wir bisher gelernt haben

Im ersten Teil dieser Serie haben wir gelernt, wie Sprites aus Clip Studio Paint erstellt, bearbeitet und exportiert werden können.

Jetzt ist es an der Zeit, mit der Software einige animierte Sprites zu erstellen.

 

Derzeit werden in der Branche Animationen für 2D-Spiele in der Regel mit 2D-Bones- und Mesh-Deformationssystemen erstellt. Die Teile eines Sprites werden in ein bestimmtes Programm importiert, um das herum ein polygonales Netz erstellt wird. Knochen sind mit verschiedenen Bereichen dieses Netzes verknüpft und bieten eine Methode, um das Sprite wie ein 3D-Objekt zu „deformieren“. Das Ergebnis ist eine super flüssige Animation, die nur ein einziges Bild für die gesamte Animation des Sprites benötigt.

 

Während 2D-Bone-Animationssysteme der aktuelle Trend sind, können mit dem ausgeschnittenen Animationssystem weiterhin Sprites für Spiele erstellt werden. Dies ist eine zeitsparende Technik, die Sie für Ihre ersten Spiele, Prototypen oder sogar für ein vollständiges Spiel verwenden können, das möglicherweise einen kompatiblen Grafikstil aufweist.

 

Dies ist auch eine sehr benutzerfreundliche Methode, um Animationen für Videos, GIFs für soziale Medien oder Grafiken für Ihren Stream-Kanal zu erstellen.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Ausschnittanimation in Clip Studio Paint

Seit Version 1.84 ist es jetzt möglich, den Inhalt einer Ebene mithilfe von Interpolation zu animieren. Dies ist ein RIESIGER Zusatz für das Animations-Toolset.

Lernen Sie diese neue Funktion kennen, indem Sie eine lustige Ballanimation ausführen:

 

1. Erstellen Sie eine neue Datei und zeichnen Sie einen Ball, um zu springen.

2. Vergewissern Sie sich, dass das Zeitleistenfenster sichtbar ist, und klicken Sie auf die Schaltfläche NEUE ZEITLEISTE. Klicken Sie einfach im Bestätigungsdialog auf OK.

3. Klicken Sie auf diese kleine Schaltfläche, um den KEYFRAME auf dieser Ebene zu aktivieren. Beachten Sie das kleine Symbol, das der aktuellen Ebene hinzugefügt wurde.

 

4. Ändern Sie Ihr Unterwerkzeug in OPERATION - OBJECT, und Sie werden feststellen, dass die Eigenschaften animiert werden können, während die Interpolation aktiv ist.

 

5. Legen Sie zur Zeitleiste zurück einen Keyframe für diese erste Pose fest.

Sie können die Kugelgrafik nur geringfügig verschieben, damit das Programm sie als Keyframe registriert. Sie werden feststellen, dass sich jetzt in der Zeitleiste UND in den Eigenschaften des Objekts ein blaues Diamantsymbol befindet.

6. Verschieben Sie die Timeline auf die Hälfte der Zeit (Bild 10 in meinem Beispiel) und bewegen Sie den Ball vom Boden aufwärts. Denken Sie daran, zuerst die Zeitleiste auf Bild 10 und dann das Objekt zu verschieben. Sie können die UMSCHALTTASTE gedrückt halten, um die Bewegung des Balls auf der Y-Achse zu beschränken.

 

7. Bewegen Sie nun Ihre Zeitleiste zu Bild 20 und legen Sie den Ball zurück in den Boden.

Hit Play und der kleine rote Ball lebt.

8. Um das Abprallen des Balls interessanter zu gestalten, können Sie das Timing (die Dauer / Belichtung jedes Keyframes) anpassen, um dem Objekt das Gefühl von „Gewicht“ zu verleihen.

Zurück zur Timeline KLICKEN UND ZIEHEN SIE den mittleren Keyframe näher an den End-Keyframe - der Ball verbringt mehr Zeit mit der Aufwärtsbewegung UND fällt schneller…

 

9. Machen wir es jetzt etwas bunter, indem wir dieser Animation Squash und Stretch hinzufügen.

Zurück zur Timeline, in der Mitte der Aufwärtsbewegung der Kugel (Bild 7 in meinem Beispiel), passen Sie ihre Form mit der SCALE an - dehnen Sie die Kugel nur in der Y-Achse.

Denken Sie daran, FIXED ASPECT zu deaktivieren, um die ungleichmäßige Skalierung zu aktivieren. Behalten Sie das Volumen der Form; Wenn Sie in X dehnen, komprimieren Sie in Y und umgekehrt.

 

10. Um dieses Beispiel zu beenden, habe ich vor dem letzten zwei weitere Squash- und Stretch-Frames hinzugefügt. Bei Frame 18 habe ich den Ball in Y (Stretch) länger gemacht und bei Frame 19 habe ich ihn in X (Squash) breiter gemacht. Dadurch reagiert der Ball auf die Schwerkraft und den Aufprall auf den Boden.

Hier sind die Posen gleichmäßig verteilt und ohne Interpolation, sodass Sie die Verformung auf jedem Frame sehen können.

 

Und hier (unten) die finale Animation mit Interpolation und einigen Anpassungen am Timing (die gesamte Bewegung wird beschleunigt, indem die Timeline gekürzt und ein zusätzlicher Frame hinzugefügt wird und der Ball vor dem Fall am Himmel gehalten wird).

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Bevor Sie den Charakter animieren, sollten Sie sich mit DATEIOBJEKTEN befassen

Während Sie den Bouncing Ball animieren, bemerken Sie wahrscheinlich etwas: Wenn Sie das TRANSFORM-Werkzeug (zum Drehen, Skalieren und Bewegen) verwenden, wird der gesamte Canvas-Bereich für die Verformung und nicht nur die Form des Objekts verwendet.

 

Dies kann ein Problem sein, wenn komplexere Objekte animiert werden sollen. In diesen Situationen ist es besser, DATEIOBJEKTE anstatt allgemeiner Ebenen zu animieren.

 

// Über dieses Bild: LINKS: Die rote Kugel befindet sich auf einer Ebene und das Transformationswerkzeug verwendet den gesamten Dokumentbereich als Referenz zum Transformieren des Objekts.

RECHTS: Die grüne Kugel ist ein Dateiobjekt und die Transformation basiert jetzt auf der Größe des Objekts.

 

Ein DATEIOBJEKT ist ein Container mit dem Inhalt einer externen CLIP-Datei. Dieses (das Dateiobjekt) kann auf einem beliebigen Dokument platziert werden. Jede Änderung an der Quelldatei wirkt sich auf das Dokument aus, in dem das Dateiobjekt verwendet wird.

 

Beginnen wir zum Beispiel mit der Erstellung unserer Hauptfigur mithilfe von DATEIOBJEKTEN. Dieser Vorgang entspricht dem Aufrüsten einer Figur in einer 3D-Software und / oder einem beliebigen Skelett-Animationswerkzeug.

 

Riggen Sie Ihr Game Sprite mithilfe von Dateiobjekten

Beginnen wir mit der Erstellung eines NEUEN DOKUMENTS und dem Einfügen eines vollständigen Abbilds Ihres Sprites, damit wir es als Vorlage für die Erstellung des Rigs verwenden können. Passen Sie die Leinwandgröße so an, dass Sie Platz für die geplante Animation haben.

Verwenden Sie zum Importieren der Teile des Sprites die Option DATEI - IMPORTIEREN - DATEIOBJEKT ERSTELLEN. Importieren Sie die transparenten PNGs oder CLIP-Dateien, die Sie im ersten Teil dieses Lernprogramms erstellt haben.

Sie können die Dateien aus Ihrem Ordner auch KLICKEN UND ZIEHEN, um sie in die ITEM BANK-Palette zu kopieren.

 

 

Platzieren Sie alle Sprites im Canvas-Bereich und ordnen Sie die Teile mit dem Unterwerkzeug OPERATION - OBJECT an.

Wenn Sie die Z-Reihenfolge der Teile anpassen müssen (welches Objekt befindet sich vor / hinter dem anderen), verschieben Sie die entsprechende Ebene im Ebenenstapel nach oben oder unten. Um schnell Ebenen auszuwählen, können Sie STRG + UMSCHALT gedrückt halten und auf die Leinwand klicken.

// Über dieses Bild: LINKS: falsche Ebenenreihenfolge, RECHTS: korrekte Überlappung der Teile.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Nun bereiten wir den Animations-Workflow vor. Ich empfehle dringend, dass Sie Ihre Timeline-Palette auf eine der Seiten Ihrer Leinwand verschieben. Es ist nur einfacher zu verstehen, was animiert wird.

Klicken Sie auf die NEUE ZEITLINIE und legen Sie einige Eigenschaften Ihrer Animation fest, z. B .: den Namen der Animationssequenz (Leerlauf, Laufen, Gehen); die Framerate Ihrer Animation (12 oder 15 fps sind für diesen Ausschnittstil gut) und die Anzahl der Frames, die Sie verwenden werden (ich beginne mit 20).

 

Sie können die Verwaltung der Timeline noch vereinfachen, indem Sie die Option THUMBNAIL SIZE in NONE ändern. Diese Option zeigt nur den Namen jedes Teils an, ähnlich wie bei anderen Animationspaketen (Flash, Animate, Blender, z. B.…).

 

Um mit Interpolation in Clip Studio Paint animieren zu können, müssen Sie es in der Timeline aktivieren. Wählen Sie ALLE Ebenen aus und klicken Sie auf ENABLE KEYFRAME ON THIS LAYER. Sie werden feststellen, dass sich das Ebenensymbol ändert.

Jetzt müssen Sie etwas in ALLEN Ebenen Ihres Sprites tun, VORZUGSWEISE im ersten Frame Ihrer Animation.

Verwenden Sie das Unterwerkzeug OPERATION - OBJECT und bewegen Sie den Transformationszapfen (Drehmittelpunkt) des Teils in die richtige Position (in diesem Beispiel habe ich diesen Zapfen von der Mitte zum unteren Rand des Kopfes verschoben, wo sich der Hals befindet).

 

Die Arme des Charakters brauchen auch den Drehpunkt, um dort zu sein, wo die Schulter ist. Passen Sie den Drehpunkt jedes Teils an, bevor Sie mit dem nächsten Schritt fortfahren ...

 

Während Sie Ihre Drehpunkte setzen, führen Sie einige Tests am Rig durch - drehen Sie die Gelenke des Charakters, bis Sie den besten Weg finden, um ihn zu animieren.

 

Im Beispiel funktioniert die Hand aufgrund eines falsch platzierten Pivots nicht ...

 

Wenn ich die Schwenkposition drehe, kann ich das Handgelenk drehen, wodurch die Illusion entsteht, dass ihr ganzer Arm aus einem einzigen Bild besteht.

Sie können die DREHUNG einer Ebene jederzeit zurücksetzen, indem Sie die Option DREHUNGSWINKEL auf 0 setzen. Gleiches gilt für SKALIERUNG, bei der Sie die DREHUNG auf 100 zurücksetzen können.

 

Hier ist ein Diagramm, wie ich die Drehpunkte der einzelnen Gelenke anpasse.

 

Beachten Sie in der Zeitleiste, dass für jedes Teil bereits ein Keyframe festgelegt ist.

Wenn einige Ihrer Ebenen keinen Keyframe haben, erstellen Sie einen, indem Sie das Teil ein wenig auf der Leinwand oder manuell mit der Schaltfläche KEYFRAME HINZUFÜGEN verschieben.

 

Erledigt. Das Zeichen rechts kann jetzt animiert werden.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Animieren einer ‘Idle’ -Animation

Sobald Ihr Charakter-Rig festgelegt ist (Drehgelenke vorhanden und alle Teile mit Keyframes versehen), ist es an der Zeit, diese erste Pose bis zum letzten Frame der Animation zu duplizieren.

 

Die einfachste Möglichkeit, mehrere Bilder zu duplizieren, besteht darin, alle Keyframes in der Timeline auszuwählen, die ALT-Taste gedrückt zu halten und auf die gewünschte Position zu klicken und zu ziehen.

 

Verschieben Sie nun Ihre Timeline-Auswahl in den mittleren Bereich Ihrer Animation, wählen Sie alle Teile der Figur (mit Ausnahme ihrer Beine) aus und bewegen Sie sie ein Stück nach unten (wir erzeugen das Auf und Ab einer Atmung).

 

Denken Sie daran, dass Sie mit STRG + LINKE Maustaste schnell zwischen den Ebenen wechseln und diese auswählen können. Sie können die Teile auch mit den Tastaturpfeilen verschieben.

Das ist das Ergebnis. Sehr einfach, aber es ist ein Anfang.

Eine „einfache“ Methode, um die Starrheit einer Animation zu brechen, besteht darin, das Timing der sich bewegenden Teile zu ändern: Im folgenden Beispiel habe ich den Keyframe ihres Körpers (Girl + Body Layer) verzögert (nach links verschoben), sodass die Bewegung einen Bruchteil beginnt der Zeit schneller als die anderen Teile. Ich habe auch ihre Arme und Hände proportional verzögert.

 

Zuletzt habe ich die Keyframes von Kopf und Haar verzögert, sodass es so aussieht, als würden diese Teile vom Körper „gezogen“.

 

Die ganze Idee ist es, eine Bewegung zu simulieren, die auf der Brust beginnt und die anderen Teile der Reihe nach wie ein Eisenbahnwagen zieht.

 

Wenn es um das Timing geht, müssen Sie Ihre Augen trainieren, um diese subtilen Veränderungen zu bemerken. Versuchen Sie herauszufinden, welcher Teil sich zuerst bewegt als andere.

Bis zu diesem Punkt haben wir uns nur mit der Übersetzung (hoch und runter) der Stücke befasst. Lassen Sie uns nun etwas Rotation hinzufügen.

 

Beginnen Sie mit dem Kopfteil und wählen Sie das mittlere Keyframe in der Timeline aus (klicken Sie darauf, damit es rot wird) und drehen Sie es gegen den Uhrzeigersinn - nur eine winzige Bewegung.

Sie müssen auch die Rotation ihrer Haare entsprechend fixieren.

 

Sehen Sie, wie solch eine kleine Veränderung ihren Kopf und ihre Haare belastete. Es wird immer interessanter.

 

Ich habe das Gleiche für ihre Arme und Hände getan - nur den Zwischenrahmen jedes Teils gedreht.

 

Die Scale-Eigenschaft kann auch animiert werden.

Ich habe beide Beine (GIRL_LEGL & GIRL_LEGR) ausgewählt und das OPERATION - OBJECT-Tool verwendet, um die Beine zusammenzudrücken, damit sie auf ihr Gewicht reagieren.

 

Vergessen Sie nicht, wie in der Übung mit dem springenden Ball die Eigenschaft FIXED ASPECT zu deaktivieren, damit Sie das Volumen des Objekts beibehalten können (Squash in Y, Stretch in X und umgekehrt).

 

Squash and Stretch ist etwas, das Sie in verschiedenen Teilen Ihrer Animation verwenden können, so dass es karikaturhafter aussieht: Beachten Sie im folgenden Beispiel, wie ich die Skala verwendet habe, um die Zwischenbilder von Körper und Haar zu quetschen / zu dehnen. Sie sehen jetzt weniger starr aus.

 

Eine „Regel“ beim Erstellen (und Anzeigen einer Vorschau) von Animationsschleifen für Spiele ist, zu Beginn und am Ende Ihres Animationszyklus immer die gleiche Pose zu haben. (Halten Sie die ALT-Taste gedrückt, und ziehen Sie die Frames per Drag & Drop, um sie zu duplizieren.)

 

Hier ein Tipp: Achten Sie beim Testen der Animation darauf, dass Sie eine Animation von 0 bis 19 wiedergeben (falls Sie eine Animation mit 20 Bildern haben). In Clip Studio Paint können Sie die blauen Ziehpunkte in der Zeitleiste verschieben, um die Wiedergabe zu begrenzen .

Dadurch wird eine bessere Vorschau der Schleife angezeigt, da Sie nicht zweimal dasselbe Bild (1 und 20) belichten.

 

Sehen Sie sich den Vergleich zwischen der ersten und der letzten Stufe der Animation an.

Denken Sie daran, dass wir gerade 3 (eigentlich 2) verschiedene Posen verwendet haben, um diese sehr ansprechende Animationsschleife zu erstellen.

Dieser Prozess ist ein guter Ausgangspunkt für eine Vielzahl von Bewegungen, mit denen Sie Ihren Sprites Leben einhauchen können.

 

Das Animieren komplexer Objekte wie eines Charakters kann verwirrend sein. Halten Sie es einfach, bis Sie ein besseres Timing-Gefühl entwickeln. Es ist einfach zu überwältigend, all diese 12 klassischen Prinzipien der Animation gleichzeitig anzuwenden.

 

Das ist es. Ich hoffe es gefällt euch und lasst uns mit dem dritten und letzten Teil dieser Serie fortfahren, wo ich euch einige Tipps und Tricks zeigen werde, um die Erstellung von animierten Grafiken zu beschleunigen UND natürlich, wie man diese Kunstwerke für ein Spiel fertig macht .

 

Bitte laden Sie die Quelldatei dieser Übung über den folgenden Link herunter.

 

Material herunterladen