Einleitung
Das Pixeln oder Verändern von Charsets ist für viele Makerer, Einsteiger, aber auch Fortgeschrittene, oft ein Buch mit sieben Siegeln. Viele trauen sich nicht an dieses Thema heran oder sind schnell demotiviert, wenn sie bemerken, dass ihre ersten Versuche nie so gut aussehen, wie die Charsets im RTP und deswegen für ihre Spiele unbrauchbar sind. Dabei ist gerade die grafische Umsetzung des Spiels ein wichtiger Aspekt, der oft auch die gewisse "eigene Note" mit sich bringt.
Genauso, wie Mappen oder das Umgehen mit Events, hängt das Pixeln von Charsets aber nur zu einem sehr kleinen Teil mit Talent und zu einm großen Teil von der Übung ab.
In diesem Tutorium möchte ich Einsteiger (im Gebiet Pixeln) etwas an das Thema heranführen und ihnen die ersten Schritte mit auf den Weg geben, um ihre eigenen Charsets erstellen zu können, bzw eine Grundlage zum Üben zu bekommen. Ich weiß, dass meine Pixelein keineswegs perfekt sind, aber sie sind zumindest RTP-kompatibel, das heißt, die Charsets, die nach diesem Tutorial entstehen sind mit den RTP Chars zusammen benutzbar, ohne groß unangenehm aufzufallen.
0. Material
Für alles, was ihr in diesem Tutorial lesen werdet benötigt ihr ein Grafikprogramm, welches über Paint hinausgehen sollte. Nützlich sind:
www.gimp.org
www.chip.de/downloads/Paint.NET_13015268.html
www.humanbalance.net/gale/us
oder jegliche Photoshop Varianten (die aber nicht Freeware sind)
Für mein Tutorium werde ich GIMP benutzen, die Schritte werden aber auf allen angegebenen Grafikprogrammen ähnlich sein.
Für den Teil 2. werdet ihr ein Template benötigen, ich benutze:
(http://img386.imageshack.us/img386/5017/singletemplatexl0.png)
von Enterbrain/Mack
1.1. "Frankenspriting" oder: "Die Haare sind toll und der Körper..."
Euch gefällt die Frisur eines Charsets, aber die Kleidung passt nicht dazu? Kein Problem. Öffnet in eurem Grafikprogramm die beiden Charsets, von denen euch Teile gefallen.
Als Beispiel nehme ich die "Actor1" Charsets aus dem RTP und werde die Frisur von Ralph (oben links) mit dem Körper des grünhaarigen Mannes mit der Narbe auf dem Auge (auch bei "Actor1") kombinieren.
Zunächst zoomt ihr mit der Lupe so nah an das zu editierende Charset heran, dass ihr pixelgenau arbeiten könnt. (8 fache Vergrößerung, mindestens.)
Benutzt das Auswahl Tool (Rechteckige Auswahl oder für die mit geschickten Händen auch das "Lasso", die Freihandauswahl) und zieht einen Rahmen um die Haare des ersten Charsets, in der ersten Reihe:
(http://img3.imagebanana.com/img/0orqw1u9/screenshot.png)
Mit gehaltener SHIFT (Großbuchstaben) Taste wiederholt ihr diesen Vorgang bei allen vier Richtungen eures Charsets. Die Augen sind eine gute Orientierung. Denkt daran, immer SHIFT gedrückt zu halten!
(http://img3.imagebanana.com/img/jb11d1c7/screenshot.png)
Habt ihr das geschafft, wählt ihr das Radiergummi aus. Achtet darauf, dass bei dem Feld "Harte Kanten" ein Häkchen ist. Radiert nun, Pixel für Pixel in eurer Auswahl alle Pixel weg, die nicht zu dem Gesicht oder den Haaren gehören (also Teile der Kleidung, die ihr mit ausgewählt habt. Wenn ihr vorher die freihandauswahl benutzt habt, ist dieser Schritt überflüssig.
Ist euer "Ausschnitt" sauber, drückt "strg+x" , um eure auswahl auszuschneiden. Mit "strg+v" fügt ihr sie wieder ein. Da ihr ein Grafikprogramm
benutzt, welches Ebenen unterstützt (deswegen ist MS Paint schlecht ->), drückt ihr auf "Neue Ebene".
(http://img3.imagebanana.com/img/q7chxew7/screenshot.png)
Als nächstes verschiebt ihr diese Ebene (mit dem Verschiebetool ('m') so, dass sie auf dem Körper eurer Wahl sitzt. Wieder sind die Augen ein guter Anhaltspunkt, um wirklich passend zu verschieben.
Wechselt nun auf die untere Ebene (auf der alles außer die ausgeschnittenen Köpfe ist!) und löscht ggf. alle überstehenden Pixel des alten Kopfes. Dies könnt ihr (elegant) mit einer Auswahl und der Taste 'entf' oder (weniger elegant) mit dem Radiergummi tun.
(http://img3.imagebanana.com/img/zuz51g6m/screenshot.png)
Als letztes folgt der wahrscheinlich für Anfänger schwierigste Schritt. Ihr müsst ausbessern. Meistens (wie auch in unserem Fall) passen die haare nicht perfekt übereinander. Mit Pipette und (1 Pixel-großem) Bleistift werdet ihr das aber auch hinbekommen. Füllt die Pixel, die jetzt noch transparent sind mit der passenden Farbe. Der Haarrand ist meist die dunkelste Farbe der Haare, bei der Kleidung genauso. Falls ihr hiermit wirklich schwerwiegende Probleme haben solltet, lest "2. Pixeln", vielleicht hilft euch das bei dieser Arbeit.
Als Resultat habt ihr einen neuen Sprite, der eurem Spiel schon sehr viel mehr Persönlichkeit geben wird, als der olle Ralph aus dem RTP:
(http://img3.imagebanana.com/img/jmkrvm4y/screenshot.png)
Speichert dieses Charset am besten auf eurem Desktop oder einem dafür angelegten Ordner (nicht einfach in dem RTP Ordner speichern!) und im .png Format. Ihr werdet von eurem Grafikprogramm gefragt, ob die datei in .png exportiert werden soll, da klickt ihr einfach immer auf OK.
Als letztes geht ihr in den Maker, auf den Ressource Manager und importiert euer Charset.
Geschafft.
"2. Pixeln" folgt später in einem neuen Post!
Ich hoffe, der Anfang dieses Tutoriums hat einigen von euch etwas geholfen und wir werden weniger Ralphs sehen! Schreibt eure Meinungen und Anregungen dazu bitte in diesen Thread. Es folgt noch ein Tutorium über das komplette Selbstpixeln von Chars auf einem Template. Wenn ihr noch andere Wünsche für Tutorien haben solltet, schreibt es einfach.
2. Pixeln
Jetzt geht es an wirklich kreative Arbeit. Das eigenständige Pixeln von Charsets ist nicht leicht und erfordert etwas Übung. Ihr werdet aber selbst sehen, dass ihr immer besser werdet, wenn ihr bereit seid, zu lernen.
2.1. Öffnet das oben gepostete Template mit eurem Grafiprogramm. (Hier geht zur Not auch MS Paint :D ) Unter 'Bild'->'Modus' stellt ihr "RGB" ein, sollte etwas anderes ausgewählt sein! (WICHTIG!)
Ein Charset besteht aus den vier Grundteilen: Haare (und Gesicht), Oberkörperbekleidung, Hose, Schuhe.
Für jedes dieser Teile müsst ihr eine Farbpalette auswählen. Am leichtesten ist es, sich hierfür am RTP zu bedienen. Wenn ihr eure eigenen Farbpaletten erstellt, kann es leicht passieren, dass die Farben zu wenig Kontrast haben, zu dunkel sind oder nicht zu den Farben des RTP passen. Für die einzelnen Teile brauchen wir etwa: 4-5 Farben für Haare, 3-5 Farben für Oberkörperbekleidung, 3-5 für die Hose, 2 für einfache Schuhe. Diese Werte solltet ihr als Richtwerte nehmen, Sprites mit zu wenigen verschiedenen Farbtönen wirken schlecht schattiert, Chars mit zu vielen Farbtönen wirken oft unsauber oder verwischt.
Sucht euch also für jeden Teil des Charsets eine entsprechende Farbpalette zusammen (aus bestehenden RTP Charsets).
(http://img3.imagebanana.com/img/lq145u0/screenshot.png)
(achtet auch auf die Bleistifteinstellungen (1 Pixel))
Hinweis: Wer mit denkt, macht alle folgenden Schritte jeweils auf einer eigenen Ebene, um später die einzelnen Teile leicht austauschen zu können und somit die Anzahl seiner Charaktere zu vermehren!
2.2. Die Haare
Eurer Kreativität sind kaum Grenzen gesetzt, was die Form der Haare angeht. achtet darauf, nicht ZU ausgefallene Frisuren zu wählen. Je komplexer die Frisur, desto schwieriger wird es, sie umzusetzen! Nehmt die dunkelste Farbe eurer Haarpalette und "pixelt" (also wirklich Pixel für Pixel -> nah ran zoomen!) den Umriss eurer Frisur. Füllt den Umriss mit der zweithellsten (bei 5 Farben) bzw der hellsten (bei 4 Farben) Nuance eurer Haarpalette.
Das Ergebnis könnte so aussehen:
(http://img3.imagebanana.com/img/g7strdt2/screenshot.png)
Jetzt wird es schon schwieriger. Bei dem nächsten Schritt machen die meisten Anfänger Fehler. Es geht darum, den Haaren eine Schattierung und damit eine Struktur zu geben.
FALSCH ist es, wenn ihr die Haare einfach von außen nach innen heller werden lasst. Dieses Vorgehen nennt sich "Pillowshading" und wird 8aus welchem Grund auch immer) sehr oft benutzt. Es sieht nicht besonders gut aus und ist technisch auch eher falsch. Die Lichtquelle im RTP befindet sich immer oben links, NICHT in der Mitte vorne.
Hier ein Beispiel für Pillowshading, so sollte es NICHT aussehen:
(http://img3.imagebanana.com/img/wv28h9y8/screenshot.png)
Bitte NIE so shaden. Weder bei Haaren noch bei Kleidung, noch bei irgendetwas anderem, als einem Kissen. Es sieht nie gut aus.
Stattdessen nehmen wir lieber unsere 2. dunkelste Farbe und beginnen, 1. das outline (also die dunkle Umrandung) oben (da wo das Licht herkommt) etwas aufzulockern. dazu noch an der Unterseite der Haare einige schattige Pixel und wenige, um die Einteilung der Haare (Scheitel? Strähnen?) anzuzeigen:
(http://img3.imagebanana.com/img/2b1j0g5n/screenshot.png)
Es hilft jederzeit, sich einen der Charaktere im RTP anzusehen (ZOOM) und zu schauen, wie es dort gemacht ist.
Als nächstes folgt die nächstdunklere Farbe. Sie gibt dem Haar die endgültige Form. Die eben gemachten Ansätze sollten verstärkt und ausgebaut werden. Achtet aber auch darauf, nicht alles mit dieser Farbe voll zu malen. Ihr könnt auch weitere Strähnen mit dieser Farbe hinzufügen. Gebt euren haaren hier auch eine eindeutige Richtung (meistens won oben nach unten!)
(http://img3.imagebanana.com/img/6dyr8qqm/screenshot.png)
Eigentlich ist die Frisur soweit fertig. Habt ihr noch eine fünfte, sehr helle farbe, könnt ihr mit ihr noch Highlights setzen. Diese sollten entweder einzelne Strähnen betonen (siehe Ralph im RTP!) oder die runde Form des Kopfes betonen (siehe Screenshot). Auch wichtig, aber oft vergessen: schattiert das Gesicht unter den Haaren. Haare werfen einen Schatten auf das Gesicht, vergesst ihr diesen, wirken die Haare aufgelegt und als würden sie nicht zum Sprite gehören.
(http://img3.imagebanana.com/img/vsy0h7e/screenshot.png)
Es hilft immer, sich den Char auch einmal in Originalgröße anzusehen (also auf 200%, wie im Maker), um zu erkennen, ob es später gut aussieht oder nicht. Gerade Haar sind sehr schwierig und erfordern viel Übung, also probiert verschiedene Frisuren in verschiedenen Farben aus, um ein Gefühl dafür zu bekommen. seht euch auch immer im RTP die Frisuren an, um Ideen zu bekommen. Auch die Augen könnt ihr färben, wie ihr möchtet, es empfiehlt sich aber, zwei Farben zu wählen, die auch sonst in dem Sprite vorkommen.
2.3. Oberkörperbekleidung
Dieser Schritt ist (wie die folgenden) aufgrund der geringen Größe und der damit verbundenen detailarmut der RTP Sprites nicht allzuschwierig. Für den Anfang versuchen wir, ein einfaches T-Shirt. Spätere Kleidung und eventuell Rüstungen oder Umhänge lassen wir erst einmal weg.
Nehmt die dunkelste Farbe eurer gewählten Palette für die Oberkörperbekleidung. RTP Sprites besitzen immer eine recht dunkle Außenlinie (Outline), um sie von den Tilesets abzuheben. Deswegen könnt ihr, wie schon bei den Haaren, erst den Umriss zeichnen und ihn dann mit der hellsten (zweithellste, wenn ihr mehr als vier Farben habt) Farbe füllen.
(http://img3.imagebanana.com/img/26tk85d/screenshot.png)
Bedenkend, dass wir nicht von außen nach innen heller werdend schattieren, benutzen wir die zweitdunkelste Farbe, um dem T-Shirt eine Form zu geben, Falten anzudeuten und Es an den Kanten etwas runder aussehen zu lassen:
(http://img3.imagebanana.com/img/vi4f46yt/screenshot.png)
Mit der letzten noch unbenutzen Farbe verdeutlichen wir die eben angesprochenen Effekte und geben dem T-Shirt seine endgültige Schattierung.
Hierbei könnt ihr je nach Geschmack mehr oder weniger Falten und Schatten hinzufügen.
(http://img3.imagebanana.com/img/maqbjso5/screenshot.png)
Damit ist euer T-Shirt fertig. Probiert ein bisschen herum, manchmal sieht es gut aus, manchmal nicht, seht euch an, was nicht gut ausseht und was gut ausseht und versucht daaus zu lernen (ich finde das T-Shirt hier in meinem Beispiel gerade nicht so gut :D )
2.4. Die Schuhe
Wir überspringen erst einmal die Hose und gehen zu dem leichtesten Part, den einfachen Schuhen. Seht euch die Füße an. Nehmt eure beiden Schuhfarben und malt den fuß mit der dunkleren aus. Ein Pixel in der helleren farbe an die schuspitze oder in die Mitte des Schuhs reicht schon.
(http://img3.imagebanana.com/img/2g8fquhw/screenshot.png)
2.5 Die Hose
Eine einfache Hose zu erstellen läuft ähnlich wie das T-Shirt. Ein dunkles Outline, mit der hellsten farbe Füllen. Mit der zweitdunkelsten farbe etwas schattieren, Falten andeuten, mit der zweithellsten Farbe dann verdeutlichen. Eine Beispielhose wäre diese hier:
(http://img3.imagebanana.com/img/c6eays3u/screenshot.png)
Hosen erscheinen meistens auf der Innenseite dunkler, als auf der Außenseite der Beine. (Logisch oder?)
2.6 Der fertige Sprite!
Euren fertigen Sprite speichert ihr wieder als .png Datei ab. Denkt daran vor den Dateinamen ein $ zu machen.
Auf die anderen Richtungen gehe ich erstmal nicht näher ein, da die Vorgänge eigentlich immer die gleichen sind. wenn es dazu aber noch größere Fragen gibt, kann ich gerne dazu auch noch etwas schreiben.
Probiert viel aus und zeigt gerne auch eure Ergebnisse, damit ihr feedback bekommt, welches euch hilft, besser zu werden. Mein fertiger Beispielsprite sieht jetzt so aus und ist (bis auf das T-Shirt, das ich immer noch hässlich finde :D ) ein netter NPC in jedem Spiel:
(http://img3.imagebanana.com/img/qg2tcjdd/screenshot.png)
Mit freundlichen Grüßen CaK