Animierte Grafiken für Spiele mit Clip Studio Paint

Animierte Grafiken für Spiele mit Clip Studio Paint | 3 von 3

25.578

Dadotronic

Maschinelle Übersetzung | Originaltext anzeigen

Zum Abschluss dieser dreiteiligen Serie zeige ich Ihnen, wie Sie die Funktion „Datei-Objekt“ nutzen können, um den Animationsprozess mehrerer Assets für Ihr Spiel zu beschleunigen, und wie Sie Ihre Grafiken für die Verwendung in einer Spiel-Engine exportieren.

In diesem Prototyp teilen sich alle Puzzleteile dieselbe Animation.

In den folgenden Schritten werde ich eine effiziente Methode zur Erledigung dieser Aufgabe demonstrieren.

Ein Proxy-Objekt animieren

Zuerst erstellen wir eine Proxy-/Vorlagen-Grafik, die später durch die farbigen Grafiken ersetzt wird. Ich habe einfach eine Kopie des roten Teils erstellt und ihn in Grau umgewandelt. Die Teile dieses Puzzles bestehen aus 2 Teilen: der Katze und dem Block.

Exportieren Sie die Grafiken als transparente PNG-Datei.

Erstellen Sie nun ein NEUES DOKUMENT und verwenden Sie DATEI - IMPORTIEREN - DATEI-OBJEKT ERSTELLEN, um die exportierten Grafiken als Datei-Objekte zu platzieren.

Aktivieren Sie das Zeitleisten-Panel und erstellen Sie eine NEUE ZEITLEISTE. Wie bei der Figur können Sie verschiedene Animationssequenzen für die Teile haben. Ich beginne mit der IDLE-Animationsschleife.

Vergessen Sie nicht – um die INTERPOLATION zu aktivieren, müssen Sie die Ebene auswählen und auf KEYFRAMES AUF DIESER EBENE AKTIVIEREN klicken.

Mit derselben Methode, die ich zuvor verwendet habe, animierte ich diese Schleife, die abgespielt wird, wenn der Spieler einen Hinweis benötigt. Es ist im Grunde ein Squash-and-Stretch der Teile, aber mit zwei leicht unterschiedlichen Geschwindigkeiten.

Ich werde eine neue ZEITLEISTE erstellen, um eine weitere Animationssequenz hinzuzufügen, diesmal eine Bewegung für den Fall, dass das Teil „explodiert“ (oder die Bühne verlässt).

Unten sehen Sie den wichtigen Fortschritt dieser Animation:

Ich konnte das innere Teil mithilfe der Deckkraft-Eigenschaft verschwinden lassen. Wenn die Deckkraft animiert wird, wird ein halber Diamant unter dem Keyframe angezeigt.

Mir fehlte etwas, also fügte ich eine zusätzliche Ebene hinzu und zeichnete diese „Twist“-Form, die zusammen mit der Katzen-Grafik gedreht werden sollte. Vergessen Sie nicht, jede neue Zeichnung in ein DATEI-OBJEKT umzuwandeln, bevor Sie versuchen, sie mit dem Interpolationsmodus zu animieren.

Unten sehen Sie den Fortschritt dieser Animation; die sich drehende Grafik wurde weiß und das äußere Teil wurde mit animierter Deckkraft versehen, sodass das gesamte Teil aus der Spielszene verschwindet.

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

Grafiken der Animation ersetzen

Okay. Wenn das unsere Animation für dieses Asset ist, wie können wir sie auf alle anderen Grafiken des Spiels übertragen?

Lassen Sie mich Ihnen eine einfache Methode zeigen.

Beginnen wir damit, die verbleibenden Teile zu exportieren, mit denen Sie das graue Proxy-Objekt ersetzen werden. Dies werden die verschiedenen Farben der Teile (Rot, Blau, Grün und Gelb) sein, die ich auf der Hauptbühne dieses Puzzles haben werde, wie unten gezeigt.

Zurück zu der Datei, in der Sie die Animationen erstellt haben: WÄHLEN Sie die Ebene des zu ersetzenden Teils aus und wählen Sie DATEI-OBJEKT - DATEI DES DATEI-OBJEKTS ÄNDERN.

