Sprite-Animator: Sprite-Sheet-Animationen ansehen & exportieren

Ein Sprite-Animator ist ein Werkzeug, das ein Sprite-Sheet entgegennimmt — ein Raster aus Animationsframes, die in einem einzigen Bild gepackt sind — und es wiedergibt, damit du Timing, Abstände und Silhouette beurteilen kannst, bevor die Grafik überhaupt in die Nähe eines Spiels kommt. Der Sprite-Animator von Neta Studio liest das Sheet, schätzt Frame-Größe, Spaltenanzahl und Wiedergabereihenfolge aus den Bildmaßen und startet die Wiedergabe auf einer Canvas im Browser. Es wird nichts hochgeladen.

A still frame tells you nothing about a walk cycle. You need to see frame 3 against frame 4, the contact pose against the passing pose, and whether the whole thing drifts because one cell is a pixel off. The animator does that on load, then lets you fix the frame size, the order and the FPS by hand when the guess is wrong.

Preview a sprite sheet animation

Drop a PNG or WebP onto the canvas. The animator reads the intrinsic width and height, then infers a plausible grid: it factors the dimensions and looks for a small integer column count (2 through 16) that yields square-ish cells in common sprite sizes. A 512×512 sheet with 4 columns of 128px frames, a 384×256 sheet with 6 columns of 64px frames — both land on the right guess most of the time. A 300×300 sheet does not, because 300 doesn't divide cleanly into 16/32/64, so you'll set the frame size manually.

Playback runs on an HTML canvas with `imageSmoothingEnabled = false`, so pixels stay hard at integer scale. Scaling to 4× or 8× is nearest-neighbour, which is what you want for pixel art: a 32px frame shown at 8× is a 256px sprite on screen with every source pixel expanded into an 8×8 block. Bilinear smoothing would turn those into grey mush.

Because everything happens on the canvas, the file never leaves the machine. There is no upload, no queue, no account. You can drop a client's unreleased sheet in and it stays in the tab. The tradeoff is that very large sheets are bounded by browser memory — a 4096×4096 PNG is roughly 67MB decoded into RGBA, which is fine on desktop and tight on a low-end tablet.

Set frame size, order and FPS

Three settings decide what you actually see: frame size, playback order, and speed. Get any of them wrong and the animation looks like garbage for reasons that have nothing to do with the art.

Frame size is the width and height of one cell in pixels. The animator offers 16, 32, 64 and 128 as standard choices, plus a custom value. This must divide the sheet dimensions exactly. A 128px frame on a sheet that is 400px wide gives you 3.125 columns, which the renderer floors to 3 and leaves a 16px strip of unused pixels on the right — those pixels then show up as a sliver of the neighbouring frame in the last column. If your frames look sheared on the right edge, your frame size doesn't divide your sheet width.

Order is row-major or column-major. Row-major (the common default, and what most exporters produce) reads left to right, then wraps to the next row. Column-major reads top to bottom, then moves right. A walk sheet exported in columns but read as rows plays frame 1, then frame 5, then frame 9 — a stride that jumps a quarter of the animation each tick. The fix is one toggle, but you have to recognise the symptom: motion that skips.

FPS und `image_speed` sind zwei verschiedene Stellschrauben, die oft verwechselt werden. FPS gibt an, wie viele Frames der Player pro Sekunde weiterrückt. `image_speed` (der Begriff aus GameMaker, nach dem die Leute suchen) ist ein Multiplikator für die Animationsrate des Sprites relativ zur Room Speed; 1.0 bedeutet, dass das Sheet mit einem Frame pro Game Step abgespielt wird, 0.5 bedeutet jeder zweite Step. Im Browser-Animator stellst du die FPS direkt ein. Wenn du ein GameMaker-Sprite portierst und deine Figur mit doppelter Geschwindigkeit animiert, prüfe `image_speed`, bevor du das Sheet neu zuschneidest.

Laufzyklen, Idles und Angriffe

Drei Animationen tragen den Großteil der Lesbarkeit einer Figur, und jede kann auf eine eigene Weise scheitern. Keine von ihnen scheitert auf dieselbe Weise, weshalb ein Vorschau-Tool, das nur einen generischen Clip in Schleife abspielt, den Punkt verfehlt. Unten sind die Fehlerarten nach Animationstyp getrennt.

Die Regel für alle drei: in der finalen Spielgröße in der Vorschau prüfen, nicht hineingezoomt. Ein Lauf, der bei 8× lesbar ist, kollabiert oft bei 1×, weil die Beinhebung 2 Pixel beträgt und der Kontrast zwischen gehobenem Fuß und Boden zu gering ist. Verkleinere die Vorschau auf die Größe, die der Spieler tatsächlich sieht, bevor du etwas freigibst.

Ein Vier-Richtungen-Lauf-Sheet ist üblicherweise geordnet als unten, links, rechts, oben — unten zur Kamera zeigend, oben von ihr weg, links und rechts als das horizontale Paar. Manche Exporter verwenden unten, oben, links, rechts. Wenn deine Figur moonwalkt, sobald du oben drückst, sind die Zeilen vertauscht und du spielst die untere Zeile für eine obere Eingabe ab. Das ist ein 2-Zeilen-Fix im Player, kein Neu-Export.

