Erstellen Sie ein 2D-Sprite-Sheet für Unity 4.3 in Inkscape

() translation by (you can also view the original English article)

Das Update 4.3 von Unity war eine große Tür, die sich für 2D-Spieleentwickler öffnete, mit vielen neuen Tools und Möglichkeiten, sich der 2D-Spieleentwicklung in dieser bereits leistungsstarken Engine zu nähern. In diesem Tutorial zeige ich Ihnen, wie Sie in Inkscape einen Charakter erstellen, der im erstaunlichen neuen Editor von Unity 4.3 verwendet werden kann.

Dinge, die man beachten muss

Ein paar Tipps zur Erstellung von Spielcharakteren, bevor wir beginnen:

Arbeiten Sie nach einem zuvor durchdachten Konzept oder einer Skizze – das spart Ihnen Zeit und Kopfschmerzen!
Erstellen Sie so viele ganze Teile wie möglich. Entwickler werden (häufig) nach Farbänderungen und -variationen fragen. Ganze Teile zu schaffen, die sich leicht verändern lassen, erleichtert Ihnen auf lange Sicht die Arbeit.
Testen Sie Ihre Charaktere auf einem Bildschirm, indem Sie sie über den Hintergrund platzieren, den Sie während der Arbeit an ihnen verwenden. (Oder arbeiten Sie alternativ auf einem neutralen Hintergrund – wenn er grau erscheint, wird er auf allem angezeigt.)
Achten Sie auf Ihr Sprite-"Budget". Mehr Gelenke können lebensechter, aber auch komplizierter sein.

1. Erstelle den Charakter

Schritt 1

Öffnen Sie Inkscape und wählen Sie Datei > Neu. Wählen Sie aus der Liste der verfügbaren Optionen die Größe aus, die am ehesten der Auflösung Ihres Spiels entspricht. 640 x 480, 800 x 600 oder 1024 x 768 sind gängige Spielauflösungen für den PC – für dieses Projekt wähle ich 800 x 600.

Create a New Document — Wenn Sie mit einem Entwickler zusammenarbeiten, fragen Sie ihn nach der richtigen Auflösung! Das Tolle an der Arbeit mit Vektorgrafiken ist jedoch, dass Sie die Größe des Zeichens später jederzeit ändern können.

Schritt 2

Erstellen Sie eine neue Ebene, indem Sie Ebene > Ebene hinzufügen (Umschalt-Strg-N) auswählen und sie "Sketch" nennen. Stellen Sie es auf Unterhalb der aktuellen Ebene ein.

Create a New Layer — Durch das Arbeiten in Ebenen bleiben Ihre Dateien sauber und einfach zu verwalten.

Name your Layer — Benennen Sie Ihre Ebenen richtig, damit Sie sich daran erinnern können, was sich darauf befindet.

Schritt 3

Bringen Sie Ihre Konzepte zusammen. In diesem Fall habe ich nur eine einfache Skizze verwendet, die ich in Sketchbook Pro erstellt habe. Ich neige dazu, mindestens zwei Action-Ansichten des Charakters zu erstellen, damit ich eine gute Vorstellung davon bekomme, wie er animiert werden soll und in welche Teile ich ihn zerlegen muss.

Sie können Ihr Konzept einfach aus einem anderen Programm kopieren und einfügen oder die Datei per Drag & Drop in Inkscape ziehen.

Wenn Sie die Datei per Drag & Drop ziehen, wählen Sie Einbetten, nicht Linken. Sie werden die Skizze später sowieso wegwerfen, da sie für den gesamten Prozess nicht erforderlich ist.

Embed Image — Konzeptskizzen helfen, Ihre Idee zu festigen, damit Sie nicht blind arbeiten.

Schritt 4

Ändern Sie die Größe Ihrer Zeichnung mit den Ziehpunkten auf die gewünschte Größe.

Klicken Sie auf die Skizze und sperren Sie die Proportionen des Bildes, indem Sie auf das Sperrsymbol klicken.

Lock your Proportions. — Das Sperren der Proportionen verhindert Verzerrungen.

Schritt 5

Da die Inkscape-Preset-Paletten im Allgemeinen nicht sehr schön für Spiele sind, neige ich dazu, vorher meine eigenen zu erstellen.

Sie können Ihre Inkscape-Palette bearbeiten, indem Sie in Ihren Inkscape-Ordner im Unterordner Share > Palettes gehen.

Editing your Inkscape Palette — Die Datei kann sich je nach Betriebssystem an einem anderen Speicherort befinden.

Schritt 6

Klicken Sie mit der rechten Maustaste auf "Inkscape.gpl" und wählen Sie mit Ihrem bevorzugten Texteditor öffnen. Ich habe gerade Wordpad verwendet.

