In diesem Artikel zeige ich Ihnen, wie Sie mit Clip Studio Paint Grafiken (Sprites) für Spiele erstellen können.

 

Dies wird eine dreiteilige Serie sein.

 

[Teil 1] Ich erkläre meinen Vorgang zum Erstellen animationsfähiger Sprites für einen Prototyp eines Mobilspiels nur mit Clip Studio Paint.

 

[Teil 2] Ich werde mich auf die Animation konzentrieren - einen soliden Workflow zum Animieren von Sequenzen mithilfe der Cutout-Style-Methode anbieten und die neue Interpolationsfunktion einführen, die jetzt in der Software verfügbar ist.

 

[Teil 3] befasst sich mit dem Exportieren und einigen Tipps und Tricks, mit denen Sie die Erstellung verschiedener Assets beschleunigen können.

 

 

Machen wir das.

 

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

 

Planen Sie Ihre Schritte

In erster Linie: Wenn Sie Assets für die Spieleentwicklung erstellen, ist es sehr wichtig, dass Sie die endgültige Anzeigeausgabe berücksichtigen.

 

Ich empfehle Ihnen dringend, einige Zeit mit Nachforschungen oder Gesprächen mit Ihrem Team (Hauptkünstler, Produzent oder Programmierer) über das beste Bildschirmverhältnis und die beste Auflösung für die Erstellung der Grafiken zu verbringen.

 

[ Als Faustregel gilt: ]

 

• Vektorgrafiken werden immer bevorzugt, aber es ist ein langsamerer Prozess.

Wenn der Stil Ihres Spiels diese Erstellungsmethode unterstützt, erstellen Sie die meisten Ihrer Grafiken im Vektormodus.

 

 

• Raster- / Bitmap-Grafiken sind schneller zu erstellen, es können jedoch Skalierungsprobleme auftreten, wenn Sie die Auflösung erhöhen müssen, nachdem Ihre Grafik fertig ist.

 

Versuchen Sie, Ihr Vermögen mit mindestens der doppelten Größe Ihrer endgültigen Auflösung zu erstellen. Habe immer eine höhere Auflösung deiner produzierten Sprites.

 

Für dieses Projekt erstelle ich die Assets im Bitmap- / Rastermodus.

 

Um einen Anhaltspunkt dafür zu haben, welche Bildgröße für die Erstellung des Bildmaterials am besten geeignet ist, habe ich mich schnell mit den gängigen Bildschirmauflösungen der Plattformen befasst, für die das Spiel voraussichtlich veröffentlicht werden könnte.

 

Ich habe zwei wichtige Informationen aus meiner Forschung erhalten:

 

ein. Die maximale Bildschirmauflösung beträgt 2224 Pixel (blauer Bereich);

 

b. Um sicherzustellen, dass das Spiel auf Mobil- und Tablet-Geräten funktioniert, muss ich meine wichtigen Grafiken nahe 1080 Pixel (roter Bereich) zentrieren.

Zeichenfläche erstellen

Unter Berücksichtigung der vorherigen Informationen habe ich eine Zeichenfläche mit allen Grafiken für dieses Spielmodell erstellt. Auf diese Weise habe ich eine bessere Vorstellung vom Spiel UND es ist einfacher, die Konsistenz während der Produktion aufrechtzuerhalten (da Sie an Stapeln arbeiten können).

// Zu diesem Bild: Ich habe die Konzepte aus meinem Skizzenbuch in die Zeichenfläche importiert und sofort mit den Rohzeichnungen begonnen. Wenn Sie alle Grafiken in einer Datei zusammenfassen, können Sie ihre Beziehungen (Größe und Farben) überprüfen.

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

 

Später in dieser Serie werde ich die Methode zum Ausschneiden von Animationen für diese Sprites verwenden - nicht die in Clip Studio Paint übliche handgezeichnete Einzelbildmethode.

 

Damit dies funktioniert, muss ich jeden Teil zeichnen und isolieren, der sich bewegen wird.

In diesem Stadium wird Ihr Prozess sehr mühsam, wenn Sie sich für jedes Objekt mit den verschiedenen Ebenen (Linie, Farbe, Schattierung) befassen müssen.

 

Ein Vorschlag hier ist, [sich auf die Erstellung / Herstellung zu konzentrieren und die Organisation für später zu verlassen].

 

Im folgenden Beispiel wurden alle Grafiken wie eine einzelne Zeichnung erstellt: Eine Ebene für Linien, andere für flache Farben, Schattierungen usw.

 

// Zu diesem Bild: In meiner Zeichenfläche haben alle meine Grafiken dieselbe Ebenenstruktur. Mein kreativer Prozess würde unterbrochen, wenn ich gleichzeitig erstellen und organisieren würde.

 Teile organisieren und exportieren

Clip Studio Paint verfügt über eine sehr intelligente Funktion, mit der Sie Pixel aus mehreren ausgewählten Ebenen verschieben, kopieren, ausschneiden, einfügen und löschen können, sofern:

 

(A) Sie sind im Ebenenstapel ausgewählt.

