Tilespriting & Weltkarten

Es gibt viele verschiedene Dinge, die man als Tiles darstellen kann. Grundsätzlich ist alles möglich.
Um euch einen kleinen Einblick zu geben, beschäftigen wir uns in dieser Lektion erst einmal mit der Erstellung von Gebirgen, Bäumen und Böden.

---

Wie man Gebirge-Tiles erstellt:

Großansicht

Schritt 1 und 2
Als allererstes erstellen wir einen Kachelhintergrund. Jede Kachel sollte aus 16x16 Pixeln bestehen. Auf diesem Hintergrund skizzieren wir dann grob unser Gebirge, genauer gesagt den Abhang und die Fläche, worauf man etwas setzen kann.

Schritt 3
Wir sehen bis jetzt nur zwei Vierecke, was nicht wirklich nach einem Gebirge aussieht. Deshalb editieren wir in diesem Schritt ein paar Details, wie Rundungen an den Felsen. Achtet darauf, dass das nicht allzu regelmäßig aussieht, damit das Ganze am Ende nicht künstlich wirkt.

Schritt 4
Daraufhin färben wir die beiden Teile ein: Die Wiese bekommt von uns ein saftiges Grün, während der Abhang dann in ein dunkles Braun eingefärbt wird.

Schritt 5
Im nächsten Schritt geben wir der Wiese und dem Abhang eine Struktur, die wir dann auch schattieren.

Schritt 6, 7 und 8
Die nächsten beiden Schritte widmen wir den Outlines der Wiese.
Das Schwarz färben wir in ein dunkleres Grün um und setzen dann kleine Details am Rand der Wiese. Auch die Outlines des Gebirges müssen umfärbt werden: Wir verwenden dafür ein dunkles Braun.

Schritt 9
Zum Schluss gibt es für unser Gebirge noch ein Feinschliff in Sachen Schattierung und dann ist es auch schon vollbracht!

© @Obliviate

---

Wie man Baum-Tiles erstellt:

Großansicht

Schritt 1 und 2
Auch hier setzt ihr zu Anfang einen Kachelhintergrund aus 16x16 Pixeln.
Anschließend skizzieren wir grob unseren Baum mit Baumkrone und Stamm. Optional könnt ihr eure Outlines mit weiß ausfüllen, um einen besseren Überblick zu erhalten.

Schritt 3
Da es bis jetzt noch nicht wirklich wie ein Baum aussieht, verbessern wir die Form der Laubkrone und fügen beim Stamm einzelne Ansätze für Wurzeln ein. Wir haben das für euch in einer anderen Farbe gekennzeichnet.

Schritt 4
Nun können wir mit der Colorierung unseres Baumes beginnen. Da wir einen Laubbaum haben, bekommt die Baumkrone ein eher helleres, saftiges Grün. Der Stamm und die Wurzelansätze färben wir in ein einfaches Braun.

Schritt 5
Da das Ganze noch ein wenig platt aussieht, beginnen wir nun mit dem Shading. Die Blätter bekommen insgesamt mehr Licht ab, weshalb sie natürlich heller gefärbt sind, als die unteren.

Schritt 6
Im nächsten Schritt färben wir die Outlines der Baumkrone in ein dunkleres Grün und die Linien des Stammes in ein dunkleres Braun.

Schritt 7
Als allerletztes geben wir dem Baum noch einen Schatten unten, den ihr, je nach Bedarf, in der Farbe eures verwendeten Bodens färben könnt. In unserem Beispiel haben wir ein Grün verwendet.

© @Obliviate

---

Wie man Boden-Tiles erstellt:

Großansicht

Schritt 1 und 2
Als erstes erstellen wir den Kachelhintergrund mit den 16x16 Pixel großen Kästchen und geben unserem Boden eine Größe unserer Wahl. Optional könnt ihr eure Outlines mit weiß ausfüllen, um einen besseren Überblick zu erhalten.

Schritt 3
Wir werden einen Holzboden mit Planken pixeln. Im nächsten Schritt legen also wir die Größe, Länge und Breite der Holzplanken fest. Wir haben versucht, das ganze so unregelmäßig wie möglich machen, damit das wie ein wirklicher Holzboden wirkt.

Schritt 4
Anschließend färben wir den Boden ein, genau so wie die Linien der Holzplanken. Da es sich um Holz handelt, haben wir uns für ein Braun entschieden.

Schritt 5
Nun beschäftigen wir uns mit dem Shading und legen dieses grob fest. Wir fügen einzelne Pixelstriche ein, welche die Maserungen des Holzes andeuten sollen.