Suchen Sie die farbigen Grafiken für den inneren Teil (Katze) und den äußeren Teil (Rahmen) – die Grafiken werden ersetzt UND die Animationen funktionieren weiterhin.

Sie müssen den Vorgang einfach für jedes farbige Teil wiederholen.

Hier sind alle Teile ersetzt und bereit für unser Spiel:

Das war's. Solange Sie Ihre Quelldatei (die mit den animierten grauen Grafiken) NICHT SPEICHERN, können Sie diese als Vorlage verwenden und den Inhalt durch andere Grafiken oder Variationen ersetzen, die Sie benötigen, während die Animation erhalten bleibt.

Diese Technik kann bei Spielen mit mehreren Charakteren verwendet werden, z.B.: Sie erstellen zuerst eine Vorlage (Proxy-Figur), komplett mit jedem Teil und jeder Animation, die Sie im Spiel haben möchten, und später können Sie diesen Grafiken „Skins“ hinzufügen, wobei dieselben animierten Schleifen angewendet werden.

Animationen exportieren

Dies ist nicht zwingend erforderlich, aber ich empfehle, die Bilder, die Sie exportieren möchten, zu optimieren. Eine sehr wichtige Sache ist sicherzustellen, dass das Motiv der Animation in einem „Begrenzungsrahmen“ eingeschlossen ist, ohne zusätzliche Transparenz (leeren Raum) herum.

Ein netter Trick, den Sie anwenden können, ist: Erstellen Sie einen AUSWAHLRAHMEN um Ihre Grafik und bewegen Sie Ihre Animationszeitleiste, um zu überprüfen, ob sich Pixel außerhalb der Auswahl befinden.

Im Beispiel unten: Das linke Bild zeigt, wie der obere Teil des Kopfes außerhalb des Auswahlbereichs liegt; das rechte Bild zeigt, wie der Sprite während der gesamten Animation innerhalb des Auswahlbereichs liegt.

Solange die Auswahl noch aktiv ist, gehen Sie zu DATEI - ANIMATION EXPORTIEREN und wählen Sie BILDSEQUENZ.

Im folgenden Dialogfeld suchen Sie den Ordner für den Export der Bilder und achten Sie auf diese Optionen:

Dateibenennung: Fügen Sie ein Präfix für den Namen Ihrer Dateien hinzu;

Wählen Sie das PNG-Format, um die Transparenz zu erhalten;

Wählen Sie unter GRÖSSENEINSTELLUNGEN den AUSWAHLBEREICH, um die Bilder innerhalb des von Ihnen erstellten Begrenzungsrahmens zu exportieren; (siehe Hinweis unten zu dieser Option)

Bei Bedarf können Sie Ihre Sprites auch von diesem Bildschirm aus in der Größe ändern;

//HINWEIS: Die Option Größeneinstellungen - Auswahlbereich ist nur in der Clip Studio Paint EX-Version verfügbar; wenn Sie die Pro-Version haben, können Sie das Bild vor dem Export einfach auf die richtige Größe ZUSCHNEIDEN.

Fertig! Jetzt können Sie diese Bilder in Ihre Spiel-Engine laden.

Fast alle Werkzeugsätze zur Spieleentwicklung verwenden Bildsequenzen, um einen animierten Charakter auf dem Bildschirm anzuzeigen. Dies ist die gängigste Technik, aber es ist gut, sich daran zu erinnern, dass Optimierung (dieses Wort wieder) in der Spieleentwicklung immer bevorzugt wird.

Im nächsten Schritt zeige ich Ihnen, wie Sie ein kostenloses eigenständiges Tool verwenden, um Sprite Sheets und Atlas Images zu erstellen.

Atlasbilder und Sprite-Sheets erstellen

In einem Szenario der Spieleentwicklung helfen Sprite-Sheets und Atlasbilder, die Rechenleistung zu reduzieren, die zum Laden eines Bildes in den Systemspeicher benötigt wird.

Anstatt verschiedene PNGs zu laden, um die Animation anzuzeigen, können Sie ein einziges Bild bereitstellen, das alle Frames der Animation ENTHÄLT UND eine Datendatei mit Koordinaten und Informationen, damit die Engine das Sprite-Sheet „lesen“ und die spezifischen Bilder zur spezifischen Zeit lokalisieren kann.

