Ein Kachelset aus einem einzelnen Bild ausschneiden

Tileset im Vergleich zum Sprite-Sheet: warum die Anforderungen höher sind

Ein Sprite-Sheet enthält unabhängige Bilder. Ist ein Einzelbild eines Gehzyklus gegenüber dem nächsten um ein Pixel aus der Mitte verschoben, fällt das niemandem auf: Jedes Bild wird einzeln gezeichnet, und kleine Positionsabweichungen wirken wie natürliche Bewegung. Ein Kachelset ist anders. Jede Kachel wird in einem Raster Kante an Kante neben ihre Nachbarn gesetzt, immer wieder über ein ganzes Level hinweg. Eine Fehlpositionierung um ein Pixel bleibt nicht auf eine einzelne Kachel beschränkt. Sie wiederholt sich an jeder Naht, an der diese Kachel vorkommt. Bei gekachelten Boden- oder Wandtexturen kann ein falscher Schnitt dadurch Dutzende sichtbare Nähte verursachen.

Das ist die zentrale Gestaltungsvorgabe eines Tilesets: Nähte müssen unsichtbar sein. Dafür müssen Kanten pixelgenau sein. Deshalb braucht das Quellbild ein echtes, erkennbares Raster, bevor du etwas zerschneidest.

Eine Kachelgröße wählen

Wenn du Kacheln aus einer vorhandenen Ressource eines anderen extrahierst, legt die Grafik die Kachelgröße meist bereits fest. Zähle, wie oft ein wiederkehrendes Motiv – ein Ziegel, Grasbüschel oder eine Bodendiele – über die Bildbreite vorkommt, und teile entsprechend. Wenn du das Kachelset selbst aus einem Referenzbild oder generierten Textur-Sheet definierst, sind 16×16, 32×32 und 48×48 Pixel übliche Größen.

• 16×16 wirkt wie klassische Retro-Pixel-Art. Sie verzeiht wenig bei Details: Jede Kachel muss ihr Material wie Gras, Stein oder Wasser mit sehr wenigen Pixeln vermitteln. Das ist eine eigene gestalterische Fähigkeit.
• 32×32 ist die heute häufigste Voreinstellung. Genug Platz für Textur und Schattierung, ohne Subpixelgenauigkeit für eine klare Darstellung bei normalen Zoomstufen zu benötigen.
• 48×48 und größer eignen sich für Spiele mit größeren Bildschirmkacheln oder malerischeren Grafiken, bei denen sichtbare Texturdetails statt eines flächigen Pixel-Art-Looks gewünscht sind.

Wie du dich auch entscheidest, bleibe im gesamten Tileset einheitlich und idealerweise in allen Tilesets des Projekts. Unterschiedliche Kachelgrößen zwingen dich entweder, Grafiken zur Laufzeit zu skalieren – wodurch genau die Unschärfeprobleme zurückkehren, die Pixel-Art vermeiden soll –, oder mehrere separate Rastersysteme im Level-Editor zu pflegen.

Den Versatz finden, wenn das Raster nicht bei null beginnt

Dieser Schritt führt oft zu Problemen. Du kennst die Kachelgröße von 32px und schneidest deshalb bei 0, 32, 64, 96… Die Kacheln sind danach halbiert, und eine Wandtextur besteht in einer Zeile überwiegend aus Boden und in der nächsten überwiegend aus Wand. Das tatsächliche Tileset-Raster beginnt nicht in der oberen linken Bildecke. Es ist um einige Pixel versetzt, oft weil das Quellbild einen Rahmen, einen übrigen Rand aus einer Bildschirmaufnahme oder beim Export ergänzte Ränder enthält.

Um den Versatz zu finden, zoome auf Pixelebene ins Bild und suche ein wiederkehrendes Merkmal: eine Mörtelfuge zwischen Ziegeln, einen Schatten am unteren Rand einer Graskachel oder einen Lichtreflex entlang einer oberen Kachelkante. Miss die Pixelkoordinate, an der das Merkmal erstmals erscheint, und prüfe dann, ob es sich wiederholt alle N Pixel, bei denen N deine Kachelgröße. Liegt die erste Mörtelfuge bei x = 6 und die nächste bei x = 38, beträgt dein Versatz 6 Pixel, und die vermutete Kachelgröße von 32 ist bestätigt. Bestimme den Versatz für beide Achsen unabhängig. Horizontaler und vertikaler Versatz hängen nicht zusammen, und das Bild kann problemlos nur einen davon haben.

Kacheln ohne Abstand und das Problem auslaufender Farben

Sprite-Sheets haben oft transparente Zwischenräume zwischen Einzelbildern. Bei Tilesets ist das meist nicht so: Kacheln stoßen ohne Abstand direkt aneinander, damit sie nach dem Platzieren nahtlos zusammenpassen. Sobald das Tileset in einer Engine ist, hat das einen Nebeneffekt: auslaufende Texturfarben, bei denen ein schmaler Streifen der Nachbarkachel am Rand der platzierten Kachel erscheint.

