Ein Sprite-Sheet in ein sauber wiederholtes GIF umwandeln

Ein Sheet voller Posen ist noch keine Animation. Die Zellen müssen in der richtigen Größe ausgeschnitten, in der richtigen Reihenfolge abgespielt und zeitlich so abgestimmt werden, dass sich die Schleife natürlich schließt. Ein GIF bringt eine weitere Einschränkung mit sich: Es kann nicht alle Farb- und Transparenzdetails deiner ursprünglichen PNGs erhalten.

Raster vor dem Hochladen prüfen

Bei einem Sprite-Sheet mit 256 × 128 Pixeln, vier Spalten und zwei Reihen hat jede Zelle 64 × 64 Pixel. ImageMint liest Zellen von links nach rechts und dann von oben nach unten. Enthält das Sprite-Sheet Abstände, ungleichmäßige Zellen oder eine letzte Reihe mit Leerraum, kann ein direkter Zeilen-und-Spalten-Schnitt Teile eines Nachbarn oder eine leere Pose enthalten. Schneide solche Einzelbilder vorher aus mit dem Sprite-Sheet-Schneidewerkzeug und nutze stattdessen die Option für einzelne Bilder.

Gib jeder Pose dieselbe Arbeitsflächengröße und denselben Ankerpunkt. Eine gehende Figur sollte nicht um ein Pixel nach oben springen, weil ein Einzelbild enger beschnitten wurde. Eine falsche Ausrichtung erscheint in der Vorschau als Hüpfen; eine Änderung der Wiedergabegeschwindigkeit behebt das nicht.

Acht Gehposen eines Pixel-Art-Abenteurers mit rotem Schal, auf einem Sprite-Sheet angeordnet und als wiederholte Animation dargestellt.
Eine illustrierte Sequenz aus acht Posen. Gehe die Zellen der Reihe nach durch und prüfe, ob die letzte Pose wieder in die erste übergehen kann. Das Bild erklärt den Ablauf und dient nicht als herunterladbarer Atlas. Bild in voller Größe öffnen

Eine Schleife mit acht Einzelbildern erstellen und testen

  1. Auswählen Option B für ein Sheet mit gleich großen Zellen. Gib vor dem Laden zwei Zeilen und vier Spalten ein. Hast du bereits acht nummerierte PNGs, nutze Option A stattdessen.
  2. Öffne die Leiste für die Einzelbildreihenfolge und klicke dich durch alle acht Posen. Verschiebe falsch einsortierte Posen mit den Pfeiltasten nach vorne oder hinten. Das letzte Einzelbild sollte natürlich zum ersten überleiten. Füge am Ende keine Kopie der ersten Pose ein, es sei denn, du möchtest bewusst eine Haltepause.
  3. Spiele die Animation zum ersten Test mit 8 FPS ab. Acht Einzelbilder bei 8 FPS benötigen eine Sekunde pro Durchlauf; bei 16 FPS sind dieselben Zeichnungen in einer halben Sekunde durchlaufen. Beurteile die Füße und den Körperschwerpunkt der Figur, statt eine bestimmte FPS-Zahl als allgemein richtig anzusehen.
  4. Nutze Schleife bei einer Leerlauf- oder Gehanimation. Lass sie bei einem einmaligen Effekt wie einer Trefferreaktion ausgeschaltet. Exportiere erst, wenn die Browservorschau die gewünschte Reihenfolge und den gewünschten Rhythmus zeigt.

Wissen, was GIF verändert

GIF hat eine begrenzte Farbpalette und im Wesentlichen nur transparente oder undurchsichtige Pixel. PNG und WebP können dagegen weichere halbtransparente Kanten erhalten. Feine Schatten oder weiche Kantenglättung können nach dem Export härter aussehen. Besonders auffällig ist das bei Sprites mit Leuchteffekten, durchscheinendem Rauch oder feinen Farbabstufungen. Vergleiche das heruntergeladene GIF mit der PNG-Vorschau auf hellen und dunklen Hintergründen.

Der Exporter verwendet für jedes Einzelbild dieselbe Verzögerung anhand deiner FPS-Einstellung, auf 10 ms gerundet. Er speichert keine individuelle Haltezeit für eine bestimmte Pose. Füge bewusst ein doppeltes Einzelbild hinzu, um eine längere Pause zu simulieren, oder bearbeite das Timing anschließend pro Einzelbild in einem speziellen Animationswerkzeug. Bewahre deine ursprünglichen Einzelbilder auf, wenn du verlustfreie Spielgrafiken brauchst.

