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.

 

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).

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

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).

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.

Ü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).

 

Steine modellieren

Die Arbeitsschritte ergeben letztendlich einzelne Felder, die einzeln zu bearbeiten sind (siehe Animation unten).

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

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

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

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

 

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).

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

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

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).

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.

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.