Tilemap-Editor online — Eine kostenlose Browser-Alternative zu Tiled

Ein Tilemap-Editor ist ein Programm, das ein Level aus einer kleinen Auswahl wiederholter Kachelbilder zusammensetzt, statt aus einem einzigen großen, handgemalten Hintergrund. Tiled, die Desktop-Anwendung von mapeditor.org, ist die Referenzimplementierung dieser Idee: kostenlos, offline, flexibel bei den Rastertypen und alt genug, dass viele ausgelieferte Projekte noch .tmx-Dateien mit sich führen. Diese Seite behandelt den Fall, dass du denselben Mal-Workflow möchtest, ohne etwas zu installieren, und dass du auf Play drücken und in der Map herumlaufen willst, die du gerade gemalt hast.

Neta Studio führt den Editor in einem Browser-Tab aus. Du importierst ein Tileset, stellst die Kachelgröße ein, malst eine Bodenschicht und eine Detailschicht, markierst Kollisionen und spielst dann. Das Raster wird zu einer 3D-Welt, gerendert mit Three.js, mit einem steuerbaren Charakter und echter Kollision. Nichts zum Herunterladen, kein Projektordner, der zwischen Rechnern synchron gehalten werden muss, und ein Link, den du weitergeben kannst, damit jemand anders dieselbe Map öffnet.

Tiled vs. ein Online-Tilemap-Editor

Tiled von mapeditor.org macht vieles gut. Es ist kostenlos und Open Source, läuft offline und unterstützt seit Jahren orthogonale, isometrische, versetzte und hexagonale Raster. Ebenen, Objektebenen mit Rechtecken, Ellipsen, Polygonen und Polylinien, benutzerdefinierte Eigenschaften, Vorlagen, Kachelanimationen, Kollisionsformen und Terrain-/Wang-Sets sind alle vorhanden. Es liest und schreibt TMX-/TSX-XML sowie JSON-Varianten, und das Format ist alt genug, dass es für die meisten Engines Exporter gibt. Wenn deine Pipeline bereits .tmx verarbeitet, ist Tiled der sicherste Ort, um sie zu erstellen.

Die Reibung liegt nicht im Bearbeiten. Sie liegt in allem drumherum. Tiled ist eine Desktop-Anwendung, also braucht jeder Rechner, der das Projekt anfasst, die Installation. Tilesets werden üblicherweise als externe .tsx-Dateien mit relativen Pfaden referenziert, und diese brechen in dem Moment, in dem ein Ordner verschoben wird oder der Checkout eines Mitarbeiters auf einer anderen Ebene liegt. Es gibt keinen Play-Button: Du exportierst und öffnest dann ein zweites Programm, um herauszufinden, ob die Map funktioniert. Teilen bedeutet, ein Projekt zu zippen und zu hoffen, dass die Pfade auf der anderen Seite zusammenpassen.

Ein Online-Tilemap-Editor ändert genau diese drei Dinge und sonst nichts. Keine Installation, weil der Editor mit der Seite ausgeliefert wird. Kein Dateijonglieren, weil Tileset und Ebenen in einem Projekt leben, das du wieder öffnen kannst. Und keine Export-zum-Testen-Schleife, weil die Map in dem Tab spielbar ist, in dem du sie gemalt hast. Was du aufgibst, ist real: keine nativen Plugins, keine geskripteten Maps, und sehr große Projekte sind im Browser schwerer als auf dem Desktop. Für eine Map, die gesehen und durchlaufen werden muss, statt in eine kompilierte Engine ausgeliefert zu werden, lohnt sich der Tausch.

Was eine Tilemap ist (und warum der Name alle verwirrt)

Das Wort hat zwei Aufgaben, und sie kollidieren. Tiled mit großem T ist ein Produktname. Eine Tilemap dagegen ist jede Map, die aus wiederholten Kacheln aufgebaut ist. Du kannst eine Tilemap in Tiled erstellen, aber genauso in Godots TileMap-Nodes, in Unitys Tilemap-System, in Phaser, in einem eigenen Importer oder hier — ohne Tiled jemals zu öffnen.

Diese Trennung ist der Grund, warum Suchen nach einem Tilemap-Editor an zwei verschiedenen Stellen landen. Die eine Hälfte will die konkrete Desktop-Anwendung und ihre Dateiformate. Die andere Hälfte will eine kachelbasierte Map bauen und kümmert sich nicht darum, welches Tool das erledigt. Beides ist vernünftig. Wenn du zur zweiten Gruppe gehörst, lautet die Frage nicht, welcher Editor die längere Funktionsliste hat, sondern welcher dir am schnellsten ein spielbares Ergebnis vor die Nase setzt.

Technisch gesehen sind Tilemaps kleine Datenmengen. Ein Tileset-Bild, eine Kachelbreite und -höhe, eine Rastergröße in Kacheln und dann ein Array von Kachel-IDs pro Ebene, in dem null leer bedeutet. Darüber hinaus: eine optionale Objektebene mit Rechtecken und Polylinien und eine Eigenschaftstabelle aus Schlüssel/Wert-Zeichenketten. Das ist die ganze Struktur. Ein Editor ist eine gute Oberfläche zum Bearbeiten dieser Arrays — der einzige Grund, warum Formate überhaupt zwischen Tools wandern.

Zeichne deine erste Tilemap online

Der erste Bildschirm hat drei Bereiche: das Tileset-Panel links, die Map-Leinwand in der Mitte, die Ebenenliste rechts. Beginne damit, eine Map zu erstellen. Wähle ein orthogonales Raster, stelle das Raster auf 40 mal 30 Kacheln ein und setze die Kachelgröße genau passend zu deinem Tileset. Bei 32 mal 32 Pixeln ergibt das eine 1280 mal 960 Pixel große Leinwand, eine vernünftige Arbeitsgröße, die beim Malen flüssig bleibt.

Dann importiere das Tileset-Bild. Die zwei Einstellungen, die Importe kaputtmachen, sind Rand und Abstand. Der Rand ist der leere Rahmen um das gesamte Sheet; der Abstand ist die Lücke zwischen den Kacheln. Wenn dein Sheet mit einem von beidem exportiert wurde, gib die Zahl ein. Wenn du es überspringst, verschiebt sich jede Spalte um ein oder zwei Pixel, und die Map sieht subtil und ärgerlich falsch aus. Danach ist Malen gleich Malen: Fülle die Bodenschicht, füge dann Details auf einer Ebene darüber hinzu.

Tilemap-Beispiele — Maps, die du jetzt öffnen kannst

Sechs Szenen werden als spielbare Maps ausgeliefert, nicht als Screenshots. Jede öffnet sich im Browser, und du kannst einen Charakter durch sie steuern — die einzige verlässliche Art zu prüfen, ob eine Tilemap funktioniert.

Drei davon sind vollständige Projekte. Die anderen sind kleine Demo-Maps im Editor, die jeweils eine Mechanik zeigen sollen. Öffne sie, wenn du sehen willst, wie Ebenen, Kollisionen und Kachelgröße konfiguriert wurden, statt darüber zu lesen.

Ein TMX / Tileset in den Browser importieren

Importieren ist ein Parser, kein Konverter. Wir lesen das map-Element für Ausrichtung, Breite, Höhe, Kachelbreite und Kachelhöhe und dann die Tileset-Einträge mit ihrer firstgid und entweder einem eingebetteten Bild oder einem Verweis auf eine externe .tsx. Danach jede Ebene der Reihe nach mit ihren Kacheldaten. Die Kodierungen, die zählen, sind CSV und Base64, mit oder ohne gzip- oder zlib-Komprimierung. Wenn die Datei eine Kodierung verwendet, die wir nicht dekodieren, stoppt der Import und benennt sie, anstatt ein leeres Raster zu laden.

Was überlebt, ist der strukturelle Teil. Der Tileset-Verweis wird auf ein hochgeladenes Bild umgelenkt, sodass der externe .tsx-Pfad aus deinem Desktop-Projekt ersetzt statt befolgt wird. Kachelgröße, Rand und Abstand werden übernommen. Ebenenreihenfolge, Sichtbarkeit und Deckkraft werden übernommen. Kachel-IDs behalten ihre relativen Positionen innerhalb jeder Ebene, was dafür sorgt, dass eine Map nach dem Import gleich aussieht. Objektebenen kommen als Rechtecke und Polygone an, mit ihren auf Schlüssel/Wert-Zeichenketten reduzierten Eigenschaften. Deklarierte Kachelanimationen werden beibehalten.

Was nicht überlebt, ist alles, was Code war. Tiled unterstützt JavaScript-Erweiterungen, benutzerdefinierte Eigenschaftsklassen und C++-Plugins, und keines davon läuft in einem Browser-Tab. Eine von einem Skript erzeugte Map ist hier nur ihre Ausgabe an Kacheln. Benutzerdefinierte Eigenschaftstypen werden zu Zeichenketten degradiert. Unendliche Maps mit Chunk-Speicherung werden in ein festes Raster abgeflacht, was das Speicherverhalten bei sehr großen Maps verändert. Und ein Image-Collection-Tileset, bei dem jede Kachel ein separates PNG ist, funktioniert, kostet aber eine Bildanfrage pro Kachel. Wenn deine Map von einem Plugin abhängt, erstelle sie weiterhin in Tiled.

Tiled kostenlos vs. Tiled kostenpflichtig

Tiled ist kostenlos. Es ist Open-Source-Desktop-Software, und es gibt keine kostenpflichtige Stufe zum Vergleich, also beschreibt eine Seite, die kostenloses gegenüber kostenpflichtigem Tiled stellt, etwas anderes — meist ein kommerzielles Tileset-Paket oder den in eine Engine integrierten Editor. Wir behaupten nicht, dass Tiled Geld kostet, denn das tut es nicht.

Die eigentliche Trennung ist Installation versus keine Installation. Tiled verlangt auf jedem Rechner einen Download, hält Tilesets als relative Pfade, die brechen, wenn Ordner verschoben werden, und bietet keinen integrierten Playtest, also exportierst du und öffnest ein anderes Programm. Ein Browser-Editor verlangt einen Tab, hält das Projekt an einem Ort und spielt die Map im selben Fenster ab. Das ist der Tausch, und er hat nichts mit dem Preis zu tun.

Es gibt Dinge, bei denen der Desktop gewinnt. Plugins, geskriptete Maps, völlig ohne Netzwerk zu arbeiten und sehr große Maps mit vielen Ebenen sind allesamt Desktop-Vorteile, und etwas anderes vorzugeben wäre unehrlich. Wenn deine Pipeline bereits .tmx verarbeitet und du Leute hast, die sie pflegen, bleib bei Tiled. Nutze den Browser-Editor, wenn die Map gesehen, per Link geteilt oder von jemandem durchlaufen werden muss, der niemals einen Editor installieren wird.

Laufe in die Welt hinein, zu der sie gehört

Ein Sprite ist ein Charakter ohne Ort zum Stehen. Der letzte Schritt ist der, den sonst niemand bietet: Nimm das Sheet, das du gerade gebaut hast, und setze es in eine Welt, in der jemand herumlaufen kann — eine kleine Insel, ein Planet, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