Tilemap-Editor — kostenloser Online-Tilemap-Maker & Level-Editor

Ein Tilemap-Editor ist ein Raster, ein Tileset und ein Pinsel. Du importierst ein PNG oder generierst ein Set aus einem Prompt, legst eine Zellgröße fest, malst Zellen über mehrere Ebenen, markierst die soliden für die Kollision und exportierst. Der Tilemap-Editor auf dieser Seite läuft im Browser: kein Download, kein Konto, kein Build-Schritt, und der Editor ist das Erste, was du siehst, statt eines Screenshots davon.

Alles Folgende beschreibt, was das Tool tatsächlich tut und wo es versagt. Warum ein Sheet mit einem 1-px-Rand falsch importiert wird, wenn du nur die Tile-Größe eingibst. Warum eine Autotile-Regel mit zwei Zuständen pro Kante 47 Varianten statt 16 benötigt. Was TMX mitbringt, das ein PNG nicht kann. Und warum die Möglichkeit, Play zu drücken und die gerade gemalte Map zu durchlaufen, verändert, wie schnell du sie korrigieren kannst.

Der Tilemap-Editor (Live-Tool)

Das Live-Tool ist das Erste auf dieser Seite. Die Leinwand ist ein Raster, das Tileset liegt daneben, und die Ebenenliste ist ein Stapel unabhängiger Raster, die du einzeln ausblenden und sperren kannst. Eine Zelle malen ist ein Klick. Ziehen malt eine Reihe von Zellen. Ein Rechteck-Werkzeug füllt eine Fläche, ein Flood-Fill übernimmt offenen Boden, und ein Radierer löscht zurück bis auf die Ebene darunter.

Vier Fähigkeiten leisten die Arbeit. Das Raster legt eine Zahl für das gesamte Dokument fest, die Zellgröße in Pixeln, und jeder Pinsel, jede Ebene und jeder Export wird in dieser Einheit gemessen. Pinsel entscheiden, was ein Klick schreibt: einzelnes Tile, rechteckiger Block, Flood-Fill, Linie oder Radieren. Ebenen stapeln getrennte Raster, damit Terrain, Dekoration und Kollision unabhängig editierbar bleiben. Kollision markiert eine Zelle als solide und speichert sie als Daten, statt sie in die Grafik zu malen, sodass das Neubemalen einer Wand nie bedeutet, ihr blockierendes Volumen neu zu machen.

Es gibt keinen Speichern-Dialog und keinen Kompilierschritt zwischen Malen und Spielen. Das Dokument, das der Editor schreibt, ist das Dokument, das die Laufzeit liest, was die ganze Klasse von Fehlern beseitigt, bei denen eine Map in einem Programm korrekt aussieht und sich um ein halbes Tile verschiebt, sobald sie in einem anderen geladen wird.

Importiere ein Tileset oder generiere eines

Es gibt zwei Wege hinein. Importiere ein PNG, das du bereits besitzt, oder generiere ein Set aus einem Text-Prompt und male damit. Beide enden am selben Ort: ein ausgerichtetes Tile-Sheet neben der Leinwand.

Wenn du lieber keines von beiden zeichnen möchtest, ist die Bibliothek der kostenlosen Tilesets ein Katalog fertiger Sheets in gängigen Zellgrößen. Agent Sprite Forge übernimmt die andere Hälfte des Problems, Charaktere und Requisiten, die anderen Regeln als Terrain folgen und meist mehr Frames pro Aktion brauchen.

Der Editor fragt nach der Tile-Größe, bevor er irgendetwas lädt, und diese Zahl muss exakt zur Grafik passen. Ein Sheet von 256 mal 256 Pixeln aus 16-px-Tiles ist 16 Spalten mal 16 Reihen. Wenn das Sheet einen 1-px-Rand um den Umfang und 1 px Abstand zwischen den Tiles hat, ein häufiger Standard in Sprite-Tools, liefert die reine Rechnung die falsche Spaltenzahl, also gib auch Rand und Abstand ein oder beschneide das Sheet. Machst du es falsch, schert das Raster: Spalte eins sieht gut aus, und jedes Tile danach ist um einen Fehler versetzt, der über das Sheet hinweg wächst.

