Tilemap erstellen — Schritt-für-Schritt-Anleitung mit kostenlosem Editor

Beim Erlernen einer Tilemap geht es vor allem darum, vier Entscheidungen in der richtigen Reihenfolge zu treffen: die Zellgröße, das Layout des Tilesets, den Ebenenstapel und den Ort der Kollisionen. Triff diese Entscheidungen einmal, und das Bemalen der Karte wird mechanisch.

Die folgenden Schritte folgen der Reihenfolge, die wir verwenden, wenn aus einer schriftlichen Beschreibung eine spielbare Welt in Neta Studio wird: Wähle oder generiere ein Tileset, lege das Raster fest, blockiere das Gelände vor dem Detail, teile die Ebenen auf und lass dann Autotiling die Ränder auflösen. Nichts davon erfordert eine Installation. Der Editor läuft im Browser, und jede Zahl unten kann später geändert werden, ohne die Karte neu zu zeichnen.

Was ist eine Tilemap? (Klare Definition + Diagramm)

Eine Tilemap ist ein Raster aus Indizes, kein Raster aus Bildern. Jede Zelle speichert eine ganze Zahl, die auf ein Tile innerhalb eines Tilesets verweist, und der Renderer schlägt diesen Index nach und zeichnet das Tile an der Zellenposition. Eine Karte von 20 mal 12 bei 32 px großen Zellen sind 240 ganze Zahlen, die 640 mal 384 Pixel abdecken.

Genau diese Indirektion ist der ganze Punkt. Ein Gras-Tile wird einmal im Sheet gespeichert und von Hunderten von Zellen referenziert, sodass eine Kartendatei klein bleibt und schnell lädt. Weil eine Tilemap Daten und keine Grafik ist, kannst du sie aus einer Rauschfunktion generieren, als Text bearbeiten, zwei Versionen in Git vergleichen oder sie in Blöcken streamen, während sich die Kamera bewegt.

Das Diagramm oben auf dieser Seite besteht aus unseren eigenen Tiles auf einem Raster von 12 mal 8 bei 32 px. Gras füllt das Innere, Sand verläuft entlang der linken und unteren Kante, und Wasser befindet sich in der unteren rechten Ecke, wo der Sand endet. Als Daten gelesen: Die Zelle in Spalte 3, Zeile 0 enthält den Gras-Index, die Zelle in Spalte 0, Zeile 7 enthält den Wasser-Ecken-Index, und jede andere Zelle enthält einen einfachen Sand-Index. Der Ursprung liegt oben links, x wächst nach rechts, y wächst nach unten. Wenn deine Engine einen Ursprung unten links verwendet, wird die Karte auf dem Kopf stehend gerendert, bis du den Zeilenindex auf Zeilen minus 1 minus y umstellst.

• Das RasterSpalten und Zeilen, festgelegt bei der Erstellung der Karte. Eine Karte von 20 mal 12 und eine von 40 mal 24 verhalten sich beim selben Kamera-Zoom sehr unterschiedlich.
• Die ZellgrößeDer Pixel-Fußabdruck einer Zelle: 16, 32, 48 oder 64. Er muss genau zur Tile-Größe des Tilesets passen, sonst landet die Abtastung mitten im Tile.
• Die Menge der TilesDas Bild, in das die Indizes zeigen, plus eine Definition, wie viele Spalten und Zeilen es hat.
• Die Ebene der IndizesEine ganze Zahl pro Zelle und Ebene. Die Bodenebene ist dicht, die Detailebene größtenteils leer, und die Kollisionsebene enthält Flags statt Grafik.

Was ist ein Tileset? (und wie es sich unterscheidet)

Das Tileset ist das Bilderbuch; die Tilemap ist die Seite mit den Verweisen darauf. Ein Tileset besitzt Pixel: ein Sheet plus die Regel, die besagt, dass das Sheet zum Beispiel 8 Spalten mit 32 px großen Tiles umfasst. Eine Tilemap besitzt die Platzierung: welcher Index in jeder Zelle jeder Ebene sitzt.

Die beiden Begriffe werden ständig vertauscht, weil die meisten Editoren sie nebeneinander im selben Panel anzeigen und weil ein Einzeldateiformat die Trennung verbergen kann. In Tiled ist die Trennung ausdrücklich: eine Tileset-Datei getrennt von der Kartendatei. In Unity enthält ein Tile-Asset das Sprite und eine Tilemap-Komponente die Zellen. In Godot sind TileSet und die Tilemap-Ebene getrennte Ressourcen.