Für 8-Richtungen-Bewegung brauchst du Diagonalen: unten-links, unten-rechts, oben-links, oben-rechts. Mit vier horizontal gespiegelten Richtungen bekommst du günstig 4 Zeilen (links und rechts sind dieselbe Grafik gespiegelt, weshalb viele Sheets 4 Zeilen haben und nicht 8). Diagonale Bewegung mit nur 4 Richtungen zwingt die Engine, die nächstgelegene Blickrichtung zu wählen, was bei einer diagonalen Eingabe sichtbar springt. Wenn dein Spiel diagonale Bewegung unterstützt, plane 8 eigene Zeilen ein oder akzeptiere das Springen.

Frame-Anzahl: 6 oder 8 Frames pro Richtung sind bei 16–32px üblich. Bei 4 Frames wirkt ein Lauf ruckelig, ist aber bei kleinen Größen lesbar; bei 10 Frames wird der Abstand zwischen Kontakt- und Passing-Posen so eng, dass du Frame-genaues Timing brauchst, was ein Player mit gleichmäßiger FPS nicht ausdrücken kann. Der Browser-Animator spielt gleichmäßig ab, also baue dein Sheet mit gleichmäßigen Abständen, wenn du es hier in der Vorschau prüfen willst.

Der Idle ist die Animation, die der Spieler anstarrt, während nichts passiert, also trägt er das meiste Gewicht pro Frame. Die Standardstruktur ist eine Atemschleife: Brust hebt sich, Schultern steigen einen Pixel, das Gewicht verlagert sich, und zurück. Squash and Stretch ist das, was verhindert, dass es wie ein statischer Sprite aussieht, der angeschubst wird. Beim Downbeat komprimiere die Figur um ein oder zwei Pixel vertikal und verbreitere sie um einen; beim Upbeat umgekehrt.

Der häufige Fehler ist, das Squash zu übertreiben. Eine 32px-Figur, um 4px gestaucht, sind 12,5 % ihrer Höhe und wirken wie Wackelpudding. Ein Pixel vertikaler Streckung bei einem 32px-Sprite sind 3 % und wirken wie Atmen. Wenn dein Idle aussieht, als würde die Figur auf einem Trampolin hüpfen, hast du wahrscheinlich die ganze Zelle skaliert statt die Figur darin — der Frame hat seine Größe relativ zum Raster verändert.

Prüfe den Idle in der Vorschau mit derselben FPS, mit der du auslieferst. Ein Idle mit 6 FPS driftet; mit 12 FPS atmet er. Da ein langsamer Idle großteils dasselbe Bild mit kleinen Verschiebungen ist, ist der Schleifenpunkt das, was du eigentlich prüfst: Der letzte Frame muss sauber in den ersten übergehen, ohne Sprung in der Schulterposition.

Ein Angriff besteht aus drei Phasen mit ungleichem Timing, nicht aus einem gleichmäßigen Schlagabtausch. Die Anticipation zieht zurück — der Arm holt aus, der Körper spannt sich, oft 2–3 Frames gehalten oder verlangsamt. Der Impact dauert ein oder zwei Frames, der schnellste Teil, in dem die Waffe ihre volle Reichweite erreicht und die Pose am extremsten ist. Die Recovery ist die Rückkehr, und hier schneiden Anfänger zu früh. Ein 6-Frame-Angriff mit 2 Anticipation, 1 Impact, 3 Recovery ist lesbar; ein 6-Frame-Angriff gleichmäßig 2-2-2 aufgeteilt wirkt wie ein Stoß.

Da der Animator gleichmäßig abspielt, besteht der Trick darin, die Anticipation-Pose durch Duplizieren von Frames zu halten, statt das Frame-genaue Timing zu ändern. Zwei identische Anticipation-Frames ergeben das Halten. Ein Impact-Frame ergibt den Snap. Das ist dieselbe Technik, die in handgezeichneten Sheets verwendet wird, und sie übersteht einen Port auf jede Engine.

Cast-Animationen bringen ein zweites Problem mit sich: Der Effekt muss in einem bestimmten Frame erscheinen und verschwinden. Wenn dein Sheet das Projektil oder den Magiekreis bereits in den Frame eingebacken enthält, muss der Spieler wissen, wann das echte Objekt erzeugt werden soll — üblicherweise beim ersten Impact-Frame. Ist der Effekt ein separates Objekt, halte das Sheet sauber und takte den Spawn auf den Index des Impact-Frames, nicht auf eine Uhrzeit in Sekunden.

Einen Walk Cycle aus einer Beschreibung erzeugen

Acht Zeilen eines Walk Cycle von Hand zu erstellen bedeutet Stunden Arbeit, und das Ergebnis ist ein Sheet, das trotzdem noch im Player geprüft werden muss. Agent Sprite Forge kehrt das um: Du schreibst eine Beschreibung der Figur, und es erzeugt das Sheet. Eine Beschreibung, acht Richtungen, das Sheet kommt bereits auf ein Raster zugeschnitten an, mit transparenten Frames und Ankerhilfen an den Füßen, damit die Figur nicht wippt, wenn du sie platzierst.