Drei weitere Dinge brechen einen Tileset-Import. Tiles, die 15 oder 33 px groß sind, weil die Grafik um einen nicht-ganzzahligen Faktor skaliert wurde. Grafik, die 1 px in die Zelle des Nachbarn hineinragt, was als dünne Linie des angrenzenden Tiles entlang jeder Naht erscheint und schlimmer wird, wenn die Engine mit aktiviertem Filtern sampelt. Und ein Alphakanal, bei dem der transparente Bereich tatsächlich schwarz ist, was jede leere Zelle in einen soliden Block verwandelt, sobald die Map gerendert wird.

Beschreibe stattdessen das Set: Zellgröße, Ansicht, Palette und die Tile-Rollen, die du brauchst, etwa Boden, Wand, Wandecke, Tür und Wasserkante. Der AI-Tileset-Generator liefert ein Sheet, das bereits auf die angeforderte Zellgröße ausgerichtet ist, sodass es ohne die Rand-Rechnung importiert wird.

Behandle das Ergebnis als Ausgangspunkt. Generierte Sets sind stark bei Oberfläche und schwach bei Kontinuität: Das sechzehnte Boden-Tile fügt sich selten nahtlos an das erste, und Kanten-Tiles müssen meist neu bemalt werden, bevor Autotiling sie als zusammenhängendes Terrain akzeptiert.

Tiles malen, Ebenen und Kollisionen hinzufügen

Eine Map, die leicht zu bearbeiten bleibt, besteht aus drei Ebenen, nicht aus einer. Boden enthält das Terrain, auf dem der Spieler läuft. Detail enthält alles, was darüber gezeichnet wird, etwa Wände, Bäume, Kisten und Decals, damit du es umgestalten oder ausblenden kannst, ohne den Boden anzufassen. Kollision enthält nichts Sichtbares: Sie ist eine Maske aus Zellen, die der Spieler nicht betreten kann.

Halte Kollision als Daten auf einer eigenen Ebene, nicht als dunkle Tiles, die ins Terrain eingebacken sind. Wenn blockierende Volumen in die Boden-Grafik gemalt werden, verändert das Bearbeiten der Grafik das Leveldesign, und das Bearbeiten des Leveldesigns verändert die Grafik. Mit einer separaten Ebene kannst du den Boden so oft neu bemalen, wie du willst, und die Wände bleiben, wo sie waren.

Der Fehlermodus, auf den du achten musst, ist eine unmarkierte Zelle in einem Wandverlauf. Eine einzelne fehlende Kollisionszelle in einer vierzig Tiles langen Wand ist ein Loch, durch das der Spieler läuft, und bei normalem Zoom ist sie unsichtbar. Die Routine, die sie findet: Blende jede Ebene außer Kollision aus, betrachte die Map als Silhouette und prüfe, dass der Umriss ununterbrochen ist.

Autotiling und das 47-Tile-Set erklärt

Autotiling ist der Teil eines Tilemap-Editors, der anhand der Umgebung auswählt, welches Tile gezeichnet wird. Statt eine Wandecke von Hand auszuwählen, malst du ein beliebiges Wand-Tile, und der Editor untersucht die Nachbarzellen, baut eine Bitmaske und tauscht die passende Variante ein. Male eine zweite Wand neben die erste, und beide Zellen aktualisieren sich.

Die einfache Version der Regel betrachtet vier Nachbarn, Norden, Osten, Süden und Westen, was zwei hoch vier, also 16 Kombinationen ergibt. Dieses Set ist leicht zu zeichnen, und es versagt an einer bestimmten Stelle: der Innenecke. Nimm eine Bodenzelle mit einer Wand im Norden und einer Wand im Osten und sonst nichts. Das ist kein exotischer Fall, so sieht das Innere eines L-förmigen Raums überall aus. Ein 16-Tile-Set hat keine Variante, die eine Kante entlang sowohl der Nord- als auch der Ostseite einer Zelle zeichnet, also bekommst du einen verirrten Bodenpixel, einen doppelten Rand oder ein sichtbares Loch.

