Tileset Tutorial in Deutsch


Bei Verlinkungen bitte diesen Banner benutzen, danke!

Die Entstehung der Felsen-Grafik will ich hier nicht illustrieren, das würde eher in die Kategorie Painting gehören.

Ich möchte mich eher mit dem schwierigen Aspekt des „Kachelns“ beschäftigen. Ein perfektes Tileset aus vielleicht 20 Tiles so zu erstellen, dass man die „Nähte“ im Spiel nicht sieht, ist eine Kunst für sich.

Dabei kommt es zuallererst nicht auf das grafische Geschick an, sondern ob der Macher sein Set gut geplant hat. Als Beispiel dient ein Neunerblock von Felsen-Tiles. An ihm kann man schon mit so ziemlich allen Problemen des Kachelns konfrontiert werden.

9er-Block farbig

Die farbigen Balken, die ich über die Tile-Ränder gelegt habe, zeigen an, welche Seite eines Tiles mit welchen Seiten von anderen Tiles zusammenpassen muss. Gleiche Farbe = Zusammenhang.

Man kann viele Fehler ebenso wie unnötige Arbeit und Korrekturen vermeiden, wenn man sich immer (vorher — sowie beim Malen!) bewusst ist, mit welchen anderen Tiles das Aktuelle zusammenpassen soll.

Bei den acht außen liegenden Tiles geht das alles relativ problemlos. Sie haben jeweils nur zwei Seiten, die mit anderen Tiles funktionieren müssen. Allerdings birgt das auch das erste Problem, denn die Tiles haben nicht nur Kanten, sonder auch Ecken.

4 EckenWie man an der Grafik sieht, treffen an den vier Eckpunkten in der Mitte alle Tiles und Farben zusammen, daher sollte man gründlich überlegen, welcher Farbstich und welche Helligkeit hier am besten hinpassen. Kritisch ist ja hierbei, dass sich die helle, sonnige Ecke mit der dunkelsten Ecke trifft.

Genau das war das Problem, dem ich begegnet bin, nachdem ich schon zu 80 Prozent fertig war. Ich wollte schöne Kontraste haben, oben links von der Sonne angestrahlte Felsen, und unten rechts die dunklen Ecken. Ich hatte nicht bedacht, dass das dunkle, unten rechts liegende Tile auch mal mit dem sonnigen Tile links oben zusammentreffen würde. Aber genau das soll ja durch ein gutes Tileset ermöglicht werden.

Tileset SkizzeFangen wir jedoch mal von vorne an.

Wie schon gesagt, auch ein Tileset braucht Planung. Als erstes sollte die Skizze stehen. Zumindest, wenn man sowas das erste Mal macht. Unterschätzt nicht wie viel Hilfe so ein Spickzettel bieten kann. An ihm könnt ihr mit dem Finger abfahren, welche Tiles aneinander passen müssen. Doch vorerst beschäftigen wir uns nur mit dem Neunerblock links oben.

Mit dem mittleren Tile zu beginnen, wäre fatal. Die vier Seiten mit den acht äußeren Tiles ständig abzustimmen ist unmöglich.

Ich fange bei einer Ecke an. Der oben links, die passt mir einfach am besten.

Tileset Tut 1Man kann ohne weiteres die Ecke komplett fertig stellen und die drei angrenzenden Tiles fast ganz. Bevor man aber bei diesen an den Seiten rechts und unten arbeitet, muss man sich ins Gedächtnis rufen, was kacheln soll und was nicht.

Ich habe immer einige Pixel vom Ursprungs-Tile kopiert und im neuen Tile angesetzt. Die Grenze darf nicht übermalt werden. Sich in Photoshop das Raster (Grid) anzeigen zu lassen ist wirklich unerlässlich (Ansicht > Zeigen > Raster). Während man Ränder kopiert, sollte „Ausrichten“ (ebenfalls unter „Ansicht“) aktiviert sein. Beim Malen muss das wieder ausgeschalten werden.

Am Anfang war das kopierte Stück bei mir vllt. zehn Pixel breit. Damit kann man (aus Angst die Grenze zu übermalen und damit das Tiling zu zerstören) zwar nichts falsch machen, aber schön wird es dann nicht.

Lieber nur zwei, vielleicht sogar nur einen Pixel auf beiden Seiten der Rasterlinie kopieren. Nach meiner Erfahrung bringt das weit mehr für die Bildqualität.

Denn: je größer die kopierte und nicht veränderte Region, desto auffälliger wird später die Grenze. Die Formen wiederholen sich und die „Nähte“ sind im Spiel unübersehbar. Wenn man den Spielgrafiken ansieht, dass sie Tiles sind, dann muss die Arbeitsweise noch verbessert werden.

Okay, weiter mit dem fröhlichen Ränder-kopieren.

Tileset Tut 2Tileset Tut 3Tileset Tut 4

Ich habe für diese Tut-Bilder auf ein bereits fertiges Tileset zurückgegriffen. Daher ist alles noch einigermaßen übersichtlich. Aber wenn ihr anfangt, dann natürlich von Grund auf. Um die Steine (oder was auch immer) gut hinzubekommen, werdet ihr viel daran herummalen und auch die Grenzen zwischen den Tiles dabei immer wieder überschreiten. Das ist völlig okay so. Das muss sein. Da sich die Grenzen dann ständig ändern, müsst ihr auch ständig zwischen den Tiles die neuen Ränder hin- und herkopieren.

Und hier lauert der schärfste Feind des Tilesets: Unaufmerksamkeit. Ihr müsst aufpassen die Tiles aktuell zu halten. Aber auf keinen Fall dürft ihr wild herumkopieren! Mir ist es schon öfter passiert, dass ich Ränder angepasst habe, wo das gar nicht nötig war, weil die Tiles gar nicht zusammenpassen konnten.

Et Voilà: Der fertige Neunerblock!

9er-Block final

Zum Schluss noch ein Photoshop-Tipp: Ihr müsst bei der Arbeit an kleinen Bildern nicht ständig aus- und einzoomen! (Ich sage das weil ein sehr bekannter Pixelart-Künstler dies als sein Lebensmotto oder so angeben hat. Völliger Quatsch.) Wählt „Fenster → Anordnen → Neues Fenster für…“, und schon erscheint euer aktuelles Bild in einem zweiten Fenster. Ihr könnt also gleichzeitig bei 800% Vergrößerung Details bearbeiten, und im Fenster daneben die Auswirkungen in Originalgröße sehen.

Noch ein großer Vorteil: nicht nur den Zoomfaktor, sonder auch ob das Raster angezeigt wird, kann man für jedes Bild einzeln einstellen.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s


%d Bloggern gefällt das: