Charsets selber gemacht!!!

Dies ist der erste Teil einer Reihe von Tutorials, in denen ich euch Schritt für Schritt erläutern möchte, wie man ganz einfach Charaktere für sein Spiel machen kann. Es geht darum, komplette Charsets mit Laufanimationen zu erstellen. Ich setze mal voraus, dass ihr mit verschiedenen Grafikprogrammen (Paint, iDraw, oder andere Programme mit denen man 8 Bit Grafiken erstellen kann) arbeiten könnt. Benutzen werde ich ein 24/32 Gitter.

Schritt 1



Der erste und meist wichtigste Schritt ist es, ein Grundgerüst zu erstellen. Ein gutes Grundgerüst erleichtert die Arbeit an einem Sprite erheblich, wohingegen man bei einem schlechten Grundgerüst oft Sachen verändern muss und es somit nur unnötig Zeit in Anspruch nimmt. Was soll unser Grundgerüst beinhalten? Grundlegend ist es der Umriss des Charakters und Linien, die die Elemente wie Arme und Beine vom Rest des Körpers abtrennen. Manche Leute benutzen für jeden Teil des Körpers beim Grundgerüst eine andere Farbe, aber für unsere Zwecke reicht eine Einzelne vollkommen aus. Wir beginnen mit dem Kopf. Wieso? Weil es einfacher ist, den Körper an den Kopf anzupassen als umgekehrt. Als erstes machen wir die Augen. Ihre Größe hängt von der Größe des Kopfes ab, aber nicht nur davon. Wenn man mehr Erfahrung besitzt, dann merkt man, dass man mit der Größe der Augen einige interessante Effekte machen kann. So kann man z. B. die Augen um 1 Pixel vergrößern, oder diese verkleinern, um sie bedrohlich wirken zu lassen. Weil unser Sprite ein Tall-Char im Anime-Stil wird, machen wir die Augen etwas größer (3 Pixel hoch). Als erstes wählen wir eine schwarze Farbe. Vergesst nicht - wir lassen die Außenlinien schwarz, somit wäre es das Beste, einen etwas helleren schwarzen Farbton oder, besser noch, dunkelgrau zu nehmen. Öffnet eure Palette und fügt die Farbe 40/40/40 hinzu. Sie ist nicht zu dunkel und auch nicht zu hell, passt also perfekt. Wir können sie später jederzeit ändern, also macht euch keine Sorgen, falls ihr einen Fehler machen solltet.

Schritt 2



Ok, nun haben wir die Augen. Lasst uns jetzt den Kopf hinzufügen. Zeichnet einfach einen Halbkreis bis zu den Augenbrauen hinauf, etwa 1-2 Pixel unter den Augen. Wir sollten 2 Pixel benutzen, da die Augen eher groß sind. Gerade bei den Augen ist es möglich, sie nach belieben zum Beispiel quadratisch zu gestalten und verschiedene Schattierungen vorzunehmen. Jedoch ist es einfacher, es später beim Schattieren zu regulieren.

Schritt 3



Als nächstes schließen wir mit dem Kopf ab. Da wir noch keine Haare haben, machen wir es uns einfach und machen die beiden Seiten identisch. Bei solchen Charakteren ist das Haar normalerweise groß und unrealistisch. Macht die Haare nicht zu stachelig, weil man diese dem Gitter nicht anpassen kann und es später viel schwieriger ist, diese zu schattieren.

Schritt 4



Der Kopf ist nun fertig. Jetzt beginnen wir mit dem Körper, der ganz einfach zu machen ist. Der Körper ist normalerweise nicht viel breiter als der Kopf und ziemlich gerade. Trennt die Füße von den Beinen und beide Beine voneinander. 2 Pixel schauen eher hässlich aus, aber es ist viel schwieriger, dies auf einem anderen Weg zu machen. Ihr könnt es versuchen mit einer geraden Linie zu machen, aber wenn wir später zum animieren kommen, wird das ganze ein bisschen ungeschickt aussehen. Der andere Trick ist es, die Augen mit einer unebenen Anzahl von Pixeln getrennt zu zeichnen und den Körper dann entsprechend regulieren, aber häufig schaut das dann ganz komisch aus.

Schritt 5



Unserem Sprite fehlen immer noch die Arme. Das ist einer der schwierigeren Teile beim Erstellen, da sie oft zu gerade wirken, aber mit ein bisschen Übung bekommt man das dann schon hin. Die Arme sollten so lange wie der halbe Körper sein. Es wäre auch besser, gleich den Gürtel hinzuzufügen, oder einfach die Beine vom Torso zu trennen. Ich habe außerdem zwei schwarze Pixel am Kopf hinzugefügt, die die Ohren markieren sollen.

