Ein ungleichmäßiges KI-generiertes Sprite-Sheet ausschneiden

Warum KI-Sprite-Sheets nie auf einem perfekten Raster liegen

Ein herkömmliches Sprite-Sheet wird mit einem Werkzeug erstellt. Ein Künstler zeichnet Einzelbilder in einer festen Zellgröße, und ein Exporter ordnet sie mit exakten Pixelversätzen an. Jede Zelle ist identisch, jedes Sprite liegt in einem bekannten Rahmen, und das Ausschneiden ist reine Rechenarbeit.

Bildgeneratoren funktionieren nicht so. Diffusionsmodelle wie DALL·E, Midjourney und Stable Diffusion erzeugen ein zusammenhängendes Bild. Wenn du „ein Sprite-Sheet eines gehenden Ritters, 4x4-Raster“ verlangst, erzeugt das Modell etwas, das sieht aus wie ein Sprite-Sheet, weil es Tausende davon gesehen hat. Es imitiert den visuellen Stil eines Rasters und berechnet keine Zellgrenzen. Nichts im Generierungsprozess erzwingt, dass Zeile drei exakt 384 Pixel weiter unten beginnt.

Die praktischen Folgen sind eindeutig:

• Abweichende Abstände. Die Abstände zwischen Sprites schwanken um wenige bis einige Dutzend Pixel. Die Abweichung summiert sich meist von links nach rechts und von oben nach unten. Deshalb sind die Einzelbilder unten rechts am stärksten betroffen.
• Uneinheitliche Sprite-Größen. Eine Figur mitten im Schritt ist breiter als eine stillstehende. Das Modell zeichnet jede Pose in der Größe, die passend erscheint, statt sie in einen einheitlichen Rahmen zu skalieren.
• Nicht mittig ausgerichteter Inhalt. Selbst bei ungefähr gleichmäßigen Zellen ist das Sprite darin selten zentriert. Deshalb erzeugt auch ein korrekter Rasterschnitt Einzelbilder, die bei der Wiedergabe zittern.
• Fehlende oder zusammengeführte Einzelbilder. Manchmal erhältst du fünfzehn Sprites in einem 4x4-Layout oder zwei überlappende Posen, die wie ein einziger Fleck wirken.
• Ungerade Abmessungen der Arbeitsfläche. Eine Ausgabe mit 1024x1024 Pixeln ergibt bei drei Spalten 341.33 Pixel pro Spalte. Irgendwo muss gerundet werden, und Rundungsfehler summieren sich.

Warum Zerschneiden mit festem Raster scheitert

Das Schneiden mit festem Raster geht von einer Annahme aus: Das Bild besteht aus gleich großen Rasterzellen. Es teilt die Breite durch die Spaltenzahl, die Höhe durch die Zeilenzahl und schneidet. Trifft die Annahme zu, ist das perfekt und schnell. Trifft sie nicht zu, ist der Fehler kein zufälliges, ignorierbares Rauschen. Jeder Schnitt liegt an der falschen Stelle, und die Fehler sind genau dort sichtbar, wo es für Animationen am wichtigsten ist.

Ein oben um vier Pixel abgeschnittenes Einzelbild ist nicht nur ein kosmetisches Problem. In einer Spiele-Engine werden die Einzelbilder am selben Ankerpunkt gezeichnet. Sitzt der Inhalt eines Sprites im zweiten Bild vier Pixel tiefer als im ersten, hüpft es bei der Wiedergabe sichtbar. Spieler nehmen das als Fehler wahr, auch wenn sie ihn nicht benennen können. Die nachträgliche manuelle Korrektur Bild für Bild kostet mehr Zeit, als von Anfang an richtig auszuschneiden.

Die Lösung: nach Inhalt schneiden, nicht nach Koordinaten

Wenn das Raster nicht erkennen lässt, wo die Sprites liegen, können es die Pixel. Auf einem Sprite-Sheet mit transparentem Hintergrund gehört jedes Pixel entweder zu einem Sprite (Alpha über null) oder zum Hintergrund (Alpha null). Dieser eine Unterschied genügt, um die Sprites ohne vorherige Kenntnis des Layouts zu finden.

Wie inhaltsbasierte Erkennung funktioniert

1. Prüfe, ob der Hintergrund transparent ist. Prüfe die Eckpixel. Sind sie vollständig transparent, eignet sich das Sheet möglicherweise für die automatische Erkennung. Sind sie weiß oder einfarbig, muss zuerst der Hintergrund entfernt werden.
2. Finde leere Zeilen und Spalten. Durchsuche das Bild und erfasse, welche Pixelzeilen überhaupt keine deckenden Pixel enthalten. Tue dasselbe für die Spalten. Diese leeren Streifen sind die Zwischenräume zwischen Sprites, unabhängig davon, wo sie liegen.
3. Schneide in der Mitte jedes Zwischenraums. Ein Zwischenraum ist ein Bereich, keine Linie. Ein Schnitt durch seine Mitte lässt beiden benachbarten Sprites möglichst viel Platz und toleriert auch ein oder zwei vereinzelte geglättete Pixel.
4. Beschneide jedes Teil auf sein eigenes Begrenzungsrechteck. Sobald ein Teil isoliert ist, schneide es auf das kleinste Rechteck zu, das alle deckenden Pixel enthält. Damit entfernst du die ungleichmäßigen Ränder, durch die die Zellen uneinheitlich wirkten.
5. Prüfe das Ergebnis und wiederhole den Vorgang. Nach dem ersten Durchgang bleiben oft Probleme: Ein Ausschnitt enthält noch zwei Sprites, weil sie sich berühren, oder hat deutlich mehr Leerraum als seine Nachbarn. Wenn du die Ausgabe erneut analysierst und weiter unterteilst oder neu beschneidest, lassen sich die meisten dieser Probleme beheben.