Das 47-Tile-Blob-Set, auch Blob-Tileset genannt, fügt die vier Ecken hinzu. Alle acht Nachbarn naiv zu verfolgen ergibt zwei hoch acht, also 256 Kombinationen, und die meisten davon sind redundant: Eine Ecke ändert das Bild nur, wenn beide angrenzenden Kanten gefüllt sind. Eine Ecke zwischen zwei leeren Kanten rendert in allen vier ihrer Zustände identisch. Wendet man diese eine Reduktion an, fallen 256 Fälle auf 47 verschiedene zusammen, daher stammt die Zahl.

Editoren speichern ein Blob-Set üblicherweise als Nachschlagetabelle, indiziert durch eine 8-Bit-Maske: 1, 2, 4 und 8 für die Kanten, 16, 32, 64 und 128 für die Ecken. Wenn du malst, berechnet der Editor die Maske der bemalten Zelle und jedes Nachbarn neu, der ebenfalls autotiled ist, sodass ein Klick bis zu neun Zellen umschreiben kann. Die praktische Konsequenz ist, dass Autotiling eine eigene Terrain-Ebene will. Mischst du von Hand platzierte Requisiten in diese Ebene, muss jede Autotile-Aktualisierung entscheiden, ob es akzeptabel ist, sie zu überschreiben.

Tiled Map vs. Tilemap — welches meinst du?

Zwei verschiedene Suchen landen hier und wollen unterschiedliche Dinge. Ein Tilemap-Editor ist die Kategorie: jedes Tool, das ein Raster aus Tiles bemalt und eine Map erzeugt. Tiled ist ein bestimmtes Programm innerhalb dieser Kategorie, der Desktop-Editor, der unter mapeditor.org veröffentlicht wird, und Leute tippen oft „tiled map editor“, wenn sie dieses Programm namentlich meinen.

Wenn du die Kategorie meintest, ist das Live-Tool auf dieser Seite ein Tilemap-Editor, und es braucht keine Installation. Wenn du die Marke meintest, willst du wahrscheinlich etwas, das die Dateien öffnet, die du bereits hast, die TMX-Projekte und TSX-Tilesets, die ein Desktop-Workflow erzeugt, und dich weiterarbeiten lässt, ohne etwas auf dem Rechner zu installieren, an dem du sitzt. Die Tiled-Alternative-Seite behandelt das direkt: welche deiner Dateien übernommen werden, welche Einstellungen nicht, und wie die Exportformate zwischen den beiden zusammenpassen.

Technisch liegt der Unterschied darin, wo das Dokument lebt. Ein Desktop-Editor schreibt Projekte auf die lokale Festplatte und ist darauf angewiesen, dass auf diesem Rechner das Programm installiert ist, um sie wieder zu öffnen. Ein Browser-Editor hält das Dokument in der Sitzung und im Browserspeicher und ist darauf angewiesen, dass der Export vollständig genug ist, um die Map überall sonst neu aufzubauen. Das macht die Exportformate zur eigentlichen Brücke zwischen den beiden, worum es im nächsten Abschnitt geht.

Exportiere deine Map (PNG / TMX / JSON)

Drei Formate, drei Aufgaben. Entscheide danach, was die Datei lesen wird, nicht danach, welches am offiziellsten klingt.

PNG ist ein flaches Bild. Der Exporter rendert die Map mit Zellgröße multipliziert mit Map-Größe, sodass aus einer 40×25-Map mit 32-px-Zellen 1280×800 Pixel werden, wobei Ebenen entweder zu einem Bild zusammengeführt oder als eine Datei pro Ebene geschrieben werden. Nutze es für Mockups, Thumbnails, Menühintergründe oder ein Gespräch mit einem Künstler. Nutze es nicht als Übergabe an eine Engine: Ein PNG trägt kein Raster, keine Tile-Identität und keine Kollision, also kann nichts nachgelagert eine Wand von einem Boden unterscheiden, außer anhand der Farbe.

