Tilespriting
Was ist Tilespriting?
Beim Tilespriting erstellt man so genannte Tiles. Diese sind (meist) 16x16 Pixel groß und sind (Teil-)Grafiken, die beim Zusammensetzen ein Objekt ergeben. Aus diesen einzelnen verschiedenen Tiles entsteht beim Zusammensetzen eine (Pokemon-)Map. Diese Lektion widmet sich dem Erstellen einzelner Tiles.
Anleitung
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!
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.
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.
Beispielaufgabe:
Erstellt Tiles für einen Nadelbaum! Gebt, wenn möglich, auch die Skizze an.