Animierte Grafiken für Spiele mit Clip Studio Paint

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

12.473

Dadotronic

Zum Abschluss dieser dreiteiligen Serie zeige ich Ihnen, wie Sie mithilfe der Funktion "Dateiobjekt" den Animationsprozess mehrerer Elemente für Ihr Spiel beschleunigen und Ihre Grafiken für die Verwendung in einer Spiele-Engine exportieren können.

In diesem Prototyp haben alle Puzzleteile dieselbe Animation.

In den folgenden Schritten zeige ich Ihnen, wie Sie diese Aufgabe effizient erledigen können.

Ein Proxy-Objekt animieren

Beginnen wir zunächst mit der Erstellung einer Proxy- / Vorlagengrafik, die später durch die farbenfrohen Grafiken ersetzt wird. Ich habe einfach eine Kopie des roten Stückes gemacht und es in grau umgewandelt. Die Teile dieses Puzzles bestehen aus 2 Teilen: der Katze und dem Block.

Exportieren Sie die Grafiken als transparentes PNG.

Erstellen Sie nun ein NEUES DOKUMENT und platzieren Sie die exportierten Grafiken mit FILE - IMPORT - CREATE FILE OBJECT als File Objects.

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

Vergessen Sie nicht - um INTERPOLATION zu aktivieren, müssen Sie den Layer auswählen und auf ENABLE KEYFRAMES ON THIS LAYER klicken.

Mit der gleichen Methode, die ich zuvor verwendet habe, habe ich diese Schleife animiert, die abgespielt wird, wenn der Player einen Hinweis benötigt. Es ist im Grunde ein Squash und Stretch der Teile, aber mit zwei leicht unterschiedlichen Geschwindigkeiten.

Ich erstelle eine neue ZEITLINIE, um eine weitere Animationssequenz hinzuzufügen. Diesmal eine Bewegung, wenn das Stück „explodiert“ (oder die Bühne verlässt).

Unten sehen Sie den wichtigsten Fortschritt dieser Animation:

Ich konnte das innere Teil animieren, indem ich die Opacity-Eigenschaft verwendete. Wenn die Deckkraft animiert ist, wird eine halbe Raute unter dem Keyframe angezeigt.

Ich hatte das Gefühl, dass etwas fehlte, also fügte ich eine zusätzliche Ebene hinzu und zeichnete diese "Twist" -Form, um sie mit der Katzengrafik zu drehen. Vergessen Sie nicht, eine neue Zeichnung in ein DATEIOBJEKT umzuwandeln, bevor Sie versuchen, mit dem Interpolationsmodus zu animieren.

Unten sehen Sie den Fortschritt dieser Animation. Die sich drehende Grafik wurde in Weiß geändert und die Deckkraft des äußeren Teils wurde animiert, sodass das gesamte Teil aus der Spielszene verschwindet.

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

Ersetzen der Grafiken der Animation

OK. Wenn dies also unsere Animation für dieses Asset ist, wie können wir es dann auf alle anderen Grafiken des Spiels übertragen?

Lassen Sie sich eine einfache Methode zeigen.

Beginnen wir mit dem Exportieren der verbleibenden Teile, durch die Sie das graue Proxy-Objekt ersetzen möchten. Dies sind die verschiedenen Farben der Teile (Rot, Blau, Grün und Gelb), die ich auf der Hauptbühne dieses Puzzles habe (siehe unten).

Kehren Sie nun zu der Datei zurück, in der Sie die Animationen erstellen, und wählen Sie die Ebene des Teils aus, das Sie ersetzen möchten. Wählen Sie dann DATEIOBJEKT - DATEI VON DATEIOBJEKT Ä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 nur für jedes farbige Teil wiederholen.

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

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

Diese Technik kann bei Spielen mit mehreren Charakteren angewendet werden, z. B .: Sie erstellen zunächst eine Vorlage (Proxy), die alle im Spiel gewünschten Teile und Animationen enthält. Später können Sie diesen Grafiken mit dem Symbol 'Skins' hinzufügen gleiche animierte Schleifen.

Exportieren der Animationen

Dies ist nicht obligatorisch. Ich empfehle jedoch, die zu exportierenden Bilder zu optimieren. Es ist sehr wichtig, sicherzustellen, dass das Motiv der Animation auf einen Begrenzungsrahmen beschränkt ist und keine zusätzliche Transparenz (Leerraum) vorhanden ist.

Ein guter Trick, den Sie machen können, ist: Erstellen Sie eine SELECTION BOX um Ihre Grafik und verschieben Sie Ihre Animations-Timeline, um zu prüfen, ob Pixel außerhalb der Auswahl sind.

Im folgenden Beispiel: Das linke Bild zeigt, wie sich die Oberseite des Kopfes außerhalb des Auswahlbereichs befindet. Das rechte Bild zeigt, wie sich das Sprite während der gesamten Animation im Auswahlbereich befindet.

Wechseln Sie bei aktivierter Auswahl zu DATEI - ANIMATION EXPORTIEREN und wählen Sie BILDABLAUF.

