8 Schritte

Animation, die lebendig wirkt

Für: Menüs, Figuren und Effekte, die sich bewegen, aber steif wirken.

Fast alle Bewegung in Spielen sind ein paar Kurven, mit Geschmack angewandt. Erst die Kurven, dann die Feder, dann die Tricks, die sie nutzen. Die Reihenfolge zählt, weil jeder Schritt aus dem vorigen gebaut ist.

Die Schritte, der Reihe nach

1. 1

   Code-Rezept

   Lerp und Smoothstep

   Die kleinen Helfer, um eine Zahl in eine andere überzublenden: die Mitte zwischen zwei Werten, Lebenspunkte als Balken, ein weiches Ausblenden am Rand. Sie stecken hinter fast jedem weichen Effekt im Spiel.

   Warum hier: Das kleinste Stück: von a nach b über Zeit, und warum „jeden Frame ein bisschen näher“ auf einem langsamen Rechner bricht.

2. 2

   Code-Rezept

   Easing-Funktionen

   Der komplette Satz an Bewegungskurven, mit denen Dinge weich anfahren, weich ankommen, übers Ziel schwingen oder aufspringen. Dein Spiel wirkt nicht mehr steif, weil sich nichts mehr mit stur gleicher Geschwindigkeit bewegt.

   Warum hier: Dann die Kurven: sanft rein, sanft raus, überschießen. Das ist das meiste von dem, was Leute „saftig“ nennen, und es ist eine Tabelle, keine Kunst.

3. 3

   Wiki-Eintrag

   Einen Wert durch mehrere Schlüsselpunkte führen, jede Strecke mit eigenem Gefühl

   Ein Logo, das hereinschwingt, wartet und wieder herausfällt, braucht mehr als einen Anfangs- und Endwert. Hier steht, wie du jeden Zeitpunkt einer solchen Spur abfragst, was vor dem ersten und nach dem letzten Punkt gilt und wie du einen Wert hältst oder abrupt springen lässt.

   Warum hier: Kurven auf mehrere Schlüsselbilder ergeben eine Spur; so wird ein Menü, das hereinrutscht, oder eine Tür, die aufgeht, wirklich gebaut.

4. 4

   Code-Rezept

   Federbewegung

   Lässt einen Wert seinem Ziel folgen, als hinge er an einer Feder: erst schnell, dann langsamer, auf Wunsch mit Nachwippen. Du kannst das Ziel jederzeit ändern, es reagiert natürlich, und ein ruckelndes Bild bringt es nicht aus dem Tritt.

   Warum hier: Eine Feder ersetzt eine Kurve, wo sich das Ziel weiterbewegt: Kameras, Cursor, Begleiter. Eine Formel, zwei Regler.

5. 5

   Code-Rezept

   Stauchen und Strecken

   Der älteste Trick der Animation: Dinge strecken sich, wenn sie schnell sind, und stauchen sich beim Landen, ohne ihre Größe zu verlieren. So wirkt selbst eine einfache Kiste lebendig.

   Warum hier: Der erste Trick auf Kurven: Form folgt Geschwindigkeit. Deshalb liest man einen Ball als Gummi und eine Kiste als Holz.

6. 6

   Code-Rezept

   Atmen im Stand

   Lässt eine stehende Figur lebendig wirken: Sie atmet und wiegt sich leicht, ohne sichtbare Schleife. Zwei Figuren bewegen sich nie im Gleichtakt, also wirkt eine Menge wie Leute und nicht wie Kopien.

   Warum hier: Was stillsteht, sollte nicht still sein. Geschichtetes Rauschen gibt Atmen und Schwanken ohne ein einziges handgemachtes Schlüsselbild.

7. 7

   Wiki-Eintrag

   Geräusche und Effekte zum genauen Zeitpunkt auslösen, auch bei einem langsamen Bild

   Schritte, Schwerthiebe und Feuerwerk, die an Momente einer Animation gebunden sind, werden bei einem Ruckler entweder übersprungen oder doppelt abgespielt. Hier steht, wie jede Markierung genau einmal und in der richtigen Reihenfolge auslöst, auch bei sich wiederholenden Animationen.

   Warum hier: Töne und Funken auf einer Zeitleiste müssen einmal feuern, auch wenn ein Frame langsam ist. Dieser Fehler versteckt sich, bis das Spiel draußen ist.

8. 8

   Code-Rezept

   Partikel-Explosion

   Ein kurzer Sprühregen aus Funken, Staub, Münzen oder Rauch. Jedes Teilchen hat sein eigenes Tempo, seine Lebensdauer und seinen Drall, wird in der Luft langsamer und fällt mit der Schwerkraft, und eine Explosion wirkt immer gut gefüllt.

   Warum hier: Zuletzt der Funkenregen: Mit Kurven, Federn und Timing in der Hand ist ein Partikeleffekt Komposition, keine neue Fähigkeit.

Am Ende

Nichts in deinem Spiel bewegt sich mehr mit konstanter Geschwindigkeit, und deine KI hat die Mathematik für jede Bewegung, die du beschreibst.

Worauf das ruht

Vorträge, Artikel und Forschung von außerhalb dieser Wiki, damit du dich nicht auf unser Wort verlassen musst.

• Juice It or Lose It (Martin Jonasson and Petri Purho, GDC Europe 2012 (Independent Games Summit), GDC Vault, 2012)

  Zeigt live, wie ein langweiliges Spiel allein durch kleine Effekte wie Partikel, Wackeln und Sound viel befriedigender wird, also die Kernidee von Juice.

• Vlambeer co-founder shares advice on building better action games (Alex Wawro, Game Developer (reporting on Jan Willem Nijman's talk "The Art of Screenshake", Control Conference Amsterdam), 2014)

  Beschreibt, wie Nijman einen schlichten Shooter mit etwa 30 kleinen Änderungen wie Bildschirmwackeln und Rückstoß, jeweils einzeln, zu einem Spiel mit gutem Spielgefühl machte.

• The 12 principles of animation in video games (Jonathan Cooper (excerpt from the book Game Anim), Game Developer, 2019)

  Erklärt die zwölf klassischen Animationsprinzipien der Disney-Zeichner und wie Spiele wie Cuphead und Shadow of the Colossus sie nutzen, auch dort, wo schnelle Steuerung sie begrenzt.

• 12 principles for game animation (Christopher Totten, Game Developer, 2021)

  Geht jedes Animationsprinzip durch, etwa Dehnen und Stauchen, Vorbereitung und Timing, und zeigt, wie man es anpasst, wenn ein Spiel genaue Kollisionen und sofortige Steuerung braucht.

• Instant Game Feel - Springs Explained (Chad Cable, Game Developer, 2022)

  Erklärt Federn als einfachen Weg, Knöpfe, Kamera und Anzeigen natürlich federnd zu bewegen, gesteuert durch nur zwei Regler: wie stark es nachschwingt und wie schnell es reagiert.

Das sagst du deiner KI

Folge dem Spielerando-Leitfaden „Animation, die lebendig wirkt“ (get_path animation-that-feels-alive) für mein Spiel, Schritt für Schritt, und sag mir bei jedem Schritt, warum er jetzt kommt.

Oder spar dir das und schließ den MCP an: Dann findet deine KI das alles von selbst.MCP anschließen