Einleitung

Hallo! Mein Name ist Hira Karmachela. Bei dieser Gelegenheit werde ich meine Erfahrungen teilen, wie man mit Clip Studio Paint animierte Retro-Pixelkunst für einen Spiel-Ladebildschirm erstellt.

 

Ich hoffe, dieser Beitrag bietet interessante Tipps für alle, die Pixelkunst und Retro-Design mit CSP erstellen möchten.

Über Retro-Design

Retro ist ein Designstil, der in den 70er bis 90er Jahren im Trend lag. Retro unterscheidet sich vom seit langem bekannten Vintage-Stil. Der Retro-Stil hat einen zeitgenössischen und sogar futuristischen Eindruck für seine Ära. Das einzigartige Merkmal von Retro zeigt sich in der Auswahl von funkelnderen Farben, auch bekannt als Neonfarben. Retro-Designstile entwickelten sich in dieser Ära zusammen mit dem Aufkommen des Disco-, Party- und Sport-Lebensstils.

 

In derselben Ära wurden Videospiele mit niedrigauflösender Grafik entwickelt, die heute als Pixelkunst bekannt ist. Dies finde ich interessant, um Tipps zur Erstellung von Pixelkunst im Retro-Stil zu geben.

Leinwand-Einrichtung für Pixelkunst

Los geht's! Öffnen Sie Clip Studio Paint und erstellen Sie eine neue Leinwand. Das endgültige Werk, das wir erstellen werden, hat die Maße 1280px mal 720px, aber um Pixelkunst zu erstellen, brauchen wir nur 10% dieser Größe. Die benötigten Leinwandabmessungen sind also 128px mal 72px.

Als Nächstes müssen wir das Raster einstellen, um das Zeichnen von Pixeln zu erleichtern. Gehen Sie zu Ansicht > Raster.

 

Jetzt können wir es auf der Leinwand sehen. Aber wir müssen immer noch die Rastergröße anpassen. Gehen Sie zu Ansicht > Raster-/Linealeinstellungen. Stellen Sie den Ursprung auf die Mitte und stellen Sie den Abstand (D) und die Anzahl der Unterteilungen auf 1 ein.

Retro-Farbschema

Bevor wir mit dem Kompilieren der Pixel beginnen. Zuerst müssen wir eine Farbpalette erstellen, die zum Retro-Stil passt. Erstellen Sie eine neue Ebene, um sie als Palette zu verwenden, und benennen Sie die Ebene als "retro palette".

Klicken Sie anschließend doppelt auf die Vordergrundfarbe in der Werkzeugleiste, um die Farbeinstellungen zu öffnen. Die erste Farbe, die wir erstellen werden, ist "Hot Pink". Geben Sie im HEX-Feld den Code "ff69b4" ein. Pinseln Sie dann auf die Leinwand.

Unten sind die Farben der Retro-Palette, die wir benötigen.

Für den Rest benötigen wir noch Schwarz und Weiß, die wir im Standardpalettenfeld finden können.

Werkzeugeinrichtung für Pixelkunst

OK! Es gibt mehrere Werkzeuge, die wir mit speziellen Einstellungen zum Erstellen von Pixelkunst verwenden können. Das erste Werkzeug ist das "Figurenwerkzeug" wie Linien-, Kurven- und Formwerkzeuge, um präzise Pixelobjekte zu erstellen.

Um das Figurenwerkzeug zum Erstellen von Pixelkunst zu verwenden, müssen wir die Anti-Aliasing-Funktion deaktivieren. Anti-Aliasing ist eine Funktion, die die Kanten digitaler Bildobjekte durch Hinzufügen und Manipulieren der Farbe der umliegenden Beispielpixel glatt aussehen lässt.

Mit Anti-Aliasing würde Pixelkunst natürlich nicht gut aussehen. Daher müssen wir diese Funktion im Werkzeugeigenschaften-Fenster auf der linken Seite deaktivieren. Im Abschnitt Anti-Aliasing gibt es mehrere Stufen, wählen Sie "Keine" aus.

