Video zu Spritesheet Konverter (MP4, WebM, MOV)

Die meisten Video-zu-Sheet-Konverter greifen Frames in festen Abständen ab und hören dann auf. Für einen einmaligen Effekt reicht das. Bei einem Walk-Cycle bekommst du damit ein Sheet, das am Loop-Punkt ruckelt, einen grünen Rand um jede Outline und eine Figur, die zittert, weil jeder Frame einzeln zugeschnitten wurde. Dieses Tool löst alle drei Probleme für dich: Es findet die Periode der Bewegung, keyt den Hintergrund mit Kanten-Despill aus und schneidet alle Frames mit einem gemeinsamen Rahmen zu.

Anleitung: Video zu Spritesheet

Zieh eine MP4-, WebM- oder MOV-Datei hierher. Eine Figur, die vor einfarbig grünem, magentafarbenem, blauem oder weißem Hintergrund gefilmt oder gerendert wurde, liefert das sauberste Ergebnis. WebM mit Alphakanal behält in Chrome und Edge seine Transparenz.
Leg Anfang und Ende des gewünschten Teils fest (bis zu 30 Sekunden) sowie die Aufnahmegröße und klick dann auf Frames extrahieren. Der Clip läuft einmal durch, während jeder dekodierte Frame aufgenommen wird.
Wiederholt sich die Bewegung, findet das Tool einen vollständigen Zyklus und wählt ihn aus. Leg fest, wie viele Frames das Sheet haben soll; sie werden gleichmäßig über den Zyklus verteilt, und der Schluss-Frame fällt weg, damit der Loop nicht hakt.
Prüf den Hintergrund-Key. Auto liest die Hintergrundfarbe vom Rand des Frames ab. Liegt es daneben, klick auf den Hintergrund im Quell-Frame. Stell Toleranz, Kantenweichheit, Despill und das Schrumpfen um 1 px ein, während sich das Ergebnis live aktualisiert.
Leg die maximale Frame-Größe fest und aktivier Verpixeln, wenn du harte Kanten und eine gemeinsame Palette für alle Frames willst.
Exportier das PNG-Sheet mit Aseprite-, Phaser/TexturePacker-, Godot- oder CSS-Daten, ein animiertes GIF oder ein ZIP mit allem plus Einzel-Frames.

Was du bekommst

PNG-Spritesheet mit transparentem Hintergrund, als Raster angeordnet (automatische oder feste Spaltenzahl, optional mit Padding).
Frame-Daten als Aseprite JSON, Phaser/TexturePacker JSON (Hash oder Array), Godot 4 SpriteFrames .tres, CSS-Sprite-Klassen mit gestufter Keyframe-Animation oder Unity-Slicing-Einstellungen.
Animiertes GIF in jeder ganzzahligen Skalierung, transparent oder auf Schwarz/Weiß.
ZIP mit Sheet, GIF, allen Datenformaten und jedem Frame als eigenem PNG.

Zu welchen Engines es passt

Godot 4: Leg das PNG und die .tres in denselben Ordner und weise die SpriteFrames einem AnimatedSprite2D zu. Liegt das PNG woanders, pass den res://-Pfad in der ersten Zeile an.
Unity: Importier das PNG als Sprite (Multiple), stell den Filter Mode auf Point und slice mit Grid By Cell Size anhand der Werte aus der Unity-Einstellungsdatei.
Phaser 3 und PixiJS: Lade das PNG zusammen mit dem TexturePacker JSON (Hash) als Atlas. Das JSON listet außerdem die Frame-Namen der Animation in der richtigen Reihenfolge.
GameMaker, Defold, Construct, RPG Maker: Importier das PNG als Streifen oder Raster mit der Frame-Größe, die unter den Export-Einstellungen angezeigt wird.

Tipps aus der Spieleentwicklung damit