Schritt 6



Das Grundgerüst ist beinahe fertig. Bevor wir aber mit dem Colorieren beginnen, wäre es noch gut, alle fehlenden Details hinzuzufügen. Als erstes die Hände. Sie sind oft 1-2 Pixel lang, deshalb trennen wir sie 1-2 Pixel vom Unterarm. Wenn ihr wollt, könnt ihr auch gleich einen Schatten hinzufügen (Meiner Meinung nach wirkt es sich positiv auf das Sprite aus, aber ihr könnt es auch weglassen, wenn es euch nicht gefällt). Eine kleine Linie, die die Brust trennt, ist nicht notwendig.

Schritt 7



Ok, die Linien sind nun fertig und wir können mit dem Colorieren beginnen. Die richtige Palette auszuwählen ist eine der schwierigsten Sachen, die es zu lernen gibt. Falls ihr euch das nicht zutraut, dann übernehmt die Palette einfach von anderen Sprites. Aber vergesst nicht, dass man am Besten durchs Probieren und aus eigenen Fehlern lernt. Für unsere Zwecke machen wir eine eigene Palette. Als erstes machen wir einen weißen Farbton für die Augen. Reines weiß (255/255/255) ist schon ganz gut, aber weitere Variationen machen das Ganze noch viel besser. Ich mache die Augen immer ein bisschen bläulich (245/245/255), aber das ist euch ganz überlassen. Füllt die Augen nun mit dem neuen Farbton. Es ist nicht so viel arbeit, deshalb machen wir in diesem Schritt gleich noch ein paar Sachen. Lasst uns nun die Hautfarbe wählen. Dies kann sich auch als schwierig erweisen. Falls es nicht klappt, dann schaut euch ein paar andere Sprites an. Nach einem Moment habe ich die passende Farbe ausgewählt (208/170/131). Füllt nun das Gesicht und die Hände mit dieser Farbe.
Tipp: Zeichnet eure Farben neben das Sprite, damit sie einer Palette ähnlich sieht. Das erleichtert die Arbeit erheblich.


Schritt 8



Lasst uns nun die Haare färben. Ich habe eine braune Farbe (147/111/80) gewählt, aber ihr könnt auch eine beliebige Andere nehmen. Wir können meine Farbe später auch als Schattierung für das Gesicht nehmen. Ich habe auch die Schuhe mit dieser Farbe gefüllt, da sich braun gut dafür eignet.

Schritt 9



Und nun die Hose. Ich hab mich dafür entschieden, dass er Jeans tragen soll, deshalb habe ich sie mit einer blauen Farbe (49/113/182) gefärbt.

Schritt 10



Jetzt ist nur noch das Shirt übrig geblieben. Welche Farbe sollen wir nehmen? Als erstes wollte ich eine rote Farbe (160/70/34) nehmen, aber als ich es damit gefüllt hatte, musste ich bemerken, dass es schrecklich aussah. Rot passt überhaupt nicht zu Blau und ist außerdem schwer mit anderen Farben kombinierbar, deshalb habe ich sie geändert.

Schritt 11



Dieses Mal habe ich mich für grün (28/143/79) entschieden. Es schaut ganz gut aus, also lassen wir sie. Es ist wichtig, jedes Teil eindeutig zu machen und nicht mit anderen verschmelzen zu lassen. So, die Grundfarben sind nun fertig, also können wir jetzt mit dem Schattieren beginnen.

Schritt 12



Als erstes müssen wir alle nicht benötigten Teile des Grundgerüstes loswerden. Entfernt einfach schwarze Pixel, die nicht etwas voneinander abtrennen. Da es einfach ist, können wir auch gleich die Ohren zeichnen. Sie sind normalerweise 1-2 Pixel groß und befinden sich auf Augenhöhe.

Schritt 13



Wir sollten uns entscheiden, welches Shirt unser Charakter tragen soll. Da es ein normaler NPC werden soll, kann er ein einfaches T-Shirt mit einigen Knöpfen tragen. Die Hautfarbe ist der Farbe der Knöpfe ähnlich, also können wir diese ohne jegliche Schattierungen übernehmen. Macht einfach ein paar Pixel und eine schwarze Linie auf seiner Brust.

Schritt 14



Die Region um den Gürtel herum schaut noch langweilig aus. Nehmt die Hautfarbe und fügt eine Schnalle hinzu.

Schritt 15



Ich bemerkte, dass seine Manschetten nicht so gut aussahen, deshalb habe ich dort einige weiße Pixel hinzugefügt.

Schritt 16



