Einführung

In diesem Tutorial erkläre ich meine Methode zum Erstellen von Grafiken für 2D-Videospiele, die im Englischen und in der Community der Videospielentwickler als "2D-Assets" oder "Sprites" bezeichnet wird und in Unity oder ähnlichen Anwendungen verwendet wird.

Insbesondere werde ich mich auf Kunst für Side-View-Videospiele oder "Side-Scrollers" wie "Ori and the Blind Forest", "Hollow Knight" oder "Monster Boy" konzentrieren, insbesondere erwähne ich diese, weil ich keine Pixelkunst verwenden werde, ich werde es einfach tun verwende normale digitale Kunst.

Ich werde Schritt für Schritt erklären, wie aus Plattformen, Dekorationen und Hintergründen erstellt wird und dass alle zusammen passen, um auf zusammenhängende, natürliche Weise verschiedene Ebenen oder Szenarien zu erstellen, und dass sie bereit sind, in Unity oder eine spielähnliche Engine importiert zu werden.

Clip Studio Paint verfügt über sehr komfortable Tools wie die [Symmetrische Regel], mit deren Hilfe ich diese Art von Arbeit schnell ausführen kann.

 

Bevor es losgeht

Bevor wir mit dem Zeichnen / Malen beginnen, müssen wir über die Auflösung unseres Vermögens nachdenken.

Obwohl es keine spezifische Regel gibt, wie groß die Auflösung unseres Vermögens sein soll, können wir einige Parameter berücksichtigen:

• Wenn wir Assets für den PC erstellen möchten, sind die gängigsten Auflösungen heutzutage „Full-HD“ (1920 × 1080 px) oder 1280 × 720. Es gibt jedoch auch 4K-Monitore und andere Varianten.

• Bei Mobiltelefonen ist die Auflösung sehr unterschiedlich, einige Telefone verwenden 720p und andere können sogar 4k erreichen.

• Mein Rat ist, zu untersuchen, für welche Plattform Sie Ihre Assets erstellen und auf dieser Grundlage eine Lösung zu wählen.

In diesem Tutorial konzentrieren wir uns auf die am häufigsten verwendete Auflösung, 1080p.

Denken Sie die Idee

Wenn Sie dieses Tutorial verwenden, um Ihre Kunst für Videospiele zu üben, sollten Sie sich überlegen, was Sie erstellen möchten. In meinem Fall werde ich einen Wald voller Vegetation schaffen, einen uralten Wald, in dem man sich verirren kann, mit Steinen und seltsamen Pflanzen:

 

Lassen Sie uns einige Skizzen erstellen, bevor wir mit der Visualisierung der Idee beginnen.

1- Der Boden / Plattformen

Das erste ist, den Boden und die Plattformen zu schaffen, auf denen der Charakter gehen oder sich lehnen wird. Zuerst werden wir einen grünen Grasboden mit Blättern in verschiedenen Farben erstellen. Dies wäre ein „Aktivposten“, den wir in Zukunft ändern und bearbeiten können, um ähnliche „Aktivposten“ zu erstellen, die miteinander kombiniert werden.

 

1- Wir zeichnen eine kleine Skizze unserer Grasidee, sehr einfach, nichts

kompliziert.

2- Auf einer unteren Schicht malen wir eine grüne Basis.

3- Entfernen Sie die Skizzierebene und malen Sie mehrere subtile Grüntöne.

4- Wir beginnen mit dem Hinzufügen von Details mit Blättern in verschiedenen Farben.

5- Zum Schluss fügen wir eine kleine Silhouette aus schwarzen Blättern hinzu.

Schneller horizontaler Bodentest:

Machen Sie den Test, um festzustellen, ob sich Ihr Kraut miteinander verbindet. Die schwarzen Laken helfen uns dabei, die Assets miteinander zu mischen.

 

1- Wählen Sie Ihr Grasstück aus und duplizieren Sie es.

2- Verbinde sie auf eine Art und Weise, die sich mehr oder weniger verbindet.

3- Setzen Sie das Hinzufügen von Grasstücken fort, bis Sie einen gleichmäßigen horizontalen Boden erhalten, und

Fülle den Boden mit Schwarz.

Wie Sie sehen, sieht es ziemlich gut aus, mit genügend Stil und Persönlichkeit!

Nun wollen wir sehen, wie wir es nicht so repetitiv machen können.

Sorte im Boden:

Obwohl unser Landvermögen recht gut funktioniert, können wir immer schnell Abwechslung hinzufügen.

Technik 1:

Sie können die Farbe variieren, indem Sie [Strg + U] drücken und den Schieberegler [Ton] ändern.

Wie Sie sehen, bleibt Schwarz schwarz, die anderen Farben ändern sich jedoch. Dies kann uns dabei helfen, verschiedene Variationen von Assets und Einstellungen auf einfache Weise zu erstellen, ohne dass neue Assets von Grund auf erstellt werden müssen.

Technik 2:

Wir können mit dem anfänglichen Kräuter-Asset variieren, es modifizieren und größere Assets erstellen, die mehr Fläche einnehmen und sich weniger wiederholen.

 

1- Nehmen Sie Ihr Stück Gras und duplizieren Sie es.

2- Verbinde sie auf eine Art und Weise, die sich mehr oder weniger verbindet.

3- Jetzt werden wir versuchen, mehr Blätter in der Mitte und andere Farben hinzuzufügen, um mehr Abwechslung zu schaffen.

Wie Sie sehen, dauert diese Technik etwas länger, obwohl das Endergebnis ziemlich professionell ist. Jetzt haben wir unser ursprüngliches Asset, die farbigen Assets und dieses neue doppelte Asset. Jetzt wird sich unser Boden viel weniger wiederholen und es wird viel besser aussehen!

2- Wände, schwimmende, horizontale und vertikale Plattformen

Sobald wir unseren Boden haben, können wir anfangen, an die Wände und vertikalen Plattformen zu denken. Für das Kraut ist meine Methode sehr einfach.

 

Wir duplizieren das Asset und ändern es mit dem Tool [Freie Transformation] Strg + Umschalt + T nach Bedarf.

 

Wir können es horizontal spiegeln, den Winkel auf 90º ändern, um es vertikal zu machen, oder sogar diagonal, wenn Sie möchten.

Hier sind meine Beispiele.

 

Sobald wir die Variationen haben, werden Sie sehen, wie einfach es ist, verschiedene Ebenen des Geländes zu erstellen. Lassen Sie uns zum Beispiel ein schwebendes Quadrat erstellen.

 

Platzieren Sie einfach Ihre neuen geänderten Assets in einem Quadrat und füllen Sie den leeren Teil in der Mitte schwarz aus.

Wie Sie sehen, ist es sehr einfach und das Ergebnis ist ziemlich gut. Dieses Quadrat könnte eine schwimmende Plattform sein, auf der sich Ihr Charakter festhalten kann.

Wir können nicht nur Quadrate erstellen, sondern diese Assets können auch nach Ihren Wünschen geändert werden. Zum Beispiel und machte zwei Rechtecke nach den gleichen Techniken, die oben erläutert wurden, Mischen des kleinen Vermögenswerts und des doppelten Vermögenswerts.

Jetzt haben wir 3 verschiedene Plattformen!

Wir werden die Vermögenswerte sammeln, die wir bisher erstellt haben.

Ein kleiner Trick, den ich mache, ist der folgende:

Wir kopieren unsere Assets und drücken [Strg + U]. Durch Ändern des Schiebereglers [Helligkeit] wandeln wir alle Teile in Schwarz um. Diese Stücke dienen uns dazu, denen, die Farbe haben, einen Schritt voraus zu sein und so Fehler zu überdecken oder Elemente in den Vordergrund zu stellen.

Jetzt können wir mit all diesen Ressourcen kleine Level testen. Mit den Stücken, die wir in den vorherigen Schritten gebaut haben, konnte ich diesen kleinen Tunnel erstellen.

3- Dekorationen

Jetzt werden wir verschiedene Dekorationen kreieren, damit unsere Bühne / Ebene abwechslungsreicher und einzigartiger wird.

 

Pflanzen:

 

Beginnen wir mit der Erstellung einiger Pflanzen.

 

1- Zeichne einfache Pflanzen.

2- Fügen Sie Farbe unterhalb der Skizzenlinie hinzu.

3- Mit einem dunkleren Ton betont und fügt Schatten hinzu, um Volumen zu geben.

4- Fügen Sie abschließend Details hinzu.

Hier sind einige Beispiele für die Verwendung der Pflanzen. Wenn Sie sie mit demselben Trick in Schwarz umwandeln, können Sie sie in einer oberen Ebene platzieren, um mehr Details und Tiefe zu erzielen. Es ist eine sehr einfache Technik, die jedoch sehr farbenfrohe Ergebnisse liefert.