Die Atlasbilder sind dieselben, aber anstatt Animations-Frames packen Sie einfach verschiedene Grafiken eines Spiels in ein einziges Bild.

Leider gibt es keine einfache (automatische) Möglichkeit, ein Sprite-Sheet oder Atlasbild mit Clip Studio Paint zu erstellen.

Für dieses Beispiel werde ich ein Tool namens „Free Texture Packer“ verwenden. Es ist ein kostenloses Tool und es gibt sogar eine Online-Version, die verwendet werden kann (Link in den Fußnoten dieses Artikels).

Hier ist eine Schritt-für-Schritt-Anleitung zur Verwendung:

[ SCHRITT 1. ]

Öffnen Sie das Programm und laden Sie Ihre Bilder; Sie können sie auch per Drag & Drop in diesen (blauen) Bereich ziehen.

[ SCHRITT 2. ]

Sobald die Bilder geladen sind, können Sie die Eigenschaften Ihres Sprite Sheets anpassen. SIE MÜSSEN sich mit Ihrem Programmierer oder Lead Artist abstimmen, um die Details zum Import der Assets in die Engine zu erfahren.

Die wichtigsten Optionen hier sind:

Breite/Höhe sind die Größe Ihres Sprite Sheets/Atlas; Spiel-Engines arbeiten normalerweise mit Karten von 256, 512, 1024, 2048… die OPTION ZWEIERPOTENZ muss die meiste Zeit aktiviert sein, ebenso Feste Größe, wenn Sie Ihre Texturen auf dieselbe Größe zwingen müssen.

ROTATION ERLAUBEN, ZUSCHNEIDEN ERLAUBEN und ZUSCHNEIDEMODUS können geändert werden, damit Sie mehr Bilder in das Sprite Sheet passen. Zuschnitt- und Rotationsmodi sind bei statischen Bildern (Atlas) vorzuziehen; für Animationen sind Sie sicherer, wenn diese ausgeschaltet sind, damit die Sprites ausgerichtet sind und denselben transparenten Raum um sich herum haben.

In meinem Beispiel unten habe ich mich entschieden, die Idle-Animation des Mädchens in einer quadratischen 2048x2048-Textur zu packen.

Um Ihre Animation im Tool in der Vorschau anzuzeigen, wählen Sie alle Bilder im rechten Bereich aus und klicken Sie auf die Schaltfläche ANIMATIONEN. Verwenden Sie den Schieberegler, um die Geschwindigkeit zu steuern.

Um den Vorgang abzuschließen, wählen Sie das FORMAT Ihrer Daten-/Koordinaten-Datei (dies wird Ihnen von Ihrem Programmierer und der von Ihnen verwendeten Engine mitgeteilt), suchen Sie den Ordner zum Speichern und klicken Sie auf EXPORTIEREN.

Das Endergebnis ist ein Texturkartenbild und eine Datendatei (die mit jedem Texteditor geöffnet werden kann) – diese müssen denselben Zeitpunkt haben.

Fazit

Im Laufe der Jahre habe ich Flash, Animate und zuletzt Spine verwendet, um diese einfachen Animationen für Prototypen und Indie-Spiele zu erstellen, aber als Celsys die Interpolation als Animationsfunktion hinzufügte, sah ich endlich eine Chance, meinen Workflow weiter zu vereinfachen.

Ich hoffe, diese Serie war informativ und dass Sie eine dieser Techniken nutzen können, um Ihr erstes Spieleprojekt zu starten.

Es sei daran erinnert, dass diese Art von Animations-Workflow verwendet werden kann, um Assets für andere Arten von Projekten zu erstellen: animierte Grafiken für Ihren Stream- oder YouTube-Kanal, lustige kleine Gifs und Memes für soziale Medien oder sogar Animationskurzfilme im Cut-Out-Stil.

Bitte, wenn Sie etwas erstellen, nachdem Sie diesen Artikel gelesen haben – lassen Sie es mich wissen, damit ich Ihre Arbeit in meinem Feed bewerben kann.

Danke fürs Lesen.

Bis zum nächsten Tipp.