Suchen Sie im folgenden Dialogfeld den Ordner, in den die Bilder exportiert werden sollen, und achten Sie auf die folgenden Optionen:

Benennung der Datei: Fügen Sie ein Präfix für den Namen Ihrer Dateien hinzu.

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

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

Bei Bedarf können Sie in diesem Bildschirm auch die Größe Ihrer Sprites ändern.

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

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

Fast alle Spieleerstellungs-Tool-Kits verwenden Bildsequenzen, um einen animierten Charakter auf dem Bildschirm anzuzeigen. Dies ist die gebräuchlichste Technik, aber es ist schön, sich daran zu erinnern, dass die Optimierung (dieses Wort noch einmal) immer bevorzugt wird, wenn es um die Spieleentwicklung geht.

Im nächsten Schritt zeige ich Ihnen, wie Sie mit einem freien Standalone-Tool Sprite Sheets und Atlas-Bilder erstellen.

Erstellen von Atlas-Bildern und SpriteSheets

In einem Spielentwicklungsszenario reduzieren Sprite Sheets und Atlas Images die Verarbeitungsleistung, die zum Laden eines Bildes in den Systemspeicher benötigt wird.

Anstatt verschiedene PNGs zu laden, um die Animation anzuzeigen, können Sie ein einzelnes Bild mit allen Frames der Animation UND eine Datendatei mit Koordinaten und Informationen bereitstellen, damit die Engine das Spritesheet „lesen“ und die bestimmten Bilder zu einem bestimmten Zeitpunkt suchen kann.

Die Atlas-Bilder sind die gleichen, aber anstelle von Animationsframes packen Sie einfach verschiedene Grafiken eines Spiels auf ein einzelnes Bild.

Leider gibt es keine einfache (automatische) Möglichkeit, mit Clip Studio Paint ein Spritesheet oder ein Atlas-Bild zu erstellen.

In diesem Beispiel verwende ich ein Tool namens "Free Texture Packer". Es ist ein kostenloses Tool und es gibt sogar eine Online-Version, die verwendet werden kann (Link in den Fußnoten dieses Artikels).

Hier finden Sie eine schrittweise Anleitung zur Verwendung:

[ SCHRITT 1.]

Öffnen Sie das Programm und laden Sie Ihre Bilder. Sie können auch in diesen (blauen) Bereich ziehen und dort ablegen.

[ SCHRITT 2.]

Sobald die Bilder geladen sind, können Sie die Eigenschaften Ihres Sprite Sheet anpassen. SIE MÜSSEN mit Ihrem Programmierer oder Lead Artist sprechen, um Details darüber zu erhalten, wie die Assets in die Engine importiert werden.

Die wichtigsten Optionen sind hier:

Breite / Höhe entsprechen der Größe Ihres Spritesheets / Atlas. Game Engines funktionieren normalerweise mit Karten von 256.512.1024.2048. Die Option POWER OF TWO muss die meiste Zeit aktiviert sein, auch FIXED SIZE, wenn Sie Ihre Texturen zwingen müssen, dieselbe Größe zu haben.

ROTATION ERLAUBEN, TRIM ERLAUBEN und TRIM-MODUS können geändert werden, damit Sie mehr Bilder in das Spritesheet einfügen können. Das Zuschneiden und Drehen wird bei statischen Bildern (Atlas) bevorzugt. Bei Animationen sind Sie sicherer, wenn diese deaktiviert sind, sodass die Sprites ausgerichtet sind und denselben transparenten Raum haben.

In meinem Beispiel unten entscheide ich mich, die Girl-Leerlauf-Animation in eine quadratische 2048x2048-Textur zu packen.

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

Um den Vorgang abzuschließen, wählen Sie das FORMAT Ihrer Daten- / Koordinatendatei aus (dies wird von Ihrem Programmierer und der von Ihnen verwendeten Engine mitgeteilt), suchen Sie den Ordner, in dem Sie speichern möchten, und klicken Sie auf EXPORTIEREN.

Das Endergebnis ist ein Textur-Map-Bild und eine Datendatei (die in einem beliebigen Texteditor geöffnet werden kann) - diese müssen dieselbe Zeit 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. Als Celsys Interpolation als Animationsfunktion hinzufügte, sah ich endlich die Möglichkeit, meinen Workflow zu vereinfachen.

Ich hoffe, diese Serie war informativ und Sie können jede dieser Techniken verwenden, um Ihr erstes Spielprojekt zu starten.

Denken Sie daran, dass mit dieser Art von Animationsworkflow Elemente für andere Projekttypen erstellt werden können: animierte Grafiken für Ihren Stream- oder Youtube-Kanal, lustige kleine Gifs und Memes für soziale Medien oder sogar Animationsshorts im ausgeschnittenen Stil.

Wenn Sie nach dem Lesen dieses Artikels etwas erstellen, teilen Sie mir dies bitte mit, damit ich Ihre Arbeit an meinem Feed fördern kann.

Danke fürs Lesen.

Wir sehen uns im nächsten Tipp.