SymptomWahrscheinliche UrsacheNächste Prüfung
Figur hüpftUneinheitliche Einzelbild-Arbeitsfläche oder AnkerpunkteRichte die Ausgangseinzelbilder vor dem Export aus.
Teile zweier Posen in einer ZelleFalsche Zeilen-/Spaltenanzahl oder Sheet mit RändernPrüfe die Sheet-Abmessungen und schneide separat.
Schleife springt am EndeLetzte Pose geht nicht in die erste überOrdne die zusätzliche Endpose neu an oder entferne sie.
Kanten sehen rau ausGIF-Grenzen für Farben und TransparenzBehalte PNGs für Produktionsressourcen.

Der GIF-Export ist auf 1024 Pixel pro Seite und insgesamt 20 Millionen Einzelbildpixel begrenzt. Überschreitet ein ansonsten gültiges Sheet diese Grenzen, verkleinere es oder exportiere weniger Einzelbilder. Die Animationsvorschau kann dir weiterhin bei der Timing-Diagnose helfen, bevor du einen kleineren Export wählst.

Ausrichtung anhand eines festen Bezugspunkts testen

Wähle vor dem Export einen Punkt, der stabil bleiben soll: den aufgesetzten Fuß in einer Ruheanimation, die Mitte eines rotierenden Symbols oder den Griff eines schwingenden Gegenstands. Gehe die Vorschaubilder durch und vergleiche diesen Punkt mit dem Einzelbildrand. Wenn unterschiedlich große Bilder hinzugefügt werden, zentriert der GIF-Exporter sie auf der größten Arbeitsfläche. Er richtet keinen ausgewählten Fuß oder Griff aus. Setze kleinere Zuschnitte vor dem Import wieder auf eine gemeinsame Arbeitsfläche.

Unterscheide bei einem Gehzyklus beabsichtigte Körperbewegung von einem Zuschnittfehler. Ein Kopf kann sich heben und senken, während ein aufgesetzter Fuß am Boden bleibt. Wenn du jede Pose so verschiebst, dass ihre Oberkante übereinstimmt, geht dieser Unterschied verloren und der Fuß gleitet. Verwende die beabsichtigte Grundlinie der Grafik, nicht den engsten Begrenzungsrahmen.

Die heruntergeladene Schleife prüfen, nicht nur die Browservorschau

Eine Schleife mit acht Einzelbildern bei 8 FPS wird in der Vorschau mit 125 ms pro Pose abgespielt. Der GIF-Exporter rundet auf 130 ms, sodass die Dateischleife 1.04 Sekunden dauert. Bei 16 FPS schreibt er 60 ms, wodurch die Schleife 0.48 Sekunden dauert. Diese Unterschiede können wichtig sein, wenn du eine Animation mit Musik oder einem anderen zeitgesteuerten Effekt vergleichst. Ein GIF ist keine Masterdatei für präzises Timing.

  1. Öffne das GIF erneut und sieh dir mehrere vollständige Schleifen an. Ein Sprung vom letzten zum ersten Einzelbild fällt nach mehreren Wiederholungen leichter auf.
  2. Prüfe dieselbe Ausgabe auf hellen und dunklen Hintergründen, besonders an teilweise transparenten Kanten.
  3. Halte das ursprüngliche Sprite-Sheet, Zeilen-/Spalteneinstellungen und gewählte FPS in einer Projektnotiz fest. Das GIF allein ist kein bearbeitbares Animationsprojekt.
Bereit zum Teilen: korrekte Einzelbildanzahl, stabiler Bezugspunkt, gezielter Schleifenübergang, akzeptable GIF-Kanten und eine gespeicherte verlustfreie Quelle. Ist das Ziel eine Spiel-Engine, liefere die ursprünglichen Einzelbilder statt des GIFs aus.

Arbeitsablauf ausprobieren

Lade Sprite-Sheets mit gleich großen Zellen oder separate Einzelbilder, ordne sie neu, prüfe das Timing in der Vorschau und lade ein animiertes GIF herunter.

Einzelbilder ansehen und GIF exportieren →