Farbübergriffe entstehen durch die Art, wie GPUs Texturen abtasten. Wird eine Kachel nicht exakt im Pixelverhältnis 1:1 gezeichnet – etwa leicht skaliert oder bei einer Kameraposition zwischen Pixeln –, tastet der Renderer eine Mischung aus dem Randpixel der Kachel und dem direkt benachbarten Inhalt der Quelltextur ab, also der nächsten Kachel. Die Lösung ist nicht, eine Lücke ins Ausgangsbild einzufügen, denn das würde die Kachelung zerstören. Verwende entweder Point-/Nearest-Filterung ohne Interpolation oder lass die Engine beim Packen beziehungsweise Importieren automatisch einen Rand von einem Pixel erweitern. Unitys Sprite Atlas und Godots TileSet-Importer bieten genau dafür eine Abstands- oder Randerweiterungsoption. Aktiviere sie für jedes Kachelset, das skaliert oder an nicht ganzzahligen Positionen bewegt wird.

Doppelte Kacheln entfernen

Nach dem Zerschneiden des gesamten Rasters gibt es häufig mehrere Kacheln, die pixelgenau oder nahezu identisch sind. Eine einfache Graskachel kann beispielsweise viermal auf einem Referenz-Sheet vorkommen, weil sie in der Vorlage für ein ausgewogenes Gesamtbild wiederholt wurde. Duplikate zu behalten ist nicht unbedingt falsch. Es bläht jedoch die Tileset-Datei auf, macht die Kachelpalette im Level-Editor unübersichtlicher und bedeutet, dass Änderungen an „der Graskachel“ später an mehreren Stellen vorgenommen werden müssen.

Eine einfache Möglichkeit, Duplikate zu finden, ohne Dutzende kleine Quadrate einzeln anzusehen: Berechne einen Hash aus den unverarbeiteten Pixeldaten jeder Kachel und vergleiche die Hashes. Kacheln mit identischem Hash sind pixelgleich und können bedenkenlos zusammengefasst werden. Beinahe-Duplikate – etwa eine Kachel mit einem anders eingefärbten Pixel, beispielsweise eine brennende statt einer erloschenen Fackel – haben unterschiedliche Hashes. Hier muss ein Mensch entscheiden, ob es sinnvoll unterschiedliche Kacheln oder Varianten sind, die bewusst getrennt bleiben sollen.

In eine Engine importieren

Unity: Tile Palette

Importiere das ausgeschnittene Kachelset als Sprite mit Sprite Mode auf Multiple. Schneide es im Sprite Editor mit Grid By Cell Size in deiner Kachelgröße und öffne dann Window → 2D → Tile Palette, erstelle eine neue Palette und ziehe die ausgeschnittenen Sprites hinein. Anschließend lassen sich die Kacheln direkt auf eine Tilemap-Komponente in der Szene malen. Wenn du die einzelnen Kachel-PNGs bereits außerhalb von Unity ausgeschnitten hast, kannst du den Schritt im Sprite Editor ganz überspringen und den PNG-Ordner direkt in eine Palette ziehen.

Godot: TileSet-Ressource

Erstelle eine TileSet-Ressource an einem TileMapLayer-Node und füge unter ihrer Atlas-Quelle dein ausgeschnittenes Kachelset-Bild mit der passenden Kachelgröße hinzu. Godots Importer bietet an der Atlas-Quelle außerdem die Einstellungen Separation und Margin. Sie decken Sprite-Sheets mit kleinen Zwischenräumen ab, statt des oben beschriebenen Layouts ohne Lücken. Hatte deine Quelle keine Zwischenräume und siehst du Farbübergriffe im Editor-Ansichtsfenster, aktiviere die Texturabstandsoption des Atlas. Sie dupliziert Randpixel intern, sodass die Abtastung nie eine benachbarte Kachel erreicht.

Eine sinnvolle Reihenfolge der Arbeitsschritte

1. Ermittle die Kachelgröße, indem du ein wiederkehrendes Merkmal über das Bild hinweg zählst.
2. Ermittle den x- und y-Versatz, indem du den tatsächlichen Anfang der ersten Kachel findest.
3. Schneide entlang dieses Rasters. Ein Browser-Werkzeug mit verschiebbaren Rasterlinien macht daraus einen visuellen, überprüfbaren Schritt statt einer blinden Rechenaufgabe.
4. Vergleiche Kachel-Hashes und fasse exakte Duplikate zusammen.
5. Importiere in deine Engine mit aktiviertem Abstand oder Randerweiterung, wenn die Kacheln jemals mit nicht ganzzahliger Skalierung oder Position dargestellt werden.

Häufig gestellte Fragen