Im zweiten Teil unserer Einführung in das Framework Excalibur.js haben wir Actors, Scenes und Sprites für das Beispielprojekt erstellt. Nun braucht ein 2D-Spiel auch noch eine Karte sowie die Möglichkeit zur Interaktion mit der Spielwelt – und damit auch Physiksimulationen.

Starten wir unsere Reise für diesen Artikel wieder mit einem Beispiel aus dem letzten Teil. Wir laden den Quellcode des Beispiels Sprite in Visual Studio Code und starten es über die Kommandozeile, d. h. mit npm install können wir alle Abhängigkeiten im Projekt installieren und das Spiel mittels npm start ausführen. Das Spiel ist dann im Browser unter der Adresse http://localhost:1234/ zu erreichen.

Abbildung 1 zeigt eine typische Szene in einem 2D-Browser-Game: Ein Actor möchte sich durch eine virtuelle Spielwelt bewegen. Diese Spielwelt wird meist in Form einer 2D-Grafik erstellt. Wir bezeichnen diese als Tilemap.

Tilemaps – Konzept

Tilemaps sind ein zentraler Bestandteil vieler 2D-Spiele und werden verwendet, um große, detaillierte Spielwelten zu erstellen, ohne dass viel Speicherplatz benötigt wird. Sie bestehen aus vielen kleinen, wiederverwendbaren grafischen Elementen, den sogenannten Kacheln oder Tiles. Diese Tiles repräsentieren einzelne Elemente einer Karte wie beispielsweise Bodenflächen, Wände, Hindernisse oder andere Umgebungsdetails. Durch das systematische Platzieren und Kombinieren dieser Kacheln in einem Rastermuster entsteht eine visuell zusammenhängende Spielwelt. Eine Tilemap ist in der Regel als ein Raster strukturiert, bei dem jede Zelle ein Tile darstellt. Die wichtigsten Bestandteile einer Tilemap sind:

• Tiles: Kleine Bilder oder Grafiken (beispielsweise 32x32 Pixel), die spezifische Umgebungsmerkmale darstellen.

• Tile-Ebenen (Layers): Häufig sind Tilemaps in verschiedene Ebenen unterteilt, um beispielsweise Hintergründe, Kollisionsebenen, interaktive Bereiche oder Vordergründe separat zu verwalten. Das erlaubt eine detaillierte Strukturierung der Karte.

• Tile-Index: Jedes Tile hat in einer Tilemap eine Position (beispielsweise (x, y)) und wird oft mit einem Index versehen, der auf die entsprechende Grafik verweist.

Tilemaps eignen sich besonders für Spiele, die wiederkehrende grafische Muster benötigen, wie Plattformspiele, Rollenspiele und Puzzlespiele. Durch das Wiederverwenden von Kacheln können große Karten erstellt werden, ohne dass viel Speicherplatz verbraucht wird. Häufig wird auch eine Kollisionsschicht hinzugefügt, die definiert, welche Tiles begehbar sind und welche nicht. In Rollenspielen etwa können bestimmte Tiles interaktiv sein (beispielsweise Türen oder Truhen) und das Gameplay erweitern.

Erstellung einer Tilemap (Tilemap-Editor)

Um eine Tilemap zu erstellen, wird oft ein Tilemap-Editor verwendet. Diese Editoren bieten eine visuelle Oberfläche, auf der Entwickler Tiles auswählen und auf einem Raster platzieren können, um eine Karte zu erstellen. Der Editor speichert die Karte dann als Datenstruktur (oft in XML, JSON oder anderen Formaten), die das Spiel interpretieren kann. Einige bekannte Tilemap-Editoren sind:

• Tiled [2]: Einer der beliebtesten Open-Source-Editoren für 2D-Maps. Tiled unterstützt mehrere Ebenen, benutzerdefinierte Kollisionen, Objekte und das Exportieren in gängige Formate wie JSON, XML und mehr. Tiled ist ideal für eine Vielzahl von 2D-Spielen und bietet Flexibilität und eine breite Community.

• Aseprite [3]: Vor allem für Pixel Art bekannt, kann Aseprite ebenfalls Tilemaps erstellen, eignet sich jedoch mehr für einfache Tilemaps und weniger komplexe Karten.

• Unity Tilemap Editor [4]: Für Spieleentwickler, die mit Unity arbeiten, bietet Unity einen eingebauten Tilemap-Editor. Mit ihm können Karten direkt in der Unity-Umgebung erstellt werden, und er unterstützt komplexe Kollisionen, interaktive Tiles und viele weitere Optionen.

Die Dokumentation unserer Spielebibliothek empfiehlt die Nutzung von Tiled. Wir haben im Kasten: „Tiled – ein kompakter Überblick“) einige Informationen zu diesem Tool zusammengestellt.

Um eine Tilemap zu erstellen, werden üblicherweise die folgenden Schritte durchlaufen:

1. Tileset vorbereiten: Eine Sammlung von wiederverwendbaren Tiles (beispielsweise Gras, Wasser, Wand) wird erstellt. Diese Tiles sind häufig in einer einzigen Bilddatei gespeichert, dem sogenannten Sprite Sheet.

