Inkscape 206 – Kacheln für Games (Tilemap)
Für ein klassisches Plattformer-Game benötigt man Kacheln aus denen die begehbare Umgebung erzeugt werden kann. Ich verwende hier das Voronoi-Muster um mir nach dem Zufallsprinzip Steine generieren zu lassen, die anschließend noch optimiert werden.
Skills: Intermediate
Plugin: Nein
Im Beispielbild unten ist ein typischer Aufbau des Untergrund für ein Plattformer-Game zu sehen. Am Ende werden die Tiles auf einer Tilemap verteilt und über beispielsweise eine .json-Datei organisiert/platziert.

Preview
Steine formen mit Voronoi
Es folgt ein kurzer Durchgang mit der Voronoi-Erweiterung von Inkscape. Ich halte mich damit nur kurz auf, wer mehr über die genaue die Funktionsweise erfahren möchte kann das im Tutorial davor nachlesen.
Meine Kachel hat zu Beginn ein Maß von 300 x 300 Pixeln, mit einer weißen Füllung und einer Outline (siehe Bild unten).

Kachel 300 x 300 Pixel
Diese Kachel werde ich mit STRG-D duplizieren. Die Füllung wird entfernt (siehe Bild unten).

Duplizieren, Füllung entfernen
Auf das oben liegende, transparent Quadrat wende ich nun Erweiterungen – Aus Pfad erzeugen – Voronoi-Muster an. Ich aktiviere und deaktiviere so lange die Vorschau, bis eine Konstellation entsteht die mir als Steine zusagt (siehe Bild unten).

Voronoi Muster
Es folgen die Arbeitsschritte: Objekt – Muster zu Objekt, Pfad – Objekt in Pfad umwandeln, Pfad – Kombinieren und Pfad – Division. Die Arbeitsschritte sind im Teil Inkscape 205 genau beschrieben.

Voronoi weiter bearbeiten
Übrigens: Das Voronoi-Muster ist ein echtes Muster und kann nahtlos aneinandergereihte Kacheln ergeben. Aber das möchte ich hier nicht. Meine Bausteine sollen klassisch, im Old-School-Stil einzelne Tiles sein und als solche auch zu erkennen sein (siehe Bild unten).

Nahtlose Muster mit Voronoi-Muster
Steine modellieren
Die Arbeitsschritte ergeben letztendlich einzelne Felder, die einzeln zu bearbeiten sind (siehe Animation unten).

Einzelne Polygone
Jedes einzelne Polygon wird nun insgesamt etwas kleiner skaliert (siehe Animation unten).

Polygone skalieren
Am Ende erhalte ich ein Feld welches schon Anschein von Steinen erweckt (siehe Bild unten).

Andeutungsweise Steine
Über die Nodes werde ich die Steine noch ein wenig nacharbeiten. Ich kann dabei recht großzügig ans Werk gehen (siehe Animation unten).

Steine modellieren
Färbe ich das Ganze ein, schaut das schon recht gut aus (siehe Bild unten).

Farbflächen verteilen
Licht und Schatten
Die Steine benötigen noch etwas Plastizität. Das Licht kommt von oben, daher werden oben Lichtkanten und unten Schattenbereiche angelegt.
Dazu dupliziere ich einen Stein mit STRG-D oder über Bearbeiten – Duplizieren. Das Duplikat liegt natürlich exakt über dem Original. Zur Hilfe ziehe ich ein Oval auf und werde das Oval über Pfad – Differenz vom Duplikat abziehen. Übrig bleibt ein Teilbereich der in einem helleren Grau als der Stein eingefärbt wird. Das ergibt die Lichtkante oben (siehe Animation unten).

Lichtkante
Dieser Vorgang wird nun wiederholt, bis alle Steine abgearbeitet sind (siehe Animation unten).

Lichtkanten
Mit den Schattenbereichen verfahre ich exakt genau so, nur das die Schattenbereich dunkler eingefärbt werden (siehe Animation unten).

Schattenbereich
Ich benötige (mindestens) zwei Bauteile für einen Plattformer: einen Stein im Quadrat wie oben abgebildet und einen weiteren Stein mit einem Untergrund, wie zum Beispiel einer Wiese. Die Wiese besteht lediglich aus einem Rechteck, das in Pfade konvertiert und über die Nodes gestaltet wird (siehe Animation unten).

Abschluss mit Untergrund
Aneinander und übereinander gestapelt ergibt sich im Spiel dann daraus der Boden und für die Plattformen wird immer ein Teil mit Wiese darauf verwendet.

Final
Auf einer Tilemap würden dann beide Varianten von Steinen aufgeführt. Das macht lediglich zwei Steine auf der Tilemap. Aber über die .json-Datei und beispielsweise das Phaser-Script kann man damit schon einen kleinen Parcours gestalten.
Viel Spaß beim gestalten von Tilemaps.