Film oder render vor einer Farbe, die an der Figur nicht vorkommt. Magenta ist bei grün gekleideten Helden am sichersten, Grün bei allem, was rot oder pink ist.
Lass Platz um die Figur herum. Ragt ein Arm oder Bein aus dem Bild, kann der gemeinsame Zuschnitt ihn nicht zurückholen.
Für Walk- und Run-Cycles lesen sich 8 Frames bei 10–12 fps bei 32–64 px gut. Idles kommen mit 4–6 Frames und Ping-Pong in der Sprite-Animationsvorschau aus.
Bleibt nach dem Keying ein Farbstich an den Outlines, erhöh die Kantenweichheit leicht und lass Despill an. Schalte 1 px schrumpfen nur ein, wenn ein farbiger Rand übrig bleibt.
Verpixle in der finalen Größe im Spiel. Einen 512-px-Frame mit gemeinsamer Palette auf 48 px zu verkleinern sieht viel besser aus, als ein schon verpixeltes Sheet zu skalieren.

Anwendungsfälle

Rotoskopiertes Referenzmaterial in Platzhalter-Animationen für einen Prototyp verwandeln.
Einen loopenden Zyklus aus dem Output eines KI-Videomodells holen, das deine Figur vor Greenscreen zeigt.
Einen Render aus Blender oder Spine in ein Spritesheet umwandeln, ohne eine Render-Pipeline aufzusetzen.
Als Video gerenderte Effekte (Rauch, Magie, Wasser) als Spritesheet ins Spiel bringen.

FAQ

Wird mein Video irgendwo hochgeladen?

Nein. Die Datei wird von deinem Browser gelesen und die Frames werden auf deinem Gerät verarbeitet. Nichts geht an einen Server, und das Tool funktioniert weiter, wenn du nach dem Laden der Seite offline gehst.

Welche Videoformate funktionieren?

Alles, was dein Browser abspielen kann: MP4 (H.264), WebM (VP8/VP9/AV1) und in den meisten Fällen MOV. HEVC/H.265-.mov-Dateien vom iPhone lassen sich nur in Safari und manchen Chrome-Builds dekodieren. Öffnet sich eine Datei nicht, wandle sie zuerst in H.264-MP4 um.

Wie funktioniert die Loop-Erkennung?

Jeder aufgenommene Frame wird auf eine winzige Silhouette des Motivs reduziert. Dann misst das Tool für jedes mögliche N, wie ähnlich jeder Frame dem Frame N Schritte später ist, findet die Periode, nach der sich die Bewegung wiederholt, und wählt den Zyklus, dessen erster und letzter Frame am besten zusammenpassen. Ist kein Versatz klar besser als die anderen, behandelt es den Clip als einmalige Aktion und nutzt den ganzen Bereich.

Kann es einen transparenten Hintergrund aus dem Video übernehmen?

Ja, in Chrome und Edge, die den Alphakanal von VP8/VP9-WebM-Dateien dekodieren. Wähl unter Hintergrund die Option Behalten, damit nichts weiter entfernt wird. Andere Browser zeigen solche Videos auf Schwarz, dort solltest du sie stattdessen keyen.

Wie viele Frames schafft es?

Bis zu 30 Sekunden pro Aufnahme. Die Frames liegen in der gewählten Aufnahmegröße im Speicher, und das Tool begrenzt die Gesamtmenge auf etwa 350 MB, daher brechen lange Clips mit großer Aufnahmegröße früher ab. Für Sprites reichen 256–512 px Aufnahmegröße völlig.

Warum sehen meine Frames bei kleiner Größe unscharf aus?

Beim Verkleinern eines Video-Frames werden Pixel gemittelt, wodurch Kanten weich werden. Aktivier Verpixeln, um das Ergebnis auf hartes Alpha und eine gemeinsame Palette zu bringen; so bekommst du in der finalen Größe knackige Pixel-Art-Kanten.

Kann ich ein Spritesheet bekommen, ohne etwas zu filmen?

Ja. Der KI-Generator auf dieser Seite zeichnet deine Figur, animiert sie mit Bewegungen aus einer Bibliothek und exportiert in dieselben Formate wie dieses Tool.