(B) Sie werden alle über eine Layergruppe ausgewählt.

// Über dieses Bild: In Clip Studio Paint können Sie die Pixel mehrerer ausgewählter Ebenen auswählen und beeinflussen. Es ist eine sehr nützliche Funktion, um Teile Ihrer Zeichnung zu ändern, ohne die Ebenen zusammenführen zu müssen.

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

 

Exportieren wir nun jeden Teil des Sprites korrekt, damit Sie eine ausgeschnittene Animation in Clip Studio Paint und / oder ein Atlas-Bild erstellen können, das in verschiedenen Animationswerkzeugen (Wirbelsäule, Spriter, Unity) verwendet werden kann.

// Über dieses Bild: Ein Atlas ist ein großes Bild, das mehrere Sprites enthält - dies reduziert den Speicherverbrauch, da das Gerät nur ein einzelnes Bild laden (aufrufen) muss, das alle Sprites enthält, die Sie in einem Spiel oder einer Figur verwenden werden.

Ich habe viele Methoden ausprobiert, um den Exportvorgang zu beschleunigen. Das Folgende ist die Reihenfolge der Schritte, die meiner Meinung nach am effektivsten sind, um diese Aufgabe auszuführen:

[ SCHRITT 1.]

 

Wählen Sie im Ebenenstapel alle Ebenen aus, die zum Erstellen Ihrer Grafik verwendet wurden (Linien, Farben, Schattierungen usw.). Verwenden Sie als Nächstes das Lasso-Werkzeug, um den Bereich auszuwählen, den Sie auf einem Sprite transformieren möchten (in diesem Beispiel exportiere ich nur den Kopf des Mädchens).

 

[ SCHRITT 2.]

 

Wechseln Sie bei aktivierter Auswahl zu BEARBEITEN - KOPIEREN (oder STRG + C) und dann zu DATEI - NEU ERSTELLEN AUS DER KLIPPE

[SCHRITT 3.]

 

Eine neue Datei wird mit einem Teil des Sprites UND der Struktur der Datei (nützlich für zukünftige Bearbeitungen) erstellt. Deaktivieren Sie jetzt die Sichtbarkeit der PAPIERLAGE, damit das Sprite einen transparenten Hintergrund hat.

 

// WICHTIG: Beachten Sie, dass das Sprite genau in einem Rechteck enthalten ist. Es ist kein zusätzlicher Platz vorhanden. Dies ist eine gute Vorgehensweise beim Exportieren von Sprites für Engines.

[ SCHRITT 4.]

 

Jetzt können Sie das Sprite in eine neue Datei exportieren. Gehe zu DATEI - EXPORTIEREN (EINZELNE SCHICHT) und wähle PNG.

[SCHRITT 5.]

 

Es ist immer gut, Ihre Sprites entsprechend zu benennen. Für dieses Projekt benenne ich die Figuren wie folgt: GIRL_ (Name des Körperteils) .png

[SCHRITT 6.]

 

Dieser PNG-Exportdialog ist nützlich, da Sie die Größe Ihrer Grafik anpassen können, ohne die ursprüngliche Grafik zu ändern. Nehmen wir an, der Programmierer benötigt den Charakter, um die Hälfte seiner Größe im Spiel zu haben. Sie können die Bilder problemlos wieder exportieren, indem Sie den Wert in SCALE RATIO auf 50% ändern (z. B.).

Und du bist fertig...

 

... für dieses erste Sprite. :(

 

Gerne können Sie diesen Vorgang in Clip Studio Paint beschleunigen.

 

[Sie können eine Auto-Aktion (Makro) verwenden, um diese Sequenz zu automatisieren.]

 

Ich habe diese Aktion erstellt und teile sie mit Ihnen. Den Download-Link finden Sie in den Fußnoten zu diesem Artikel.

Um diese Aktion zu importieren, rufen Sie das Unterwerkzeug AUTO ACTION auf und wählen Sie IMPORT SET. Sie können es später in Ihr Standard-Auto-Action-Set kopieren oder verschieben.

 

Kehren Sie zu Ihrer Zeichenfläche zurück, [Wählen Sie einen Bereich Ihres Bildes aus], den Sie in ein Sprite exportieren möchten, und klicken Sie dann auf die kleine PLAY-TASTE.

 

Die Aktion fragt nach dem Namen und der Größe, bevor die temporäre Datei automatisch geschlossen wird.

Wiederholen Sie den Vorgang für alle Teile Ihres Bildes. In diesem Beispiel habe ich alle Teile, die benötigt werden, um den Charakter zu "manipulieren" und zu animieren.

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

 

Das ist es.

 

In dem folgenden Artikel werde ich Ihnen zeigen, wie Sie dieses Sprite in Clip Studio Paint mithilfe der Methode für ausgeschnittene Animationen [animieren].

 

Es ist eine sehr effiziente Arbeitsweise, mit der Sie Sequenzen für Spiele oder verschiedene Arten von Animationen erstellen können, die Sie in Ihrem Projekt verwenden können (Twitch- und Youtube-Grafiken, Gifs für soziale Medien, z. B.).

 

Material herunterladen