Zweites Werkzeug: Wir können das "Stift-Werkzeug" mit den Unterwerkzeugen Marker und Punktstift verwenden. Dieser Stifttyp erzeugt eine Linienzeichnung mit einer Dicke von 1px, sodass wir organische Pixelobjekte leicht erstellen können.

Drittes Werkzeug: Wir können das "Füllwerkzeug" verwenden, um Pixelfelder einfach auszufüllen. Wählen Sie den Typ "Andere Ebenen referenzieren", damit wir überlappende Felder ausfüllen können, auch wenn es sich um verschiedene Ebenen handelt. Deaktivieren Sie dann in den Werkzeugeigenschaften die Option "Flächenskalierung". Diese Funktion ist dem Anti-Aliasing sehr ähnlich, das Rauschen auf Pixelobjekten erzeugt.

Viertes Werkzeug: Natürlich brauchen wir das "Radiergummi-Werkzeug", um unnötige Pixel im Werk zu löschen. Wählen Sie den Vektor-Typ, um die Pixel spurlos zu löschen.

 

OK! Den Rest können wir je nach Bedarf mit anderen Werkzeugen erledigen.

Retro-Hintergrund

Jetzt lassen Sie uns ein Pixelfest feiern. Wir beginnen mit der Erstellung des Hintergrunds für den Ladebildschirm, den wir erstellen werden, natürlich im Retro-Stil.

Ich teile die Leinwand mit einer 1px dicken Linie als Horizont, der den Himmel- und Bodenbereich trennt.

Als Nächstes verwenden Sie das "Pipetten-Werkzeug", um die Farbe aus der zuvor erstellten Ebenenpalette aufzunehmen. Ich füllte den Himmel mit Amethyst-Farbe und den Bodenbereich mit Karmin.

Erstellen Sie nun eine neue Ebene. Wir werden das Sonnenuntergangsobjekt erstellen, das typisch für das berühmte Retro-Design ist. Verwenden Sie das Ellipsen-Formwerkzeug und erstellen Sie einen Kreis, während Sie die "Umschalttaste" auf der Tastatur gedrückt halten, damit die Form proportional ist.

Verwenden Sie das Radiergummi-Werkzeug, um Streifen auf dem Sonnenuntergang zu erzeugen. Sie können das Muster, das ich gemacht habe, nachahmen.

Erstellen Sie nun erneut eine neue Ebene. Wir werden den Hintergrund mit einem Bergsilhouettenbild dekorieren. Verwenden Sie das Linienwerkzeug mit Schwarz, um die Berge rechts und links des Sonnenuntergangsbildes zu zeichnen.

Füllen Sie die Berge mit Schwarz und ändern Sie dann die Ebenendeckkraft auf 50%.

Erstellen Sie eine neue Ebene. Wir werden das Silhouettenbild der Gebäude vor dem Sonnenuntergang hinzufügen. Diesmal verwende ich einen Punktstift.

Dekorieren Sie das Bild des Gebäudes mit ein paar farbigen Pixeln als Lichter.

Nun wechseln wir zum Bodenbereich. Erstellen Sie eine neue Ebene, um ein Gitter über dem Boden zu erstellen. Auch hier verwende ich das Linienwerkzeug mit Türkisblau, um ein präzises Design zu erstellen.

Zeichnen Sie die Linie diagonal, die auf einem einzigen Punkt für die Perspektive ruht.

Kopieren Sie diese Ebene und gehen Sie dann zu Bearbeiten > Transformieren > Horizontal spiegeln. Positionieren Sie das Gitter so, dass es auf der Leinwand symmetrisch ist. Wählen Sie dann die Gitterebene und die Kopie aus, gehen Sie zu Ebene > Ausgewählte Ebenen zusammenführen.

Erstellen Sie nun horizontale Linien über den diagonalen Linien, die erstellt wurden, um ein Gitterbild zu erzeugen.

Retro-Straßenumgebung

Als Nächstes erstellen wir Objekte für die Umgebung. Wir werden eine Retro-Straßenatmosphäre schaffen. Es ist einfach, ich werde Fahrbahnmarkierungen und eine Reihe von Palmen am linken und rechten Straßenrand erstellen.

 