Felsen:

 

Lass uns ein paar Steine erschaffen.

 

1- Zeichne einfache Steine.

2- Fügen Sie Farbe unterhalb der Skizzenlinie hinzu. In meinem Fall habe ich grau verwendet.

3- Nach und nach geben wir Details und fügen verschiedene Töne hinzu. Sie können Farben verwenden

dass Sie bereits in Pflanzen verwendet, um besser zu kombinieren.

4- Fügen Sie dunklere Töne hinzu, um Lautstärke im Rock zu erzeugen.

5- Wir duplizieren sie und machen [Vertikales Spiegeln]. Drücken Sie [Strg + U], und durch Ändern des Schiebereglers [Helligkeit] werden alle Teile in Schwarz konvertiert.

 

6- Wir bringen sie zusammen und vereinen mit Hilfe eines Mischpinsels die beiden Teile. Dieser Vorgang kann etwas länger dauern. Stellen Sie sicher, dass dies der bestmögliche ist.

Hier einige Beispiele für die gleichzeitige Verwendung von Pflanzen und Steinen.

Felsen mit Gras / Hügeln:

 

Wir werden einige Steine mit Gras schaffen, um mehr Abwechslung zu schaffen.

 

1- Zeichne einen Hügel Gras.

2- Fügen Sie Farbe unterhalb der Skizzenlinie hinzu. In meinem Fall habe ich Grüntöne verwendet.

3- Nach und nach geben wir Details und fügen verschiedene Töne hinzu. Sie können Farben verwenden, die Sie bereits für Pflanzen verwendet haben, um eine bessere Übereinstimmung zu erzielen. Dieser Vorgang ist etwas kompliziert, da er einige Zeit in Anspruch nimmt. Mit dem Werkzeug [Symmetrische Regel] können Sie dieses Asset schneller erstellen.

4- Wenn Sie fertig sind, fügen Sie Variationen hinzu, um mit der Symmetrie der Regel zu brechen und um sie nicht so zu wiederholen.

Jetzt können wir aus diesem Felsen größere Variationen erstellen, um offene Räume zu dekorieren.

Wir sammeln drei Hügel und vereinen sie nach und nach, bis wir einen neuen Vermögenswert erhalten, der dem vorherigen ähnlich ist.

Hier ist ein Beispiel für die Verwendung dieser Grashügel.

Säulen:

 

Wir können auch Säulen erstellen, die den Durchgang des Charakters blockieren oder sich dahinter positionieren, um schwimmende Plattformen zu halten oder einfach als Dekoration zu verwenden.

 

1- Zeichne eine Säule mit Vegetation.

2- Fügen Sie Farbe unterhalb der Skizzenlinie hinzu. In meinem Fall habe ich die gleichen Farben wie die des Bodens verwendet, Grüntöne.

3- Nach und nach geben wir Details und fügen verschiedene Töne hinzu. Sie können Farben verwenden, die Sie bereits für Pflanzen verwendet haben, um eine bessere Übereinstimmung zu erzielen.

4- Fügen Sie eine schwarze Silhouette hinzu, um mehr Abwechslung für die Kombination mit anderen Objekten in Schwarz zu schaffen. (Unten ist ein Beispiel.)

Wir duplizieren das Asset und ändern es mit dem Tool [Freie Transformation] Strg + Umschalt + T nach Bedarf.

Wir können [Horizontal spiegeln] verwenden, um es zu spiegeln, zu strecken oder zu glätten, um schnell verschiedene Variationen zu erstellen.

Im Folgenden finden Sie ein Beispiel für die Verwendung von Spalten mit anderen Assets. Wie Sie sehen können, passt das Schwarz der Säulen perfekt zum Dach.

Sammlung der bisher erstellten Assets:

Lassen Sie uns alle Assets sammeln und sehen, ob wir etwas anderes erstellen müssen.

4- Extras

Da meine Hauptidee darin bestand, einen Wald zu schaffen, werde ich einige Dekorationen hinzufügen, vielleicht mit verschiedenen Farben, um mich von den anderen abzuheben. Wir können auch eine Art Hindernis hinzufügen, das den Spieler wie Stacheln verletzt.

 

1- Zeichne andere Pflanzen als die vorherigen. Ich habe auch einen Spieß gezogen.