Sie können jetzt Ihre eigenen RGB- und Hex-Werte zur Liste hinzufügen und sie werden in der Reihenfolge angezeigt, in der Sie sie eingegeben haben. Wenn Sie mit Hex- und RGB-Codes nicht vertraut sind, finden Sie viele leicht zugängliche Diagramme im Internet oder im Farbwähler fast jedes Bildbearbeitungsprogramms.

Eine davon finden Sie hier:

HTML/Hex-Farbkarte

Hier sind die Bereiche, die ich für die verschiedenen Teile des Octopus-Körpers verwendet habe, für diejenigen unter Ihnen, die gerne Paletten sammeln:

Hauptkörper

110 4 84 #6E0454
164 0 92 #A4005C
188 24 120 #BC1878
220 68 112 #DC4470
235 99 109 #EB636D
243 147 131 #F39383
250 201 172 #FAC9AC

Augen

57 33 49 #392131

Schneckenhaus

52 48 89 #343059
67 70 126 #43467E
62 87 150 #3E5796
90 105 192 #5A69C0
103 150 232 #6796E8
126 175 238 #7EAFEE
126 199 217 #7EC7D9

Schneckenkörper

132 71 60 #84473C
165 103 79 #A5674F
206 137 78 #CE894E
243 180 107 #F3B46B
249 246 100 #F9CE64
248 229 122 #F9E57A
251 251 158 #FBFB9E

Sie können diese Codes kopieren und in Ihre .gpl-Datei einfügen und speichern, und sie sind beim nächsten Ausführen von Inkscape vorhanden.

Ich empfehle Ihnen, eine Kopie Ihrer ursprünglichen .gpl-Datei aufzubewahren, falls etwas schief geht.

Add the codes as they are displayed in the file where you would like them to appear in order. — Fügen Sie die Codes hinzu, wie sie in der Datei angezeigt werden. Sie können sie jedoch in der Reihenfolge platzieren, in der sie angezeigt werden sollen.

Schritt 7

Zeichnen Sie zuerst den Hauptkörper. Ich verwende nur eine einfache Kreisform für den Körper des Oktopus. Ich habe den Strich im Objekteditor (Shift-Control-F) auf 3,5px gesetzt, aber Sie können Ihren nach Belieben gestalten.

Schritt 8

Zeichnen Sie die Beine alle als separate Teile auf einer neuen Ebene mit dem Bezier-Kurven-Werkzeug (Umschalt-F6).

Creating a Leg with Bezier Curves — Denken Sie daran, um eine tatsächliche Kurve zu erhalten, müssen Sie nach dem Klicken die Maustaste gedrückt halten, um den zweiten Knoten/Punkt zu positionieren und zu verschieben.

Schritt 9

Anstatt den Strich und die Farbe am Bein manuell anzupassen, können wir auf ein ähnliches Objekt (wie den Kreis) klicken und es kopieren (Strg-C) und zu Bearbeiten > Stil einfügen oder (Strg-Umschalt-V) gehen, um dem Stil des kopierten Objekts entsprechen.

Paste Object Style — Dies ist eine gute Möglichkeit, um sicherzustellen, dass alle Ihre Objektfüllungen und Striche einheitlich sind.

Sie können auch Beine in verschiedenen Positionen zeichnen, damit sie wiederverwendet werden können, um weitere Animationen zu erstellen.

Alternativ können Sie den ganzen Körper mit den Beinen in verschiedenen Positionen zeichnen, wenn Sie nicht möchten, dass sich alle Beine unabhängig voneinander bewegen.

Denken Sie daran, dass Sie Teile zusammenfügen können, indem Sie beide Objekte auswählen und sie über Pfad > Vereinigung oder Strg-Umschalt-+ oder einfach Strg-+ mit dem Nummernblock kombinieren.

Schritt 10

Um eine glattere Kurve zu erhalten, füge ich oft zusätzliche Punkte hinzu und lösche sie dann, nachdem ich die gewünschte Form erhalten habe.

Ich deaktiviere die Körperebene mit dem Augensymbol neben dem Ebenennamen, den ich deaktivieren möchte.

Gehen Sie in den Modus Pfad nach Knoten bearbeiten (F2) und klicken Sie auf den Knoten, den Sie löschen möchten, und drücken Sie dann die Entf-Taste.

Delete the nodes you don't want — Wenn etwas schief geht, können Sie dies mithilfe der Griffe an den anderen Knoten anpassen oder den Knotentyp in der Symbolleiste ändern.

Schritt 11

Da ich möchte, dass die Beine ganz links und rechts fast gleich sind, kopiere ich das linke und bearbeite es nur leicht.