Erstellen Sie einen Ebenenordner, um die Ebenen der Umgebungsobjekte zu sammeln. Erstellen Sie eine neue Ebene, um einen Pfad zu erstellen.

Füllen Sie nun den Schnittpunkt der Form, die den Pfad bildet, im Bild mit Electric Yellow. Ändern Sie die Ebenendeckkraft auf 50%.

Erstellen Sie eine neue Ebene, um Fahrbahnmarkierungen zu erstellen. Erstellen Sie weiße Fahrbahnmarkierungen mit dem Linienwerkzeug.

Als Nächstes erstellen Sie eine weitere neue Ebene, um eine Palme zu erstellen. Verwenden Sie das Punktstift-Werkzeug dafür. Erstellen Sie sie symmetrisch rechts und links.

Retro-Auto-Objekt

OK! Jetzt ist es Zeit, das Hauptmodell zu erstellen. Erstellen Sie eine neue Ebene für das Retro-Auto-Objekt. Verwenden Sie einen Punktstift, um es zu zeichnen.

Erstellen Sie eine neue Ebene über der Autoebene, verwenden Sie Schwarz, um einen Schatten auf der Oberfläche des Automodells zu erzeugen. Ändern Sie die Ebenendeckkraft auf 50%. Führen Sie dann die Ebene mit der Autoebene zusammen.

Als Ergänzung erstellen Sie einen Schatten unter dem Auto auf einer neuen Ebene. Ändern Sie die Ebenendeckkraft auf 50%.

Animationsprozess

Jetzt ist es Zeit, die Szene zum Leben zu erwecken. Es gibt zwei Teile, die wir animieren werden, nämlich die Straßenumgebung und die Lichter in den Gebäuden.

 

Dazu bereiten Sie das Zeitleiste-Fenster vor. Gehen Sie zu Fenster > Zeitleiste aktivieren. Das Zeitleiste-Fenster wird am unteren Bildschirmrand angezeigt.

Klicken Sie im Zeitleiste-Fenster auf Neue Zeitleiste. Dann werden neue Zeitleisten-Einstellungen angezeigt. Geben Sie den Namen der Zeitleiste ein. Stellen Sie die Bildrate und Wiedergabezeit auf 24 ein. Szene und Aufnahme auf Nummer 1 und Trennlinie auf Nummer 6. Ändern Sie dann die Bildinterpolation auf Harte Kanten.

Um eine Animation zu erstellen, benötigen wir einen Animationsordner, der spezielle Ebenen enthält, die mit dem Animations-Cel verknüpft werden.

 

Dazu klicken Sie auf Neuen Animationsordner. Der Animationsordner wird dann oben im Ebenen-Fenster angezeigt. Benennen Sie den Ordner in "Animation" um. Der Animationsordner ist derzeit leer. Wir müssen die erstellten Modelle verarbeiten, um Animations-Cels zu kompilieren und zu erstellen.

Wählen Sie alle Modellebenen vom Retro-Auto bis zur Hintergrundebene aus. Sie können die Ebenenpalette ausschließen und sie unten speichern. Gehen Sie dann zu Ebene > Ordner erstellen und Ebene einfügen. Dann werden alle ausgewählten Ebenen in einem Ordner gesammelt. Benennen Sie den Ordner in "Kompilierung" um.

Kopieren Sie den Kompilierungsordner und benennen Sie die Kopie in "cel_01" um. Gehen Sie dann zu Ebene > Ebene konvertieren (H), sodass sich der Ordner cel_01 in eine Einheitsebene ändert. Ziehen Sie die Ebene cel_01 in den Animationsordner.

Stellen Sie im Zeitleiste-Fenster sicher, dass wir für jeden ausgewählten Frame den Frame Nummer 1 auswählen, der rot markiert ist, und klicken Sie dann auf Cels festlegen. Wir werden aufgefordert, die Ebene auszuwählen, die mit dem Cel verknüpft werden soll. Wählen Sie cel_01.

Um das nächste Cel zu erstellen, gehen Sie genauso vor. Kopieren Sie den Kompilierungsordner und benennen Sie die Kopie in "cel_02" um. Bevor es in eine Einheitsebene konvertiert wird, müssen wir einige der Modelle in diesem Ordner transformieren, um die Illusion von Bewegung zu erzeugen.

