In dieser Anleitung
Eine Richtung halten, loslassen, zuschlagen und weiterlaufen: Mit diesen wenigen Eingaben fallen Größenunterschiede, versetzte Füße und das Timing nach einem Angriff schneller auf als beim Betrachten einzelner Clips.
Im vorigen Beispiel haben wir einen Schlag und einen Tritt aus einem Video dieses orangefarbenen Roboters geschnitten. Jetzt ergänzen wir mit demselben Bild eine ruhige Kampfbereitschaft und einen Lauf auf der Stelle. Alle vier transparenten Clips werden in einer kleinen Szene mit 24 FPS abgespielt.
In der spielbaren Browser-Demo bewegst du die Figur mit Pfeiltasten oder A/D, schlägst mit J und trittst mit K. Am Handy hältst du die Richtungstasten gedrückt. Die Demo beginnt pausiert; Start oder eine Steuerung setzt sie in Bewegung.
Für alle vier Aktionen dasselbe Charakterbild verwenden
Wir verwenden wieder das ursprüngliche Roboter-PNG. Farben, Proportionen und der Blick nach rechts bleiben die gemeinsame Vorgabe. Jede Anfrage beginnt mit diesem Bild, statt die Figur für jede Aktion neu zu zeichnen.
Auch die Bildaufteilung entspricht den vorherigen Angriffen: 4:3, Expand Canvas bei 80%, Position X 0.35 und Y 0.5. Rechts bleibt Platz für Faust und Fuß. Wie du Freiraum für größere Bewegungen einplanst, zeigt der Expand-Canvas-Artikel.
Beim Drehen nach links spiegeln wir dieselben Bilder horizontal. Für diesen Roboter ohne Schrift oder einseitige Waffe ist das praktisch. Bei einem Schild oder Text auf der Kleidung solltest du prüfen, ob das gespiegelte Design noch passt.
Ruhige Bereitschaft und Lauf auf der Stelle getrennt erzeugen
Der Idle-Prompt verlangt fest stehende Füße und eine stabile Deckung mit kleinen Bewegungen von Brust und Schultern. Nach dem Loslassen einer Richtung soll die Figur zur Ruhe kommen, ohne gleich einen Schritt oder eine neue große Geste zu beginnen.
Der Lauf-Prompt beschreibt durchgehendes Laufen auf der Stelle, nach rechts gerichtet, mit fester Kamera und gleichbleibender Größe. Die Bilder liefern Armbewegung, Beinarbeit und das Auf und Ab des Körpers; den Weg durch die Szene steuert der Code.
Beide Anfragen verwendeten Seedance 2.0 Fast, 4 Sekunden, 480p, 4:3 und Alpha Key. Tatsächlich berechnet wurden jeweils 36 Credits, insgesamt 72 neue Credits. Der Export als transparente PNG-Sequenz und ProRes 4444 kostete 0 Credits. Schlag und Tritt stammen aus dem früheren 720p-Material und wurden nicht neu generiert. Das sind die erfassten Kosten vom 3. Oktober 2026; vor deiner eigenen Anfrage gilt das aktuelle Angebot.
Du kannst den genauen Idle-Prompt, den Lauf-Prompt sowie die Originalvideos für Idle und Laufen mit Key-Farbhintergrund herunterladen. Beide Rückgaben haben 752 × 560 Pixel und 97 Frames bei 24 FPS, also etwa 4.04 Sekunden. Auflösungsstufe, tatsächliche Videogröße und Laufzeit-Canvas gehören zu unterschiedlichen Arbeitsschritten.
Bewegungsschleifen wählen und Angriffe vollständig abspielen
Aus den vier Sekunden haben wir je einen Atem- beziehungsweise Laufzyklus ausgewählt, mehrfach abgespielt und den Übergang vom letzten zum ersten Frame geprüft. Alle gewählten Bereiche sind zusammenhängend. Die Quellnummerierung beginnt bei 0; beide Grenzen sind enthalten.
| Aktion | Quellframes | Verwendete Frames | Dauer bei 24 FPS | Wiedergabe |
|---|---|---|---|---|
| Idle | 22–56 | 35 | Etwa 1.46 s | Schleife |
| Laufen | 44–59 | 16 | Etwa 0.67 s | Schleife |
| Schlag | 9–44 | 36 | 1.50 s | Einmal |
| Tritt | 58–88 | 31 | Etwa 1.29 s | Einmal |
Der Lauf enthält einen vollständigen Zyklus und springt von Quellframe 59 zurück zu 44. Die Wiedergabe bleibt bei 24 FPS; zusätzliche Übergangsframes wurden nicht generiert. Die Auswahl erklärt der Walk-Cycle-Artikel genauer. Ausholen und Rückkehr der Angriffe stammen aus dem vorherigen Beispiel mit zwei Aktionen.
Canvas und Ursprung vor dem Animationswechsel ausrichten
Alle Laufzeitframes liegen auf einem transparenten Canvas von 512 × 384 Pixeln. Das Seitenverhältnis bleibt erhalten: Die neuen 752 × 560 großen Idle- und Laufframes werden zunächst proportional auf 512 × 381 skaliert und dann platziert.
Nach dem Vergleich von Haltung und Fußposition verschieben wir den gesamten Idle-Clip um X −2, Y +3 Pixel und den Lauf um X −24, Y +3. Die Angriffe behalten ihre bisherige Position. Alle vier verwenden den Ursprung (224, 321), von oben links gemessen, und werden in der Szene mit dem Faktor 0.85 dargestellt.
Diese Werte passen zu diesem Roboter. Vergleiche bei einer anderen Figur zunächst Kopf, Füße und Rumpf. Ein fester Versatz des ganzen Clips erhält das natürliche Auf und Ab. Ein enger Zuschnitt für jeden einzelnen Frame kann dagegen unerwünschte Positionssprünge erzeugen. Der Canvas-und-Pivot-Leitfaden erläutert den Unterschied.
Nach dem Angriff die aktuelle Richtung abfragen
Die Szene hat vier Zustände: idle, run, punch und kick. Außerhalb eines Angriffs löst eine Richtung den Lauf aus; Loslassen führt zur Bereitschaft. Beide Richtungen gleichzeitig heben sich auf.
J oder K sperrt horizontale Bewegung und Blickrichtung, bis der Angriff einmal durchgelaufen ist. Weitere Angriffe werden währenddessen ignoriert. Danach entscheidet die aktuelle Richtung: weiterlaufen, wenn eine Taste gehalten wird, sonst in Bereitschaft wechseln. Eine gehaltene Angriffstaste wiederholt den Angriff nicht; dafür musst du sie loslassen und erneut drücken.
Godot verarbeitet das Ende über AnimatedSprite2D.animation_finished. Für Schlag und Tritt ist die Schleife ausgeschaltet, für Idle und Lauf eingeschaltet. Schleifenanimationen senden dieses Abschlusssignal nicht. Godot-Dokumentation
func _attack_finished() -> void:
if _attacking():
completed[state] += 1
_locomotion()
_locomotion() liest die aktuelle Richtung und wählt run oder idle. Die vollständige Implementierung liegt im Download; du musst die Steuerung nicht aus diesem Ausschnitt zusammensetzen. Die Szene behandelt Bewegung und Animationswechsel. Gegner, Trefferprüfung und Schaden sind noch eigene Aufgaben.
In Godot ausprobieren und das Bewegungstempo separat einstellen
Lade das Godot-Beispielprojekt herunter, entpacke es, importiere project.godot in Godot 4 und drücke F5. Das Projekt erzeugt SpriteFrames aus vier transparenten Sheets und den Framebereichen in character.json. Ein Plugin ist nicht nötig. Das Einstiegsvideo wurde unter macOS mit Godot 4.7.2 und dem Compatibility-Renderer aufgenommen.
Die Bewegung startet mit 280 px/s, die Animation bleibt bei 24 FPS. 280 ist ein anpassbarer Demowert. Nach einem Wechsel der Figur oder Darstellungsgröße solltest du beobachten, wie stark die Füße während des Bodenkontakts rutschen. Der Browser-Regler reicht von 60–600 px/s; im Godot-Projekt lässt sich defaultSpeed in assets/character.json ändern. Bei fester Bildrate lässt sich die passende Bewegungsgeschwindigkeit besser beurteilen.
Probiere einen Schlag während des Laufens, die Gegenrichtung während eines Angriffs und das Loslassen aller Tasten vor dessen Ende. Der Angriff sollte vollständig ablaufen, bevor die nächste Bewegung beginnt. Beim Verbergen der Seite oder Verlust des Fensterfokus werden Eingaben gelöscht und die Wiedergabe pausiert, damit nach der Rückkehr keine alte Richtung hängen bleibt.
Dateien herunterladen und die eigene Figur einsetzen
Das transparente Sprite-Paket enthält vier PNG-Sheets, Framebereiche, Bildraten und das Schnitt- und Ausrichtungsrezept. Verwende die Framezahlen aus dem JSON: Leere Zellen am Sheet-Ende gehören nicht zur Animation. Browser und Godot verwenden transparente Bilder; die MP4s im Artikel haben einen Hintergrund zur Ansicht.
Die Steuerung und die Pakete wurden für dieses Tutorial aus echten Exporten zusammengestellt. Prüfe deine eigenen Dateien mit dem Godot-Importleitfaden und ersetze dann die vier Sheets samt Framedaten. Abmessungen, Hashes, Kosten und Exportprüfungen stehen im Medienprotokoll.
Teste Anhalten, Umdrehen und einen vollständigen Angriff, bevor du die nächste Bewegung planst. Wenn eine Animation fehlt, verwende in AnimGen dasselbe Charakterbild, dieselbe Kameraperspektive und denselben Freiraum.