Bringen Sie die Körperebene zurück, indem Sie zu der Ebene im Dropdown-Menü wechseln und erneut auf das Augensymbol klicken, damit Sie das Bein richtig positionieren können. Wählen Sie das Bein aus (wodurch Sie automatisch zur Beinebene zurückkehren) und kopieren Sie es (Strg-C) und fügen Sie es ein (Strg-V).

Spiegeln Sie das Bild, indem Sie die Schaltfläche Horizontal spiegeln verwenden oder die Taste H drücken.

Flip Leg

Dadurch lässt sich der Oktopus auch leichter animieren.

Bewegen Sie das Bein in die gewünschte Position. Ich habe es auch für die Perspektive horizontal leicht gequetscht, indem ich die Größengriffe verwendet habe.

Moving the leg behind the octopus — Wenn Sie bei der Größenanpassung Probleme mit dem Einrasten des Bildes haben, gehen Sie zu **Ansicht > Ausrichten**.

Schritt 12

Ich werde die Vorderbeine in mehreren Teilen machen, um mehr Tiefe hinzuzufügen. Erstellen Sie eine neue Ebene (Shift-Control-N), um die Beine hinzuzufügen, die sich vor dem Körper befinden.

Fügen Sie mit dem Ovalwerkzeug ein Oval hinzu und kopieren Sie den Stil von den Beinen auf das Oval.

Create the Bottom Part of the Leg — Auf diese Weise können wir dem vorderen Tentakel eine Wippbewegung hinzufügen, wenn wir möchten.

Fügen Sie nun ein zweites Oval hinzu und drehen Sie es. Sie können Objekte drehen, indem Sie zweimal auf das Objekt klicken und dann die Griffe verwenden.

Create the top of the leg — Jetzt kann sich dieser Teil des Tentakels separat bewegen!

Schritt 13

Jetzt können Sie einfach das Bein kopieren und umdrehen, um das andere Bein auszufüllen

Position all the tentacles" — Machen Sie sich vorerst keine Sorgen um die Tentakelposition, sie wird in Unity angepasst.

Schritt 14

Fügen wir dem Oktopus einige Schattierungen und Glanzlichter hinzu, bevor wir zum Gesicht übergehen. Ich mache dies, indem ich Ovale erstelle und dann ein anderes Oval verwende, um die Teile zu "subtrahieren", die ich nicht möchte.

Add a Circle — Positionieren Sie die Markierung an der gewünschten Stelle.

Kopieren Sie nun den Kreis, fügen Sie ihn ein und passen Sie ihn an die Stelle an, an der Sie ihn ausschneiden möchten. Machen Sie es in einer anderen Farbe, damit es leichter zu sehen ist. Ich bevorzuge es, die gleiche Farbe wie den Hauptkörper zu machen.

Add another Circle — Ich finde diese Methode am besten für Ballons und andere runde, glänzende Gegenstände.

Wählen Sie nun beide Kreise bei gedrückter Umschalttaste aus, stellen Sie sicher, dass Sie den hervorgehobenen Kreis zuletzt ausgewählt haben, und gehen Sie zu Pfad > Unterschied.

Subtract one circle from another — Ein schönes glattes Highlight!

Wählen Sie alle Objekte aus und gruppieren Sie sie (Strg-G), um sicherzustellen, dass sie nicht von der gewünschten Stelle verschoben werden.

Hinweis: Sie können den Stil auch dann aus einem Objekt kopieren und einfügen, indem Sie Pfad für Knoten direkt auswählen/bearbeiten, selbst wenn sie gruppiert sind.

Schritt 15

Zeichnen Sie mit dem Bezier-Werkzeug (Umschalt-F6) auch einige Glanzlichter auf die Beine. Stellen Sie sicher, dass Sie mit dem entsprechenden Tentakel auf der Ebene zeichnen, und gruppieren Sie sie mit dem zugehörigen Teil, wenn Sie fertig sind. Versuchen Sie, dieselbe Farbe wie beim vorherigen Highlight zu verwenden.

Simple Lighting — Sie können nach Ihrem Geschmack weniger oder mehr Highlights hinzufügen.

Schritt 16

Ich habe die Augen mit dem Kreiswerkzeug (F5) gezeichnet. Ich mache hier dasselbe wie bei den Tentakeln, um sicherzustellen, dass sie gleich sind; Kopieren Sie das linke Auge, fügen Sie es ein und passen Sie Position und Perspektive erneut an.

Adding the Eyes — Er hat jetzt ein einfaches Set von Peepers.

Schritt 17

Zeichnen Sie mit dem Bezierkurvenwerkzeug einen einfachen Mund und passen Sie die Einstellungen im Strich- und Füllmenü an (Umschalt-Strg-F).

Create a simple mouth — Ich habe den **Stroke** auf **3,00** und den Cap auf **Round Cap** eingestellt.

