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.

Inkscape Tilemap for Phaser Games

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

Inkscape Tile

Kachel 300 x 300 Pixel

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

Inkscape duplicate Tile

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

Inkscape Voronoi Pattern

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.

Inkscape optimize Voronoi

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

Inkscape seamless Voronoi Pattern

Nahtlose Muster mit Voronoi-Muster

 

Steine modellieren

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

Inkscape Polygons from Voronoi

Einzelne Polygone

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

Inkscape scale Voronoi Areas

Polygone skalieren

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

Inkscape Stones

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

Inkscape modelling Stones

Steine modellieren

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

Inkscape colorize Stones

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

Inkscape Highlight

Lichtkante

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

Inkscape more Highlights

Lichtkanten

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

Inkscape Shadow Areas

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

Inkscape second Tile

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.

Inkscape Tilemap for Phaser Games

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.

Das könnte dich auch interessieren …