2- Fügen Sie Farbe unterhalb der Skizzenlinie hinzu. In meinem Fall habe ich einige Blau- und Gelbtöne verwendet.

3- Nach und nach geben wir Details und fügen verschiedene Töne hinzu. Sie können Farben verwenden, die Sie bereits in den Pflanzen verwendet haben, damit sie besser kombiniert werden können, genau wie in den vorherigen Assets.

4- Wir verfeinern die neuen Dekorationen weiter, bis wir mit dem Endergebnis zufrieden sind.

Von diesen können wir sehr schnell neue Variationen machen.

 

Durch mehrmaliges Duplizieren des Blatts können wir es neu positionieren, um eine völlig neue Anlage zu erstellen. Das Werkzeug [Freie Transformation] Strg + Umschalt + T ist für diese Art der schnellen Änderung sehr nützlich.

Mit dem Farn können wir die Farbe variieren, indem wir [Strg + U] drücken und den [Ton] -Regler ändern. Wir können es auch mit [Freie Transformation] Strg + Umschalt + T ändern.

Durch mehrmaliges Duplizieren des Blattes und Ändern des Tons und der Helligkeit können wir verschiedene Pflanzen erzeugen, die einander ähnlich sind und miteinander kombiniert werden.

Dasselbe können wir auch mit Spießen tun, um Reihen und Wände zu erstellen.

Hier ist ein Beispiel, in dem einige unserer Vermögenswerte und diese neuen Dekorationen verwendet werden.

Denken Sie daran, mit schwarzen Elementen zu spielen, um Tiefe und Kontrast zu erzeugen.

5- Schwarzer Rand und letzte Beispiele

Das ist alles was ich bisher erschaffen habe.

Wir können noch einige Tricks anwenden. Zum Beispiel möchte ich einen schwarzen Rand hinzufügen, der alle unsere Assets umgibt. Es ist eine ziemlich einfache Technik, die einen Hauch mehr Cartoon verleiht.

 

1- Klicken Sie auf der Ebenenminiatur auf [Strg + Klick]. Sie werden sehen, dass eine Auswahl um unser Vermögen hinzugefügt wird.

2- Drücken Sie [Strg + T], um den Skalierungs- / Drehmodus aufzurufen. Sie werden sehen, dass ein kleines Menü mit verschiedenen Schaltflächen und Symbolen angezeigt wird. Klicken Sie auf das gelb hervorgehobene Symbol, um auf [Ausgewählten Bereich erweitern] zuzugreifen. Mit zwei Pixeln würde dies ausreichen.

3- Wir klicken auf das Symbol [Füllen] mit schwarzer Farbe.

 

4- Das Endergebnis wäre unser Kapital mit einem schwarzen Rand.

Wir tun dasselbe mit allen unseren Vermögenswerten zur gleichen Zeit und das Endergebnis wäre wie folgt.

Dies sind einige der Szenarien, die ich mit diesen Assets für mein Videospiel entworfen habe. Wie Sie sehen, können Sie mit verschiedenen Schattierungen spielen, um Tiefe zu erzeugen.

 

• Mit helleren Farben können wir Distanz schaffen.

• Mit dunkleren Farben schaffen wir Nähe.

Dabei habe ich die Töne so geändert, dass sie blauer werden. Mit einem einfachen Klick können wir die Wahrnehmung und das Erscheinungsbild unserer Assets vollständig ändern.

Hüte dich vor diesem Abgrund!

Letzte Tipps

 

• Das Erlernen der Gestaltung von Kunst für Videospiele erfordert viel Zeit, Kreativität und Engagement. Lassen Sie sich nicht entmutigen, wenn die Dinge auf den ersten Blick nicht gut laufen.

• Wie Sie in diesem Tutorial gesehen haben, verfügt Clip Studio Paint über zahlreiche Tools, die das Erstellen dieser Tools erleichtern. Werden Sie ein Programmlehrer, um Ihre Zeit optimal zu nutzen.

• Spielen Sie Videospiele und beobachten Sie deren Kunst und wie die Schöpfer die Szenarien entwerfen, lassen Sie sich von Ihren Lieblingsspielen inspirieren, versuchen Sie zu überlegen, wie sie sie erstellt haben, und wenden Sie dann an, was in Ihren eigenen Kreationen beobachtet wird.

 

Ich hoffe dir hat das Tutorial gefallen, bei Fragen kannst du unten eine Nachricht hinterlassen.

Vielen Dank!

Maaot