Adjust Stroke Settings — Sie können mit diesen Einstellungen herumspielen, um sie nach Ihren Wünschen einzustellen.

Schritt 18

Ich beschloss, einige weitere Highlights hinzuzufügen, um ihm etwas mehr Tiefe zu verleihen. Wenn Sie später beim Hinzufügen neuer Elemente feststellen, dass es beim Neugruppieren über vorherigen Objekten erscheint, wählen Sie das Objekt aus und schneiden Sie es aus (Strg-X), klicken Sie auf das Objekt, über das Sie es einfügen möchten derselben Ebene und wählen Sie Bearbeiten > An Ort und Stelle einfügen oder (Strg-Alt-V).

Fixing Layer Groups — Wenn Sie Ihre Gruppen sauber halten, können Sie Ihr Sprite-Sheet später organisieren.

Schritt 19

Ich habe auch ein sekundäres Highlight hinzugefügt, wieder mit Bezier-Kurven und dem Kreiswerkzeug, nur dieses Mal verwende ich die Farbe #F39383.

Es gibt zwar einige aufstrebende Programme, die das einfache Hinzufügen dynamischer Beleuchtung zu 2D-Grafiken ermöglichen (wie Sprite Lamp), aber sie sind noch sehr rudimentär und hauptsächlich für Pixelgrafiken gedacht, so dass wir sie vorerst selbst hinzufügen müssen !

Schritt 20

Für einen interessanten Punkt füge ich auch eine Schnecke auf dem Kopf des Oktopus hinzu. Ich werde den Körper zuerst mit dem Bezier-Kurven-Werkzeug (Umschalt-F6) erstellen. Ich werde die Schnecke auf einer neuen Ebene erstellen, aber ich brauche auch keine für die Muschel, solange sie richtig gruppiert sind. Sie können sie auf separaten Ebenen erstellen, wenn Sie möchten.

Wie zuvor lösche ich alle unnötigen Knoten und glätte den Körper mit dem Modus Pfad für Knoten bearbeiten (F2). Sie können auch mehrere Knoten auswählen und in diesem Modus verschieben.

Schritt 21

Fügen Sie nun einige hellere Nuancen hinzu, um das Volumen der Schnecke hervorzuheben. Auch hier verwende ich das Bezier-Kurven-Werkzeug (Umschalt-F6).

Adding Highlights to the Snail Body — Stellen Sie sicher, dass Sie die Körperobjekte gruppieren, wenn Sie fertig sind!

Wenn Sie feststellen, dass Sie eine Kurve zu steil gemacht haben und sie nicht anschließen können, ohne dass Folgendes passiert:

Adding Highlights to the Snail Body II — Unordentliche Kurven sind nicht gut! Wenn Sie es versehentlich verbinden, drücken Sie einfach **Strg-Z**, um zurückzugehen!

Sie können mit der rechten Maustaste klicken, um die Kurve zu verlassen, und sie dann manuell erneut verbinden.

Adding Highlights to the Snail Body III — Einfach zu beheben!

Schritt 22

Um die Basis der Schale zu erstellen, zeichnen Sie mit dem Kreiswerkzeug (F5) einen Kreis. Ich habe #5A69C0 als Strich und #7EC7D9F als Füllung verwendet.

Schritt 23

Verwenden Sie das Bezierkurvenwerkzeug (Umschalt-F6), um die untere "Lippe" der Schale zu erstellen.

Schritt 24

Verwenden Sie das Spiralwerkzeug, um der Schale die richtige Form hinzuzufügen (F9) und stellen Sie die Umdrehungen auf 1,50 ein.

Drehen und positionieren Sie nun die Spirale so, dass sie wie eine echte Muschel aussieht. Ich habe auch die Kappe für die Spirale auf Round Cap gesetzt, um eine harte Kante zu vermeiden.

Schritt 25

Für das Highlight des Schneckenhauses verwenden wir wieder die Bezierkurve. Ich werde nur Weiß für die Farbe verwenden, aber ich werde die Form auf 50% Deckkraft einstellen, damit sie sich verblendet. Sie können die Deckkraft im Füll- und Strichmenü (Umschalt-Strg-F) anpassen.

First Highlight — Sie können auch den Weichzeichner-Schieberegler verwenden, um das Erscheinungsbild zu mildern, aber ich empfehle es nicht für eine Shell.

Schritt 26

Fahren Sie mit den restlichen Highlights fort. Sie können den Stil des ersten Glanzlichts kopieren und in die anderen Glanzlichter einfügen, und es wird auch die Deckkraft kopieren und einfügen, was die Arbeit erheblich erleichtert.

Es ist erwähnenswert, dass ich die Schale und den Schneckenkörper getrennte Gruppen gemacht habe. Ich werde sie separat speichern, falls ich sie später animieren möchte.