TMX ist das XML-Austauschformat von Tiled und das, was dem Tile-Tool-Ökosystem am nächsten zu einer Lingua franca kommt. Es trägt Ebenen, Tileset-Referenzen, Eigenschaften pro Tile, Objektebenen und benutzerdefinierte Eigenschaften, und die meisten Engines und Konverter können es lesen. Ein Detail verursacht die meisten Fehler: Tile-IDs in TMX sind global über jedes Tileset in der Map hinweg, versetzt um eine firstgid pro Tileset. Führe zwei Sheets zusammen und mach diesen Versatz falsch, und jede Zelle, die das zweite Sheet nutzte, lädt mit einem Tile aus dem falschen Sheet. Nichts wirft einen Fehler. Es sieht einfach falsch aus.

JSON ist das, was die meisten Engines und Web-Laufzeiten direkt aufnehmen. Typischerweise ist es eine Liste von Ebenen, die jeweils ein flaches Array von Tile-Indizes plus die Zellgröße enthalten, mit Kollision als separatem Array. Weil der Konsument die Map zur Laufzeit aufbaut, ist die Konvention der Zeilenreihenfolge wichtig: Kehre sie um, und die ganze Map spiegelt sich vertikal, was auf einer Map mit Küstenlinie offensichtlich und in einem symmetrischen Dungeon unsichtbar ist. Leere Zellen brauchen außerdem einen definierten Wert, da manche Formate 0 und manche -1 verwenden, und die falsche Wahl setzt ein echtes Tile in jede Lücke.

Steig in deine Map hinein (spielbare Demo)

Die spielbare Demo auf dieser Seite ist The Cyclops' Island, ein isometrisches Pixel-Art-Spiel, das aus einer im selben Editor gemalten Tilemap gebaut wurde. Drücke Play, und die Kamera fällt in die Map. Die Kollisionsebene wird zu Wänden, die Bodenebene wird zum Boden, auf dem der Charakter läuft, und die Detailebene zeichnet hinter oder vor dem Charakter, je nachdem, wo sie liegt.

Das ist der Schritt, den die meisten Tool-Seiten überspringen. Eine Map malen und exportieren bedeutet, dass du das Level zum ersten Mal in Spielergröße in einem anderen Programm, mit einer anderen Kamera, nach einem Build siehst. Es an Ort und Stelle zu spielen macht Leveldesign zu einer Schleife, die du zehnmal pro Minute durchlaufen kannst: Male einen Korridor, laufe ihn, bemerke, dass er ein Tile zu breit ist, male ihn neu.

Isometrische Projektionen fügen eine Sache hinzu, über die eine orthogonale Map nie nachdenken muss: die Zeichenreihenfolge. Ein Tile weiter unten auf dem Bildschirm ist näher an der Kamera, also sortiert der Renderer nach Tiefe, grob nach Reihe und dann nach Ebene, sonst wird ein Charakter über eine Wand gezeichnet, die ihn verdecken sollte. Das Symptom ist ein Sprite, das durch die Oberseite einer Wand stößt, während es dahinter läuft. Wenn du das in einer Demo siehst, ist die Ursache die Tiefensortierung, nicht die Kollisionsmaske.

Von dort kann die Map zwei Richtungen einschlagen. Bleib bei 2D, und sie bleibt eine Tilemap mit einem Player-Controller obendrauf. Bring sie in den 3D Game Builder, und dasselbe Raster wird zu Geometrie, wobei jede Zelle zu einer Bodenplatte oder einer Wand extrudiert wird, was der Ansatz hinter Mini World ist. Agent Sprite Forge deckt die Charakterseite ab. Das Raster, das du gemalt hast, ändert sich in beiden Fällen nicht.

Betritt die Welt, zu der es gehört

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

FAQ