Die Ankerhilfen sind im ersten Durchgang wichtiger als die Zeichnung. Ein Walk Cycle, bei dem die Füße keine gemeinsame Grundlinie haben, sieht aus, als wäre die Figur auf einem Trampolin, egal wie gut die Zeichnung ist. Weil die generierten Frames den Anker mitführen, kannst du das Sheet in den Animator ziehen, abspielen und sehen, dass die Grundlinie hält — das ist die Prüfung, die ein statisches Bild dir nicht liefern kann.

Die generierte Ausgabe ist ein normales Sprite Sheet: Zeilen und Spalten, transparenter Hintergrund, Standard-Frame-Größen. Nichts daran ist an Neta Studio gebunden. Exportiere es, ziehe es für einen Vorschau-Durchlauf in den Animator, schneide es neu zu, wenn deine Engine eine einzelne Zeile will, und mach weiter. Wenn der Generator dir eine Richtung liefert, die du nicht brauchst — etwa hinten links, weil dein Spiel nur 4 Richtungen unterstützt — ignoriere diese Zeile beim Neuzuschneiden.

Sprite-Animationssoftware: Was man vergleichen sollte

Das passende Werkzeug hängt davon ab, was bereits vorhanden ist. Ein fertiges Sheet und eine Frage zum Timing sind ein anderes Problem als eine leere Leinwand und keine Figur. Die folgende Tabelle ordnet dem Ausgangspunkt das passende Werkzeug zu und deckt auch die Fälle ab, in denen der engine-eigene Animator die richtige Antwort ist und ein Player von Drittanbietern überflüssig ist.

Eine Faustregel: Zur Vorschau einen Player, zum Erstellen einen Editor, zum Generieren einen Generator. Die meiste Verwirrung entsteht dadurch, dass ein Player zum Erstellen benutzt wird — eine schlechte Kontaktpose lässt sich in einem Wiedergabe-Tool nicht korrigieren, und in einem Zeichentool ohne Wiedergabe lässt sich kein Timing-Gefühl korrigieren.

Ein GIF oder ein neu zugeschnittenes Sheet exportieren

Zwei Exporte decken die meisten Fälle ab. Der erste ist ein animiertes GIF: die aktuelle Schleife, mit der aktuellen FPS, in der aktuellen Skalierung, als einzelne Datei. Ein GIF hat keine Laufzeit und läuft in jedem Chat-Fenster, Review-Tool oder Issue-Tracker. Das schickst du an eine Person, die nichts installieren wird. Der Preis ist eine 256-Farben-Palette, was für die meisten Pixel-Art in Ordnung ist und bei weichen Verläufen sichtbares Banding erzeugt — wenn dein Sprite einen weichen Glow hat, rechne mit Posterisierung.

Der zweite ist ein neu zugeschnittenes Sheet. Der Animator nimmt das geladene Sheet und seine Frame-Einstellungen und schreibt ein neues Bild mit anderer Packung: eine einzelne Zeile für ein Flipbook, oder vier Zeilen für ein Richtungs-Set, oder dasselbe Raster mit anderer Zellgröße. Das Neuschneiden ist verlustfrei, solange die Zellgröße gleich bleibt und du nur umsortierst. Wenn du die Zellgröße änderst, resampelt das Tool, und jedes Resampling von Pixel-Art, das kein ganzzahliges Vielfaches ist, weicht Kanten auf.

Ein häufiger Neuschnitt ist das Flipbook: jeder Frame einer Animation von links nach rechts in einer einzigen Zeile, ohne Umbruch. Manche Engines und CSS-Sprite-Techniken wollen diese Form. Nimm einen 6-Frame-Walk, schneide ihn auf eine Zeile mit 6 neu, und der Streifen ist 6× die Frame-Breite mal 1× die Frame-Höhe. Wenn du diesen Streifen stattdessen als GIF brauchst, macht der Sprite-Sheet-zu-GIF-Konverter denselben Loop-Export aus einem gepackten Sheet.

Frame-Größe und Spaltenanzahl festlegen, bevor du exportierst. Der Exporter schreibt mit dem Raster, das du im Player konfiguriert hast, nicht mit dem Raster, das er beim Laden geraten hat. Wenn du die Schätzung überschrieben hast, um eine Scherung zu beheben, und die Frame-Anzahl nicht erneut geprüft hast, übernimmt das exportierte Sheet die falsche Anzahl.

Betritt die Welt, zu der er gehört

Ein Sprite ist eine Figur ohne Ort, an dem sie stehen kann. Der letzte Schritt ist der, den sonst niemand anbietet: Nimm das Sheet, das du gerade erstellt hast, und setze es in eine Welt, in der man herumlaufen kann – eine kleine Insel, ein Planet, eine regnerische Straßenecke. Jede Welt auf dieser Seite wurde aus einer geschriebenen Beschreibung erstellt und als spielbare Seite veröffentlicht.

FAQ