Das erledigt der Magic Slice Tab in unserem Sprite-Sheet-Schneidewerkzeug tut. Es erkennt transparente Hintergründe, findet Sprite-Grenzen anhand des Alphakanals und führt anschließend bis zu drei Verfeinerungsdurchgänge aus. Dabei wird jeder erzeugte Ausschnitt auf übermäßige Ränder oder mehrere Sprites geprüft und bei Bedarf neu geschnitten. Eine niedrige, mittlere oder hohe Empfindlichkeit bestimmt, wie aggressiv Grenzen erkannt werden. Erhöhe sie, wenn Sprites sich fast berühren. Verringere sie, wenn ein einzelner Sprite mit abgetrennten Teilen wie einem schwebenden Schild oder Zaubereffekt auseinandergeteilt wird.

Auf dem Sprite-Sheet erkannte Grenzen

Sechzehn Dateien, jeweils beschnitten

Wenn dein Sprite-Sheet einen undurchsichtigen Hintergrund hat

Die Inhaltserkennung benötigt Transparenz. Hat dein Sprite-Sheet einen einfarbig weißen, schwarzen oder magentafarbenen Hintergrund, entferne ihn zuerst mit einem Hintergrundentferner. Unseren findest du unter /remove-bg und nimmt Farbproben aus den Eckpixeln, entfernt jeden ausreichend ähnlichen Pixel und exportiert anschließend ein transparentes PNG. Erledige das vor dem Zerschneiden, nicht danach: Den Hintergrund einmal auf einem Sheet zu entfernen bedeutet eine Operation. Bei sechzehn Einzelbildern gibt es sechzehn Gelegenheiten für uneinheitliche Ergebnisse.

Manuelle Rasterlinien: die Rückfalllösung, die immer funktioniert

Bei manchen Sprite-Sheets scheitert die automatische Erkennung. Es lohnt sich zu wissen, wann: Überlappende oder sich berührende Sprites lassen sich durch die Suche nach leeren Streifen nicht trennen, weil kein leerer Streifen vorhanden ist. Sprite-Sheets mit einem Schlagschatten oder Leuchteffekt über die gesamte Arbeitsfläche haben nirgends vollständig transparente Zeilen. Besteht eine einzelne Figur aus getrennten Teilen, wird das Sprite-Sheet zu stark unterteilt.

Ziehe in all diesen Fällen die Linien selbst. Die Manuell & Vorlagen Tab beginnt mit einem vorgegebenen Raster zwischen 2x2 und 6x6 oder einer eigenen Zeilen- und Spaltenanzahl bis zu 20x20. Anschließend kannst du jede einzelne Rasterlinie an ihre tatsächliche Position verschieben. Der Arbeitsablauf ist:

1. Wähle die Vorlage, die dem vorgesehenen Layout am nächsten kommt – 4x4 für ein Sheet mit sechzehn Einzelbildern, auch wenn die tatsächlichen Abstände abweichen.
2. Ziehe jede vertikale Linie in den Zwischenraum links oder rechts davon. Arbeite von links nach rechts, damit du dich immer an einer bereits korrigierten Linie orientierst.
3. Mache dasselbe mit den horizontalen Linien, von oben nach unten.
4. Zoome an das knappste Einzelbild heran, meist die breiteste Pose, und prüfe, dass keine Linie es durchquert.
5. Exportiere das Ergebnis. PNG erhält Transparenz und ist die richtige Wahl für Sprites. JPG und WebP sind ebenfalls verfügbar, aber JPG verwirft den Alphakanal vollständig.

Manuelles Anpassen klingt langsam, ist es aber nicht: Ein Sprite-Sheet mit sechzehn Einzelbildern hat insgesamt sechs innere Linien. Du ziehst also sechsmal, statt sechzehn Zuschnitte zu machen. Gegenüber dem Öffnen im Bildeditor und einzelnen Auswählen jedes Einzelbilds ist das erheblich schneller.

Einzelbilder für eine Spiel-Engine vorbereiten

Sobald du einzelne PNGs hast, gibt es zwei Wege in eine Engine: Importiere sie als einzelne Einzelbilder oder packe sie wieder in ein sauberes, einheitliches Sheet. Welche Variante du brauchst, hängt von der Engine und dem Projekt ab.