Wählen Sie nun die Fahrbahnmarkierungsebene im Ordner cel_02 aus. Wir werden das Bild so bearbeiten, dass es aussieht, als würden sich die Fahrbahnmarkierungen zum unteren Rand der Leinwand hin bewegen. Alles, was getan werden muss, ist, Pixel in bestimmten Teilen zu löschen oder hinzuzufügen.

Während sich die Fahrbahnmarkierungen bewegen, müssen sich auch die Palmen zum unteren Rand der Leinwand verschieben. Aus logischer Sicht wird das Objekt, das sich der Ansicht nähert, größer erscheinen. Daher mussten die Palmen beim Verschieben vergrößert werden.

 

Wählen Sie die Palmen-Ebene aus und gehen Sie dann zu Bearbeiten > Transformieren > Freie Transformation. Ändern Sie in den Werkzeugeigenschaften auf der linken Seite die Einstellung der Interpolationsmethode auf Harte Kanten, damit die Skalierung kein Pixelrauschen verursacht.

Wählen Sie nun die Gebäudee bene aus und ändern Sie die Lichtdekoration so, dass es aussieht, als würden die Lichter flackern.

Als Nächstes wählen Sie den Ordner cel_02 aus. Gehen Sie zu Ebene > Ebene konvertieren (H). Ziehen Sie die Ebene cel_02 in den Animationsordner. Wählen Sie im Zeitleiste-Fenster Frame Nummer 3 aus und klicken Sie dann auf Cels festlegen. Wählen Sie cel_02. In dieser Animation werde ich das Cel alle 2 Frames für eine Wiedergabezeit von 24 einstellen.

Wählen Sie im Zeitleiste-Fenster Frame Nummer 3 aus und klicken Sie dann auf Cels festlegen. Wählen Sie cel_02.

In dieser Animation werde ich das Cel alle 2 Frames für eine Wiedergabezeit von 24 einstellen.

 

Für die nächsten Cels gehen Sie bitte genauso vor, indem Sie die kontinuierliche Transformation ändern, sodass die Illusion von Bewegung entsteht.

Rendern und Veröffentlichen

OK! Ich habe das Komponieren und Füllen jedes 2. Frames mit dem animierten Cel für insgesamt 24 Frames abgeschlossen.

Bevor wir diese Animation rendern und veröffentlichen. Lassen Sie mich Sie daran erinnern, dass diese Animation die Abmessungen 128px mal 72px hat. Wenn wir sie also sofort rendern, wird das Ergebnis, das wir sehen können, diese Größe haben.

Dazu müssen wir sie zuerst in der Größe ändern. Gehen Sie zu Bearbeiten > Bild > Bildauflösung ändern. Das Fenster für die Auflösungseinstellungen wird angezeigt.

Ändern Sie die Breite auf 1280px und die Höhe auf 720px. Ändern Sie dann die Interpolationsmethode auf Harte Kanten. Das Bild wird dann vergrößert, ohne die Pixelanordnung zu zerstören.

 

Jetzt rendern wir diese Animation. Wenn Sie ein animiertes Ergebnis benötigen, das mit der Schleifenfunktion angezeigt werden kann, sollten wir es im animierten GIF-Format exportieren. Gehen Sie zu Datei > Animation exportieren > Animiertes GIF. Geben Sie ein Speicherverzeichnis an.

Das Renderfenster wird angezeigt. Ändern Sie die Breite auf 1280px und die Höhe auf 720px.

In einigen Spielprojekten fragen die Entwickler jedoch oft, dass der Ladebildschirm als Bildsequenzen präsentiert wird. Dies liegt daran, dass die Animation mithilfe eines Programmier-Skripts erstellt wird. Dazu können wir zu Datei > Animation exportieren > Bildsequenz auswählen gehen.

Das Fenster für die Rendereinstellungen wird angezeigt. Geben Sie ein Speicherverzeichnis an. Wählen Sie das PNG-Format und die Option "Frames exportieren" aus.

 

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

Abonnieren Sie meinen YouTube-Kanal: