Ein Sheet, das als Raster gut aussieht, kann in Bewegung trotzdem springen, rutschen oder ruckeln. Für jede kleine Änderung die Engine zu öffnen ist langsam. Diese Vorschau spielt das Sheet mit den eingestellten FPS ab, mit pixelgenauem Zoom, Onion Skin zum Prüfen der Abstände zwischen Frames, Ping-Pong für Idles und Wiedergabe pro Zeile für Sheets mit mehreren Animationen oder Richtungen.
Anleitung: Animationsvorschau
- Zieh ein Spritesheet (das Raster wird erkannt), mehrere Frame-PNGs oder ein animiertes GIF hierher.
- Korrigier bei Bedarf Zeilen und Spalten. Bei mehrzeiligen Sheets wähl eine Zeile, um eine einzelne Animation oder Richtung abzuspielen.
- Stell die FPS ein. Die Vorschau zeigt auch die Millisekunden pro Frame, die die meisten Engines abfragen.
- Geh mit den Pfeiltasten Frame für Frame durch, aktivier Onion Skin, um den vorherigen Frame zu sehen, und probier Ping-Pong aus.
- Zoom mit pixelgenauer Skalierung und wechsle den Hintergrund, um den Sprite auf Dunkel, Hell und Grün zu prüfen.
- Exportier ein GIF mit demselben Tempo, Ping-Pong und Hintergrund.
Was du bekommst
- Live-Vorschau mit 1–60 fps, Frame-für-Frame-Steuerung und Tastenkürzeln.
- Animiertes GIF in 1×–8× mit transparentem oder einfarbigem Hintergrund, bereit für ein Devlog oder eine Store-Seite.
Zu welchen Engines es passt
- Nimm die FPS, die hier richtig aussehen, als Animationstempo in Godot (SpriteFrames-Speed), Unity (Sample Rate), GameMaker (Sprite-Speed) oder Phaser (frameRate).
- Die Wiedergabe pro Zeile entspricht der Art, wie die meisten Engines Sheets mit 4 und 8 Richtungen ablegen: eine Zeile pro Richtung.
Tipps aus der Spieleentwicklung damit
- Walk-Cycles sehen meist zwischen 8 und 12 fps richtig aus, Runs zwischen 12 und 16, Idles zwischen 4 und 8.
- Onion Skin zeigt den vorherigen Frame in Blau. Springt ein Körperteil zwischen zwei Frames weit, füg einen Zwischenframe ein.
- Rutscht die Figur, sind die Frames nicht gleich verankert. Zerleg das Sheet im Spritesheet-Slicer mit Ausrichtung unten neu.
- Prüf auch auf hellem Hintergrund. Dunkle Outlines, die auf Schwarz gut aussehen, können auf dunklen Spielkarten verschwinden.
Anwendungsfälle
- Das Animationstiming prüfen, bevor du in eine Engine importierst.
- Sheets von Artists oder aus einem Asset-Pack sichten.
- Aus einem Sheet ein GIF für Social-Media-Posts oder ein Pitch-Deck machen.
- Die Richtungen einer 8-Richtungs-Figur Zeile für Zeile nebeneinander vergleichen.
FAQ
Wie steuere ich die Wiedergabe per Tastatur?
Die Leertaste startet und pausiert. Die Pfeiltasten links und rechts gehen einen Frame weiter und pausieren.
Was ist Onion Skin?
Es zeigt den vorherigen Frame blass (blau eingefärbt) unter dem aktuellen, damit du siehst, wie weit sich jedes Teil zwischen den Frames bewegt, und Sprünge erkennst.
Kann es nur eine Zeile eines Sheets abspielen?
Ja. Hat das Sheet mehrere Zeilen, wähl eine Zeile, um nur diese Animation oder Richtung abzuspielen, oder Alle, um jeden Frame der Reihe nach abzuspielen.
Unterstützt es GIFs und einzelne Frames?
Ja. Leg ein animiertes GIF ab, um seine Frames abzuspielen, oder mehrere PNGs, die dann in natürlicher Dateinamen-Reihenfolge laufen.
Wird mein Sheet hochgeladen?
Nein. Die Vorschau läuft komplett in deinem Browser.
Warum sieht meine Animation in anderen Viewern unscharf aus?
Die meisten Viewer skalieren mit Glättung. Dieser skaliert mit Nearest-Neighbor, so wie ein Pixel-Art-Spiel eingerichtet sein sollte, und was du hier siehst, sehen also auch die Spieler.