Unity

Ziehe bei einzelnen Bildern die PNGs ins Projekt und stelle Texture Type auf Sprite (2D and UI), Sprite Mode auf Single. Stelle Filter Mode auf Point (no filter) und Compression auf None für Pixel-Art. Bilineare Filterung lässt einen 32x32-Sprite matschig aussehen. Stelle Pixels Per Unit passend zu deinem Raster ein, wähle dann alle Einzelbilder und ziehe sie auf ein GameObject. Unity erstellt dadurch automatisch einen Animation Clip.

Verwende bei einem neu gepackten Sprite-Sheet Sprite Mode Multiple und den Sprite Editor. Grid By Cell Size funktioniert nur, wenn dein neu gepacktes Sheet wirklich einheitlich ist. Genau das liefert das erneute Packen, und genau das fehlte dem ursprünglichen KI-Sheet.

Godot

Füge in Godot 4 ein AnimatedSprite2D, erstelle eine neue SpriteFrames Ressource und nutze Add Frames from Sprite Sheet für ein einheitliches Sheet oder Add Frames from File(s) um deine einzelnen PNGs direkt zu laden. Separate Einzelbilder sind hier einfacher, weil der Sprite-Sheet-Importer gleichmäßige Zellen erwartet. Setze bei Pixel-Art den Texturfilter auf Nearest, entweder pro Node unter CanvasItem → Texture → Filter oder global über die rendering/textures/canvas_textures/default_texture_filter Projekteinstellung.

Verankerung und Ausrichtung

Diesen Schritt überspringen viele und verbringen danach einen Nachmittag mit Fehlersuche. Hast du jedes Einzelbild auf sein eigenes Begrenzungsrechteck beschnitten, haben die Einzelbilder unterschiedliche Abmessungen. Die Engine zentriert jedes am selben Ursprung. Eine Figur, deren Arm im zweiten Einzelbild ausgestreckt ist, wirkt dadurch nach hinten verschoben, weil die zusätzliche Breite die visuelle Mitte verändert.

Die Lösung ist, jedes Einzelbild wieder auf eine gemeinsame Größe aufzufüllen und den Inhalt einheitlich zu positionieren – üblicherweise horizontal mittig und vertikal unten, damit die Füße an ihrem Platz bleiben. Bestimme die gemeinsame Größe anhand des größten Einzelbilds, runde auf einen praktischen Wert auf und fülle den Rest transparent auf. Erst beschneiden und dann Ränder ergänzen klingt vielleicht widersprüchlich, ist es aber nicht: Der Beschnitt entfernt die willkürlichen Ränder des Generators, und danach ergänzt du kontrollierte Ränder.

Problemlösung

Die Erkennung hat viel zu viele Teile gefunden

Die Empfindlichkeit ist zu hoch oder deine Sprites haben abgetrennte Elemente. Verringere die Empfindlichkeit, damit kleine transparente Lücken innerhalb eines Sprites nicht als Zwischenräume behandelt werden. Hilft das nicht, wechsle zu manuellen Linien. Eine Figur mit einem separat gehaltenen Gegenstand wird bei einer Alpha-Abtastung immer wie zwei Sprites aussehen.

Die Erkennung hat zu wenige Teile gefunden

Sprites berühren sich, oder ein schwacher Leuchteffekt überbrückt die Lücke. Erhöhe zuerst die Empfindlichkeit. Überlappen die Sprites tatsächlich, kann keine automatische Methode sie trennen. Generiere das Sheet erneut und verlange ausdrücklich freie Zwischenräume zwischen Einzelbildern oder schneide manuell.

1. Empfindlichkeit zu niedrig – wenige Grenzen erkannt

2. Acht Dateien statt der erwarteten zwanzig

3. Ursache: keine freie Pixelspalte dazwischen

4. Empfindlichkeit erhöht – vier Dateien

Einzelbilder haben einen schwachen Rand des alten Hintergrunds

Die Hintergrundentfernung hat halbtransparente Randpixel hinterlassen, die von der alten Hintergrundfarbe eingefärbt sind. Sieh dir unseren Leitfaden an zu transparente PNGs und weiße Kanten für die Lösungen.

Die Animation zittert in der Engine

Fast immer ein Problem mit dem Ankerpunkt statt mit dem Ausschneiden. Prüfe, ob alle Einzelbilder dieselben Abmessungen und dieselbe Ausrichtungskonvention haben, und kontrolliere den Sprite-Pivot in der Engine.

Nichts funktioniert, das Sprite-Sheet ist völlig durcheinander

Eine erneute Generierung ist günstig. Folgende Prompt-Vorgaben verbessern das Ergebnis zuverlässig: Verlange ausdrücklich einen transparenten Hintergrund, gleichmäßige Abstände und eine einheitliche Figurengröße. Fordere weniger Einzelbilder pro Sheet an – ein 3x3 ist deutlich wahrscheinlicher brauchbar als ein 6x6 – und generiere einzelne Posen separat, wenn die Animation wichtiger ist als die Bequemlichkeit.

Häufig gestellte Fragen