Plattformer mit Tiled

Voraussetzungen

• Visionaire Studio 5.3.1 oder neuer
• Das Grafikpaket Paper Pixels von v3x3d (kostenlos, Spenden willkommen)
• Der Karteneditor Tiled (kostenlos, Spenden willkommen)
• Sprite Sheet Slicer von isometric8, ein kleines Werkzeug, das Spritesheets in Einzelbilder zerlegt

Grundkenntnisse in objektorientierter Programmierung helfen. Das Spielprinzip ist einfach: das Levelende erreichen, Fallen, Hindernissen und Gegnern ausweichen, Gegenstände sammeln und Leitern benutzen.

Den Spieler einrichten

Zuerst zerlegst du das Spritesheet des Spielers in Einzelbilder, dann importierst du die Animationen in Visionaire und gibst dem Spieler zum Schluss Physik mit Box2D.

Spritesheet zerlegen

In Sprite Sheet Slicer:

1. Importiere das Ausgangsbild.
2. Wähle „Slice by cell size“ und gib 8 × 8 ein.
3. Klicke auf „Slice“. Die Einzelbilder erscheinen rechts.
4. Fasse die Bilder zu Gruppen zusammen: Markiere alle Bilder einer Animation, zum Beispiel den Laufzyklus.
5. Gib ein Dateinamen-Präfix ein, zum Beispiel player_run.
6. Gib die Startnummer ein, zum Beispiel 1. Die weiteren Bilder der Gruppe werden automatisch durchnummeriert.
7. Wiederhole das für jede Animation (Ruhe, Laufen, Springen, Treffer).
8. Prüfe den Ausgabeordner und klicke auf „Write images to disk“. Alle Bilder werden exportiert, behalte die, die du brauchst.

Animationen importieren

Lege in Visionaire eine Szene an (zum Beispiel level1) und darin ein neues Objekt (zum Beispiel player) und importiere die Animationen. Stelle die Ruheanimation vorerst als Standardanimation ein, damit du den Spieler beim Testen siehst.

Physik hinzufügen

Damit der Spieler auf Kollisionen und Kräfte reagiert, braucht er einen Box2D-Body mit einer Fixture. Füge beides als Komponenten zum Spielerobjekt hinzu, wie im Einstieg in Ilios beschrieben:

Starte das Spiel: Der Spieler fällt aus dem Bild. Als Nächstes baust du ihm einen Boden.

Das Level bauen

Das Level entsteht in Tiled, einschließlich der Kollisionsdaten, und wird dann in Visionaire importiert.

Karte in Tiled anlegen

Die Spielauflösung ist 320 × 240 Pixel, die Kacheln sind 8 × 8 Pixel groß. Lege eine Karte mit 960 × 480 Pixeln an, damit das Level scrollt, und speichere sie als .tmx-Datei.

Erstelle ein Tileset aus dem Bild tiles.png des Paper-Pixels-Pakets:

Lege jetzt die Kollisionsdaten fest, und zwar bevor du die Karte baust: Sie bestimmen, welche Kacheln kollidieren, zum Beispiel Wände und Boden. Öffne im Tileset-Editor den Kollisionseditor und passe die Begrenzungsrahmen aller Kacheln an, die eine Kollision brauchen:

Baue nun dein Level. Über „View > Show Tile Collision Shapes“ siehst du die Kollisionsrahmen jederzeit:

Wichtig: Visionaire kann die Karte nur lesen, wenn die Tilesets (meist .tsx-Dateien) in die .tmx-Datei eingebettet sind. Das stellst du in den Einstellungen von Tiled ein:

Am Ende brauchst du nur die Kartendatei (.tmx) und das oder die Tileset-Bilder im selben Ordner:

Karte in Visionaire importieren

1. Lege ein neues Szenenobjekt für die Karte an, zum Beispiel level_map.
2. Füge ihm eine „TMX“-Komponente hinzu und importiere die .tmx-Datei. Visionaire liest die Karte ein und zeigt sie an.
3. Füge eine Box2D-Body-Komponente hinzu und stelle sie auf „Static“, damit die Kräfte der Spielwelt die Karte nicht bewegen.

Starte das Spiel: Der Spieler fällt und landet auf dem Boden. Die Karte wurde richtig importiert, und die Physik funktioniert.

Die importierten Kollisionsdaten kannst du auch in der Konsole prüfen:

Wie es weitergeht

Das Originaltutorial geht mit einem Input Manager weiter: einem globalen Skript, das die Pfeiltasten und die Leertaste abfragt und die aktuelle Richtung als 2D-Vektor zurückgibt, zum Beispiel (-1,0) für links oder (1,-1) für rechts und oben gleichzeitig. Ein solches Skript wird unter „Global Behaviours“ eingebunden. Dieser Teil entsteht noch, Neuigkeiten findest du im Originaltutorial.