YouTube Video Tutorials

Animierte Retro-Pixel-Kunst für den Startbildschirm des Spiels

26.072

babeoded

Einführung

Hallo! Mein Name ist Hira Karmachela. Bei dieser Gelegenheit werde ich meine Erfahrungen mit der Erstellung animierter Retro-Pixelkunst für den Startbildschirm von Spielen mit Clip Studio Paint teilen.

Ich hoffe, dieser Beitrag enthält interessante Tipps für diejenigen unter Ihnen, die Pixelkunst und Retrodesign mit CSP erstellen möchten.

Über Retro-Design

Retro ist ein Designstil, der in den 70er bis 90er Jahren angesagt ist. Retro unterscheidet sich vom seit langem bekannten Vintage-Stil. Der Retro-Stil wirkt auf seine Zeit zeitgemäß und sogar futuristisch. Das Alleinstellungsmerkmal von Retro zeigt sich in der Auswahl an leuchtenderen Farben, auch Neonfarben genannt. Retro-Designstile entwickelten sich während dieser Ära zusammen mit dem Aufkommen von Disco, Party und sportlichem Lebensstil.

In der gleichen Zeit wurden Videospiele mit Grafiken mit niedriger Auflösung entwickelt, die heute als Pixelkunst bekannt sind. Das ist für mich interessant, um Tipps zum Erstellen von Pixelkunst im Retro-Stil zu geben.

Canvas-Setup für Pixel Art

Lass uns anfangen! Öffnen Sie Clip Studio Paint und erstellen Sie dann eine neue Leinwand. Die endgültige Arbeit, die wir erstellen werden, wird 1280 x 720 Pixel groß sein, aber um Pixelkunst zu erstellen, müssen wir nur 10 % dieser Größe erstellen. Die Leinwandabmessungen, die wir benötigen, betragen also 128 x 72 Pixel.

Als nächstes müssen wir das Gitter 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 noch die Rastergröße anpassen. Gehen Sie zu Ansicht > Raster-/Linealeinstellungen. Legen Sie den Ursprung in der Mitte fest und stellen Sie den Abstand (D) und die Anzahl der Teilungen auf 1 ein.

Retro-Farbschema

Bevor wir mit dem Kompilieren von Pixeln beginnen. Zuerst müssen wir eine Farbpalette erstellen, die zum Retro-Stil passt. Erstellen Sie eine neue Ebene, um sie als Palette zu erstellen, und nennen Sie die Ebene "Retro-Palette".

Doppelklicken Sie anschließend auf die Vordergrundfarbe in der Toolbox, um die Farbeinstellungen zu öffnen. Die erste Farbe, die wir erstellen werden, ist "Hot Pink". Geben Sie im HEX-Feld den Code „ff69b4“ ein. Dann auf die Leinwand streichen.

Unten sind die Farben auf der Retro-Palette, die wir brauchen.

Für den Rest brauchen wir noch Schwarz und Weiß, die wir in das Standard-Palettenfeld aufnehmen können.

Tools-Setup für Pixel Art

OK! Es gibt mehrere Tools, mit denen wir Pixelgrafiken mit speziellen Einstellungen erstellen können. Das erste Werkzeug, wir können das "Figurenwerkzeug" wie Linien-, Kurven- und Formwerkzeuge verwenden, um präzise Pixelobjekte zu erstellen.

Um das Figurenwerkzeug zum Erstellen von Pixelgrafiken zu verwenden, müssen wir die Anti-Aliasing-Funktion deaktivieren. Anti-Aliasing ist eine Funktion, die die Kanten von digitalen Bildobjekten glatt erscheinen lässt, indem die Farbe der Musterpixel um sie herum hinzugefügt und manipuliert wird.

Mit Anti-Aliasing sieht Pixelkunst natürlich nicht gut aus. Also 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".

Als zweites Werkzeug können wir das "Stiftwerkzeug" mit dem Unterwerkzeug "Marker" und "Punktstifttyp" verwenden. Dieser Stifttyp erzeugt eine Strichzeichnung mit einer Dicke von 1 Pixel, sodass wir problemlos organische Pixelobjekte erstellen können.