Die praktische Konsequenz: Eine Änderung am Tileset verändert jede Karte, die darauf verweist, während eine Änderung an einer Tilemap ein einzelnes Level verändert. Tausche ein 32-px-Sheet gegen ein 48-px-Sheet, und jeder Index wird weiterhin aufgelöst, aber jede Karte wird nun in einem anderen Maßstab gezeichnet und kann an den Rändern benachbarte Tiles abtasten. Behandle das Tileset als veröffentlichte Schnittstelle mit einer Versionsnummer.

Schritt 1: Wähle oder erstelle ein Tileset

Du hast zwei Wege: ein vorhandenes Sheet nehmen oder eines generieren. Ein vorhandenes Sheet ist schneller, aber du übernimmst seine Palette, seine Zellgröße und seine Lizenz. Prüfe die Lizenz, bevor du vierzig Karten darauf aufbaust, und stelle sicher, dass es ein Raster-Sheet und kein gepackter Atlas ist. Ein Atlas speichert Rechteckkoordinaten pro Tile statt einer einheitlichen Zelle, was die Indizierung erschwert und Autotiling umständlich macht.

Wenn das Gelände zu einer bestimmten Palette passen muss, generiere es. Agent Sprite Forge erzeugt aus einer schriftlichen Beschreibung ein Tile-Sheet mit einheitlicher Zellgröße, wodurch die häufigste Ursache für Fehlausrichtung entfällt: ein Sheet, bei dem ein Tile 33 px breit ist, weil der Künstler außerhalb der Zelle ein Highlight hinzugefügt hat.

Welchen Weg du auch wählst, der erste Durchgang ist kein Zeichnen. Er ist Messen. Öffne das Sheet bei 100 % Zoom, zähle die Spalten und Zeilen und notiere die Zellgröße dort, wo der Rest des Teams sie finden kann.

• Eine einheitliche ZellgrößeJedes Tile mit derselben Breite und Höhe, auch Tiles, die größtenteils leer sind. Ein einziges 33-px-Tile in einem 32-px-Sheet verschiebt jeden Index danach, wenn der Exporter in Leserichtung packt.
• Echte TransparenzAlpha, nicht Weiß. Ein Sheet mit einem undurchsichtigen weißen Hintergrund zeichnet im Browser weiße Kästen über deinen Himmel.
• Ein dokumentiertes RasterHalte Spalten, Zeilen und ob es Padding gibt fest. Die Index-Berechnung lautet Zeile mal Spalten plus Spalte, nullbasiert, von links nach rechts und von oben nach unten gelesen.
• Eine Entscheidung zum GutterSheets mit Padding fügen 1 oder 2 px zwischen den Zellen hinzu, um Textur-Bleeding zu reduzieren, auf Kosten eines Versatzes in deiner Abtastberechnung. Entscheide vor dem ersten Pinselstrich, welche Variante du verwendest.

Schritt 2: Lege deine Tile-Größe und das Raster fest

Die Zellgröße wird von drei Dingen bestimmt: dem Zoom, in dem der Spieler tatsächlich spielt, deiner Ziel-Renderauflösung und der Menge an Grafik, die du zu zeichnen bereit bist. Ein 16-px-Tile ergibt auf einem 1920 px breiten Viewport 120 Zellen nebeneinander, was sehr viel Level pro Bildschirm und sehr wenig Platz für Details bedeutet. Ein 64-px-Tile ergibt 30 Zellen und genug Pixel, um einen lesbaren Baum zu zeichnen.

Die harte Einschränkung ist Arithmetik. Die Zellgröße muss das Sheet teilen. Ein 256 px breites Sheet ergibt bei 32 px genau 8 Spalten; bei 48 px ergibt es 5,33, sodass die letzte Spalte nur ein Bruchteil eines Tiles ist und jeder Index danach abweicht. Sheet-Abmessungen sind keine ästhetischen Entscheidungen, sondern Vielfache der Zellgröße.

Verwende ganzzahlige Skalierung. Wenn der Viewport kein ganzzahliges Vielfaches des Rasters ist, landen Zellen auf halben Pixeln, die Filterung tastet zwei benachbarte Tiles ab, und über die gesamte Karte erscheint eine ein Pixel breite Naht. Behebe das von beiden Seiten: Nearest-Neighbour-Filterung in der Engine und ein Kamera-Zoom, der eine ganze Zahl ist.

Schritt 3: Male den Boden, dann die Details