Schritt 6
Im nächsten Schritt fügen wir noch weitere kleine Details ein, wie zum Beispiel helle Stellen auf den Boden. Mit einzelnen hervorspringenden Holzplanken geben wir dem Boden ein altes und abgenutzes Aussehen. Außerdem färben wir die Outlines unseres Bodens in die Farbe der Begrenzungen um.

Schritt 7
Der letzte Schritt sorgt dafür, dass man beim Ansetzen der Tiles einen passenden und weichen Übergang hat. Wir führen die hellen und dunklen Details genau so wie die Linien weiter.

© @Asteria

---

Auf Grund der Fülle der Möglichkeiten, haben wir uns erstmal auf diese drei Objekte konzentriert. Mit dieser Schrittfolge, mit ein bisschen Übung und Kreativität dürfte es euch möglich sein, alles hinzubekommen, was ihr als Tiles darstellen wollt. Sollten dennoch Fragen oder Hürden bestehen, scheut euch nicht, noch einmal nachzufragen.

Als Beispiel werden wir eine Karte im Stil der Diamant/Perl/Platin Editionen erstellen.

Schritt 1: Maße
Als erstes müsst ihr eurer Karte eine Größe geben. Die Originalgröße der Weltkarte der Diamant/Perl/Platin beträgt 200x144 Pixel. Für unser Beispiel werde ich diese Größe übernehmen.

Schritt 2: Die Grundlage

Für eine Karte wird ein Stück Land benötigt. Je nachdem ob ihr euch an eine existierende Form halten wollt oder euch etwas komplett Neues ausdenkt, zeichnet ihr die Form grob in dem Bereich ein.

Schritt 3: Korrekturen

An den meisten Stellen haben wir dickere Linien als an anderen. Um das auszugleichen, pixeln wir den Grundriss nun in einer gleichbleibend 1 Pixel dicken Linie.

Schritt 4: Natürlichkeit

Noch wirkt die ganze Grundlage nicht wirklich natürlich. Viele Linien sind noch zu gerade und nicht wirklich abgerundet. Wir fügen nun Ecken, Einbuchtungen, kleine Inseln und Rundungen ein, damit die Karte etwas natürlicher wirkt.

Schritt 5: Einfärben

Nun kommen die Farben ins Spiel! Zunächst färben wir die Ländereien in einem Grundton ein. Wir nehmen ein saftiges Wiesengrün.
Der Hintergrund soll das Wasser darstellen, jenes das Land umgibt. Da das Wasser verschiedene Tiefen hat, wird das Wasser zum Land gehend heller. Ihr beginnt an den Outlines des Landes mit dem hellsten Blau, daraufhin mit der dunkleren Farbe und der Rest wird in dem dunkelsten Blau eingefärbt.

Schritt 6: Zurück zu den Outlines

Der Unterschied zwischem dem Grün und dem Schwarz ist viel zu stark und sticht heraus.
Also färben wir die Outlines in ein dunkleres Grün um, damit das ganze weicher wirkt.

Um einen stärkeren, plastischeren Effekt einzubauen pixeln wir nun in einem helleren Grün zusätzliche Outlines hinzu.
Achtet dabei darauf, dass das ganze nicht allzu regelmäßig aussieht und variiert mit der Dicke der Linien.

Schritt 7: Küsten

An den südlichen Seiten eurer Weltkarte pixelt ihr nun einen braunen Rand ein, damit es wie eine Küste aussieht. Auch hierbei solltet ihr mit der Dicke der Linien variieren, wodurch das ganze, je nach Dicke, höher oder tiefer gelegen wirkt.

Wenn ihr damit fertig seid, pixeln wir mit einem ganz hellen Blau eine weitere Linie dazu. Dadurch entsteht das seichte Wasser.

Schritt 8: Hügel und Berge

Noch sieht unsere Weltkarte sehr platt aus - das müssen wir ändern! Wir gehen nun mit einem helleren Grün über die Karte drüber. Wir erstellen gröbere Flecken, damit das ganze nicht allzu künstlich wirkt. An manchen Teilen kann man das Ganze natürlich auch ausfransen. Daraufhin fügen wir braune Flecken ein, die allerdings rund sein dürfen. Das sind unsere Berge.

Schritt 9: Routen und Städte

Bis jetzt sieht es schon nach einer Weltkarte aus und das einzige, was noch fehlt, sind Routen und Städte. Eurer Kreativität sind dabei keine Grenzen gesetzt. Ihr könnt die Form, die Breite und die Länge der Routen variieren, damit das Ganze am Ende nicht zu starr aussieht.