Als drittes Tool können wir das "Fill Tool" verwenden, um Pixelfelder einfach auszufüllen. Wählen Sie den Typ Auf andere Ebenen verweisen, damit wir die überlappenden Felder ausfüllen können, obwohl es sich um unterschiedliche Ebenen handelt. Deaktivieren Sie dann in den Werkzeugeigenschaften die Bereichsskalierung. Diese Funktion ähnelt fast Anti-Aliasing, das Rauschen auf Pixelobjekten erzeugt.

Als viertes Werkzeug benötigen wir natürlich das "Eraser Tool", um unnötige Pixel auf der Arbeit zu löschen. Wählen Sie den Vektortyp, um die Pixel zu löschen, ohne eine Spur zu hinterlassen.

OK! Den Rest können wir nach Bedarf mit anderen Tools verwenden.

Retro-Hintergrund

Jetzt machen wir ein Pixelfest. Wir beginnen damit, den Hintergrund für den Begrüßungsbildschirm zu erstellen, den wir natürlich im Retro-Stil erstellen werden.

Ich teile die Leinwand mit einer 1 Pixel dicken Linie als Horizont, der den Himmel und den Bodenbereich teilt.

Verwenden Sie als Nächstes das "Pipettenwerkzeug", um die Farbe aus der zuvor erstellten Ebenenpalette zu übernehmen. Ich füllte den Himmel mit Ametyhst-Farbe und den Bodenbereich mit Carmine.

Erstellen Sie nun eine neue Ebene, wir erstellen das Sonnenuntergangsobjekt, das typisch für das berühmte Retro-Design ist. Verwenden Sie das Ellipsenform-Werkzeug und machen Sie einen Kreis, während Sie die "Umschalt"-Taste auf der Tastatur gedrückt halten, damit die Form proportional ist.

Verwenden Sie das Radiergummi-Werkzeug, um Streifen auf dem Sonnenuntergang zu machen. Sie können das Muster nachahmen, wie ich es getan habe.

Erstellen Sie jetzt erneut eine neue Ebene. Wir dekorieren den Hintergrund mit einem Bergsilhouettenbild. Verwenden Sie das Linienwerkzeug mit Schwarz, um die Berge rechts und links vom Sonnenuntergangsbild zu zeichnen.

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

Erstellen Sie eine neue Ebene, wir fügen das Silhouettenbild der Gebäude vor dem Sonnenuntergang hinzu. Diesmal verwende ich einen Punktstift.

Schmücken Sie das Bild des Gebäudes mit ein paar bunten Pixeln als Lichter.

Jetzt bewegen wir uns zum Bodenbereich und erstellen eine neue Ebene, um ein Netz über dem Boden zu erstellen. Auch hier verwende ich das Linienwerkzeug mit türkisblauer Farbe, um ein präzises Design zu erstellen.

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

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

Zeichnen Sie nun horizontale Linien über die diagonalen Linien, die erstellt wurden, um ein Netzbild zu erstellen.

Retro-Straßenumgebung

Als nächstes erstellen wir Objekte für die Umgebung. Wir werden eine Retro-Straßenatmosphäre schaffen. Es ist ganz einfach, ich werde Straßenmarkierungen und eine Reihe von Palmen auf der linken und rechten Seite der Straße anbringen.

Erstellen Sie einen Ebenenordner, um die Ebenen des Umgebungsobjekts 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 Deckkraft der Ebene auf 50 %.

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

Erstellen Sie als Nächstes eine weitere neue Ebene, um eine Palme zu erstellen. Verwenden Sie das Punktstiftwerkzeug, um es zu erstellen. Machen Sie es rechts und links symmetrisch.

Retro-Auto-Objekt

OK! Jetzt ist es an der Zeit, das Hauptmodell zu erstellen. Erstellen Sie eine neue Ebene für das Retro-Autoobjekt. 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 Deckkraft der Ebene auf 50 %. Führen Sie dann die Ebene mit der Autoebene zusammen.

Machen Sie als Ergänzung auf einer neuen Ebene einen Schatten unter dem Auto. Ändern Sie die Deckkraft der Ebene auf 50 %.

Animationsprozess

Jetzt ist es an der 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.

Bereiten Sie dazu das Timeline-Panel vor. Gehen Sie zu Fenster > markieren Sie Timeline. Am unteren Rand des Bildschirms wird das Zeitleistenfeld angezeigt.