Male in Durchgängen, und immer zuerst das Gelände. Gelände ist das, was du ändern wirst; Dekoration ist das, was du nicht verschieben möchtest. Platziere sechzig Bäume und verschiebe dann die Küstenlinie um vier Zellen nach links – und jeder dieser Bäume steht plötzlich im Wasser.

Beginne mit einem einzigen Tile. Blockiere die gesamte Karte mit einem Gras-Index, betrachte die Silhouette im Gameplay-Zoom und lass erst dann Autotiling die Ränder auflösen. Details kommen, nachdem die Form feststeht, und Kollisionen kommen nach den Details, denn die Entdeckung, dass ein Objekt begehbar ist, ist eine Kollisionsbearbeitung, kein Neuanstrich.

Male alles, was der Spieler sehen kann. Leere Zellen zeigen standardmäßig das, was der Renderer hinter der Karte zeichnet, was normalerweise nicht der beabsichtigte Hintergrund ist. Eine auf der Kamera eingestellte Hintergrundfarbe ist sicherer, als sich auf eine leere Leinwand zu verlassen.

Schritt 4: Füge Ebenen, Tiefe und Kollisionen hinzu

Eine Tilemap ist nicht mehr flach, sobald du sie in Ebenen aufteilst. Der minimale sinnvolle Stapel besteht aus drei Ebenen: eine dichte Bodenebene, eine dünn besetzte Detailebene und eine Kollisionsebene, die überhaupt keine Grafik enthält. Eine Overlay-Ebene über den Figuren lohnt sich früh, wenn irgendetwas auf der Karte den Spieler verdecken soll.

Die Tiefe kommt aus demselben Raster. In einer Top-down-Karte sortierst du nach der Unterkante jedes Objekts: Was die tiefsten Füße hat, wird zuletzt gezeichnet. Für Tiles ist das kostenlos, weil die Zelle-y bereits die Position kodiert. Für bewegte Figuren brauchst du eine Sortierung pro Objekt mit einem deterministischen Tie-Break, typischerweise die y des Objekts plus sein anteiliger Versatz innerhalb der Zelle. Ohne diese Sortierung flackern zwei Objekte in derselben Zeile zwischen den Frames.

Kollisionen bilden sich auf dem Raster als paralleles Array mit denselben Abmessungen ab. Gib jedem Tile im Tileset ein Solid-Flag, sodass das Malen einer Wand sie zugleich als solide markiert, und nutze die Kollisionsebene für kartenbezogene Ausnahmen. Flags pro Zelle können keine Schrägen, Einwegplattformen oder dünne Wände innerhalb einer Zelle ausdrücken. Diese gehören zu separaten Objekten, die über dem Raster liegen, nicht zur Tilemap.

• BodenebeneDicht: Jede Zelle enthält einen Index. Dies ist die einzige Ebene, die du sicher autotilen kannst.
• DetailebeneDünn besetzt und transparent, wo leer. Bäume, Felsen, Decals. Nichts hier sollte versehentlich Bewegung blockieren.
• Overlay-EbeneWird über den Figuren gezeichnet: Baumkronen, Brücken, Dächer. Alles, was den Spieler verdecken soll.
• KollisionsebeneKeine Grafik. Ein boolesches Array in derselben Größe wie die Karte, vorbelegt aus den Solid-Flags des Tilesets und für Ausnahmen von Hand bearbeitet.

Schritt 5: Autotiling und das 47-Tile-Set

Autotiling ist der Teil, der still versagt. Ein Gelände-Tile mit acht Nachbarn hat 2^8, also 256, mögliche Nachbarschaftskonfigurationen. Ecken spielen nur eine Rolle, wenn beide angrenzenden Seiten gefüllt sind, und diese Symmetrie reduziert die 256 Fälle auf 47 eindeutige Tiles. Deshalb verbrauchen die meisten Engines und Editoren ein 47-Tile-Blob-Set pro Gelände, angeordnet in einem dokumentierten Layout.

Du wirst auch auf ein 16-Tile-Set stoßen, das die vier seitlichen Nachbarn liest und Ecken ignoriert, sowie auf ein 2x2-Minitile-Set, bei dem jede Zelle aus vier Viertel-Tiles gezeichnet wird, sodass 13 bis 16 Minitiles jeden Fall abdecken. Das 16-Tile-Set ist einfacher zu zeichnen, erzeugt aber stumpfe Ecken. Der Minitile-Ansatz braucht weniger Bilder, zwingt dich aber, jedes Gelände in Vierteln zu gestalten, was Pixelart weicher macht.

Wie du eine Tilemap erstellst, die ohne Lücken autotiled