2. Tiles platzieren: Tiles müssen auf einem Raster platziert werden, um die Weltkarte des Spiels zu gestalten.

3. Layer hinzufügen: Je nach Bedarf werden mehrere Ebenen erstellt – beispielsweise eine Hintergrundebene, eine Kollisionsebene und eine Ebene für interaktive Objekte.

4. Exportieren: Die Tilemap wird in einem Format exportiert, das das Spiel verarbeiten kann, beispielsweise JSON oder XML.

Viele bekannte und auch weniger bekannte Spiele nutzen Tilemaps, um die Welt des Spiels zu gestalten. Einige Beispiele:

• Super Mario Bros: Verwendet Tilemaps, um seine Level zu erstellen, wobei jedes Tile ein Element wie einen Block, eine Plattform oder ein Hindernis darstellt.

• The Legend of Zelda: Die Oberwelt und Dungeons sind aus Tiles zusammengesetzt, was die Spielwelt zusammenhängend und trotzdem speicherfreundlich macht.

• Stardew Valley: Nutzt Tilemaps für die Bauernhoflandschaft und andere Kartenbereiche. Durch das Hinzufügen von Schichten und Objekten bietet die Welt Komplexität und Tiefe.

Installieren Sie das Programm Tiled und sehen sich die beigefügten Beispiele aus dem Installationsordner an (Abb. 2).

Experimentieren Sie gern auch etwas mit einer neuen Map. Beispielsweise platzieren Sie einige Tiles und exportieren danach die Datei im TMX-Format. Eine neue Tilemap erstellen Sie mit den folgenden Schritten:

• Tileset erstellen und importieren: Bereiten Sie ein Tileset vor, eine Bilddatei (beispielsweise tileset.png), die alle benötigten Kacheln enthält, wie Gras, Wasser, Wände etc. Hinweis: Im Internet finden sich unzählige Ressourcen in Form von Tiles, Tilemaps und Bilddateien, die explizit für Spieleentwickler zur Verfügung stehen. Es gibt zahlreiche kostenfreie und kostenpflichtige Ressourcen. Öffnen Sie Tiled und wählen Sie den Menüpunkt File | New Tileset aus, um das Tileset zu importieren. Geben Sie die Kachelgröße an, beispielsweise 32x32 Pixel, die mit dem Tileset übereinstimmt.

• Neue Karte erstellen: Erstellen Sie eine neue Karte in Tiled über File | New Map und geben Sie die Kartenabmessungen (z. B. 20x20 Tiles) und die Kachelgröße (z. B. 32x32 Pixel) an. Wählen Sie das zuvor erstelltes Tileset als Quelle für die Kacheln auf der Karte.

• Tiles platzieren: Verwenden Sie das Stiftwerkzeug in Tiled, um die Kacheln aus dem Tileset auf das Raster der Karte zu zeichnen und die gewünschte Welt oder Struktur zu erstellen (z. B. ein Boden aus Gras, Wände, Pfade).

• Optional: Erstellen Sie zusätzliche Layer für komplexere Strukturen, beispielsweise ein Hintergrund- und ein Kollisionselement.

Wenn Sie nur wenige Tiles auf der Map angeordnet haben, dann können Sie diese in der Datenmatrix gut ausmachen (Abb. 3). Das ist wahrscheinlich der beste Weg, um die Arbeit mit den Tilemap-Dateien zu verstehen.

Die Dateien eines Tileset

Bei der Erstellung einer Tilemap mit Tiled kommen in der Regel mehrere Dateiformate zusammen, um die Struktur, die verwendeten Grafiken und die Kollisionseigenschaften zu definieren. Die wichtigsten Formate dabei sind:

• TMX (Tile Map XML): die eigentliche Karte, die die Anordnung der Tiles und ihre Eigenschaften speichert

• TSX (Tile Set XML): das Tileset, das die Grafiken und Informationen zu den einzelnen Tiles enthält

• PNG: die Bilddatei, die die visuellen Ressourcen für das Tileset bereitstellt

Diese Dateiformate arbeiten zusammen, um eine vollständige Tilemap zu erzeugen, die später in einer Game Engine genutzt werden kann. Die TMX-Datei ist das Hauptdokument für die Tilemap. Das TMX-Format [4] ist das native Datenformat des Tiled-Editors und wird verwendet, um 2D-Karten und Tilemaps zu speichern. Es basiert auf XML und speichert detaillierte Informationen über die Struktur und Inhalte der Karte einschließlich der verwendeten Tilesets, Ebenen und speziellen Objekteigenschaften. Eine TMX-Datei (Beispiel in Listing 1) besteht aus mehreren Hauptabschnitten, die jeweils unterschiedliche Informationen zur Karte und ihren Bestandteilen enthalten:

• Map-Element: Es definiert grundlegende Eigenschaften der Karte, wie die Breite und Höhe der Karte, die Größe jedes Tiles und die verwendete Ausrichtung.

• tileset-Tag: Verweist auf die TSX-Datei, die die Kacheln enthält, sowie auf die ID und die Größe ...