Klicken Sie im Zeitleistenfenster auf „Neue Zeitleiste“. Dann erscheint eine neue Timeline-Einstellung, geben Sie den Timeline-Namen ein. Stellen Sie die Bildrate und Wiedergabezeit auf 24 ein. Szene und Aufnahme bei Nummer 1 und Trennlinie bei 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 der Animations-Cel verknüpft werden.

Klicken Sie dazu auf Neuer Animationsordner. Dann erscheint der Animationsordner oben im Ebenenbedienfeld. Benennen Sie den Ordner in "Animation" um. Derzeit ist der Animationsordner leer. Wir müssen die erstellten Modelle verarbeiten, um sie zu kompilieren und zu animierten Cels zu machen.

Wählen Sie alle Modellebenen vom Retro-Auto bis zur Hintergrundebene aus. Sie können die Ebenenpalette ausschließen und 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 „Compilation“ um.

Kopieren Sie den Compilation-Ordner und benennen Sie den Kopierordner 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 Zeitachsenfenster sicher, dass wir für jedes ausgewählte Bild die rot markierte Bildnummer 1 auswählen, und klicken Sie dann auf Cels angeben. Wir werden aufgefordert, die Ebene auszuwählen, die mit der Cel verknüpft wird. Wählen Sie cel_01 aus.

Um die nächste Cel zu erstellen, machen Sie dasselbe. Kopieren Sie den Compilation-Ordner und benennen Sie die Kopie dann in "cel_02" um. Vor der Umwandlung in eine Einheitsschicht. Wir müssen einige der Modelle in diesem Ordner transformieren, um die Illusion von Bewegung zu erzeugen.

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

Wenn sich die Straßenmarkierungen bewegen, müssen sich auch die Palmen zum unteren Rand der Leinwand verschieben. Aus logischer Sicht erscheint das Objekt, das sich der Ansicht nähert, größer. Als sie sich verschob, musste die Palme vergrößert werden.

Wählen Sie die Palmenebene aus und gehen Sie dann zu Bearbeiten > Transformieren > Frei transformieren. Ändern Sie in der Werkzeugeigenschaft auf der linken Seite die Einstellung der Interpolationsmethode auf Harte Kanten, damit die Skalierung kein Pixelrauschen verursacht.

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

Wählen Sie als Nächstes den Ordner cel_02 aus. Gehen Sie zu Ebene > Ebene konvertieren (H). Ziehen Sie die Ebene cel_02 in den Animationsordner. Wählen Sie Frame Nummer 3 in der Timeline aus und klicken Sie dann auf Cels angeben. Wählen Sie cel_02 aus. In dieser Animation werde ich die Cel alle 2 Frames für die Wiedergabezeit von 24 einstellen.

Wählen Sie Frame Nummer 3 in der Timeline aus und klicken Sie dann auf Cels angeben. Wählen Sie cel_02 aus.

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

Für die nächsten Cels tun Sie bitte dasselbe, indem Sie die kontinuierliche Transformation so ändern, dass sie die Illusion von Bewegung erzeugt.

Rendern und Veröffentlichen

OK! Ich habe das Komponieren abgeschlossen und alle 2 Frames mit der animierten Cel für insgesamt 24 Frames gefüllt.

Bevor wir diese Animation rendern und veröffentlichen. Ich möchte Sie daran erinnern, dass diese Animation Abmessungen von 128 x 72 Pixel hat. Wenn wir es also sofort rendern, wird das Ergebnis, das wir sehen können, diese Größe haben.

Dazu müssen wir zuerst die Größe ändern. Gehen Sie zu Bearbeiten > Bildauflösung ändern. Das Auflösungseinstellungsfenster erscheint.

Ändern Sie die Breite auf 1280 Pixel und die Höhe auf 720 Pixel. Ändern Sie dann die Interpolationsmethode auf Harte Kanten. Dann wird das Bild 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 1280 Pixel und die Höhe auf 720 Pixel.

Allerdings in einigen Spielprojekten. Normalerweise verlangt der Entwickler, dass der Begrüßungsbildschirm in Bildsequenzen angezeigt wird. Dies liegt daran, dass die Animation mithilfe eines Programmierskripts erstellt wird. Dazu können wir zu Datei> Animation exportieren> Bildsequenz auswählen gehen.

Das Fenster mit den Rendereinstellungen wird angezeigt. Geben Sie ein Speicherverzeichnis an. Wählen Sie das PNG-Format und die Checkliste Frames exportieren aus.