Die Maske ist der ganze Mechanismus. Baue für jede Zelle eine 8-Bit-Ganzzahl aus ihren acht Nachbarn: Bit 0 für Norden, Bit 1 für Nordosten, Bit 2 für Osten und so weiter im Uhrzeigersinn. Wähle eine Reihenfolge, schreibe sie neben den Code und ändere sie nie. Eine Maske, die um ein Bit danebenliegt, erzeugt immer noch plausibles Gelände, weshalb nicht übereinstimmende Konventionen monatelang überleben, bevor jemand merkt, dass die Ecken falsch sind.

Wandle die Maske dann in einen Tile-Index um. Es gibt zwei Wege: eine vollständige Lookup-Tabelle mit 256 Einträgen, die trivial zu generieren und leicht zu debuggen ist, weil du die Zeile ausgeben kannst, oder eine Tabelle mit 47 Einträgen plus eine Symmetriefunktion. Nimm die vollständige Tabelle, es sei denn, das Ziel ist speicherbeschränkt. Sie entfernt eine ganze Klasse von Ecken-Fehlern.

Autotile-Fehlermodi, die man kennen sollte, bevor man eines verdrahtet

Nähte an Kartenrändern entstehen durch inkonsistente Behandlung von Zellen außerhalb der Grenzen. Entscheide einmal, ob die Welt außerhalb der Karte leer oder dasselbe Gelände ist, und wende diese Regel auf jedes Gelände an.

Der zweite häufige Fehler ist das Überschreiben. Autotiling schreibt die Zellen neu, die es besitzt, sodass jedes einzelne Tile, das du für ein bestimmtes Aussehen von Hand gemalt hast, im nächsten Durchgang verschwindet. Sperre entweder die Geländebene nach dem Autotiling oder speichere manuelle Überschreibungen in einer separaten Liste, die zuletzt ausgeführt wird.

Tilemap-Beispiele, die du öffnen und spielen kannst

Eine funktionierende Karte zu lesen lehrt mehr, als eine Beschreibung davon zu lesen. The Cyclops' Island ist eine spielbare Karte, die auf einem einzigen Gelände-Set mit einer separaten Kollisionsebene aufgebaut ist. Gehe die Küstenlinie entlang und beobachte, wo der Übergang von Sand zu Wasser die Tiles wechselt: Das sind die 47 Blob-Fälle im Einsatz.

Mini World ist das kleinere Beispiel. Öffne es, um den Ebenenstapel – Boden, Detail und Overlay – zu sehen und zu erkennen, wie wenige Detail-Tiles nötig sind, damit eine Karte fertig statt leer wirkt.

Der 3D Game Builder nimmt dasselbe Raster und extrudiert es. Jede Zelle wird zu einem Block, die Kollisionsebene wird zu vertikalen Wänden, und die y-Sortierung wird zu echter Tiefe in einer Three.js-Szene. Wenn deine 2D-Karte kohärent ist, kostet dich die 3D-Version fast nichts; wenn die Ebenen vermischt sind, legt die Extrusion das sofort offen.

• The Cyclops' IslandEine begehbare Karte, um autotiled Geländeränder bei Spielgeschwindigkeit statt im Editor-Zoom zu studieren.
• Mini WorldEin kleines Raster, um den Ebenenstapel ohne Scrollen zu untersuchen.
• Der 3D Game BuilderDieselbe Tilemap, zu Blöcken extrudiert, wobei die Kollisionsebene zu Geometrie und Tiefe real wird.

Tileset-Vorlage zum Herunterladen (PS / Aseprite-Raster)

Die Vorlage ist eine Zeichenhilfe, keine Pflicht. Sie ist eine transparente Leinwand mit Hilfslinien an jeder Zelle, einer ein Pixel großen Einzugsmarkierung für den sicheren Bereich und Indexnummern entlang der oberen Zeile und der linken Spalte, damit du sehen kannst, wo ein Index landet, während du zeichnest. Zeichne darüber und blende sie vor dem Export aus.

Passe die Vorlage an das Projekt an. Eine 512 mal 512 große Leinwand fasst ein Raster von 16 mal 16 mit 32 px großen Zellen. Bei 16 px großen Zellen fasst dieselbe Datei ein Raster von 32 mal 32, und du solltest die Deckkraft der Hilfslinien verringern, weil die Hilfslinien bei dieser Dichte die Grafik verdecken.

Betrete die Welt, zu der es gehört

Ein Sprite ist eine Figur 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 schriftlichen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