Ein Tileset mit Rändern und Zwischenabständen ohne verschobene Kacheln aufteilen

Die erste Kachel sieht richtig aus, aber jede weitere Kachel entlang des Sheets enthält mehr von ihrer Nachbarkachel. Dieses Muster bedeutet normalerweise, dass der Abstand als Teil der Kachel mitgezählt oder vollständig ignoriert wurde. Miss drei unabhängige Werte, bevor du das Sheet zerschneidest.

Kachelgröße, Rand und Zwischenraum unabhängig messen

Kachelbreite und -höhe beschreiben die Pixel, die jedes Ausgabebild enthalten soll. Der Außenrand bezeichnet den gleich breiten Rand auf allen vier Seiten. Der Kachelabstand bezeichnet die Lücke zwischen benachbarten Kacheln. Bei einer 32-px-Kachel mit anschließendem 1-px-Abstand beginnt der nächste Zuschnitt 33 px weiter, exportiert wird aber weiterhin ein 32-px-Bild.

Prüfe die Quelle in Originalgröße in einem Editor mit Pixelkoordinaten. Schätze nicht anhand eines skalierten Browser-Vorschaubilds. Dieser Teiler hat einen Randwert und einen Abstandswert. Asymmetrische Ränder oder unterschiedliche horizontale und vertikale Lücken erfordern deshalb Vorverarbeitung oder manuelles Ausschneiden.

Eine Quelle mit 135 × 102 durcharbeiten

  1. Lade ein PNG oder WebP mit vier Spalten und drei Zeilen aus 32 × 32 großen Kacheln.
  2. Setze Kachelbreite auf 32, Kachelhöhe auf 32, Außenrand auf 2 und Kachelabstand auf 1.
  3. Lasse Überspringen und Duplikaterkennung für den ersten Test deaktiviert. Die erwartete Ausgabe sind dann zwölf Dateien.
  4. Extrahiere, prüfe die Vorschau und öffne dann die ZIP-Datei, um die letzte Spalte und die unterste Reihe zu kontrollieren. Die Vorschau zeigt nur die ersten sechzehn exportierten Kacheln.

Die Breite beträgt 2 × 2 + 4 × 32 + 3 × 1 = 135. Die Höhe beträgt 2 × 2 + 3 × 32 + 2 × 1 = 102. Die X-Positionen der Zuschnitte sind 2, 35, 68 und 101; die Y-Positionen sind 2, 35 und 68. Mit diesen Zahlen kannst du die Einstellungen konkret prüfen, ohne zu raten.

Ein Kachelset mit Gras, Stein, Erde und Wasser sowie Pfeilen, die Kachelinhalt, Außenrand und Zwischenabstand unterscheiden.
Die Kachel ist das eigentliche Bildmotiv. Der äußere Rand umgibt das gesamte Raster, während die Zwischenabstände die Zellen voneinander trennen. Die dargestellten Texturen machen diese Grenzen sichtbar. Verwende die im Text durchgerechneten Maße, nicht den Maßstab dieser Illustration. Bild in voller Größe öffnen

Fehlermuster erkennen, bevor du Einstellungen änderst

MusterWahrscheinliches MessproblemPrüfen
Alle Kacheln gleichmäßig verschobenFalscher AußenrandKoordinate der ersten Kachel
Zunehmende horizontale VerschiebungFalsche Breite oder falscher ZwischenabstandAbstand zwischen Spaltenanfängen
Zunehmende vertikale VerschiebungFalsche Höhe oder falscher ZwischenabstandAbstand zwischen Zeilenanfängen
Letzte Reihe oder Spalte fehltUnvollständige SchlusszellenTatsächliche Bildabmessungen und Rand

Es werden nur vollständige Zellen extrahiert. Wenn du einen größeren Rand eingibst, als tatsächlich vorhanden ist, kann die letzte Kachel außerhalb des zulässigen Rasters liegen. Das Werkzeug streckt keinen unvollständigen Rest, um daraus eine vollständige Kachel zu machen. Korrigiere die Maße oder bereite die Quelle entsprechend vor, statt den Fehler durch eine andere, unpassende Abmessung auszugleichen.

Überspringen und Duplikaterkennung erst bei richtigem Raster aktivieren

Eine übersprungene leere Zelle hat überall Alpha 0. Ein einziges schwaches Pixel reicht aus, damit sie erhalten bleibt. Die Duplikaterkennung prüft die exakte RGBA-Gleichheit, einschließlich der unter Alpha 0 verborgenen RGB-Werte. Ähnliche Texturen werden nicht zusammengefasst, und zwei optisch identische transparente Bilder können getrennt bleiben.

Nach dem Aktivieren dieser Optionen müssen Dateinummer und Nummer der Quellzelle nicht übereinstimmen. Behalte tilemap.json: Die Zellen darin erfassen Zeilen- und Spaltenpositionen, mit einer Kachel-ID für eine erhaltene Ressource oder null für eine übersprungene leere Zelle. Duplizierte Positionen können auf dieselbe ID verweisen. Das Manifest ist eine Übersicht dieser Extraktion, keine fertige Tilemap für eine Engine.

Zuschnittfehler von Nähten in der Engine unterscheiden

Wenn das exportierte PNG bereits den Rand einer Nachbarkachel enthält, korrigiere die Zuschnitteinstellungen. Sind die PNGs sauber, aber im Spiel erscheinen beim Bewegen der Kamera dünne Linien, prüfe Filterung, Skalierung, Texturabstand und Importkonfiguration der Engine. Saubere Kacheln mit beliebigen zusätzlichen Pixeln erneut auszuschneiden, verdeckt den Unterschied und kann die Grafik beschädigen.

Bereit zum Importieren: korrekte Quellabmessungen, saubere erste und letzte Zellen, bewusster Umgang mit Leerzellen, ein aufbewahrtes Manifest und eine enginespezifische Einrichtung für Kollisionen oder Autotiles. Der Teiler erstellt diese Spielregeln nicht.

Arbeitsablauf ausprobieren

Stelle Kachelbreite, Höhe, Außenrand und Zwischenabstand ein und exportiere anschließend PNG-Kacheln und ein Positionsmanifest.

Tileset-Teiler öffnen →