Ok, lasst uns mit den wichtigen Sachen weitermachen. Wir werden nun die Hose schattieren, aber als erstes brauchen wir ein dunkleres Blau. Wie sollen wir sie wählen, damit es mit unserer Schattierung gut weitergeht? Am Einfachsten ist es, wenn man die Farbe einfach kopiert und den Regler leicht verschiebt. Aber vergesst nie! Immer die gleichen Abstände zu benutzen ist nicht gut. Die Grundregel ist: Je mehr Freiheit da ist, desto mehr sollte reduziert werden. Macht nicht einfach nur Quadrate rein. Seht euch das Bild an um zu sehen was ich meine.

Schritt 17



Nun machen wir das Selbe mit dem Shirt. Als erstes brauchen wir den nächsten Farbton (45/93/62). Es ist hier nicht mehr viel übrig geblieben, was wir noch machen können, außer Antialiasing auf die Arme zu machen. Ihr frag euch nun sicherlich was Antialiasing ist, stimmt’s? Es ist etwas kompliziert und ich möchte mich hier auch nicht zu sehr ins Detail vertiefen (schaut euch einfach ein paar andere Grafiktutorials an), aber grundlegend ist das der Weg, um Linien zu glätten. Mir gefällt es auch nicht wie die Manschetten ausschauen, deshalb habe ich sie ein wenig geändert und den Knöpfen einen Schatten hinzugefügt.

Schritt 18



Etwas fehlt auf unserem Shirt noch. Genau, es ist der Kragen! Wie ich ihn gemacht habe, ist etwas schwer zu erklären. Ich habe einfach ein paar Linien gezeichnet um ihn vom Rest des Shirts zu trennen.

Schritt 19



Nun kommt der schwierigste Teil. Die Haare. Glaubt mir, die Haare zu machen ist meistens der Teil, der die meiste Zeit in Anspruch nimmt, weil es oft nicht gut genug aussieht und man ständig etwas daran rumändert. Das Schattieren der Haare ist einfach zu machen, indem man Höhepunkte anstatt der Schatten hinzufügt. Nehmt zuerst den braunen Farbton (103/78/56) und füllt damit die Haare.

Schritt 20



Der Trick beim Schattieren der Haare ist es, sich vorzustellen wie das Haar liegen würde und einen helleren Farbton bei den Strähnen zu benutzen. Das ist wirklich nur eine Sache der Erfahrung. Anfangs wird es evtl. schrecklich ausschauen, aber mit der Zeit wird es dann immer besser. Ihr solltet beide Teile für den Moment identisch machen.

Schritt 21



Wenn ihr noch etwas Flair hineinbringen wollt, dann verschiebt die Pixel auf einer Körperhälfte, damit es nicht komplett gespiegelt ausschaut.

Schritt 22



Die Schuhe sind ganz einfach. Fügt ein paar Höhepunkte hinzu, indem ihr die Farbe des Schattens der Haut benutzt und macht den oberen Teil dann noch etwas dunkler.

Schritt 23



Mit Sprites wie diesen braucht man beim Gesicht nicht viel zu machen. Benutzt einfach einen helleren Haarton um eine Linie unter dem Haar (einen Schatten) zu machen und fügt ein paar Pixel unter dem Auge hinzu. Ihr könnt mit den Augen noch etwas rumexperimentieren und den obersten Pixel der Augen dunkler zu machen.

Schritt 24



So, etwas fehlt immer noch…
Genau, die Ärmel! Man kann sie leicht verändern, um das Charset interessanter zu machen. Ich habe es mit einem helleren Braun neu gefärbt und die Weste grünlich gelassen. Ihr könnt auch ein Shirt mit verschieden farbigen Ärmeln machen.

Schritt 25



Langsam nähern wir uns dem Ende. Nun ist es an der Zeit das Sprite mit weiteren Details zu versehen. Als erstes habe ich bei der Hose unten einige hellere Pixel hinzugefügt um es so aussehen zu lassen, als ob die Jeans hochgekrempelt wurde. Danach sollten wir die schwarzen Linien, die den Torso „trennen“ in ein dunkles Braun ändern. Letztendlich habe ich dem Jungen noch die Haare gekürzt.

Schritt 26



Wir sind schon fast fertig. Lasst uns die Hose noch ein bisschen editieren, indem wir ihr Taschen hinzufügen. Schaut einfach auf dem oberen Bild wie es aussehen soll.

Schritt 27



Nun könnt ihr einfach die Palette entfernen…

Schritt 28



… und schon ist es fertig!
Moment, etwas ist immer noch falsch. Das Sprite ist noch nicht richtig zentriert. Schiebt es um 1 Pixel nach rechts und schon passt es wieder.

Schritt 29



Und das war schon alles. Das Sprite ist nun fertig.

Hier könnt ihr noch mal alle Schritte auf einmal betrachten.