diff --git a/HANDBUCH.md b/HANDBUCH.md index aea57ce..f54b577 100644 --- a/HANDBUCH.md +++ b/HANDBUCH.md @@ -71,7 +71,7 @@ Eine vollständige, minimale Vorlage mit jeder Übungsart liegt in [`tooling/fix 1. **Lehrplan entwerfen.** Schreibe zuerst die Liste der Module auf: 10–16 Module in 2–4 Tracks, vom Einstieg bis zum Profi-Niveau. Frage dich bei jedem Modul: *Was kann ich danach, was ich vorher nicht konnte?* Und: *Würde ein Arbeitgeber das erwarten?* 2. **Ordner anlegen:** `content//` mit `area.yaml` (Abschnitt 4). Die Ordner-ID ist kurz, klein und kebab-case, zum Beispiel `go`, `typescript`, `devops`. -3. **Farbe wählen.** Eine kräftige Farbe, auf der schwarzer Text gut lesbar ist (Kontrast ≥ 4,5 : 1 zu `#0B0B0B`). Vorhandene Farben nicht wiederholen: `#A98BFF` Kotlin, `#FF6A3D` Rust, `#FFD400` Linux, `#4D8BFF` Python, `#2BD97C` Automation, `#FF5CA8` Git, `#22D3EE` Data Analysis, `#C6F432` Testing, `#FF9F1C` PostgreSQL, `#F4A3FF` Erzählhandwerk, `#FF4D6D` Combat Design. Gute freie Kandidaten: `#FFC6A8` (Apricot), `#B5E3FF` (Eisblau). +3. **Farbe wählen.** Eine kräftige Farbe, auf der schwarzer Text gut lesbar ist (Kontrast ≥ 4,5 : 1 zu `#0B0B0B`). Vorhandene Farben nicht wiederholen: `#A98BFF` Kotlin, `#FF6A3D` Rust, `#FFD400` Linux, `#4D8BFF` Python, `#2BD97C` Automation, `#FF5CA8` Git, `#22D3EE` Data Analysis, `#C6F432` Testing, `#FF9F1C` PostgreSQL, `#F4A3FF` Erzählhandwerk, `#FF4D6D` Combat Design, `#4FE3C1` 2D-Animation. Gute freie Kandidaten: `#FFC6A8` (Apricot), `#B5E3FF` (Eisblau). 4. **Module schreiben** (Abschnitte 5–7). Ein Modul pro Datei, Dateiname = Modul-ID. 5. **Karten, Projekte, Glossar, Spickzettel, Berufsseite** ergänzen (Abschnitt 8). 6. **Prüfen:** `pnpm content:check `, dann `pnpm verify `, dann `pnpm test` und `pnpm build`. @@ -152,6 +152,7 @@ Manche Bereiche lehren Handwerk ohne Programmcode, zum Beispiel Erzählhandwerk. - **Übungen** nutzen `lang: prose` (Abschnitt 7). `output` passt nur, wo man wirklich etwas vorhersagt, etwa den Zustand einer Verzweigung; die Warnung „keine Vorhersage-Übung“ ist dort bewusst akzeptiert. `bug` heißt „die gemeinte Zeile finden“, meist ohne `fix`. - **Kreative Aufgaben** lassen die Lösung offen. Es gibt keine Mustertexte: `practice` mit `lang: prose` hat keine `solution`, die Checkliste enthält überprüfbare Kriterien, keine Geschmacksurteile. Analysen veröffentlichter Texte dürfen eine Musterantwort haben. - **Callouts** `INTERVIEW` und `PRAXIS` nur, wenn sie wirklich passen; `PRAXIS` zeigt dann, wie Studios oder Autoren arbeiten. +- **Animation** zeigt Bewegung als Text: Bildlisten mit Dauer in ms und Ticks, Spacing-Charts mit einem `|` je Zeichnung, Höhen als Balken aus `#`. In Unterwegs-Modulen bleibt jede Zeile solcher Blöcke bei höchstens 34 Zeichen, dann scrollt bei 360 px nichts seitlich. Ob eine Bewegung wirkt, prüft der Lernende im Beobachtungstest mit anderen Menschen und mit Checklisten, nie mit einer automatischen Prüfung. ## 6. Lektionen schreiben diff --git a/README.md b/README.md index 04f272a..bdb2209 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # learn.kiumu.app -Private Lernplattform für Kotlin & Android, Rust, Linux, Python, Automation mit Python, Git, Data Analysis mit Excel, SQL und Python, Testing & Softwarequalität, SQL & PostgreSQL für Anwendungsentwickler sowie Combat Design & Game Feel mit Godot 4. Live: [learn.kiumu.app](https://learn.kiumu.app) · Öffentliches Repository: [hernstev97/learning-platform](https://github.com/hernstev97/learning-platform) +Private Lernplattform für Kotlin & Android, Rust, Linux, Python, Automation mit Python, Git, Data Analysis mit Excel, SQL und Python, Testing & Softwarequalität, SQL & PostgreSQL für Anwendungsentwickler, Erzählhandwerk & interaktive Entscheidungen, Combat Design & Game Feel mit Godot 4 sowie 2D-Animation: Gewicht, Timing & Körpersprache. Live: [learn.kiumu.app](https://learn.kiumu.app) · Öffentliches Repository: [hernstev97/learning-platform](https://github.com/hernstev97/learning-platform) Die Plattform ist kein Nachschlagewerk. Jedes Modul besteht aus einer Lektion, die ein Denkmodell aufbaut und auf die offizielle Dokumentation verweist, und aus 10–14 Übungen in fester Reihenfolge: verstehen → vorhersagen → schreiben → Fehler finden → erklären → anwenden. Jeder Bereich hat Interview-Karteikarten mit Wiederholung, Projekte und ein Abschlussprojekt, das wie eine Take-Home-Aufgabe im Bewerbungsprozess geschnitten ist. diff --git a/content/animation/area.yaml b/content/animation/area.yaml new file mode 100644 index 0000000..db2e944 --- /dev/null +++ b/content/animation/area.yaml @@ -0,0 +1,34 @@ +id: animation +title: "2D-Animation: Gewicht, Timing & Körpersprache" +short: Animation +tagline: Bewegungen zeichnen, die man liest und denen man das Gewicht glaubt. +description: > + Schlüsselposen, Timing und Spacing, Bögen und Überlappung, Schwerpunkt und Bodenkontakt, schwer und + leicht, Antizipation und Erholung, Gehen und Laufen, Körpersprache, Form über alle Bilder und Animation + im Spieltempo. Du beginnst mit neutralen Studien wie Ball und Mehlsack und endest mit einer eigenen + Figur in einer Godot-Testszene; ob eine Bewegung wirkt, zeigt dir, was andere darin erkennen. Jede + Zeichnung, Pose und Animation ist deine, eine KI darf nur technische Arbeit wie das Gerüst der + Testszene übernehmen. +color: "#4FE3C1" +order: 14 +outcomes: + - Du zerlegst Bewegungen aus Referenzen in **Schlüsselposen, Extreme und Zwischenbilder** und planst eigene Bewegungen als Thumbnails, bevor du ins Detail gehst. + - Du steuerst **Timing und Spacing** bewusst, mit Haltezeiten, Bildern pro Zeichnung, Ease-in und Ease-out, und rechnest zwischen Bildern, Millisekunden und Spiel-Ticks um. + - Du machst **Gewicht glaubwürdig** über Schwerpunkt, Stützfläche, Bodenkontakt, Stauchen und Strecken, Aufprall und Ausschwingen. + - Du baust Bewegungen aus **Antizipation, Aktion und Erholung** mit Bögen, Nachziehen und Überlappung und animierst Gehen, Laufen und Ruhezyklen in wenigen Bildern. + - Du zeigst **Zustände und Zustandswechsel** über Körpersprache und hältst Form, Volumen und Proportionen von Bild zu Bild konstant. + - Du arbeitest im Editor mit **Zeitleiste, Bilddauer, Onion Skinning, Tags und Vorschau** und exportierst Sprite-Sheets, mit freien Programmen oder Aseprite. + - Du prüfst eigene Animationen **im Spieltempo** in einer Testszene auf Lesbarkeit, Übergänge und Reaktion auf die Eingabe, dokumentierst Überarbeitungen und beobachtest, was andere erkennen. +tracks: + - title: Bewegung sehen und planen + description: Referenzen filmen und Bild für Bild lesen, Schlüsselposen, Timing und Spacing, Bögen und Überlappung. Alles mit Handy und Papier. + modules: [beobachten-schluesselposen, timing-spacing, boegen-ueberlappung] + - title: Gewicht und Kraft + description: Schwerpunkt und Bodenkontakt, schwer und leicht, Antizipation und Erholung, Gehen und Laufen in wenigen Bildern. + modules: [schwerpunkt-balance, gewicht-aufprall, antizipation-erholung, gehen-laufen] + - title: Ausdruck und Konstanz + description: Körpersprache und lesbare Zustandswechsel, Form über alle Bilder, Animation im Spieltempo mit Eingabe und Ton. + modules: [koerpersprache, form-konstanz, animation-im-spiel] + - title: Im Editor und in der Testszene + description: Einzelbilder, Onion Skinning und Export im Editor, neutrale Studien in Varianten, eine eigene Figur mit zwei Überarbeitungen und der Prüfstand in Godot. Dafür brauchst du Godot und einen Editor wie Pixelorama, LibreSprite, Krita oder Aseprite; lesen kannst du die Lektionen auch unterwegs. Das Editor-Modul kannst du jederzeit vorziehen. + modules: [editor-zeitleiste, werkstatt-studien, werkstatt-figur, testszene] diff --git a/content/animation/career.md b/content/animation/career.md new file mode 100644 index 0000000..c6c179b --- /dev/null +++ b/content/animation/career.md @@ -0,0 +1,100 @@ +## Animation im Beruf + +Spielanimation ist die Arbeit an Bewegungen, die ein Spieler auslöst, unterbricht und hundertmal hintereinander sieht. Anders als im Film muss eine Animation dort zwei Dinge gleichzeitig leisten: lesbar und glaubwürdig sein und das Spiel nicht ausbremsen. In größeren Studios gibt es dafür eigene Rollen, in kleinen Teams macht es die Person, die auch die Figuren zeichnet. + +Für dich ist der Anlass dein eigenes Spiel. Diese Seite zeigt trotzdem, wie die Arbeit in Studios aussieht und woran sie dort gemessen wird. Das hilft auch ohne Bewerbung: Wer weiß, was ein Studio in einem Animationstest prüft, weiß, worauf er bei der eigenen Figur achten sollte. Die Zitate stammen aus Anzeigen, die am 22. Oktober 2026 online waren oder ausdrücklich als beendet gekennzeichnet sind. Diese Seite ist keine Arbeitsmarktstudie. + +## Rollen und Jobtitel + +Titel bedeuten in jedem Studio etwas anderes. Lies die Aufgaben, nicht nur die Überschrift. + +| Rolle | Typische Titel | Alltag | Beispiel aus einer Anzeige | +| --- | --- | --- | --- | +| Pixel- und Sprite-Animation | 2D Character Animator, Pixel Artist (Characters & Animation) | Einzelbildanimation für Figuren, Gegner, Effekte | Titanium Clad (beendet): „Startup, active, and recovery frames need to line up with hitbox timings and cancel windows.“ | +| 2D-Animation in Studios | 2D Animator, Senior 2D Animator | Figuren-, Objekt- und UI-Animation, oft mit Skelett in Spine | Jam City: „Clear understanding of animation game beats and timing specific to interactive experiences.“ | +| Animation in der Engine | 2D Unity Animator | Animationen in der Engine einbauen und abstimmen | Easybrain: „Excellent visual taste and a strong sense of timing, easing, and game feel“ | +| Technische Animation | Technical Animator | Skelette, Pipelines, Übergabe zwischen Art und Programmierung | SpinPlay (nur über ein Portal gefunden): „Coordinate technical handoffs between art and engineering teams.“ | + +Quellen: [Titanium Clad](https://www.workwithindies.com/careers/titanium-clad-studios-2d-character-animator), [Jam City](https://jobs.lever.co/jamcity/c9dc208a-6f1b-45af-8b34-e7ffad8c6da9), [Easybrain](https://easybrain.com/careers/vacancy/senior-2d-unity-animator), [SpinPlay](https://www.remoterocketship.com/us/company/spinplay-games/jobs/senior-technical-animator-united-states-remote/). + +Die Anzeige von Titanium Clad liest sich wie eine Zusammenfassung dieses Bereichs. Gesucht war jemand für ein 2D-Actionspiel in Godot 4.7, der Bildfolgen liefert, „that drop cleanly into AnimatedSprite2D / SpriteFrames“, und mit Aseprite, Krita oder einem anderen Raster-Werkzeug arbeitet. Die Anzeige ist inzwischen geschlossen, die Anforderungen sind trotzdem ein guter Maßstab. + +## Was Studios erwarten + +Die Anzeigen wiederholen sich in fünf Punkten: + +- **Timing für das Spiel, nicht für den Film.** Jam City verlangt Timing „specific to interactive experiences“, Titanium Clad schreibt: „Animate for game feel, not for a reel.“ Das ist der Inhalt von [Animation im Spiel](/animation/animation-im-spiel). +- **Lesbarkeit kleiner Figuren.** Tako Boy suchte jemanden, der ein kleines Sprite „read clearly from its silhouette and motion alone“ macht und mit „clear anticipation, impact and follow-through“ animiert ([Tako Boy, beendet](https://www.workwithindies.com/careers/tako-boy-studios-pixel-artist-characters-animation)). +- **Saubere Übergabe.** Sprite-Sheets mit fester Benennung, Animationen, die ohne Nacharbeit in die Engine passen. Bei GameDuell in Berlin hieß das, die Pipeline so zu betreuen, dass Animationen zu den technischen und gestalterischen Anforderungen passen ([GameDuell, archiviert](https://join.com/companies/gameduell/14412009-senior-2d-animator-unity-character-and-asset-specialist-f-m-d)). +- **Zusammenarbeit mit Design und Programmierung.** Jam City: „Collaborate with artists, game designers, and engineers“. WayForward erwartete, Designern und Programmierern bei Gameplay-Prototypen zu helfen ([WayForward, beendet](https://jobs.smartrecruiters.com/WayForwardTechnologies/82439788-2d-character-animator)). +- **Ein Reel oder Animationsbeispiele.** Fast jede Anzeige fragt danach, kleinere Studios ausdrücklich nach GIFs oder Sprite-Sheets. + +Für Einsteiger ist die Lage eng. Die meisten offenen Studiostellen verlangen mehrere Jahre Erfahrung; Jam City nennt drei bis sechs. Die Stellen für Einzelbildanimation in Pixelart waren im Oktober 2026 fast alle Aufträge oder Teilzeit bei Indie-Teams. + +## Animationstests + +Viele Studios lassen vor einer Zusage eine kleine Aufgabe animieren. Jonathan Cooper (Game Anim) beschreibt, was er davon hält: Ein Test soll in Stunden zählen, „no more than a weekend“, und er rät, nicht straight ahead zu animieren, sondern in Durchgängen steigender Qualität, damit man in jedem Fall fertig wird ([The Game Animation Test](https://www.gameanim.com/2016/01/25/the-game-animation-test/)). Studios rät er, eine Aufstellung zu verlangen, wo die Stunden hingegangen sind. Coopers Beitrag ist für 3D geschrieben; die Indie-Anzeigen beschreiben dasselbe Format für 2D. Titanium Clad schickte eine bezahlte Aufgabe, „a single character action, scoped to a few hours“, Tako Boy einen kurzen bezahlten Art-Test. + +Was ein Test prüft, sagt der Recruiter Jay McDougall (Skillsearch): Studios wollen „game-ready work“ sehen, und ein Hauptzweck sei, ob du ein Briefing befolgen kannst ([The Do's & Don'ts of Art Tests](https://www.skillsearch.com/news/item/the-dos-and-donts-of-art-tests)). Bei 80.lv heißt es zu Fristen von einigen Tagen bis zwei Wochen, etwas Schwächeres pünktlich sei besser als etwas Großartiges zu spät ([Game Art Tests and How to Approach Them](https://80.lv/articles/game-art-tests-and-how-to-approach-them)). + +Das Abschlussprojekt dieses Bereichs ist als ein solcher Test geschnitten: eine Figur, ein kleiner Satz Animationen, Durchgänge von den Keys bis zu den Zwischenbildern, Bildlisten für die Programmierer und ein Protokoll, das zeigt, wie du arbeitest. + +## Reel und Portfolio + +Cooper rät in seinen zehn Schritten zum Reel: kurz, das Beste zuerst, und eine Liste, welche Teile von dir sind, sobald nicht alles deine Arbeit ist. „A 1-minute reel of pure awesome beats a 3 minute reel of lackluster“ ([Ten steps to a great game animation demo reel](https://www.gameanim.com/2013/02/27/ten-steps-to-the-perfect-game-animation-demo-reel/)). Animation Mentor hält alles über zwei Minuten für zu lang und empfiehlt ein, zwei gute Zyklen, die aber nicht im Mittelpunkt stehen müssen ([How to Create Your Game Animation Demo Reel](https://www.animationmentor.com/blog/how-to-create-your-game-animation-demo-reel/)). + +Für 2D sagen die Anzeigen konkreter, was zählt. Tako Boy: „Animated work matters most, so links to GIFs or a page where they play are ideal“, dazu eine kurze Notiz, welche Stücke du selbst animiert hast. Dreamaloid nahm „a sprite sheet, or .gif, or video“ ([Dreamaloid, beendet](https://www.workwithindies.com/careers/dreamaloid-studios-2d-animator)). + +Aus diesem Bereich passen ins Portfolio: + +- **Studienreihe** mit Ball, Mehlsack und Pendel in Varianten, als GIF in Originalgröße und ganzzahlig vergrößert. +- **Zyklen und Übergänge** mit einem Video aus dem Prüfstand und der Tabelle der Übergänge. +- **Eine überarbeitete Animation** mit Fassung 1 und 3 nebeneinander und den Beobachtungen, die zur Änderung geführt haben. +- **Ein Sprite-Sheet mit Bildlisten**, das zeigt, dass Programmierer deine Arbeit ohne Rückfrage einbinden können. + +Jede Zeichnung im Portfolio ist deine. Was eine KI beigesteuert hat, etwa ein Export-Skript, steht dabei. + +## Werkzeuge in Anzeigen + +| Werkzeug | Wo es verlangt wird | +| --- | --- | +| Spine | fast alle Studio- und Mobile-Stellen (Skelettanimation) | +| Unity | die meisten Studiostellen | +| Photoshop | fast überall | +| Toon Boom Harmony | einige Studios, vor allem mit Einzelbild und Cutout | +| Aseprite, Krita, Godot | nur eine Indie-Anzeige mit Einzelbildanimation (Titanium Clad) | + +Einzelbildanimation in Pixelart, wie dieser Bereich sie lehrt, ist ein Nischenhandwerk. Timing und Easing sind es nicht: Jam City und Easybrain verlangen sie in Anzeigen für Unity und Spine genauso, nur mit anderem Werkzeug. + +## Die Branche in Deutschland + +Laut Jahresreport 2026 des Verbands game arbeiten in Deutschland 12.235 Menschen bei Entwicklern und Publishern, 3 Prozent weniger als im Vorjahr. Es gibt 956 aktive Games-Unternehmen, davon 474 reine Entwicklerstudios. Rund jedes dritte Unternehmen geht von Neueinstellungen aus ([game – Jahresreport 2026](https://www.game.de/publikationen/jahresreport-2026/), [PDF](https://www.game.de/wp-content/uploads/2026/08/Jahresreport-der-deutschen-Games-Branche-2026-1-1.pdf)). Zahlen zu Art- oder Animationsrollen nennt der Report nicht. + +Ein eigenes Berufsbild Animation führt der Verband nicht. Animation gehört dort zu Game Art und Technical Art ([Berufsbilder](https://www.game.de/themen/berufsbilder/), [gamecampus.de: Game Art](https://www.gamecampus.de/berufsbild/game-art)). Ein Beispiel für ein Studium ist der Bachelor „Animation and Game“ der Hochschule Darmstadt in Dieburg ([h_da](https://mediencampus.h-da.de/studieren/studienangebot/bachelor/ba-animation-game/profile)). Cooper schreibt in seinen FAQ, ein guter Abschluss bringe allein kein Gespräch, ein starkes Reel schon ([Game Anim FAQ](https://www.gameanim.com/faq/)). Eine offene Stelle für 2D-Animation in einem deutschen Studio war am 22. Oktober 2026 nicht zu finden; das letzte belegte Beispiel ist die Berliner Anzeige von GameDuell aus dem Februar 2025. + +## Lernplan in Wochen + +Bei acht bis zehn Stunden pro Woche, davon einiges unterwegs. Die Module allein sind rund 30 Stunden, die vier Projekte zusammen rund 60. + +| Woche | Unterwegs | Am PC | +| --- | --- | --- | +| 1 | [Beobachten und Schlüsselposen](/animation/beobachten-schluesselposen), Bewegungstagebuch beginnen | [Einzelbilder im Editor](/animation/editor-zeitleiste) | +| 2 | [Timing und Spacing](/animation/timing-spacing) | Ball aus [Neutrale Studien](/animation/werkstatt-studien) | +| 3 | [Bögen und Überlappung](/animation/boegen-ueberlappung), [Schwerpunkt](/animation/schwerpunkt-balance) | Pendel und Mehlsack | +| 4 | [Gewicht und Aufprall](/animation/gewicht-aufprall), [Antizipation und Erholung](/animation/antizipation-erholung) | Studienreihe abschließen | +| 5 | [Gehen und Laufen](/animation/gehen-laufen) | Gehzyklus der Gliederpuppe | +| 6 | [Körpersprache](/animation/koerpersprache), [Form halten](/animation/form-konstanz) | [Prüfstand](/animation/testszene) einrichten | +| 7 | [Animation im Spiel](/animation/animation-im-spiel) | Projekt „Zyklen und Zustandswechsel“ beginnen | +| 8 | Bewegungstagebuch auswerten | Projekt „Zyklen und Zustandswechsel“ abschließen | +| 9 | – | [Eigene Figur](/animation/werkstatt-figur) | +| 10–13 | – | Abschlussprojekt | + +## Ressourcen + +- [Wikipedia: Twelve basic principles of animation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation) – die Prinzipien von Thomas und Johnston mit Ankern je Prinzip. +- [Saint11: Pixel Art Tutorials](https://saint11.art/blog/pixel-art-tutorials/) – kurze GIF-Lektionen zu Gehen, Laufen, Aufprall, Easing und mehr. +- [Slynyrd: Pixelblog-Katalog](https://www.slynyrd.com/pixelblog-catalogue) – ausführliche Beiträge zu Zyklen und Top-down-Animation. +- [Mariel Cartwright: Making Fluid and Powerful Animations For „Skullgirls“ (GDC 2014)](https://www.youtube.com/watch?v=Mw0h9WmBlsw) – Sprite-Animation unter knappem Bildbudget. +- [Jonathan Cooper: Game Anim](https://www.gameanim.com/book/) – Buch über Spielanimation, in der zweiten Auflage mit einem Kapitel zu 2D und Pixelart. +- [Masahiro Sakurai on Creating Games](https://www.youtube.com/@sora_sakurai_en) – kurze Videos zu Ausholen, Nachbewegung, Hitstop und Übertreibung. +- [Aseprite-Doku](https://www.aseprite.org/docs/animation/), [Pixelorama-Handbuch](https://www.pixelorama.org/user_manual/user_interface/timeline), [Krita: Animation](https://docs.krita.org/en/user_manual/animation.html), [Godot: 2D sprite animation](https://docs.godotengine.org/en/stable/tutorials/2d/2d_sprite_animation.html). diff --git a/content/animation/cheatsheet.md b/content/animation/cheatsheet.md new file mode 100644 index 0000000..097a3d9 --- /dev/null +++ b/content/animation/cheatsheet.md @@ -0,0 +1,186 @@ +## Ticks und Millisekunden (60 Ticks pro Sekunde) + +| Ticks | ms | Ticks | ms | +| --- | --- | --- | --- | +| 1 | 16,7 | 7 | 116,7 | +| 2 | 33,3 | 8 | 133,3 | +| 3 | 50 | 9 | 150 | +| 4 | 66,7 | 10 | 166,7 | +| 5 | 83,3 | 12 | 200 | +| 6 | 100 | 15 | 250 | + +`Ticks = ms × 60 / 1000` · `ms = Ticks × 1000 / 60` · Ganze Ticks gehen auf: 50, 100, 150, 200 ms. 80 ms = 4,8 Ticks, das Bild steht mal 4, mal 5. + +## Einsen, Zweien, Dreien + +| Belichtung | Zeichnungen/s bei 24 fps | ms je Zeichnung | Ticks | +| --- | --- | --- | --- | +| auf Einsen | 24 | 41,7 | 2,5 | +| auf Zweien | 12 | 83,3 | 5 | +| auf Dreien | 8 | 125 | 7,5 | +| auf Vieren | 6 | 166,7 | 10 | + +Bildraten, die in 60 Ticks aufgehen (Teiler von 60): 6, 10, 12, 15, 20, 30 oder 60 fps. + +## Spacing-Muster + +| Muster | Abstände von Bild zu Bild | Wirkung | +| --- | --- | --- | +| gleichmäßig | 4, 4, 4, 4 | konstantes Tempo, mechanisch | +| Ease-in (Halbieren) | 32, 16, 8, 4 | bremst in den Key | +| Ease-out | 4, 8, 16, 32 | fährt aus dem Key an | +| freier Fall (Galilei) | 1, 3, 5, 7 | beschleunigt gleichmäßig | +| Pixel-Sprung | 4, 3, 2, 1 · Halt · 1, 2, 3, 4 | Scheitel mit Haltezeit | +| Aufprall | größter Abstand direkt vor dem Kontakt | kein Ease in den Boden | + +Dicht = langsam, weit = schnell. Gleichmäßig beschleunigt = der Abstand wächst jedes Mal um denselben Betrag. Vorsicht: Godots `Tween` und CSS nennen `ease-in` umgekehrt das langsame Anfahren. + +## Bildliste (Belichtungsblatt) + +```text +Bild Dauer Ticks Pose + 1 200 ms 12 Hocke (Key) + 2 50 ms 3 Absprung + 3 50 ms 3 Streckung + 4 150 ms 9 Scheitel (Key) + 5 250 ms 15 Landung (Key) +``` + +Keys lang, Zwischenbilder kurz, Wischbilder am kürzesten. + +## Die zwölf Prinzipien (Thomas & Johnston, 1981) + +| Prinzip | Deutsch | Kurz | Modul | +| --- | --- | --- | --- | +| Squash and stretch | Stauchen und Strecken | Form ändert sich, Volumen bleibt | gewicht-aufprall | +| Anticipation | Antizipation | Gegenbewegung kündigt die Aktion an | antizipation-erholung | +| Staging | Inszenierung | eine Idee pro Moment, klar lesbar | koerpersprache | +| Straight ahead / pose to pose | durchgehend / von Pose zu Pose | erst Keys, dann Zwischenbilder | beobachten-schluesselposen | +| Follow through, overlapping action | Nachbewegung, Überlappung | Teile kommen später zum Stehen | boegen-ueberlappung | +| Slow in and slow out | Ease-in, Ease-out | mehr Bilder an den Enden | timing-spacing | +| Arc | Bogen | Gelenke drehen, Wege sind gekrümmt | boegen-ueberlappung | +| Secondary action | Nebenhandlung | stützt die Hauptbewegung | boegen-ueberlappung | +| Timing | Timing | Zahl und Dauer der Bilder | timing-spacing | +| Exaggeration | Übertreibung | kleine Figuren brauchen große Posen | koerpersprache | +| Solid drawing | räumliches Zeichnen | Form und Volumen halten | form-konstanz | +| Appeal | Ausstrahlung | gewollte Wirkung der Figur | – | + +Quelle: [Wikipedia, Twelve basic principles of animation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation). + +## Gewicht ablesen + +| Merkmal | Bowlingkugel (schwer, hart) | Gummiball (leicht, elastisch) | +| --- | --- | --- | +| Fallgeschwindigkeit ohne Luftwiderstand | gleich | gleich | +| Reaktion auf einen Stoß | spät, langsam | sofort | +| Aufprall | kaum Verformung, kaum Rückprall | sichtbares Stauchen, hoher Rückprall | +| Ausschwingen | kurz | mehrere kleiner werdende Sprünge | +| Figur, die es hebt | lange Antizipation, Körper gestaucht | kurze Antizipation | + +Belege: [NASA, Hammer und Feder](https://nssdc.gsfc.nasa.gov/planetary/lunar/apollo_15_feather_drop.html), [Timing](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing). + +## Gehen und Laufen + +| Phase | Gehen | Laufen | +| --- | --- | --- | +| Kontakt | Ferse setzt auf, Beine weit gespreizt | Fuß setzt auf | +| Tiefpunkt | Gewicht im Standbein, Körper am tiefsten | tiefster Punkt nach dem Kontakt | +| Passing | Schwungbein zieht vorbei | Schwungbein zieht vorbei | +| Hochpunkt | Körper am höchsten | Abdruck, dann Flugphase | + +Arme gegen die Beine. Zyklen in Pixelart: 4, 6 oder 8 Bilder; die zweite Hälfte ist oft die erste mit dem anderen Bein. Quellen: [Saint11, Walk](https://saint11.art/blog/pixel-art-tutorials/#Walk), [Slynyrd, Pixelblog 50](https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle). + +## Aktion: Phasen und Spieler gegen Gegner + +| Phase | Aufgabe | Dauer | +| --- | --- | --- | +| Antizipation | ankündigen, Kraft sammeln | Spielerfigur kurz oder keine, Gegner lang | +| Aktion | der Weg, oft ein Wischbild | sehr kurz | +| Aufprall, Überschwingen | die Pose, die man sich merkt | halten | +| Erholung | zurück in die Grundpose | lang genug zum Lesen, kurz genug zum Steuern | + +Frame-Daten, Wind-up und Abbruchfenster: [Anatomie eines Angriffs](/combat/angriffsphasen). + +## Editor: dieselbe Aufgabe in vier Programmen + +| Aufgabe | Aseprite 1.3.18.6 | Pixelorama 1.2.3 | LibreSprite 1.3 | Krita 5.3 / 6.0 | +| --- | --- | --- | --- | --- | +| Bilddauer | ms je Bild, Frame Properties (P) | Faktor je Bild × FPS der Zeitleiste | ms je Bild | Bilder bei fester Bildrate, Halten bis zum nächsten Key | +| Neues Bild | Alt+N | Zeitleiste | Alt+N | Keyframe im Timeline-Docker | +| Onion Skinning | F3 | Zeitleiste | F3 | Onion-Skin-Docker | +| Abspielen | Enter, Vorschau F7 | F5, rückwärts F4 | Zeitleiste | Timeline-Docker | +| Schleife | Tag: Forward, Reverse, Ping-pong | Cycle, Ping-pong, No loop | Tag mit Richtung | Wiedergabebereich | +| Export | Sprite-Sheet + JSON, PNG-Folge, GIF | Spritesheet, PNG-Folge, GIF/APNG | Sprite-Sheet + JSON | Render Animation als Bildfolge | + +Doku: [Aseprite](https://www.aseprite.org/docs/animation/), [Pixelorama](https://www.pixelorama.org/user_manual/user_interface/timeline), [LibreSprite](https://github.com/LibreSprite/libresprite.github.io/wiki/Know-your-workspace#animation), [Krita](https://docs.krita.org/en/user_manual/animation.html). Bedienung: [Einzelbilder im Editor](/animation/editor-zeitleiste). + +```console +$ aseprite -b figur.aseprite --sheet figur.png --data figur.json --format json-array --list-tags +``` + +## Von Millisekunden zu SpriteFrames + +| Größe | Formel | Beispiel 100, 50, 150, 300 ms | +| --- | --- | --- | +| Grundtakt | größter gemeinsamer Teiler | 50 ms | +| FPS | 1000 / Grundtakt | 20 | +| Frame-Dauer | ms / Grundtakt | 2, 1, 3, 6 | +| Dauer in Godot | Frame-Dauer / (FPS × Abspieltempo) | 2 / 20 = 0,1 s | + +Aktion: Loop aus (Godot 4.7 `LoopMode`: Aus, Wiederholen, Ping-Pong), sonst kein `animation_finished`. Der Loop-Knopf im SpriteFrames-Panel schaltet bei jedem Klick weiter: Aus → Wiederholen → Ping-Pong. Gemeinte 5 Ticks als 12 FPS eintragen, nicht als 83 ms. + +## Prüfstand (Godot 4.7) + +| Taste | Wirkung | +| --- | --- | +| Pfeile halten | `bewegung`, Figur läuft | +| Leertaste | `aktion` einmal, dann zurück | +| 1–9 | Animation direkt, alphabetisch | +| P / , / . | anhalten, Bild zurück, Bild vor | +| T | Zeit 1 → 0,5 → 0,25 | +| H | Grund dunkel, mittel, hell | +| Z | Zoom 1× bis 4× | + +```console +$ godot --path . --fixed-fps 60 res://pruefstand.tscn +``` + +Messen mit Zeit 1,0 (Anzeige `Zeit 1.00`). Im Prüfstand mit Godot 4.7.2 steht das erste Bild nach einem Wechsel einen Tick kürzer. + +## Befund → Ursache → Modul + +| Befund | Erst prüfen | Modul | +| --- | --- | --- | +| schwebt, landet weich | Ease vor dem Aufprall | timing-spacing | +| wirkt mechanisch | gleichmäßiges Spacing, gerade Wege | timing-spacing, boegen-ueberlappung | +| Key wird übersehen | Haltezeit des Keys | timing-spacing | +| wirkt leicht, soll schwer | Anfahren, Aufprall, Ausschwingen | gewicht-aufprall | +| kippt, wirkt unsicher | Schwerpunkt über der Stützfläche | schwerpunkt-balance | +| Füße rutschen | Tempo gegen Schrittweg | gehen-laufen, /godot/animationen | +| Kopf oder Auge springt | Hilfslinien, Onion Skinning | form-konstanz | +| Figur springt beim Wechsel | Export ohne leere Ränder, Ursprung | testszene | +| Aktion kommt verspätet an | erstes Bild schon anders als die Ruhe? | animation-im-spiel | +| Zuschauer liest etwas anderes | Absichtssatz, Kontrast der Posen | koerpersprache | + +## Absichtssatz, Beobachtungstest, Protokoll + +1. **Absichtssatz** vor dem Zeichnen: was ein Zuschauer lesen soll. +2. **Beobachtungstest:** ohne Vorrede zeigen, dreimal in Schleife, „Was passiert da?“, wörtlich notieren, nicht erklären. +3. **Fassungen** getrennt speichern: `name-v1`, `name-v2`, `name-v3`. + +```text +Fassung 2, Datum +Absichtssatz … +Beobachtung eigene und Test (wörtlich) +Änderung Bilder, Timing vorher/nachher +Grund … +Ergebnis … +``` + +## KI-Regel + +| Darf eine KI | Bleibt bei dir | +| --- | --- | +| Skripte, Export-Befehle, Prüfstand, Umrechnungen | jede Zeichnung, Pose, Animation | +| Fehlermeldungen erklären | Timing, Spacing, Haltezeiten | +| Godot-Gerüst für Tests | Figuren, Bewegungen und Stil deines Spiels | diff --git a/content/animation/glossary.yaml b/content/animation/glossary.yaml new file mode 100644 index 0000000..3cdf413 --- /dev/null +++ b/content/animation/glossary.yaml @@ -0,0 +1,115 @@ +terms: + - term: Absichtssatz + definition: Ein Satz, den du vor einer Animation schreibst und der sagt, was ein Zuschauer lesen soll. Maßstab für Beobachtungstest und Überarbeitung. + - term: Animationsliste + definition: Liste aller Animationen einer Figur mit Loop, erstem veränderten Bild, Erkennungspose, Abbruchfenster, Nachfolger und Ton-Bildern. Vertrag zwischen Zeichnung und Code. + - term: Antizipation + definition: Die Bewegung vor der Bewegung, meist in die Gegenrichtung der Aktion, etwa Arme zurück vor einem Wurf. Sie sammelt Kraft und kündigt an, was kommt; in Spielen kostet sie Reaktionszeit. + - term: Auf Zweien + definition: Jede Zeichnung steht zwei Filmbilder lang, bei 24 fps also 12 Zeichnungen pro Sekunde. Englisch on twos; entsprechend auf Einsen und auf Dreien. + - term: Ausschwingen (Settle) + definition: Das letzte Stück einer Bewegung, in dem sie immer kleiner wird, bis etwas ruht, etwa die kleinen Hüpfer eines Balls oder das Nachwackeln eines Wasserballons. + - term: Basis + definition: Die Ausgangsfassung einer Studie, gegen die jede Variante verglichen wird. Sie wird nie überschrieben. + - term: Beobachtungstest + definition: Jemandem eine Animation ohne Vorrede dreimal in Schleife zeigen, offen fragen („Was passiert da?“), die Antworten wörtlich notieren und mit dem Absichtssatz vergleichen. Eine Antwort ist ein Hinweis, kein Beleg. + - term: Bildliste + definition: Tabelle mit Bildnummer, Dauer und Pose jeder Zeichnung einer Animation. Im Zeichentrick Belichtungsblatt (Exposure Sheet). + - term: Bogen (Arc) + definition: Die gekrümmte Bahn, auf der Hände, Füße und Köpfe laufen, weil Gelenke drehen. Zwischenbilder auf der Geraden zwischen zwei Keys machen ein Glied kürzer. + - term: Breakdown + definition: Die Pose zwischen zwei Keys, die festlegt, auf welchem Weg die Figur vom einen zum anderen kommt. Nach den Keys die wichtigste Zeichnung. + - term: Cel + definition: Das Bild einer Ebene in einem bestimmten Bild der Animation, nach den Zelluloidfolien des Trickfilms. Ein Bild der Animation besteht aus den Cels aller Ebenen. + - term: Ease-in + definition: Abbremsen in einen Key hinein, mit kleiner werdenden Abständen. Klassisch Slow in. Godots Tween und CSS benennen es umgekehrt, dort startet ease-in langsam und wird schneller. + - term: Ease-out + definition: Anfahren aus einem Key heraus, mit wachsenden Abständen. Klassisch Slow out. + - term: Erholung + definition: Die Phase nach der Aktion, in der der Körper die Kraft abfängt, überschwingt, ausschwingt und in eine Ruhepose zurückkehrt. Ihre Haltezeiten zeigen, wie viel Kraft im Spiel war. + - term: Erkennungspose + definition: Die Pose einer Aktion, an der ein Zuschauer erkennt, was die Figur tut. Im Spiel zählst du die Ticks vom Druck bis zu ihr. + - term: Fassung + definition: Ein gespeicherter Stand einer Animation, als eigene Datei oder eigener Commit, etwa figur-v1, figur-v2. Eine Fassung ersetzt nie die vorige. + - term: Flugphase + definition: Der Moment eines Laufzyklus, in dem kein Fuß den Boden berührt. Unterscheidet Laufen vom Gehen; der Körper ist dort am höchsten. + - term: Follow-through + definition: Lose Teile bewegen sich weiter, nachdem die Figur angehalten hat, und schwingen mit abnehmendem Ausschlag aus. Das Gegenstück beim Losgehen heißt Drag. + - term: Frame-Dauer + definition: In Godot der relative Faktor, mit dem ein Bild einer SpriteFrames-Animation länger oder kürzer steht. Dauer in Sekunden = Frame-Dauer / (FPS × Abspieltempo). + - term: Gangzyklus (Walk Cycle) + definition: Eine Bildfolge, die in Schleife einen Gang zeigt. Sie enthält zwei Schritte mit je den Posen Kontakt, Tiefpunkt, Passing und Hochpunkt. + - term: Haltezeit + definition: Eine Zeichnung, die länger steht als ihre Nachbarn, meist ein Key. Englisch Hold. + - term: Kochen (Boiling) + definition: Kanten, die in jedem Bild neu gezeichnet wurden und deshalb zittern, obwohl die Figur stillsteht. In manchen Zeichentrickserien Stilmittel, in Pixelart meist ungewolltes Rauschen. + - term: Kontaktbild + definition: Das Bild, in dem ein Fuß oder ein Ball den Boden berührt. Ein tragender Fuß bleibt vom Kontaktbild bis zum Abheben auf denselben Pixeln; ein Ball ist dort am stärksten gestaucht. + - term: Lot + definition: Die senkrechte Linie vom Schwerpunkt nach unten. Mit ihr prüfst du an einer Zeichnung, ob die Figur steht oder kippt. + - term: Mehlsack + definition: Klassische Animationsübung mit einem Sack ohne Gesicht und Gliedmaßen. Alles, was er zeigt, kommt aus Haltung, Stauchung und Timing. Englisch Flour Sack. + - term: Modellblatt (Model Sheet) + definition: Ein Blatt, das Proportionen, Ansichten und typische Posen einer Figur festhält, damit sie in jedem Bild gleich aussieht. + - term: Notify + definition: In Unreal eine Marke in einer Animation, die zu einem bestimmten Bild ein Ereignis auslöst, etwa einen Schrittton. In Godot entspricht dem etwa das Signal frame_changed mit einer Prüfung der Bildnummer. + - term: On Model + definition: Eine Zeichnung, die zur festgelegten Figur passt, in Proportionen, Details, Kontur, Licht und Farben. Das Gegenteil heißt off model und kann ein Fehler oder eine bewusste Entscheidung sein. + - term: Onion Skinning + definition: Anzeige der Bilder vor und nach dem aktuellen als blasse, oft getönte Schatten. Zeigt Spacing, Bögen und Formfehler beim Zeichnen. + - term: Overlapping Action + definition: Teile einer Figur bewegen sich mit versetztem Timing, weil die Hauptbewegung sie mitzieht, etwa die Hand ein Bild nach dem Ellbogen. + - term: Passing + definition: Die Pose eines Gangs, in der das freie Bein am Standbein vorbeischwingt. Beim Gehen steigt der Körper dort, der Kopf ist nicht am tiefsten. + - term: Pose-to-Pose + definition: Arbeitsweise, bei der zuerst die Keys entstehen und danach die Lücken gefüllt werden. Das Gegenstück Straight Ahead zeichnet Bild für Bild vom Anfang bis zum Ende durch. + - term: Posentest + definition: Abspielen nur der Keys mit ihren geplanten Dauern, bevor Breakdowns und Zwischenbilder entstehen. Prüft Lesbarkeit und Timing, solange Änderungen billig sind. + - term: Prüfstand + definition: Godot-Szene dieses Kurses, die eigene Animationen im Spieltakt abspielt, anhält, Bild für Bild weiterschaltet und jeden Bildwechsel mit Tick protokolliert. + - term: Rückprallfaktor + definition: Der Anteil der vorigen Höhe, den ein Ball nach jedem Aufprall wieder erreicht, etwa 0,6 für einen Basketball. In der Animation eine Entscheidung über das Material. + - term: Ruhezyklus (Idle) + definition: Die Schleife, die läuft, während eine Figur steht. Wenige Bilder, gleiche Masse, kleine Amplitude und ungleiche Dauern, damit sie nicht tickt. + - term: Schleifenpunkt + definition: Die Stelle, an der ein Zyklus vom letzten Bild ins erste übergeht. Passen beide nicht zueinander, springt die Figur bei jeder Wiederholung. + - term: Schlüsselpose (Key) + definition: Eine Pose, die Anfang oder Ende eines Bewegungsabschnitts festlegt. Die Folge der Keys erzählt, was passiert; wer nur sie sieht, versteht die Handlung. + - term: Schwerpunkt + definition: Der nach Masse gewichtete Mittelpunkt eines Körpers; beim aufrecht stehenden Erwachsenen rund 10 cm über dem Ansatz des Oberschenkels an der Hüfte. Er wandert mit jeder Bewegung von Gliedern und Last. + - term: Secondary Action + definition: Eine eigene, zusätzliche Handlung neben der Hauptbewegung, etwa im Gehen pfeifen. Sie soll die Hauptbewegung stützen, nicht ablenken. + - term: Spacing + definition: Der Abstand zwischen aufeinanderfolgenden Zeichnungen. Dicht beieinander heißt langsam, weit auseinander heißt schnell. + - term: Spacing-Chart + definition: Kleines Diagramm zwischen zwei Keys mit einem Strich für jede Zeichnung. Zeigt, wo eine Bewegung beschleunigt und bremst; oft auch Timing-Chart genannt. + - term: Squash & Stretch + definition: Stauchen und Strecken eines Körpers in Bewegungsrichtung, wobei seine Menge gleich bleibt. In einer Zeichnung bleibt Breite mal Höhe ungefähr konstant. + - term: Stützfläche + definition: Die Fläche, auf der ein Körper steht, bei zwei Füßen beide Füße und alles dazwischen. Steht eine Figur still, fällt das Lot von ihrem Schwerpunkt hinein. + - term: Sub-Pixel-Animation + definition: Eine Bewegung unter einem Pixel, vorgetäuscht durch Zwischentöne an Kanten oder wanderndes Licht im Inneren, während die Silhouette fast gleich bleibt. + - term: Suggestivfrage + definition: Eine Frage, die die Antwort oder eine Auswahl davon enthält, etwa „Wirkt sie müde?“. Befragte übernehmen dann oft die Wörter der Fragenden. + - term: Tag + definition: Benannter Bereich von Bildern in einer Animationsdatei, in Aseprite und LibreSprite mit Abspielrichtung (vorwärts, rückwärts, Ping-Pong). Trennt mehrere Animationen einer Figur; der Name wird zum Animationsnamen im Spiel. + - term: Tick + definition: Ein Takt der Spielphysik, in Godot standardmäßig 1/60 Sekunde oder rund 16,7 ms. Läuft das Spiel mit 60 Bildern pro Sekunde, steht jede Zeichnung eine ganze Zahl von Ticks. + - term: Timing + definition: Die Zeit, die eine Bewegung bekommt – Zahl der Bilder und Dauer jedes Bilds. Eines der zwölf Prinzipien von Thomas und Johnston. + - term: Überarbeitungsprotokoll + definition: Eintrag je Fassung mit Datum, Absichtssatz, Beobachtung (eigene und Beobachtungstest), Änderung mit Bildern und Zahlen, Grund und Ergebnis nach der Änderung. + - term: Überschwingen (Overshoot) + definition: Ein Körper kommt am Ende einer Bewegung ein Stück über das Ziel hinaus, bevor er zurückpendelt. In Pixelart oft ein Bild um ein, zwei Pixel. + - term: Variante + definition: Kopie der Basis, die sich in genau einer Größe unterscheidet, etwa einer Haltezeit, der Stauchung oder dem Versatz eines Teils. + - term: Verknüpftes Cel + definition: Cel, das sich ein Bild mit anderen Cels teilt; eine Änderung wirkt auf alle. In Krita Clone Frame genannt. + - term: Versatz + definition: Zahl der Bilder, um die ein weicher Teil wie ein Schwanz oder Band der Bewegung des Körpers nachläuft. Steuert die Überlappung. + - term: Wischbild (Smear) + definition: Ein Bild zwischen zwei Keys, das eine schnelle Bewegung als gestreckte, verwischte Form entlang ihres Weges zeigt. Steht kurz und kommt nur bei echtem Tempo vor. + - term: Zustandswechsel + definition: Der Moment, in dem eine Figur von einem Zustand in einen anderen geht, etwa vom ruhigen Gehen ins Horchen. Lesbar durch Posenkontrast, Haltezeit auf der neuen Pose und, wo nötig, ein Übergangsbild. + - term: Zwischenbild (Inbetween) + definition: Ein Bild, das den Weg zwischen Key und Breakdown füllt, ohne etwas Neues zu erzählen. diff --git a/content/animation/interview.yaml b/content/animation/interview.yaml new file mode 100644 index 0000000..fe97b12 --- /dev/null +++ b/content/animation/interview.yaml @@ -0,0 +1,386 @@ +cards: + - id: bs-key-breakdown-zwischenbild + module: beobachten-schluesselposen + q: Was ist der Unterschied zwischen Key, Breakdown und Zwischenbild? + a: | + Keys sind die Posen, die erzählen, was passiert; wer nur sie sieht, versteht die Handlung. Ein Breakdown liegt zwischen zwei Keys und legt fest, auf welchem Weg die Figur von einem zum anderen kommt. Zwischenbilder füllen den Rest, ohne etwas Neues zu zeigen. Beim Aufstehen vom Stuhl sind Sitzen und Stehen die Keys, die vorgebeugte Pose mit der Brust über den Knien ist der Breakdown; ohne ihn schwebt die Figur senkrecht hoch. + tags: [schlüsselpose, breakdown, grundlagen] + level: 1 + - id: bs-referenz-ohne-abpausen + module: beobachten-schluesselposen + q: Wie nutzt du eine Videoreferenz, ohne sie abzupausen? + a: | + Als Beleg für Timing und Posen, nicht als Vorlage. Ich gehe die Aufnahme Bild für Bild durch, notiere die Bildnummern der wichtigen Posen und rechne die Zeit dazwischen aus. Dann zeichne ich die Posen neu, mit den Proportionen meiner Figur, lasse weg und übertreibe. Slynyrd beschreibt genau das: 72 Bilder Video, 8 von Hand ausgewählt, Dauern angepasst, dann mit weiteren Referenzen verglichen. + tags: [referenz, rotoskopie, arbeitsweise] + level: 1 + - id: bs-pose-to-pose-im-spiel + module: beobachten-schluesselposen + q: Warum arbeiten Animatoren für Spiele meist Pose-to-Pose? + a: | + Weil Keys und Timing dann feststehen, bevor das erste Zwischenbild existiert. Ich kann die Keys im Spiel oder als Daumenkino testen und Timing und Posen billig ändern. Bei Cuphead kamen nach Jake Clark erst die Keys, dann die Breakdowns, dann die volle Animation. Straight Ahead nehme ich für Dinge ohne feste Form, etwa Rauch oder ein flatterndes Tuch, oft kombiniert mit Pose-to-Pose für den Körper. + tags: [pose-to-pose, straight-ahead, arbeitsweise] + level: 2 + - id: bs-zeitlupe-umrechnen + module: beobachten-schluesselposen + q: In einer Zeitlupe mit 120 Bildern pro Sekunde zählst du 36 Bilder für eine Bewegung. Wie lange dauert sie wirklich? + a: | + 36 / 120 Sekunden, also 300 ms. Es zählt die Aufnahmerate, nicht die Wiedergaberate. Teile ich durch 30, weil das Video mit 30 Bildern pro Sekunde abgespielt wird, komme ich auf 1200 ms und plane die Bewegung viermal zu langsam. + tags: [referenz, timing, rechnen] + level: 1 + - id: ts-timing-spacing + module: timing-spacing + q: Was ist der Unterschied zwischen Timing und Spacing? + a: | + Timing ist, wie lange eine Bewegung dauert und wie lange jede Zeichnung steht. Spacing ist, wie weit die Zeichnungen auseinanderliegen. Bei gleicher Gesamtzeit und Bildzahl macht das Spacing aus einer gleichmäßigen Bewegung eine, die beschleunigt oder bremst. Wenn eine Bewegung nicht stimmt, frage ich deshalb zuerst, welche der beiden Größen falsch ist. + tags: [timing, spacing, grundlagen] + level: 1 + - id: ts-ball-ohne-ease + module: timing-spacing + q: Ein hüpfender Ball wirkt, als würde er sanft auf den Boden gesetzt. Woran liegt das meistens? + a: | + Am Spacing vor dem Kontakt. Im freien Fall wachsen die Abstände gleichmäßig, nach Galilei wie 1 : 3 : 5 : 7, und der größte Abstand liegt direkt vor dem Boden. Wer dort aus Gewohnheit abbremst, setzt einen Ease in den Aufprall. Der Scheitel bekommt das Ease, der Boden nicht. + tags: [spacing, ball, gewicht] + level: 1 + - id: ts-haltezeiten + module: timing-spacing + q: Warum sollten in einer Sprite-Animation nicht alle Bilder gleich lang stehen? + a: | + Weil Keys und Zwischenbilder verschiedene Aufgaben haben. Keys sind die Posen, an denen man die Handlung erkennt, sie brauchen Zeit, um gelesen zu werden. Zwischenbilder und Wischbilder zeigen den Weg und dürfen vorbeihuschen. Mariel Cartwright beschreibt für Skullgirls, dass gleich lange Haltezeiten Bilder verschwenden. Eine Haltezeit kostet keine neue Zeichnung. + tags: [timing, haltezeit, pixelart] + level: 1 + - id: ts-ticks + module: timing-spacing + q: Du hast im Editor 80 ms pro Bild eingestellt. Was passiert damit in einem Spiel mit 60 Ticks pro Sekunde? + a: | + 80 ms sind 4,8 Ticks. Ein Bild kann im Spiel nur ganze Ticks lang stehen, also stehen manche Bilder 5 Ticks und manche 4. Über einen Zyklus aus fünf Bildern kommt es aufs Gleiche heraus, aber der Takt ist ungleichmäßig. Dauern wie 50, 100 oder 150 ms gehen genau auf; wenn ich 5 Ticks meine, trage ich in Godot 12 FPS ein statt 83 ms. + tags: [timing, ticks, godot] + level: 2 + - id: ts-wirkung-pruefen + module: timing-spacing + q: Du willst, dass eine Bewegung zögernd wirkt. Woher weißt du, ob dir das gelungen ist? + a: | + Nicht aus einer Regel, sondern aus Beobachtung. Ich schreibe vorher einen Absichtssatz, zeige die Animation jemandem ohne Vorrede und frage nur, was passiert. Die Antwort notiere ich wörtlich und vergleiche sie mit meiner Absicht. Timing-Konventionen helfen beim Entwerfen, aber erst ein Zuschauer zeigt, ob sie bei ihm ankommen. + tags: [wirkung, beobachtungstest] + level: 2 + - id: bu-gerade-zwischenbilder + module: boegen-ueberlappung + q: Ein Arm dreht von unten nach oben, und in der Mitte der Bewegung zuckt die Hand zur Schulter. Woran liegt das? + a: | + Die Zwischenbilder liegen auf der Geraden zwischen den Keys statt auf dem Bogen. Weil der Arm um die Schulter dreht, läuft die Hand auf einem Kreis; die Gerade schneidet ihn ab, und in der Mitte wird der Arm kürzer, bei 90 Grad um fast ein Drittel. Ich verfolge einen Punkt durch alle Bilder, auf Haftzetteln oder mit Onion Skinning, und setze die Zwischenbilder auf den Bogen. + tags: [bogen, zwischenbild, fehlersuche] + level: 2 + - id: bu-overlap-secondary + module: boegen-ueberlappung + q: Was ist der Unterschied zwischen Overlapping Action und Secondary Action? + a: | + Overlapping Action heißt, dass Teile einer Figur mit versetztem Timing laufen, weil die Hauptbewegung sie mitzieht: Haare, Kleidung, die Hand nach dem Ellbogen. Secondary Action ist eine eigene, zusätzliche Handlung, etwa im Gehen pfeifen oder auf die Uhr schauen. Sie soll die Hauptbewegung stützen, nicht ablenken. In Spiel-Tutorials heißt nachziehendes Haar trotzdem oft „secondary animation“; entscheidend ist, ob das Teil bewegt wird oder die Figur handelt. + tags: [overlapping-action, secondary-action, begriffe] + level: 2 + - id: bu-schal-wenige-bilder + module: boegen-ueberlappung + q: Wie planst du einen Schal, der nachschwingt, in einem Sprite mit wenigen Bildern? + a: | + Als Kette: Jedes Glied übernimmt die Stellung des Glieds darüber aus dem Bild davor, also ein Bild Versatz je Glied. Hält die Figur an, schwingt das Ende über und zurück, und jeder Ausschlag ist kleiner als der vorige, bis er unter ein Pixel fällt. Die Pixelgruppen des Schals bleiben dabei zusammen. Ich plane das zuerst als Bildliste mit Winkeln oder Pixeln, dann zeichne ich. + tags: [follow-through, pixelart, planung] + level: 2 + - id: bu-flattern + module: boegen-ueberlappung + q: Ein Haarbüschel in deiner Ruheanimation flackert, statt zu schwingen. Was prüfst du? + a: | + Ob es jedes Bild um ein Pixel hin und her springt, ohne Richtung und ohne Ende. Ein Nachschwingen braucht einen Ausschlag, der in eine Richtung geht und abnimmt, und es sollte ein Bild nach dem Kopf kommen, nicht gleichzeitig. Saint11 rät, Pixelgruppen nicht aufzubrechen; ich bewege das Büschel als Ganzes. Reicht das nicht, lasse ich das lose Teil weg. + tags: [overlapping-action, pixelart, fehlersuche] + level: 2 + - id: sb-lot-stuetzflaeche + module: schwerpunkt-balance + q: Wann steht eine Figur im Gleichgewicht, und wie prüfst du das an einer Zeichnung? + a: | + Wenn das Lot, die senkrechte Linie von ihrem Schwerpunkt nach unten, in die Stützfläche fällt, also auf die Füße oder zwischen sie. Ich schätze den Schwerpunkt, beim Stehen etwa auf Hüfthöhe, ziehe das Lot mit einem Lineal und markiere die Füße auf der Bodenlinie. Liegt das Lot daneben, kippt die Figur, bis ein Fuß sie auffängt; das ist bei einem Schritt gewollt, im Stand nicht. + tags: [schwerpunkt, gleichgewicht, grundlagen] + level: 1 + - id: sb-aufstehen-schwebt + module: schwerpunkt-balance + q: Eine animierte Figur schwebt beim Aufstehen senkrecht aus dem Stuhl. Was fehlt? + a: | + Die Gewichtsverlagerung vor dem Strecken. Im Sitzen tragen Sitzfläche und Füße gemeinsam. Damit die Füße allein tragen, muss der Oberkörper erst so weit nach vorn, dass das Lot über den Füßen liegt; erst dann hebt das Gesäß ab. Diese vorgebeugte Pose ist der Breakdown, der fehlt. + tags: [schwerpunkt, breakdown, fehlersuche] + level: 2 + - id: sb-draufsicht-sprung + module: schwerpunkt-balance + q: Wie zeigst du in einem Top-down-Spiel, dass eine Figur springt? + a: | + Über den Abstand zum Schatten. Der Schatten bleibt am Bodenpunkt der Figur, die Höhe zeichne ich als Versatz nach oben: Figur-Zeile gleich Schatten-Zeile minus Höhe. Steigen Figur und Schatten gemeinsam, hat sich der Bodenpunkt verschoben, und das ist eine Bewegung nach hinten. Den Ursprung des Sprites lege ich an die Füße, damit Schatten und Füße beim Landen zusammentreffen. + tags: [draufsicht, schatten, top-down] + level: 2 + - id: sb-rutschender-fuss + module: schwerpunkt-balance + q: Woran erkennst du in einer Bildliste einen rutschenden Standfuß? + a: | + Ein Fuß, der Gewicht trägt, hat vom Kontaktbild bis zum Abheben in jedem Bild dieselbe Position. Ändert sich sein x-Wert in diesem Abschnitt, rutscht er, oft genau in dem Bild, in dem das andere Bein aufsetzt. Im Editor prüfe ich das mit Onion Skinning: Der tragende Fuß muss deckungsgleich sein. Rutscht er erst im Spiel, passt das Tempo nicht zur Schrittlänge. + tags: [bodenkontakt, fehlersuche, bildliste] + level: 1 + - id: ga-fallen-gewicht + module: gewicht-aufprall + q: Fällt eine Bowlingkugel schneller als ein gleich großer Gummiball? Was heißt das für die Animation? + a: | + Nein, ohne nennenswerten Luftwiderstand fallen beide gleich schnell; das hat der Hammer-Feder-Versuch von Apollo 15 auf dem Mond gezeigt. Den Fall plane ich deshalb für beide gleich. Das Gewicht zeige ich an den Enden der Bewegung: Verformung und Rückprall beim Aufprall, Haltezeiten danach, die Reaktion der Umgebung und bei Figuren das Anfahren. + tags: [gewicht, aufprall, grundlagen] + level: 1 + - id: ga-squash-flaeche + module: gewicht-aufprall + q: Was ist die wichtigste Regel bei Squash & Stretch, und wie wendest du sie in Pixelart an? + a: | + Die Menge bleibt gleich, nur die Form ändert sich. In einer Zeichnung heißt das: Breite mal Höhe bleibt ungefähr konstant. Ein 16 × 16 Pixel großer Ball wird bei 12 Pixeln Höhe etwa 21 breit; schon ein Pixel flacher verlangt ein Pixel breiter. Bei runden Formen zähle ich die Pixel nach. Steife Gegenstände verformen sich kaum, und gestaucht wird nur im Kontaktbild, nie in der Luft. + tags: [squash-and-stretch, pixelart, rechnen] + level: 1 + - id: ga-rueckprall-planen + module: gewicht-aufprall + q: Wie planst du die Hüpfer eines Balls, bis er liegt? + a: | + Mit einem Rückprallfaktor: Jeder Rückprall erreicht einen festen Anteil der vorigen Höhe, ein Basketball nach FIBA-Regel knapp 60 %. Die Fallzeit wächst mit der Wurzel der Höhe, also werden die Hüpfer auch kürzer. Ich rechne die Höhen aus, bis sie unter ein Pixel fallen, und plane danach eine Ruhe. Den Faktor wähle ich nach Material und prüfe am Zuschauer, ob er das Material erkennt. + tags: [aufprall, rückprall, rechnen] + level: 2 + - id: ga-schwer-heben + module: gewicht-aufprall + q: Wie zeigst du, dass eine Figur etwas Schweres hebt und nicht etwas Leichtes? + a: | + Über Timing und Haltung. Schweres reagiert langsamer: mehr Zeit beim Greifen und Anheben, ein langsamer Start, die Last löst sich spät vom Boden. Die Figur geht tiefer, die Hüfte weiter nach hinten, die Last bleibt nah am Körper. Ob „schwer“ ankommt oder „zögerlich“, prüfe ich mit einem Beobachtungstest; oft reicht das Timing allein nicht, und ich ändere zusätzlich die Haltung. + tags: [gewicht, timing, körpersprache] + level: 2 + - id: ae-drei-phasen + module: antizipation-erholung + q: Aus welchen Phasen besteht eine kräftige Bewegung, und welche ist meistens die kürzeste? + a: | + Aus Antizipation, Aktion und Erholung. Die Antizipation holt in die Gegenrichtung aus und kündigt an, was kommt. Die Aktion ist der Moment, in dem die Kraft wirkt, und meist die kürzeste Phase, oft nur ein, zwei Bilder. In der Erholung kommt der Körper über das Ziel hinaus, schwingt zurück und findet in eine Ruhepose. Saint11 teilt einen Aufprall noch feiner in Ruhe, Ausholen, Aktion, Überschwingen, Ruhe. + tags: [antizipation, erholung, timing] + level: 1 + - id: ae-schieben-statt-werfen + module: antizipation-erholung + q: Deine Figur wirft eine Kiste, aber Zuschauer beschreiben ein Schieben. Was prüfst du zuerst? + a: | + Die Antizipation. Ich sehe nach, ob die Ausholpose gegen die Wurfrichtung geht, also Arme und Gewicht nach hinten, und ob sie lange genug steht, um gelesen zu werden. Liegt sie schon in Wurfrichtung oder steht sie so kurz wie ein Zwischenbild, fehlt die Gegenbewegung. Danach ändere ich nur diese eine Pose und zeige die neue Fassung jemandem, der die alte nicht kennt. + tags: [antizipation, beobachtungstest] + level: 2 + - id: ae-wischbild + module: antizipation-erholung + q: Wann setzt du ein Wischbild ein, und wie lange steht es? + a: | + Wenn der Weg zwischen zwei Keys so groß ist, dass der Gegenstand von einem Bild zum nächsten springt. Das Wischbild zeigt ihn als gestreckte Form entlang des Weges. Es steht kurz, kürzer als die Keys; bei Slynyrd sind es 50 ms, im Spiel 3 Ticks. An langsamen, gut lesbaren Bewegungen und beim Ausholen oder Zurückkehren lasse ich es weg, weil es dort nur ablenkt. + tags: [smear, aktion, pixelart] + level: 2 + - id: ae-gewicht-haltezeiten + module: antizipation-erholung + q: Wie zeigst du in Pixelart, dass eine Waffe oder ein Gegenstand schwer ist, ohne mehr Bilder zu zeichnen? + a: | + Über die Haltezeiten vor und nach der Aktion. Slynyrd animiert Schwert, Speer und Hammer mit je sechs Bildern; das Ausholen wächst von 100 auf 250 ms, das gehaltene Bild nach dem Schlag von 100 auf 300 ms, die Bilder des Schlags bleiben bei 50 ms. Der schwere Schlag kommt also nicht langsamer, er braucht länger, bevor er fällt, und länger, bis die Figur wieder steht. Ob das schwer gelesen wird, prüfe ich mit einem Zuschauer, und im Spiel kläre ich, wie viel Ausholen die Steuerung verträgt. + tags: [gewicht, timing, haltezeit] + level: 2 + - id: gl-gangposen + module: gehen-laufen + q: Welche Posen hat ein Gangzyklus, und wo ist der Kopf am tiefsten? + a: | + Ein Zyklus hat zwei Schritte, jeder mit Kontakt, Tiefpunkt, Passing und Hochpunkt. Tief ist der Kopf nahe dem Kontakt, wenn das vordere Bein das Gewicht abfängt, hoch um das Passing, wenn der Körper auf dem Standbein steht. Die Arme schwingen gegen die Beine, und der tragende Fuß wandert gleichmäßig nach hinten. Ein Kopf, der beim Passing am tiefsten ist, lässt die Figur bei jedem Schritt einknicken. + tags: [gehen, zyklus, grundlagen] + level: 1 + - id: gl-laufen-ist-kein-schneller-gang + module: gehen-laufen + q: Was unterscheidet einen Laufzyklus von einem Gangzyklus mit kürzeren Bilddauern? + a: | + Die Flugphase. Beim Laufen gibt es einen Moment ohne Bodenkontakt, und der höchste Punkt liegt in der Luft, während er beim Gehen oben auf dem Standbein liegt. Dazu kommen Vorlage und weitere Schrittposen. Ein beschleunigter Gang hat nichts davon; er wird hastig, aber er läuft nicht. Deshalb zeichne ich einen Laufzyklus eigens. + tags: [laufen, zyklus] + level: 2 + - id: gl-bilder-kuerzen + module: gehen-laufen + q: Du kürzt einen Zyklus von acht auf vier Bilder. Was behältst du, und was musst du anpassen? + a: | + Kontakt und Passing bleiben, sie tragen den Schritt; Slynyrd streicht zuerst das Rückfederbild, das dem Kontakt ähnelt, dann den Hochpunkt. Anpassen muss ich die Dauern: Mit gleichen Dauern wäre der Zyklus halb so lang und die Figur doppelt so schnell. Slynyrd stellt deshalb 160 statt 80 ms je Bild ein. Danach prüfe ich, ob das Auf und Ab des Kopfes noch da ist. + tags: [zyklus, timing, pixelart] + level: 2 + - id: gl-ruhezyklus + module: gehen-laufen + q: Wie verhinderst du, dass ein Ruhezyklus mechanisch tickt? + a: | + Mit ungleichen Dauern: Die Enden der Bewegung stehen länger als die Mitte, oben und unten nicht gleich lang. Ich halte die Masse gleich, also wird die Figur breiter, wenn sie sinkt, und ich bewege nicht nur senkrecht. Teile wie der Kopf dürfen ein Bild später folgen. Mehrere Schleifen auf einem Bild bekommen verschiedene Längen, damit man nicht sieht, wo sie neu beginnen. + tags: [idle, zyklus, timing] + level: 2 + - id: ks-beobachtungstest + module: koerpersprache + q: Wie läuft ein Beobachtungstest ab? + a: | + Vorher schreibe ich einen Absichtssatz und meine Fragen auf und prüfe, dass nichts im Material die Absicht verrät, auch kein Dateiname. Dann zeige ich die Animation ohne Vorrede dreimal in Schleife und frage offen: „Was passiert da?“, bei Zuständen danach „Wie fühlt sich die Figur?“, gezielte Fragen ganz zum Schluss. Die Antworten notiere ich wörtlich, ohne zu erklären oder zu korrigieren. Zum Schluss vergleiche ich sie mit dem Absichtssatz und entscheide selbst, was sich ändert. + tags: [beobachtungstest, wirkung] + level: 1 + - id: ks-suggestivfrage + module: koerpersprache + q: Warum fragst du im Test nicht „Wirkt die Figur müde?“ + a: | + Weil die Frage die Antwort enthält. Befragte übernehmen oft die Wörter der Fragenden; die Nielsen Norman Group warnt, dass suggestive Fragen deshalb verzerrte Antworten liefern. Wer „müde“ fragt, hört „müde“ und weiß nicht, ob es jemand gesehen hätte. Ich frage zuerst „Was passiert da?“ und dann nach dem Zustand, ohne einen zu nennen. + tags: [beobachtungstest, fragen] + level: 2 + - id: ks-abweichung + module: koerpersprache + q: Eine Testperson liest deine Animation anders, als du sie gemeint hast. Was machst du damit? + a: | + Ich notiere die Antwort wörtlich und behandle sie als Information, nicht als Urteil. Dann frage ich mich, was in den Bildern zu dieser Lesart führen könnte, etwa ob nur das Tempo gelesen wurde und die Haltung nicht. Eine Antwort ist aber kein Beleg. Bevor ich eine Regel daraus mache, will ich ein Muster bei mehreren Personen sehen, die die Animation noch nicht kannten. + tags: [beobachtungstest, ueberarbeiten] + level: 2 + - id: ks-zustandswechsel + module: koerpersprache + q: Wie machst du einen Zustandswechsel lesbar, etwa eine Figur, die geht, etwas hört und stehen bleibt? + a: | + Mit drei Dingen. Kontrast: Die neue Pose unterscheidet sich deutlich von der alten, schon in der Silhouette. Haltezeit: Sie steht lange genug, damit man sie liest. Übergang: Ein Übergangsbild zeigt den Weg, oft geht der Kopf voraus. Bei kleinen Pixelfiguren übertreibe ich, weil ein Pixel leicht untergeht, und prüfe mit einem Beobachtungstest, ob der Wechsel gesehen wird. + tags: [zustand, koerpersprache, pose] + level: 2 + - id: fk-on-model + module: form-konstanz + q: Was heißt „on model“, und wie hältst du eine Pixelfigur über alle Bilder auf Modell? + a: | + On model heißt, dass jedes Bild zur festgelegten Figur passt: Maße, Masse, Details, Konturstärke, Lichtseite und Palette. Ich arbeite mit einem Modellblatt, kopiere Bilder, statt sie neu zu zeichnen, verknüpfe unveränderte Teile und lege bewegliche Teile auf eigene Ebenen. Gewollte Änderungen wie Stauchen oder Wischbilder schreibe ich mit Grund in die Bildliste. + tags: [konstanz, modellblatt, pixelart] + level: 1 + - id: fk-flackern-finden + module: form-konstanz + q: Deine Schleife flackert, aber jedes Einzelbild sieht gut aus. Wie findest du den Fehler? + a: | + Ich spiele die Schleife in Originalgröße und voller Geschwindigkeit mehrmals ab und notiere, wo es flackert. Dann lege ich die betroffenen Bilder mit Onion Skinning auf ihre Nachbarn und zähle Kopfmaße, Augenreihe und Konturstärke. Meist ist es ein Pixel: ein Kopf, der wächst, ein Auge, das springt, eine doppelte Kontur oder eine Farbe, die nur in einem Bild vorkommt. Repariert wird durch Kopieren aus einem guten Bild, danach spiele ich wieder ab. + tags: [konstanz, fehlersuche, onion-skinning] + level: 2 + - id: fk-subpixel + module: form-konstanz + q: Was ist Sub-Pixel-Animation, und wo liegt ihre Grenze? + a: | + Eine Bewegung unter einem Pixel, vorgetäuscht durch Zwischentöne an der Kante oder durch Licht, das im Inneren wandert, während die Silhouette fast gleich bleibt. Sie eignet sich für kleine Bewegungen wie Atmen. Die Grenze ist die Klarheit: Viele Zwischentöne machen die Figur unscharf, und Töne, die auftauchen und verschwinden, flackern. Ich prüfe sie deshalb immer in der Schleife. + tags: [subpixel, pixelart, konstanz] + level: 2 + - id: ais-reaktion-gegen-gewicht + module: animation-im-spiel + q: Wie bringst du eine ausdrucksstarke Animation und eine direkte Steuerung zusammen? + a: | + Ich trenne, was der Spieler auslöst, von dem, was er beantworten soll. Bei Aktionen der Spielfigur zeigt schon das erste Bild nach dem Druck eine sichtbare Änderung, Ausholen bleibt kurz oder wird durch eine starke erste Pose ersetzt. Gewicht kann in der Erholung und im Nachschwingen liegen, wie bei Saint11s Angriff ohne Antizipationsbild. Gegner dürfen lange ausholen, weil der Spieler darauf reagieren soll. Ob es passt, messe ich in Ticks und frage jemanden an der Tastatur. + tags: [steuerung, antizipation, spielgefühl] + level: 3 + - id: ais-zwei-zeitpunkte + module: animation-im-spiel + q: Welche zwei Zeitpunkte misst du bei einer Aktion der Spielfigur? + a: | + Erstens die Ticks vom Druck bis zum ersten Bild, das sich sichtbar von der Ruhe unterscheidet; daran merkt der Spieler, dass seine Eingabe ankam. Zweitens die Ticks bis zur Erkennungspose, an der man sieht, was die Figur tut. Beginnt eine Bildliste mit Bildern, die wie die Ruhe aussehen, verliert der erste Wert Zeit, ohne dass etwas zu sehen ist. + tags: [ticks, eingabe, messen] + level: 2 + - id: ais-uebergangsanimation + module: animation-im-spiel + q: Wann lohnt sich eine Wende- oder Startanimation, und was kostet sie? + a: | + Sie kann einer Figur Gewicht geben; bei Owlboy wirkte die Figur nach Aussage des Entwicklers mit kleinen Wendeanimationen schwerer als mit sofortigem Richtungswechsel. Sie kostet aber Ticks, in denen die Figur nicht tut, was der Spieler will. Dead Cells dreht den Helden in einem Fall sogar unbemerkt sofort um. Ich lege für jede Übergangsanimation fest, ob und ab welchem Bild der Spieler sie abbrechen darf, und prüfe die Wirkung mit Testspielern. + tags: [übergänge, steuerung, abbruch] + level: 3 + - id: ais-ton-markieren + module: animation-im-spiel + q: Wie bereitest du als Animator den Ton einer Animation vor? + a: | + Ich markiere die Bilder, die einen Ton tragen, als Bildnummern: Kontaktbilder für Schritte, das Aufprallbild für einen Aufprall, bei Treffern das Bild, in dem der Treffer zählt. Keine Millisekunden, damit der Ton beim nächsten Timing-Wechsel mit seinem Bild wandert. Engines hängen Töne an solche Marken, Unreal über Notifies, Godot zum Beispiel über das Signal frame_changed. Wie der Ton klingt, entscheidet die Tongestaltung. + tags: [ton, kontaktbild, pipeline] + level: 2 + - id: ez-cel-frame-ebene + module: editor-zeitleiste + q: Was ist der Unterschied zwischen Bild, Ebene und Cel in einer Animations-Zeitleiste? + a: | + Bilder sind die Spalten, also die Zeitpunkte der Animation; Ebenen sind die Zeilen, etwa Figur und Schatten. Ein Cel ist das Bild einer Ebene in einem bestimmten Bild der Animation. Verknüpfte Cels teilen sich ein Bild, in Krita heißen sie Clone Frames; wer eines ändert, ändert alle. + tags: [editor, zeitleiste, grundlagen] + level: 1 + - id: ez-dauer-je-programm + module: editor-zeitleiste + q: Wie speichern Aseprite, Pixelorama und Krita die Dauer eines Bildes? + a: | + Aseprite und LibreSprite speichern je Bild Millisekunden. Pixelorama hat eine Bildrate für die Zeitleiste und je Bild einen Faktor, wie Godots Frame-Dauer. Krita zählt Felder einer festen Bildrate und hält jede Zeichnung bis zur nächsten. Bei 20 Bildern pro Sekunde wird in Pixelorama und Krita jedes Vielfache von 50 ms ein ganzer Faktor oder eine ganze Zahl Felder. + tags: [editor, timing, werkzeuge] + level: 1 + - id: ez-onion-skinning + module: editor-zeitleiste + q: Wofür nutzt du Onion Skinning, und wann schaltest du es aus? + a: | + Damit sehe ich beim Zeichnen die Bilder davor und danach. Die Abstände zwischen den Schatten zeigen das Spacing, der Weg eines Punkts über alle Schatten zeigt, ob er auf einem Bogen läuft, und Größenunterschiede verraten Fehler in der Konstanz. Aus schalte ich es, wenn ich ein Einzelbild für sich beurteile, etwa seine Silhouette, und beim Abspielen. In Krita brauche ich dafür eine nicht deckende Ebene. + tags: [onion-skinning, spacing, editor] + level: 1 + - id: ez-export-timing + module: editor-zeitleiste + q: Wie exportierst du eine Animation so, dass ihr Timing im Spiel ankommt? + a: | + Als Sprite-Sheet in 100 % mit festem Raster und ohne Trim, eine Zeile je Animation, dazu die Bilddauern. Aseprite und LibreSprite schreiben sie in eine JSON-Datei, mit den Tags in den Meta-Daten; bei Pixelorama und Krita lege ich eine Bildliste daneben. Ich sage dazu, ob Bildnummern ab 0 oder 1 zählen. Vergrößerte GIFs sind nur zum Zeigen. + tags: [export, json, pipeline] + level: 2 + - id: ws-eine-groesse + module: werkstatt-studien + q: Warum änderst du in einer Variante nur eine Größe? + a: | + Weil ich sonst nicht weiß, was gewirkt hat. Verlängere ich die Haltezeit und staucht der Ball zugleich stärker, kann die Antwort „wirkt schwerer“ von beidem kommen. Mit einer Basis und Varianten, die sich in genau einer Größe unterscheiden, lässt sich jede Beobachtung einer Änderung zuordnen. Im Protokoll steht dafür eine Zeile „sonst gleich“. + tags: [variante, experiment, arbeitsweise] + level: 2 + - id: ws-timing-ohne-zeichnung + module: werkstatt-studien + q: Wie testest du verschiedene Timings, ohne neu zu zeichnen? + a: | + Ich kopiere die Basis und ändere nur Bilddauern: in Aseprite die Millisekunden, in Pixelorama die Faktoren, in Krita die Zahl der Haltebilder. Slynyrd zeichnet das Ausholen seines Angriffs als ein einziges Bild und gibt ihm je nach Waffe eine andere Dauer. Weil keine Zeichnung neu ist, scheidet sie als Ursache aus, und die Varianten kosten Minuten. + tags: [timing, variante, editor] + level: 2 + - id: ws-test-mit-varianten + module: werkstatt-studien + q: Wie zeigst du zwei Varianten, ohne die Antwort vorzugeben? + a: | + Mit neutralen Namen wie X und Y, in wechselnder Reihenfolge, je dreimal in Schleife. Ich frage zuerst „Was passiert da?“, dann „Was ist bei den beiden anders?“ und erst zuletzt, wenn überhaupt, gezielt, etwa „Welcher ist schwerer?“. Die Antworten schreibe ich wörtlich auf. Eine Person ist ein Hinweis, kein Beleg. + tags: [beobachtungstest, variante, test] + level: 2 + - id: wf-posentest + module: werkstatt-figur + q: Was ist ein Posentest, und warum machst du ihn vor den Zwischenbildern? + a: | + Ich spiele nur die Keys mit ihren geplanten Dauern ab. So sehe ich, ob die Bewegung schon an den Schlüsselposen lesbar ist und ob die Haltezeiten stimmen. Änderungen kosten jetzt eine Zeichnung; später müsste ich auch alle Zwischenbilder um einen Key herum neu machen. Cartwright, Clark bei Cuphead und Vasseur bei Dead Cells beschreiben dieselbe Reihenfolge. + tags: [posentest, keys, arbeitsweise] + level: 2 + - id: wf-ueberarbeitung-zeigen + module: werkstatt-figur + q: Zeig eine Animation und erzähl, wie du sie überarbeitet hast. + a: | + Ich zeige Fassung 1 und die letzte nebeneinander und sage, was ich zeigen wollte. Dann, was ein Zuschauer in Fassung 1 tatsächlich gesehen hat, welche Bilder ich daraufhin geändert habe, mit Dauer oder Pose vorher und nachher, und warum. Ich nenne das Ergebnis des zweiten Tests, eine Änderung ohne Wirkung und eine Stelle, die ich bewusst gelassen habe. + tags: [überarbeitung, portfolio, protokoll] + level: 3 + - id: wf-grosses-zuerst + module: werkstatt-figur + q: In welcher Reihenfolge prüfst du eine Fassung, bevor du sie überarbeitest? + a: | + Vom Großen zum Kleinen: erst ob man die Handlung liest, dann Timing, dann Spacing und Bögen, dann Gewicht und Bodenkontakt, Überlappung, Konstanz der Form und zuletzt einzelne Pixel. Am Ende prüfe ich die Lesbarkeit in Originalgröße. Wer mit Pixeln anfängt, poliert Bilder, die die nächste Timing-Änderung umwirft. + tags: [überarbeitung, prüfung, arbeitsweise] + level: 2 + - id: wf-ki-grenze + module: werkstatt-figur + q: Was darf eine KI in deiner Animationsarbeit übernehmen und was nicht? + a: | + Technische Arbeit: Export-Skripte, Befehle für Sprite-Sheets, Git-Befehle, ein Skript, das Fassungen als GIF nebeneinanderlegt. Nicht: Figuren, Posen, Zwischenbilder, Referenzen oder Urteile über meine Animation. Auch die Frage „Was stimmt nicht?“ liefert Gestaltungsvorschläge; Rückmeldung hole ich mir von Menschen im Beobachtungstest. + tags: [ki, arbeitsweise, werkstatt] + level: 1 + - id: tsz-editor-spiel + module: testszene + q: Deine Animation sieht im Editor gut aus und wirkt im Spiel falsch. Wie gehst du vor? + a: | + Erst trenne ich Timing, Darstellung und Zeichnung. Ich vergleiche die Dauern aus dem Editor mit dem, was das Spiel zeigt, in einem Log mit festen Ticks. Dann sehe ich mir die Figur in Originalgröße vor dem Spielhintergrund an und am Übergang Bild für Bild. Erst wenn Timing und Darstellung stimmen, ändere ich Zeichnungen, eine Sache pro Durchgang. + tags: [testszene, pruefen, godot] + level: 2 + - id: tsz-ms-zu-fps + module: testszene + q: Wie überträgst du Bilddauern von 100, 50 und 150 ms in eine SpriteFrames-Ressource von Godot? + a: | + Godot rechnet mit FPS und einer relativen Frame-Dauer je Bild. Ich nehme den größten gemeinsamen Teiler der Dauern als Grundtakt, hier 50 ms. Das ergibt 20 FPS und die Faktoren 2, 1 und 3. Probe: 2 / 20 Sekunden sind 100 ms. So kommt das Timing ohne Rundung an. + tags: [godot, spriteframes, timing] + level: 2 + - id: tsz-sprung-beim-wechsel + module: testszene + q: Beim Wechsel von einer Animation zur nächsten springt die Figur um zwei Pixel. Was prüfst du zuerst? + a: | + Export und Ursprung, bevor ich eine Zeichnung anfasse. Wenn der Export leere Ränder je Animation abschneidet, sind die Bilder verschieden groß, und der Ursprung liegt relativ zur Figur woanders. Mit voller Leinwand und dem Ursprung an den Füßen liegt die Figur in jedem Bild an derselben Stelle. Erst wenn das ausgeschlossen ist, vergleiche ich die beiden Posen am Schnitt. + tags: [testszene, export, uebergaenge] + level: 2 + - id: tsz-uebergaenge + module: testszene + q: Warum prüfst du einen Übergang aus jedem Bild der vorigen Animation heraus? + a: | + Weil der Spieler entscheidet, wann gewechselt wird. Lässt er die Richtung in einem anderen Moment los, schneidet das Spiel aus einem anderen Bild des Laufzyklus in die Ruhe. Ein Übergang, der aus Bild 1 sauber aussieht, kann aus Bild 3 springen. Deshalb löse ich jeden Wechsel mehrmals aus und lese im Log ab, aus welchem Bild er kam. + tags: [testszene, uebergaenge, zyklen] + level: 3 diff --git a/content/animation/modules/animation-im-spiel.yaml b/content/animation/modules/animation-im-spiel.yaml new file mode 100644 index 0000000..38f7366 --- /dev/null +++ b/content/animation/modules/animation-im-spiel.yaml @@ -0,0 +1,482 @@ +id: animation-im-spiel +title: "Animation im Spiel: Tempo, Steuerbarkeit und Ton" +level: 3 +minutes: 130 +summary: Warum eine Animation im Spiel anderen Regeln folgt als im Editor, wie Spielanimatoren Ausführlichkeit gegen Steuerbarkeit abwägen, wo Übergänge und Unterbrechungen hingehören, was Spieltempo und Hitstop mit deinen Bildern machen und wie du die Bilder markierst, auf die später ein Ton gehört. +place: unterwegs +goals: + - Du nennst Coopers fünf Grundsätze der Spielanimation und erklärst, warum Reaktion und Trägheit gegeneinander ziehen. + - Du zählst in einer Bildliste die Ticks bis zum ersten veränderten Bild und bis zur Pose, an der man die Aktion erkennt. + - Du legst in einer Animationsliste für jede Animation Loop, Abbruch und Nachfolger fest und begründest, wo ein Übergangsbild Steuerung kostet. + - Du erklärst, warum im Hitstop eine Schlüsselpose stehen sollte und kein Zwischenbild. + - Du markierst in einem Zyklus die Bilder, die einen Ton tragen, als Bildnummern, ohne den Ton selbst zu gestalten. +resources: + - title: Game Anim · The Five Fundamentals of Video Game Animation + url: https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/ + - title: Tyriq Plummer · 2D Animation for Games, A Primer (GDC 2021) + url: https://www.youtube.com/watch?v=PKZJmHrG4Yw + - title: David Rosen · An Indie Approach to Procedural Animation (GDC 2014) + url: https://www.youtube.com/watch?v=LNidsMesxSE + - title: Saint11 · Pixel Art Tutorials + url: https://saint11.art/blog/pixel-art-tutorials/ + - title: Godot Docs · AnimatedSprite2D + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html +lesson: | + Du hast eine Gliederpuppe gezeichnet, die auf Knopfdruck springt: Sie steht, geht in zwei Bildern in die Knie und hebt ab. Im Editor sieht das kräftig aus. Im Spiel drückst du die Taste, und eine Zehntelsekunde lang steht die Puppe da wie vorher. Abheben sieht man erst nach 300 ms, und jedes Mal fühlt es sich an, als hätte das Spiel deinen Druck zu spät bemerkt. Die Zeichnungen sind nicht falsch. Sie folgen den Regeln des Films, in dem der Zuschauer nur zusieht. + + Im Spiel ist der Zuschauer auch der, der die Figur steuert. Diese Lektion zeigt, wie Spielanimatoren zwischen ausführlicher Bewegung und direkter Steuerung abwägen, was das Spieltempo mit deinen Bildern macht, wo Übergänge und Unterbrechungen hingehören und wie du Bilder für einen Ton markierst. Gemessen wird später am PC, im Prüfstand aus [In der Testszene prüfen](/animation/testszene). Hier planst du auf Papier, was du dort prüfen willst. + + ## Steuerbarkeit gegen Ausführlichkeit + + Jonathan Cooper stellt in seinem Buch *Game Anim: Video Game Animation Explained* (2. Auflage 2021) den zwölf klassischen Prinzipien fünf eigene für Spiele zur Seite. Die Buchseite beschreibt das als „Reinterprets the classic 12 & sets out 5 new principles for great game animation“ ([Game Anim](https://www.gameanim.com/book/)). Auf seiner Website stehen die fünf mit ihren Unterpunkten ([The Five Fundamentals](https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/)): + + - **Feel:** Reaktion auf die Eingabe, Trägheit und Schwung, sichtbare Rückmeldung. + - **Fluidity:** Übergänge, nahtlose Zyklen, Ausschwingen. + - **Readability:** Posen für die Spielkamera, Silhouetten, Kollision und Schwerpunkt. + - **Context:** Unterscheidbarkeit, Wiederholung, Platz auf dem Bildschirm. + - **Elegance:** schlichter Aufbau, Wirkung pro Aufwand, gemeinsame Standards. + + Schon die Unterpunkte von Feel ziehen gegeneinander. Trägheit heißt: Ein Körper braucht Zeit, um loszulaufen und anzuhalten. Reaktion heißt: Der Spieler sieht sofort, dass sein Druck angekommen ist. Dan Root fasst in seinem Video zu Coopers Feel zusammen, dass man den Spieler nicht aussperren darf, die Figur aber trotzdem Gewicht behalten soll ([Game Animation Fundamentals: Feel](https://www.youtube.com/watch?v=Q-ZRKHOaAOw&t=70s), ab 1:10). + + David Rosen zeigt in seinem GDC-Vortrag von 2014 die beiden Pole. Bei Mario setzt die Eingabe fast direkt die Beschleunigung. In Prince of Persia schieben die rotoskopierten Übergänge Zeit zwischen Druck und Bewegung ([An Indie Approach to Procedural Animation](https://www.youtube.com/watch?v=LNidsMesxSE&t=55s), ab 0:55). Für seine eigenen Spiele formuliert er eine Grundregel: Die Animation darf dem Spiel zuerst einmal nicht schaden ([ab 4:21](https://www.youtube.com/watch?v=LNidsMesxSE&t=261s)). Tyriq Plummer sagt es in seinem Einführungsvortrag ähnlich: Animation im Spiel soll dem Spiel dienen und es nicht übergehen. Aktionen der Spielfigur bekommen bei ihm höchstens ein bis zwei Bilder Ausholen, oft gar keines ([2D Animation for Games: A Primer](https://www.youtube.com/watch?v=PKZJmHrG4Yw&t=949s), ab 15:49). + + Pixelartists sagen dasselbe in ihren Tutorials. Pedro Medeiros (Saint11) zu einem Angriff: „It's important that there's no anticipation frame or players will feel input lag“ ([Attack Sheet](https://saint11.art/blog/pixel-art-tutorials/#AttackSheet)). Raymond Schlitter (Slynyrd) nennt den Preis der anderen Seite: „The longer and more dramatic the wind up, the more impactful a strike can feel, but results in more input delay in the context of gameplay“ ([Pixelblog 56](https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation)). + + Bei Gegnern dreht sich die Rechnung um. Mariel Cartwright beschreibt für Skullgirls, dass die Bewegungen des Spielers fast sofort reagieren, Gegner dagegen lange ausholen, damit der Spieler reagieren kann ([Making Fluid and Powerful Animations For 'Skullgirls'](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=193s), ab 3:13). Wie Wind-up, aktive Phase und Erholung als Spielmechanik zusammenhängen, steht in [Anatomie eines Angriffs](/combat/angriffsphasen). Wie viel Verzögerung ohnehin zwischen Daumen und Bildschirm liegt, steht in [Eingabe](/combat/eingabe). + + > [!MERKE] + > Was der Spieler auslöst, zeigt sich im ersten Bild. Was der Spieler lesen und beantworten soll, darf sich ankündigen. + + ## Das erste Bild nach der Eingabe + + Für eine Aktion der Spielfigur zählen zwei Zeitpunkte. Wann sieht der Spieler das erste Bild, das sich von der Ruhe unterscheidet? Und wann sieht er die Pose, an der man erkennt, was die Figur tut, die **Erkennungspose**? Zwei Pläne für den Sprung der Gliederpuppe: + + ```text + Plan A + Bild Dauer Pose + 1 100 ms Stand (wie Ruhe) + 2 100 ms Knie halb + 3 100 ms Hocke tief + 4 50 ms Absprung + 5 150 ms Luft + ``` + + ```text + Plan B + Bild Dauer Pose + 1 50 ms Hocke tief + 2 50 ms Absprung + 3 150 ms Luft + ``` + + Das Spiel zeigt jedes Bild ab einem bestimmten Tick, gezählt ab dem Druck. Ein Tick ist 1/60 Sekunde ([Timing und Spacing](/animation/timing-spacing)). Das kleine Modell rechnet für jedes Bild aus, in welchem Tick es beginnt: + + ```python run + a = [100, 100, 100, 50, 150] + b = [50, 50, 150] + + def ab_tick(ms): + t, s = 0, [] + for d in ms: + s.append(t*60//1000) + t += d + return s + + print("A", ab_tick(a)) + print("B", ab_tick(b)) + ``` + + In Plan A unterscheidet sich erst Bild 2 von der Ruhe, nach 6 Ticks oder 100 ms. Den Absprung sieht der Spieler nach 18 Ticks. In Plan B ändert sich das Bild sofort, und nach 3 Ticks hebt die Puppe ab. Dafür hat Plan B weniger Vorlauf: ein Bild Hocke mit 50 ms statt drei Bilder mit zusammen 300 ms vor dem Absprung. + + Zwei Wege bringen Ausholen und Reaktion zusammen. Sakurai lässt die Figur im Moment des Drucks weit in die Ausholpose springen, auch wenn der Übergang aus der Ruhe dadurch hart wird; die Einzelheiten stehen in [Anatomie eines Angriffs](/combat/angriffsphasen). Dan Root zeigt, wie ein Körperteil früh reagiert, etwa der Kopf, der sich schon dreht, während der Rest noch folgt ([Feel](https://www.youtube.com/watch?v=Q-ZRKHOaAOw&t=371s), ab 6:11). In beiden Fällen ist das erste Bild sichtbar anders als die Ruhe. Welcher Plan zu deiner Figur passt, entscheidest du. Die Rechnung sagt dir nur, wie lange der Spieler wartet. + + ## Spieltempo: Bilder, Ticks und Hitstop + + Im Editor bestimmt deine Bildliste allein, wie schnell etwas geht. Im Spiel bewegt außerdem der Code die Figur mit einer Geschwindigkeit über den Boden. Passt ein Laufzyklus nicht zu diesem Tempo, rutschen die Füße; die Rechnung dazu steht in [Animationen zuordnen](/godot/animationen). Rosen geht für seine Spiele den umgekehrten Weg: Die Laufanimation folgt der zurückgelegten Strecke, mit nur zwei Keys, Passing und weitestem Schritt, und kann deshalb nicht rutschen ([ab 5:29](https://www.youtube.com/watch?v=LNidsMesxSE&t=329s)). Ab 6:24 zeigt er außerdem, dass das Auf und Ab des Körpers bei schnellerem Laufen kleiner wird: Halbe Schrittzeit heißt ein Viertel der Fallhöhe. Das ist dieselbe Physik wie beim fallenden Ball. + + Timing ist im Spiel auch eine Stellschraube des Designs. Thomas Vasseur nimmt für Dead Cells als Beispiel eine Waffe, die zu stark ist und deshalb eine langsamere Angriffsanimation bekommen soll. Für solche Änderungen schreibt er: „If the timings are the issue, moving the keyframes in the timeline will do the trick.“ ([Art Design Deep Dive: Dead Cells](https://www.gamedeveloper.com/production/art-design-deep-dive-using-a-3d-pipeline-for-2d-animation-in-i-dead-cells-i-)). Wer Keys und Zwischenbilder sauber trennt, kann das Timing später ändern, ohne neu zu zeichnen. + + Bei einem Treffer halten viele Spiele für einige Frames an: Angreifer und Ziel frieren ein. Wie lange und mit welchem Zittern, steht in [Trefferfeedback](/combat/trefferfeedback). Für die Animation heißt das: Das Bild, das im **Hitstop** steht, sieht der Spieler länger als jedes andere Bild der Aktion. Sakurai beschreibt diese Pose als die, die im Gedächtnis bleibt ([Attack Poses](https://www.youtube.com/watch?v=99gdMDF7V2E&t=29s), ab 0:29). Cartwright erklärt, dass Treffer ohne dieses Einfrieren schwach und wässrig aussehen ([ab 12:43](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=763s)). Medeiros hält in seinem Beispiel ein Bild vor dem Aufprall an und warnt: „Do not pause for too long“ ([Impact](https://saint11.art/blog/pixel-art-tutorials/#Impact)). Plan deshalb, welches Bild beim Treffer steht, und zeichne es als Key, nicht als Zwischenbild. + + Eine Figur in der Draufsicht ist klein, und bei kleinen Figuren gehen Bewegungen leicht unter; warum Sakurai deshalb übertreibt, steht in [Körpersprache und Zustandswechsel](/animation/koerpersprache). Ob eine Pose bei 1× lesbar bleibt, prüfst du im Prüfstand; zum Zusehen verlangsamst du dort das Spiel mit `Engine.time_scale` ([Bildrate und Simulation](/godot/bildrate-simulation)). Wie deine Figuren vor echten Level-Hintergründen bestehen, ist Stoff des späteren Kurses Leveldesign. + + ## Übergänge: Start, Stopp, Wende und Abbruch + + Coopers zweiter Grundsatz, Fluidity, handelt von den Stellen zwischen den Animationen. Jedes Übergangsbild kann eine Bewegung glaubwürdiger machen und kostet Ticks, in denen die Figur nicht tut, was der Spieler will. Zwei veröffentlichte Spiele haben das verschieden entschieden. Bei Owlboy fanden Leute, denen das Team die Demo zeigte, die Figur in Bewegung hölzern: Sie wechselte die Richtung sofort. Das Team ergänzte kleine Wendeanimationen, und die Figur bekam nach Aussage des Entwicklers etwas mehr Gewicht ([Owlboy, GDC 2017](https://www.youtube.com/watch?v=rOkq7fUdgYQ&t=574s), ab 9:34). Dead Cells geht in die andere Richtung. Schlägt der Spieler in die falsche Richtung, während ein Gegner hinter ihm steht, dreht das Spiel den Helden ohne Umweg um, und laut Sébastien Bénard bemerken Spieler das nicht ([Dead Cells, GDC 2019](https://www.youtube.com/watch?v=OfSpBoA6TWw&t=1129s), ab 18:49). + + Sakurai rät, schnell überzublenden, weil jedes zusätzliche Übergangsbild Schärfe kostet ([Animation Blending](https://www.youtube.com/watch?v=HYHajZ0wBfU&t=93s), ab 1:33). Rosen kommt mit zwei bis drei Keys pro Aktion aus, und jeder Übergang lässt sich sofort unterbrechen ([ab 18:00](https://www.youtube.com/watch?v=LNidsMesxSE&t=1080s)). + + Für deine Planung genügt eine **Animationsliste**. Sie hält für jede Animation fest, ob sie sich wiederholt, ab welchem Bild eine neue Eingabe sie abbrechen darf und was danach kommt: + + ```text + Animation Loop Abbruch danach + ruhe ja sofort – + gehen ja sofort ruhe + sprung nein ab 4 landen + landen nein ab 2 ruhe + ``` + + Drei Fragen helfen beim Ausfüllen. Wo ist der **Schleifenpunkt**? In einem Zyklus muss das letzte Bild ins erste übergehen, sonst springt die Figur bei jeder Wiederholung. Wo endet eine einmalige Aktion? Ihre letzte Pose sollte zu der Animation passen, die danach kommt; wie man Zustandswechsel lesbar macht, steht in [Körpersprache und Zustandswechsel](/animation/koerpersprache). Und ab welchem Bild darf der Spieler abbrechen? Das Abbruchfenster ist eine Entscheidung des Spieldesigns ([Anatomie eines Angriffs](/combat/angriffsphasen)). Die Animation folgt ihr: Die Pose in diesem Bild sollte schon aussehen, als könne die Figur jetzt etwas anderes tun. + + > [!PRAXIS] Vor, Mitte, Nach + > Bei Klei Entertainment trugen Animationen Namen wie „knife pre“, „knife attack“ und „knife post“. An diesen Grenzen konnte die Zustandsmaschine des Spiels je nach Eingabe verzweigen ([2D Animation at Klei Entertainment](https://www.youtube.com/watch?v=8_KBjd0iaCU&t=442s), ab 7:22). Eine Aktion in Vorlauf, Hauptteil und Nachlauf zu schneiden, gibt dem Code Stellen zum Abbrechen und Weiterleiten, ohne dass du neu zeichnest. + + ## Ton: die Bilder markieren + + Ein Schritt klingt, wenn der Fuß aufsetzt, ein Aufprall, wenn der Körper den Boden trifft. Engines koppeln Töne deshalb an Bilder der Animation. In Unreal heißen solche Marken Notifies: „These events can be sounds (such as footsteps for walk or run animations)“ ([Animation Notifies](https://dev.epicgames.com/documentation/en-us/unreal-engine/animation-notifies-in-unreal-engine#sound)). In Godot sendet ein AnimatedSprite2D bei jedem Bildwechsel das Signal `frame_changed` ([frame_changed](https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-signal-frame-changed)). Wie man daran einen Ton hängt, steht in [Audio zuordnen](/godot/audio). + + Deine Aufgabe als Animator ist hier nur, die Bilder zu markieren. In einem Gehzyklus mit acht Bildern sind das die beiden Kontaktbilder; die Phasen erklärt [Gehen und Laufen](/animation/gehen-laufen): + + ```text + Bild Phase Ton + 1 Kontakt Schritt + 2 Tiefpunkt + 3 Passing + 4 Hochpunkt + 5 Kontakt Schritt + 6 Tiefpunkt + 7 Passing + 8 Hochpunkt + ``` + + Markier Bildnummern, keine Millisekunden. Änderst du später das Timing, wandert der Ton mit seinem Bild. Bei einem Treffer gehört der Ton in das Bild, in dem der Treffer zählt, nicht in das, in dem das Ausholen endet ([Trefferfeedback](/combat/trefferfeedback)). Wie die Töne klingen, wie laut sie sind und wie sie sich abwechseln, behandelt später der Kurs Sound. + + > [!INTERVIEW] + > „Unsere Spielfigur sieht gut aus, fühlt sich aber träge an. Was schaust du dir an?“ Gute Antwort: Ich zähle die Ticks zwischen Eingabe und erstem veränderten Bild und bis zur Pose, an der man die Aktion erkennt. Steht vorn ein Bild, das wie die Ruhe aussieht, oder ein langes Ausholen, kürze ich es oder ersetze es durch eine starke erste Pose. Dann sehe ich mir Übergänge und Abbruchfenster an: Wie lange bindet jede Aktion die Figur, und welche Start-, Stopp- oder Wendeanimation hält den Spieler auf? Gewicht kann in Erholung und Nachschwingen bleiben. Jede Änderung messe ich im Spiel und lasse jemand anderen spielen, statt im Editor zu urteilen. + + ## Häufige Fehler + + - **Das erste Bild sieht aus wie die Ruhe.** Der Spieler wartet ein ganzes Bild lang auf nichts. Das erste Bild nach dem Druck zeigt eine sichtbare Änderung. + - **Ausholen wie im Film.** Drei Bilder zu 100 ms vor einer Spieleraktion sind 18 Ticks Wartezeit. Für Gegner kann das richtig sein; für die Spielfigur zählst du nach. + - **Übergänge für alles.** Start-, Stopp- und Wendeanimationen kosten jedes Mal Ticks. Leg für jede fest, ob sie den Spieler aufhalten darf. + - **Nur die Schleife angesehen.** Eine Animation, die in sich rund läuft, kann beim Abbruch aus Bild 3 trotzdem springen. + - **Zwischenbild im Hitstop.** Steht beim Treffer ein Wischbild still, sieht der Spieler den Weg statt der Pose. + - **Ton in Millisekunden geplant.** Nach der nächsten Timing-Änderung sitzt er im falschen Bild. Markier Bildnummern. + - **Gefühl behauptet.** Ob sich eine Figur schwer oder direkt anfühlt, sagt dir ein Mensch an der Tastatur, nicht der Editor. + + ## Zusammenfassung + + - Cooper stellt den zwölf Prinzipien fünf für Spiele zur Seite: Feel, Fluidity, Readability, Context, Elegance. + - Reaktion und Trägheit ziehen gegeneinander. Was der Spieler auslöst, zeigt sich im ersten Bild; Gegner dürfen sich ankündigen. + - Zähl zwei Zeitpunkte in Ticks ab dem Druck: das erste veränderte Bild und die Erkennungspose. + - Im Spiel bewegt der Code die Figur. Zyklus und Tempo müssen zusammenpassen, und Timing ist auch eine Stellschraube des Designs. + - Im Hitstop steht ein Bild länger als alle anderen. Plan dort einen Key. + - Jede Animation bekommt in der Animationsliste Loop, Abbruch und Nachfolger. Jedes Übergangsbild kostet Ticks. + - Töne markierst du als Bildnummern. Wie sie klingen, behandelt später der Kurs Sound. +exercises: + - id: welcher-grundsatz + type: choice + title: Zu spät, aber wofür? + prompt: | + Ein Tester sagt über deine Figur: „Ich drücke, und sie reagiert zu spät.“ Zu welchem von Coopers fünf Grundsätzen gehört dieses Problem zuerst? + options: + - text: Feel + correct: true + why: Feel umfasst Reaktion auf die Eingabe, Trägheit und sichtbare Rückmeldung. Ein später erster Bildwechsel ist ein Problem der Reaktion. + - text: Fluidity + correct: false + why: Fluidity betrifft Übergänge, Zyklen und Ausschwingen. Eine Startanimation kann die Ursache sein, das Symptom beschreibt aber die Reaktion. + - text: Readability + correct: false + why: Lesbarkeit fragt, ob man Pose und Silhouette erkennt. Der Tester erkennt die Aktion, nur zu spät. + - text: Elegance + correct: false + why: Elegance betrifft schlichten Aufbau und Wirkung pro Aufwand, nicht die Zeit bis zur Reaktion. + explanation: | + Coopers Feel bündelt Response, Inertia & Momentum und Visual Feedback. „Reagiert zu spät“ trifft den ersten Punkt. Die Ursache kann trotzdem in einem anderen Bereich liegen, etwa in einer langen Startanimation. Deshalb zählst du als Nächstes die Ticks bis zum ersten veränderten Bild. + resources: + - title: Game Anim · The Five Fundamentals + url: https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/ + + - id: quellen-richtig-lesen + type: choice + title: Was die Praktiker sagen + prompt: | + Welche Aussagen geben die Quellen der Lektion richtig wieder? + options: + - text: Saint11 verzichtet beim Angriff der Spielfigur auf ein Antizipationsbild, weil Spieler sonst Eingabeverzögerung spüren. + correct: true + why: So steht es auf seinem Attack Sheet, wörtlich mit „players will feel input lag“. + - text: Cartwright gibt Gegnern in Skullgirls lange Wind-ups, damit der Spieler reagieren kann. + correct: true + why: Ab 3:13 trennt sie Spielerbewegungen, die fast sofort reagieren, von Gegnern, die lange ausholen. + - text: Plummer gibt Aktionen der Spielfigur höchstens ein bis zwei Bilder Ausholen, oft keines. + correct: true + why: Das sagt er ab 15:49 in seinem Einführungsvortrag. + - text: Slynyrd hält einen langen Wind-up für wirkungslos. + correct: false + why: Er schreibt das Gegenteil, ein längerer Wind-up könne wuchtiger wirken. Sein Einwand ist die längere Eingabeverzögerung. + - text: Rosen empfiehlt rotoskopierte Übergänge, weil sie die Steuerung direkter machen. + correct: false + why: Rosen nennt die Übergänge in Prince of Persia als Beispiel für Verzögerung zwischen Druck und Bewegung. + explanation: | + Alle Quellen ziehen dieselbe Linie: Was der Spieler auslöst, reagiert sofort, was er beantworten soll, kündigt sich an. Slynyrd beschreibt den Preis ehrlich, Wucht gegen Verzögerung. Welche Seite du in deinem Spiel wählst, ist deine Entscheidung; die Quellen zeigen, worauf du dabei achtest. + resources: + - title: Saint11 · Attack Sheet + url: https://saint11.art/blog/pixel-art-tutorials/#AttackSheet + + - id: vom-druck-bis-zur-ruhe + type: order + title: Was der Spieler nacheinander sieht + prompt: | + Bring die Momente einer Aktion der Spielfigur in die Reihenfolge, in der der Spieler sie sieht. + lang: prose + lines: | + Der Spieler drückt die Taste. + Das erste Bild, das sich sichtbar von der Ruhe unterscheidet, erscheint. + Die Pose, an der man erkennt, was die Figur tut, erscheint. + Der Höhepunkt der Aktion steht, bei einem Treffer im Hitstop gehalten. + Die Erholung beginnt, die Figur fängt die Bewegung ab. + Ab hier darf eine neue Eingabe die Erholung abbrechen. + Die Figur ist zurück in Ruhe oder Bewegung. + explanation: | + Zwischen Druck und erstem veränderten Bild soll möglichst kein Tick liegen; das misst Feel. Die Erkennungspose kann mit dem ersten Bild zusammenfallen, kommt aber nie davor. Der Hitstop hält den Höhepunkt, danach beginnt die Erholung. Ein Abbruchfenster liegt in der Erholung und lässt den Spieler früher wieder handeln, als die Animation zu Ende wäre. + resources: + - title: Saint11 · Attack Sheet + url: https://saint11.art/blog/pixel-art-tutorials/#AttackSheet + + - id: ticks-bis-zur-aenderung + type: output + title: Wie lange passiert nichts? + prompt: | + Bild 1 und 2 sehen aus wie die Ruhepose, erst Bild 3 zeigt eine Änderung. Nach wie vielen Ticks ab dem Druck erscheint Bild 3, bei 60 Ticks pro Sekunde? Antworte mit der Zahl. + lang: text + code: | + Bild Dauer Pose + 1 100 ms wie Ruhe + 2 50 ms wie Ruhe + 3 50 ms Knie gebeugt + 4 150 ms Sprung + expected: | + 9 + accept: + - 9 Ticks + explanation: | + Bild 3 beginnt nach 100 + 50 = 150 ms, und 150 ms sind 150 × 60 / 1000 = 9 Ticks. So lange sieht der Spieler die Ruhe, obwohl die Aktion schon läuft. Die beiden ersten Bilder kosten Zeit, ohne etwas zu zeigen. + resources: + - title: Godot Docs · physics_ticks_per_second + url: https://docs.godotengine.org/en/stable/classes/class_projectsettings.html#class-projectsettings-property-physics-common-physics-ticks-per-second + + - id: ab-tick-vorhersagen + type: output + title: Ab welchem Tick? + prompt: | + Was gibt das Programm aus? + lang: python + code: | + def ab_tick(ms): + t, s = 0, [] + for d in ms: + s.append(t*60//1000) + t += d + return s + + print(ab_tick([50,100,150,50])) + expected: | + [0, 3, 9, 18] + explanation: | + Jedes Bild beginnt, wenn alle Bilder davor abgelaufen sind. Bild 1 beginnt bei 0 ms, Bild 2 nach 50 ms (3 Ticks), Bild 3 nach 150 ms (9 Ticks), Bild 4 nach 300 ms (18 Ticks). Die Dauer des letzten Bildes taucht in der Liste nicht auf, weil nach ihm kein Bild mehr beginnt. + + - id: ton-bilder-lauf + type: output + title: Wo die Schritte klingen + prompt: | + Ein Laufzyklus mit sechs Bildern. Auf welche Bilder gehört ein Schrittton? Antworte mit den Nummern, etwa `2, 5`. + lang: text + code: | + Bild Phase + 1 Kontakt rechts + 2 Tiefpunkt + 3 Flug + 4 Kontakt links + 5 Tiefpunkt + 6 Flug + expected: | + 1, 4 + accept: + - 1,4 + - 1 4 + - 1 und 4 + explanation: | + Ein Schritt ist zu hören, wenn ein Fuß aufsetzt, also in den Kontaktbildern 1 und 4. Im Tiefpunkt steht der Fuß schon und trägt das Gewicht, in der Flugphase berührt keiner den Boden. Weil du Bildnummern markierst, bleibt der Ton richtig, wenn du später die Dauern änderst. + resources: + - title: Unreal Engine · Animation Notifies, Sound + url: https://dev.epicgames.com/documentation/en-us/unreal-engine/animation-notifies-in-unreal-engine#sound + + - id: begriffe-im-spiel + type: gap + title: Fünf Wörter für die Planung + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Coopers Grundsatz für Reaktion, Trägheit und Rückmeldung heißt ⟦Feel⟧. + Was der Spieler auslöst, zeigt sich im ⟦ersten⟧ Bild nach dem Druck. + Beim Treffer friert der ⟦Hitstop⟧ eine Pose ein. + In einem Zyklus muss das letzte Bild am ⟦Schleifenpunkt⟧ ins erste übergehen. + Schrittgeräusche gehören auf die ⟦Kontaktbilder⟧. + gaps: + - label: Grundsatz + hint: Der erste der fünf, englisch. + accept: ["Gefühl"] + - label: Welches Bild + hint: Kein Bild davor darf aussehen wie die Ruhe. + accept: ["1", "allerersten"] + - label: Einfrieren + hint: Englischer Begriff aus dem Trefferfeedback. + accept: ["Hit-Stop", "Hit Stop", "Trefferstopp"] + - label: Übergang im Zyklus + hint: Die Stelle, an der die Wiederholung beginnt. + accept: ["Loop-Punkt", "Looppunkt", "Schleifenübergang"] + - label: Welche Bilder + hint: Der Fuß setzt auf. + accept: ["Kontakt-Bilder", "Kontakte", "Kontaktframes"] + explanation: | + Feel ist bei Cooper der Grundsatz für Reaktion und Gewicht. Das erste Bild nach dem Druck zeigt, dass die Eingabe ankam. Im Hitstop steht ein Bild länger als alle anderen, deshalb gehört dort ein Key hin. Am Schleifenpunkt entscheidet sich, ob ein Zyklus bei jeder Wiederholung springt, und die Kontaktbilder tragen den Schrittton. + resources: + - title: Game Anim · The Five Fundamentals + url: https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/ + + - id: ausweichsprung-wartet + type: bug + title: Erst passiert nichts + prompt: | + Eine Gliederpuppe soll auf Knopfdruck zur Seite springen. Testspieler sagen: „Ich drücke, und erst passiert nichts.“ Finde die Zeilen der Bildliste, die das verursachen. + lang: text + code: | + Bild Dauer Pose + 1 100 ms Stand wie in Ruhe + 2 50 ms Stand wie in Ruhe + 3 50 ms Knie gebeugt + 4 50 ms Sprung zur Seite + 5 150 ms Landung + lines: [2, 3] + hints: + - Welches Bild ist das erste, das sich von der Ruhe unterscheidet? + explanation: | + Bild 1 und 2 zeigen dieselbe Pose wie die Ruhe. Der Spieler sieht 150 ms lang, also 9 Ticks, keine Reaktion auf seinen Druck. Bild 3 ist Ausholen, aber wenigstens sichtbar. Ob du die beiden Bilder streichst oder durch eine erste Pose ersetzt, die schon deutlich anders ist, entscheidest du; die Bildliste darf nur nicht mit Ruhe beginnen. + resources: + - title: Tyriq Plummer · GDC 2021 (ab 15:49) + url: https://www.youtube.com/watch?v=PKZJmHrG4Yw&t=949s + + - id: schritt-in-der-luft + type: bug + title: Der Schritt klingt zur falschen Zeit + prompt: | + Ein Gehzyklus mit vier Bildern. Im Spiel ist der Schritt jedes Mal zu hören, wenn ein Bein gerade am anderen vorbeischwingt. Finde die Zeilen, in denen der Ton im falschen Bild steht. + lang: text + code: | + Bild Phase Ton + 1 Kontakt rechts + 2 Passing Schritt + 3 Kontakt links + 4 Passing Schritt + lines: [3, 5] + explanation: | + Beim Passing schwingt ein Bein frei am Standbein vorbei, kein Fuß setzt auf. Der Ton gehört in die Kontaktbilder 1 und 3. Wer den Ton nach Gefühl auf „irgendwo im Schritt“ setzt, landet oft eine halbe Phase daneben; die Phasen benennen hilft. + resources: + - title: Godot Docs · frame_changed + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-signal-frame-changed + + - id: saint11-ohne-ausholen + type: explain + title: Ein Angriff ohne Ausholen + prompt: | + Saint11 zeigt auf seinem Attack Sheet einen Angriff ohne Antizipationsbild. Erkläre in wenigen Sätzen, warum er für die Spielfigur so arbeitet, wo die Bewegung trotzdem Gewicht bekommt und was ein Gegner mit demselben Angriff anders bräuchte. + lang: text + code: | + Saint11, Attack Sheet + Bilder 1–3 Angriff + Bilder 4–7 Erholung + Kein Antizipationsbild. + „It's important that there's + no anticipation frame or + players will feel input lag“ + points: + - Ohne Antizipationsbild ist schon das erste Bild nach dem Druck Angriff; der Spieler sieht die Reaktion sofort. + - Die Erholung hat mehr Bilder als der Angriff; dort bekommt die Bewegung Gewicht, ohne den Start zu verzögern. + - Auch die Erholung bindet die Figur; ob ein Abbruch sie verkürzt, entscheidet das Spieldesign. + - Ein Gegner mit demselben Angriff bräuchte eine Ankündigung, damit der Spieler reagieren kann. + explanation: | + Saint11 verschiebt das Gewicht vom Anfang ans Ende. Der Angriff beginnt sofort, deshalb sieht der Spieler seine Eingabe ohne Wartezeit. Die vier Bilder Erholung zeigen, dass Kraft im Spiel war, und kosten keine Reaktionszeit, wohl aber die Zeit, in der die Figur gebunden ist. Ein Gegner braucht das Gegenteil: Bei ihm ist das Ausholen die Zeit, in der der Spieler den Angriff liest und ausweicht, wie Cartwright für Skullgirls beschreibt. + resources: + - title: Saint11 · Attack Sheet + url: https://saint11.art/blog/pixel-art-tutorials/#AttackSheet + + - id: wende-zwei-spiele + type: practice + title: Zwei Spiele, zwei Wenden + prompt: | + Sieh dir zwei Ausschnitte an, wenn du Netz hast: Owlboy ab 9:34 bis etwa 10:16 ([GDC 2017](https://www.youtube.com/watch?v=rOkq7fUdgYQ&t=574s)) und Dead Cells ab 18:49 bis etwa 19:40 ([GDC 2019](https://www.youtube.com/watch?v=OfSpBoA6TWw&t=1129s)). Notier für jedes Spiel in Stichpunkten, was die Figur bei einem Richtungswechsel tut, wie die Entwickler das begründen und was es kostet. + lang: text + starter: | + Owlboy + Richtungswechsel: + Begründung: + Preis: + + Dead Cells + Richtungswechsel: + Begründung: + Preis: + solution: | + Owlboy + Richtungswechsel: + anfangs sofort, später mit + kleinen Wendeanimationen + Begründung: + Wer die Demo sah, fand die + Figur in Bewegung hölzern. + Mit den Wenden bekam sie + etwas mehr Gewicht. + Preis: + einige Bilder, bevor die Figur + in die neue Richtung fliegt + + Dead Cells + Richtungswechsel: + Schlägt der Spieler in die + falsche Richtung und steht ein + Gegner hinter ihm, dreht das + Spiel den Helden ohne Umweg um. + Begründung: + Der Spieler wollte den Gegner + treffen. Laut Bénard bemerken + Spieler die Hilfe nicht. + Preis: + keine sichtbare Wende, kein + Gewicht in der Drehung; das + Spiel entscheidet für ihn. + checklist: + - Für beide Spiele steht, was die Figur beim Richtungswechsel tut. + - Die Begründung gibt wieder, was die Entwickler sagen, nicht deine Vermutung. + - Für beide Spiele steht ein Preis, in Zeit oder in Glaubwürdigkeit. + - Du hast notiert, welche Zeitmarke du dir angesehen hast. + explanation: | + Beide Spiele lösen dieselbe Frage verschieden, und beide begründen es mit dem, was Spieler erleben. Owlboy tauscht ein paar Bilder Reaktion gegen Gewicht, Dead Cells verzichtet auf jede sichtbare Wende zugunsten der Reaktion. Es gibt keine allgemeine Antwort, aber eine Frage, die du für jede eigene Übergangsanimation stellst: Was gewinnt der Spieler, und wie viele Ticks zahlt er dafür? + resources: + - title: Owlboy · GDC 2017 (ab 9:34) + url: https://www.youtube.com/watch?v=rOkq7fUdgYQ&t=574s + + - id: eigene-animationsliste + type: practice + title: Deine Animationsliste + prompt: | + Nimm eine Figur, die du schon gezeichnet hast oder gerade planst, und schreib ihre Animationsliste in Stichpunkten. Welche Animationen sie hat, entscheidest du; der Kurs schlägt keine vor. Notier für jede Animation Loop, erstes verändertes Bild, Erkennungspose, Abbruch, Nachfolger und Ton-Bilder. Was du noch nicht weißt, markierst du als „offen“; das prüfst du später in der Testszene. + lang: prose + starter: | + Figur: + Animation 1 – Loop / erstes verändertes Bild / Erkennungspose / Abbruch ab / danach / Ton-Bilder: + Animation 2 – … + Offen für die Testszene: + checklist: + - Jede Animation hat einen Eintrag für Loop, Abbruch und Nachfolger, oder „offen“. + - Bei jeder Animation, die der Spieler auslöst, steht, ob schon das erste Bild sich von der Ruhe unterscheidet. + - Ton-Bilder sind als Bildnummern notiert, nicht in Millisekunden. + - Mindestens ein offener Punkt ist für die Testszene vorgemerkt. + - Alle Animationen stammen aus deiner eigenen Planung. + explanation: | + Die Liste ist der Vertrag zwischen deinen Zeichnungen und dem Code. Sie zwingt dich, für jede Animation zu entscheiden, wie sie anfängt, wie sie endet und ob der Spieler sie abbrechen darf, bevor du die Zwischenbilder zeichnest. Die offenen Punkte sind kein Mangel. Sie sind die Fragen, die du in [der Testszene](/animation/testszene) mit Ticks beantwortest. + resources: + - title: Klei Entertainment · GDC 2014 (ab 7:22) + url: https://www.youtube.com/watch?v=8_KBjd0iaCU&t=442s diff --git a/content/animation/modules/antizipation-erholung.yaml b/content/animation/modules/antizipation-erholung.yaml new file mode 100644 index 0000000..cc0ab13 --- /dev/null +++ b/content/animation/modules/antizipation-erholung.yaml @@ -0,0 +1,506 @@ +id: antizipation-erholung +title: "Antizipation, Aktion, Erholung: Kraft sichtbar machen" +level: 2 +minutes: 110 +summary: Wie du eine kräftige Bewegung in Ausholen, Aktion und Erholung zerlegst, warum die Aktion oft die kürzeste Phase ist, wann ein Wischbild den Weg verbindet und wie eine Figur über das Ziel hinausschwingt und zur Ruhe kommt. +place: unterwegs +goals: + - Du zerlegst eine kräftige Bewegung in Antizipation, Aktion und Erholung und ordnest jedes Bild einer Bildliste einer Phase zu. + - Du planst eine Antizipation als Gegenbewegung und wählst ihre Größe und Dauer nach der Kraft, die du zeigen willst. + - Du setzt Wischbilder nur dort, wo der Weg zwischen zwei Bildern zu groß ist, und lässt sie kürzer stehen als die Keys. + - Du zeichnest eine Erholung mit Überschwingen und Ausschwingen, die in eine Ruhepose zurückführt. + - Du rechnest Phasenanteile aus Bilddauern aus und erklärst, warum Gewicht in den Haltezeiten vor und nach der Aktion steckt. + - Du prüfst mit Absichtssatz und Beobachtungstest, ob ein Zuschauer die Kraft liest, statt sie zu behaupten. +resources: + - title: Wikipedia · Twelve basic principles of animation, Anticipation + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Anticipation + - title: Saint11 (Pedro Medeiros) · Impact + url: https://saint11.art/blog/pixel-art-tutorials/#Impact + - title: Slynyrd (Raymond Schlitter) · Pixelblog 56, Top Down Character Attack Animation + url: https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation + - title: Mariel Cartwright · Fluid and Powerful Animation within Frame Restrictions (GDC 2014) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw + - title: Wikipedia · Smear frame + url: https://en.wikipedia.org/wiki/Smear_frame +lesson: | + Du zeichnest eine Gliederpuppe, die eine Kiste wirft. Vier Bilder: Die Puppe hält die Kiste vor dem Bauch, streckt die Arme nach vorn, die Kiste fliegt, die Puppe steht. Beim Abspielen fliegt die Kiste davon, aber geworfen sieht das nicht aus. Sie löst sich, als hätte jemand sie an einem Faden weggezogen. Die Zeichnungen sind sauber. Es fehlt, was vor und nach dem Wurf passiert: das Ausholen, in dem die Puppe Kraft sammelt, und das Nachgeben, wenn die Kraft verbraucht ist. + + Diese Lektion zerlegt kräftige Bewegungen in drei Phasen, Antizipation, Aktion und Erholung, und zeigt, wie du jede davon zeichnest und timest. Sie setzt [Timing und Spacing](/animation/timing-spacing) voraus. Wie ein Angriff als Spielmechanik in Wind-up, aktive Phase und Erholung zerfällt und was Frame-Daten darüber sagen, steht in [Anatomie eines Angriffs](/combat/angriffsphasen). Hier geht es um die Zeichnung: Was muss man sehen, damit Kraft lesbar wird? + + ## Drei Phasen: ausholen, handeln, nachgeben + + Frank Thomas und Ollie Johnston zählen die **Antizipation** in *The Illusion of Life* (1981) zu den zwölf Grundprinzipien der Animation. Sie bereitet das Publikum auf eine Handlung vor und lässt die Handlung echter wirken. Eine Tänzerin beugt die Knie, bevor sie abspringt, ein Golfer schwingt den Schläger zuerst zurück ([Twelve basic principles: Anticipation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Anticipation)). Der Wikipedia-Artikel zum Prinzip trennt die Ausholpose von der Aktion und der Reaktion danach. Den Zweck fasst er so zusammen: Das Publikum weiß vielleicht nicht, *warum* eine Figur etwas tut, aber es weiß, *was* sie gleich tun wird ([Anticipation (animation)](https://en.wikipedia.org/wiki/Anticipation_%28animation%29)). Daraus ergeben sich die drei Phasen dieses Moduls: + + - **Antizipation** (Ausholen): die Bewegung vor der Bewegung. Sie sammelt Kraft und kündigt an, was kommt. + - **Aktion**: der Moment, in dem die Kraft wirkt, also Wurf, Schlag oder Absprung. + - **Erholung** (Reaktion): Der Körper fängt die Kraft ab, kommt über das Ziel hinaus, schwingt zurück und findet in eine Ruhepose. + + Pedro Medeiros (Saint11) teilt einen Aufprall in seinem Pixelart-Tutorial noch feiner: Idle, Anticipation, Motion, Overshoot, Rest ([Impact](https://saint11.art/blog/pixel-art-tutorials/#Impact)). Auf Deutsch: Ruhe, Ausholen, Aktion, Überschwingen, Ruhe. Für die Kiste aus der Einleitung sieht eine Bildliste damit so aus: + + ```text + Bild Dauer Pose + 1 200 ms Ruhe, Kiste vorn + 2 250 ms ausgeholt (Key) + 3 50 ms Wischbild + 4 100 ms Kiste los (Key) + 5 50 ms über das Ziel + 6 150 ms zurück + 7 300 ms Ruhe (Key) + ``` + + Bild 2 ist die Antizipation, die Bilder 3 und 4 sind die Aktion, 5 und 6 die Erholung. Von 1 100 ms dauert die Aktion 150. So verteilen sich viele kräftige Bewegungen: lang davor, sehr kurz in der Mitte, lang danach. + + > [!MERKE] + > Antizipation sammelt Kraft und kündigt an. Die Aktion ist oft die kürzeste Phase. Die Erholung zeigt, wie viel Kraft im Spiel war, und führt in eine Ruhepose. + + ## Antizipation: Gegenbewegung, Größe, Dauer + + ### Erst in die Gegenrichtung + + Eine Antizipation geht fast immer gegen die Richtung der Aktion. Wer nach vorn wirft, nimmt die Arme zurück und verlagert das Gewicht aufs hintere Bein. Wer hochspringt, geht zuerst in die Hocke. Wikipedia beschreibt nach Thomas und Johnston einen Läufer vor dem Sprint, der sich duckt, „gathering like a spring“. Eadweard Muybridges Serienfotos eines Schmieds von 1887 zeigen dasselbe am Hammer: In der oberen Reihe steigt er über den Kopf, bevor er auf den Amboss fällt ([Animal Locomotion, Tafel 378](https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_hammering_an_anvil_%28rbm-QP301M8-1887-378%29.jpg)). + + In einer Bildliste erkennst du die Gegenbewegung an der Position. Ein Mehlsack springt hoch, hier die Höhe seiner Mitte über dem Boden, ein `#` für 2 Pixel: + + ```text + Bild Höhe + 1 ###### Stand + 2 #### Hocke + 3 ### tiefste Hocke + 4 ######## Absprung + 5 ############ Scheitel + ``` + + Zwei Bilder lang sinkt der Sack, obwohl er nach oben will. Fehlen diese Bilder, steigt er wie an einem Seil gezogen. + + ### Größe kündigt Kraft an + + Animatoren nutzen die Größe der Antizipation, um Kraft anzukündigen: ein kurzes Zurücknehmen vor einem leichten Wurf, ein weites Ausholen vor einem schweren. Raymond Schlitter (Slynyrd) schreibt über Angriffsanimationen: „The longer and more dramatic the wind up, the more impactful a strike can feel, but results in more input delay“ ([Pixelblog 56](https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation)). Achte auf das „can feel“: Er beschreibt eine Erfahrung, kein Gesetz; ob dein Zuschauer die Kraft liest, prüfst du selbst. Der zweite Teil seines Satzes betrifft dich als Spieleentwickler: Jede Millisekunde Ausholen verzögert die Aktion. + + ### Dauer: lang genug, um gelesen zu werden + + Die Ausholpose ist ein Key. Steht sie so kurz wie ein Zwischenbild, übersieht man sie; die Übung zur verschluckten Hocke in [Timing und Spacing](/animation/timing-spacing) zeigt das. Wie lang „lang genug“ ist, hängt von der Bewegung ab. Bei einem schwachen Schlag kann ein einziges Ausholbild reichen, wenn es eine klare Gegenpose zeigt ([Cartwright, ab 2:25](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=145s)); mehr in [Anatomie eines Angriffs](/combat/angriffsphasen). Ein schwerer Schlag bekommt dagegen eine Ausholpose, die man bewusst wahrnimmt. + + ### Spielfigur und Gegner + + In einem Spiel hat die Antizipation einen Preis. Medeiros rät in seinem Sprung-Tutorial, sie bei Figuren, die der Spieler steuert, zu vermeiden ([Jump](https://saint11.art/blog/pixel-art-tutorials/#Jump)). Zu Angriffen schreibt er: „It's important that there's no anticipation frame or players will feel input lag“ ([Attack Sheet](https://saint11.art/blog/pixel-art-tutorials/#AttackSheet)). Bei Gegnern ist die Antizipation dagegen die Zeit, in der der Spieler reagiert; das behandeln [Anatomie eines Angriffs](/combat/angriffsphasen) und [Gegnermuster und Telegraphing](/combat/gegnermuster). Ob und wie lang deine Spielfigur ausholen darf, entscheidest du mit [Animation im Spiel](/animation/animation-im-spiel). + + ## Die Aktion: wenige Bilder, großer Weg + + In der Aktion passiert am meisten in der kürzesten Zeit. Medeiros rät im Impact-Tutorial: „Remove frames between rest and target position for a faster and stronger movement“. Zwischen Ausholpose und Ziel liegen deshalb oft nur ein oder zwei Bilder. + + Wird der Weg von einem Bild zum nächsten zu groß, verliert das Auge den Gegenstand. Kyle Bunk (Firaxis) zeigt in seinem GDC-Vortrag einen Schwerthieb, bei dem das Schwert von oben nach unten springt, ohne dass ein Bild den Weg dazwischen zeigt. Er nennt das irritierend und setzt dort ein **Wischbild** (Smear) ein ([High Resolution Pixel Art and Animation, ab 11:48](https://www.youtube.com/watch?v=Ih65Kg4DTw8&t=708s)). Ein Wischbild ist ein Bild zwischen zwei Keys, das eine schnelle Bewegung als gestreckte, verwischte Form zeigt ([Smear frame](https://en.wikipedia.org/wiki/Smear_frame)). Medeiros schreibt: „The motion blur smears the image, like it's trying to connect it to the previous frame“ ([Motion Blur](https://saint11.art/blog/pixel-art-tutorials/#MotionBlur)). Cartwright zeigt, wie ein einziges solches Bild Anfang, Weg und Ende einer Bewegung zusammenfasst ([ab 5:37](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=337s)). + + Ein Ball, der in einem Bild von links nach rechts saust, als Pixelraster. `#` ist dunkel, `+` Mittelton, `-` hell, `.` leer: + + ```text + Bild 1 (Start) + .##............. + ####............ + ####............ + .##............. + Bild 2 (Wischbild) + ......-+++##.... + ...---+++####... + ...---+++####... + ......-+++##.... + Bild 3 (Ziel) + ...........##... + ..........####.. + ..........####.. + ...........##... + ``` + + In Bild 2 springt der Ball nicht, er zieht sich über den Weg: dunkel vorn, wo er hinwill, hell hinten, wo er herkommt. + + Zwei Regeln halten Wischbilder im Zaum. Erstens kommen sie nur bei echtem Tempo vor. Tyriq Plummer erklärt in seinem GDC-Vortrag, dass Smears die Folge einer schnellen Bewegung sind: Ein Bild muss zusätzliche Information tragen, um das vorige mit dem nächsten zu verbinden. Er sieht oft das Gegenteil, eine langsame, gut lesbare Bewegung mit Schweif, weil schnelle Dinge eben Schweife haben ([2D Animation for Games: A Primer, ab 36:20](https://www.youtube.com/watch?v=PKZJmHrG4Yw&t=2180s)). Zweitens stehen sie kurz. Schlitter: „the smear frames should always be few and fast“ ([Pixelblog 9](https://www.slynyrd.com/blog/2018/9/8/pixelblog-9-melee-attacks)). Für Ausholen und Erholung rät er in Pixelblog 56 ganz davon ab, weil Wischbilder dort von der Vorwärtsbewegung ablenken. + + > [!WARNING] Ein Wischbild, das man sieht + > Je länger ein Wischbild steht, desto eher liest man es als eigene Form statt als Bewegung. Wie lang zu lang ist, zeigt dir der Beobachtungstest: Beschreibt jemand einen Fleck oder Schlauch, ist das Wischbild sichtbar geworden. In Schlitters Beispielen steht jedes Wischbild 50 ms, im Spiel 3 Ticks. + + ## Erholung: über das Ziel hinaus und zurück + + Eine kräftige Bewegung endet selten genau im Ziel. Der Körper kommt ein Stück darüber hinaus und pendelt zurück. Schlitter beschreibt dieses **Überschwingen** (Overshoot) so: „an object stopping will slightly 'overshoot' the stop point before eventually stopping“. Bei einem Schlag verschiebt er dafür nach dem Erholungsbild die Haltung ein Bild lang um einen Pixel (Pixelblog 9). Medeiros lässt eine stürzende Figur beim Aufkommen über den Boden hinaus sinken, „Overshoot ground (+1 pixel down)“, dann federn die Arme nach, dann folgt die Ruhe ([Death](https://saint11.art/blog/pixel-art-tutorials/#Death)). Cartwright setzt bei Skullgirls ein Bild über die Schlagpose hinaus und lässt die Figur danach in die Pose zurückfinden ([ab 6:32](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=392s)). + + Das Zurückpendeln heißt **Ausschwingen** (Settle). Jeder Ausschlag ist kleiner als der vorige, bis die Pose steht. Die Hand der Puppe nach dem Wurf, x-Position in Pixeln, Ziel bei 30: + + ```text + Bild Hand-x Phase + 4 30 Kiste los (Key) + 5 33 über das Ziel + 6 29 zurück + 7 30 Ruhe + ``` + + Plus 3, dann minus 1, dann 0. In Pixelart reichen oft ein oder zwei Pixel. Wie lose Teile wie Haare oder Ärmel gegeneinander versetzt nachschwingen, ist ein eigenes Thema: [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung). Hier bewegt sich der ganze Körper. + + ### Die Erholung zeigt das Gewicht + + Was nach der Aktion passiert, verrät, wie viel Kraft im Spiel war. Schlitter hält in seinen Angriffen das Bild nach dem Schlag länger, „to emphasize the commitment of the attack, and weight of the weapon“ (Pixelblog 56). Masahiro Sakurai rät in [Follow-Throughs Make the Impact](https://www.youtube.com/watch?v=cIB0BUe6Ihk&t=199s) (ab 3:19), die Pose nach dem Treffer zu halten, statt die Figur gleichmäßig in die Ruhe zurückgleiten zu lassen. Nach der Haltezeit kehrt die Figur in eine Ruhepose zurück. Ihre letzte Pose muss zur ersten Pose der Ruhe passen, sonst springt sie beim Wechsel; wie du das prüfst, steht in [der Testszene](/animation/testszene). Lange Erholungen kosten im Spiel Kontrolle. Cartwright beschreibt, wie lange Rückwege in die Ruhe die Reaktion der Figur verschlechtern ([ab 13:10](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=790s)). + + ## Phasen timen: Zahlen aus einem veröffentlichten Beispiel + + Schlitter gibt in Pixelblog 56 für drei Waffen dieselbe Bildfolge mit sechs Bildern an, jeweils mit eigenen Dauern. Ein Bild holt aus, drei kurze Bilder in der Mitte tragen den Schlag (Wischbilder, beim Hammer mit einem Rückprall), ein gehaltenes Bild folgt dem Schlag nach, ein Bild führt zurück. Das Modell rechnet Gesamtdauer und Anteil des Ausholens: + + ```python run + # Slynyrd, Pixelblog 56 + # ms je Bild + schwert = [100, 50, 50, + 50, 100, 50] + speer = [200, 50, 50, + 50, 150, 50] + hammer = [250, 50, 50, + 50, 300, 100] + + for d in (schwert, speer, + hammer): + gesamt = sum(d) + anteil = d[0] / gesamt + print(gesamt, d[0], + round(anteil, 2)) + ``` + + Das Ausholen wächst von 100 auf 250 ms, das gehaltene Bild nach dem Schlag von 100 auf 300 ms. Die drei Bilder in der Mitte bleiben bei je 50 ms. Die schwerere Waffe bekommt mehr Zeit vor und nach dem Schlag, der Schlag selbst wird nicht langsamer. Der Anteil des Ausholens wächst dabei nicht gleichmäßig mit dem Gewicht: 0,25, 0,36, 0,31. Beim Hammer wächst die Zeit danach stärker als die davor. In Pixelblog 9 fasst Schlitter das als Regel für schwere Waffen: langsameres Ausholen und Erholen, „However the smear frames should always be few and fast“. + + > [!PRAXIS] Gewicht über Haltezeiten, nicht über Bilder + > Schlitter zeichnet für Schwert, Speer und Hammer jeweils sechs Bilder in fast denselben Phasen. Das Gewicht der Waffe steckt in den Dauern von Ausholen und Nachziehen. Die Unterschiede liegen dort, wo du sie im Editor änderst, ohne neu zu zeichnen. Für dich heißt das: Wenn eine Bewegung zu leicht wirkt, prüf zuerst die Dauern der Keys um die Aktion herum, bevor du Bilder hinzufügst. + + ## Prüfen, ob die Kraft ankommt + + Ob ein Wurf kräftig wirkt, steht in keiner Bildliste. Schreib vor dem Zeichnen einen **Absichtssatz**, etwa „Die Puppe wirft die schwere Kiste mit aller Kraft weg“. Zeig die fertige Studie dann im **Beobachtungstest**: ohne Vorrede, dreimal in Schleife, und frag nur „Was passiert da?“. Antwortet jemand „Sie schubst die Kiste weg“, ist das eine Information über deine Antizipation, kein Urteil über dich. Wie du fragst, ohne die Antwort vorzugeben, und was eine einzelne Antwort beweist, steht in [Körpersprache und Zustandswechsel](/animation/koerpersprache). + + Willst du wissen, was die Antizipation beiträgt, ändere nur sie. Zeichne drei Fassungen, die sich allein in der Tiefe der Ausholpose unterscheiden, und zeig sie in gemischter Reihenfolge. Ändert sich nebenbei auch die Dauer, weißt du hinterher nicht, was gewirkt hat. Wie man Varianten im Editor sauber baut, zeigt [Werkstatt: neutrale Studien in Varianten](/animation/werkstatt-studien). + + > [!TIP] Ausholen im Daumenkino tauschen + > Zeichne die Ausholpose auf drei Haftzettel in drei Tiefen. Den Rest des Daumenkinos lässt du gleich und steckst nur den einen Zettel um. So vergleichst du im Bus drei Antizipationen mit einem Block. + + > [!INTERVIEW] + > „Wie zeigst du in sechs Bildern, dass ein Schlag kräftig ist?“ Gute Antwort: Ich zeichne eine deutliche Gegenbewegung als Key und halte sie lange genug, dass man sie liest. Die Aktion bekommt ein, zwei kurze Bilder; ist der Weg dazwischen zu groß, setze ich ein Wischbild, das nur kurz steht. Danach kommt die Figur über das Ziel hinaus, schwingt zurück und hält die Endpose. Gewicht zeige ich über die Haltezeiten vor und nach dem Schlag, nicht über mehr Bilder. Ob der Schlag kräftig wirkt, prüfe ich mit jemandem, der ihn ohne Erklärung sieht, und im Spiel zusätzlich, wie viel Ausholen die Steuerung verträgt. + + ## Häufige Fehler + + - **Ausholen in Bewegungsrichtung.** Die Puppe nimmt die Kiste vor dem Wurf ein Stück nach vorn statt zurück, und der Wurf wirkt wie ein Schieben. Die Antizipation geht gegen die Aktion. + - **Ausholpose wie ein Zwischenbild getimt.** Sie steht 50 ms, und niemand sieht sie. Ein Key braucht eine Haltezeit. + - **Die Aktion mit Zwischenbildern gefüllt.** Fünf gleichmäßige Bilder zwischen Ausholen und Ziel machen den Schlag langsam. Streich Bilder und setz dort, wo der Weg zu groß wird, ein Wischbild. + - **Wischbild am falschen Ort.** Ein Schweif an einer langsamen Bewegung ist Dekoration, kein Tempo. Steht ein Wischbild so lange wie ein Key, sieht man es als Form. + - **Harter Halt im Ziel.** Die Figur kommt an und steht. Ein Bild Überschwingen um ein, zwei Pixel und ein Bild zurück lassen sie ankommen. + - **Gewicht über mehr Bilder in der Aktion.** Ein schwerer Hammer schlägt bei Schlitter nicht langsamer zu. Er braucht länger, bevor er fällt, und länger, bis die Figur wieder steht. + - **Endpose passt nicht zur Ruhe.** Nach der Erholung springt die Figur in die Ruhepose. Leg letzte Pose und erste Ruhepose übereinander. + + ## Zusammenfassung + + - Kräftige Bewegungen haben drei Phasen: Antizipation, Aktion, Erholung. Medeiros teilt feiner in Ruhe, Ausholen, Aktion, Überschwingen, Ruhe. + - Die Antizipation geht gegen die Richtung der Aktion. Ihre Größe kündigt Kraft an, ihre Dauer entscheidet, ob man sie liest. + - In Spielen kostet Antizipation Reaktionszeit. Bei der Spielfigur ist sie oft kurz oder fehlt, bei Gegnern ist sie die Zeit des Spielers. + - Die Aktion ist oft die kürzeste Phase. Wischbilder verbinden große Wege, stehen kurz und kommen nur bei echtem Tempo vor. + - In der Erholung schwingt der Körper über das Ziel hinaus und pendelt mit kleiner werdendem Ausschlag zurück. In Pixelart reichen ein, zwei Pixel. + - Gewicht zeigt sich in den Haltezeiten vor und nach der Aktion. Bei Schlitter wachsen sie mit der Waffe, die Wischbilder bleiben bei 50 ms. + - Ob die Kraft ankommt, prüfst du mit Absichtssatz und Beobachtungstest, nicht mit einer Regel. +exercises: + - id: antizipation-aussagen + type: choice + title: Was stimmt über das Ausholen? + prompt: | + Welche Aussagen über die Antizipation stimmen? + options: + - text: Sie geht meist gegen die Richtung der Aktion, etwa Arme zurück vor einem Wurf nach vorn. + correct: true + why: Die Gegenbewegung sammelt Kraft und zeigt, wohin es gleich geht. Thomas und Johnston nennen als Beispiele das Kniebeugen vor dem Sprung und das Zurückschwingen des Golfschlägers. + - text: Eine größere Ausholbewegung kündigt mehr Kraft an. Ob ein Zuschauer das so liest, prüfst du. + correct: true + why: Animatoren nutzen die Größe als Konvention. Schlitter schreibt, ein längeres Ausholen könne sich wuchtiger anfühlen, und knüpft daran keine Garantie. + - text: Eine Antizipation muss mindestens drei Bilder lang sein, sonst sieht man sie nicht. + correct: false + why: Cartwright zeigt einen Skullgirls-Angriff mit genau einem Ausholbild. Entscheidend ist, dass das Bild als Pose lesbar ist und lange genug steht, nicht die Zahl der Bilder. + - text: Lässt man sie weg, wo das Publikum sie erwartet, kann das überraschen. + correct: true + why: Der Wikipedia-Artikel zur Antizipation nennt das Weglassen als Mittel für Überraschung, bei Thomas und Johnston als „surprise gag“. + - text: Antizipation gibt es nur im Zeichentrickfilm, in Spielen wird sie nicht gezeichnet. + correct: false + why: Auch Spiele zeichnen sie, bei Gegnern oft deutlich. Bei Spielfiguren halten Animatoren sie kurz, weil sie Reaktionszeit kostet. + explanation: | + Die Antizipation ist eine Gegenbewegung, die Kraft sammelt und ankündigt. Ihre Größe und Dauer wählst du nach der Kraft, die du zeigen willst, und nach dem, was das Spiel verträgt. Ein einziges Bild kann reichen, wenn es eine klare Pose ist. Ob Größe und Dauer beim Zuschauer ankommen, ist eine Frage an den Beobachtungstest, keine feste Regel. + resources: + - title: Wikipedia · Anticipation (animation) + url: https://en.wikipedia.org/wiki/Anticipation_%28animation%29 + + - id: wurf-ordnen + type: order + title: Eine Kiste, ein Wurf + prompt: | + Bring die Posen eines Kistenwurfs in die Reihenfolge, in der sie im Daumenkino stehen. + lang: prose + lines: | + Die Puppe steht und hält die Kiste vor dem Bauch. + Das Gewicht geht aufs hintere Bein, die Arme nehmen die Kiste nach hinten. + Wischbild: Arme und Kiste auf dem Weg nach vorn. + Die Arme sind gestreckt, die Kiste löst sich. + Die Arme schwingen ein Stück über die Wurfrichtung hinaus. + Die Arme pendeln ein kleines Stück zurück. + Die Puppe steht ruhig und sieht der Kiste nach. + explanation: | + Erst die Ruhe, dann die Gegenbewegung nach hinten als Antizipation. Das Wischbild verbindet die Ausholpose mit dem Moment, in dem die Kiste loskommt; beide zusammen sind die Aktion. Danach kommt die Erholung: Überschwingen über die Wurfrichtung hinaus, Ausschwingen zurück, Ruhepose. Wer das Wischbild vor die Ausholpose setzt, verbindet Ruhe und Ausholen mit einem Schweif, und davon rät Schlitter ab. + resources: + - title: Saint11 · Impact + url: https://saint11.art/blog/pixel-art-tutorials/#Impact + + - id: anteil-hammer + type: output + title: Wie viel ist Ausholen? + prompt: | + Schlitters Hammerschlag aus Pixelblog 56 hat sechs Bilder. Bild 1 ist das Ausholen. Wie viel Prozent der Gesamtdauer nimmt es ein? Antworte mit einer ganzen Zahl. + lang: text + code: | + Bild 1 2 3 4 5 6 + ms 250 50 50 50 300 100 + expected: | + 31 + accept: + - 31 % + - 31% + - 31 Prozent + hints: + - Rechne zuerst die Gesamtdauer aus. + explanation: | + Die Gesamtdauer ist 250 + 50 + 50 + 50 + 300 + 100 = 800 ms. 250 / 800 = 0,3125, gerundet 31 %. Beim Schwert sind es 100 von 400 ms, also 25 %. Der Anteil wächst mit der schweren Waffe nur wenig, weil beim Hammer auch das gehaltene Bild nach dem Schlag stark wächst. Die drei Bilder in der Mitte bleiben in allen drei Fassungen bei je 50 ms. + resources: + - title: Slynyrd · Pixelblog 56 + url: https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation + + - id: phasen-summieren + type: output + title: Millisekunden je Phase + prompt: | + Was gibt das Programm aus? + lang: python + code: | + bilder = [("aus", 200), + ("akt", 50), + ("akt", 50), + ("erh", 100), + ("erh", 250)] + summe = {} + for phase, ms in bilder: + alt = summe.get(phase, 0) + summe[phase] = alt + ms + for phase in summe: + print(phase, summe[phase]) + expected: | + aus 200 + akt 100 + erh 350 + explanation: | + Das Programm addiert die Dauern je Phase und gibt danach eine Zeile pro Phase aus: Ausholen 200 ms, Aktion zweimal 50 ms, Erholung 100 und 250 ms. Ein Wörterbuch behält die Reihenfolge, in der die Schlüssel zuerst auftauchen, deshalb steht `aus` in der ersten Zeile. Das Ergebnis zeigt das typische Muster: Die Aktion ist mit 100 ms die kürzeste Phase, die Erholung die längste. + + - id: ueberschwingen-messen + type: output + title: Wie weit hinaus? + prompt: | + Die Hand der Puppe soll nach dem Wurf bei x = 40 stehen. Um wie viele Pixel schwingt sie über dieses Ziel hinaus? Antworte mit der Zahl. + lang: text + code: | + Bild Hand-x Pose + 3 12 ausgeholt + 4 26 Wischbild + 5 40 Kiste los + 6 42 ? + 7 39 ? + 8 40 Ruhe + expected: | + 2 + accept: + - 2 px + - 2 Pixel + explanation: | + In Bild 6 steht die Hand bei 42, also 2 Pixel hinter dem Ziel 40. Das ist das Überschwingen. In Bild 7 pendelt sie auf 39 zurück, einen Pixel vor das Ziel, und in Bild 8 steht sie. Die Ausschläge werden kleiner: plus 2, minus 1, 0. Genau dieses Abklingen unterscheidet ein Ausschwingen von einem Zittern. + resources: + - title: Slynyrd · Pixelblog 9, Melee Attacks + url: https://www.slynyrd.com/blog/2018/9/8/pixelblog-9-melee-attacks + + - id: sprung-phasen + type: gap + title: Ein Mehlsack springt + prompt: | + Trag für jedes Bild die Phase ein: Antizipation, Aktion oder Erholung. + lang: text + code: | + Sprung eines Mehlsacks + 1 Stand ........ Ruhe + 2 Hocke ........ ⟦Antizipation⟧ + 3 Streckung .... ⟦Aktion⟧ + 4 Flug ......... Aktion + 5 Landung, tief ⟦Erholung⟧ + 6 federt hoch .. Erholung + 7 Stand ........ Ruhe + gaps: + - label: Bild 2 + hint: Der Sack geht nach unten, obwohl er nach oben will. + accept: ["antizipation", "Ausholen", "ausholen", "Anticipation"] + - label: Bild 3 + hint: Hier wirkt die Kraft, die ihn hebt. + accept: ["aktion", "Action"] + - label: Bild 5 + hint: Der Sack sinkt tiefer, als er am Ende steht. + accept: ["erholung", "Reaktion", "reaktion"] + explanation: | + Die Hocke ist die Gegenbewegung vor dem Sprung, also Antizipation. Streckung und Flug sind die Aktion. Bei der Landung sinkt der Sack tiefer als im Stand: Er schwingt über seine Ruhehöhe hinaus nach unten, federt zurück und steht. Das ist die Erholung, mit Überschwingen und Ausschwingen wie nach einem Wurf, nur in der Senkrechten. + resources: + - title: Saint11 · Jump + url: https://saint11.art/blog/pixel-art-tutorials/#Jump + + - id: begriffe-kraft + type: gap + title: Fünf Wörter für Kraft + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Vor einem Wurf nach vorn nimmt die Figur die Arme zurück. Diese ⟦Gegenbewegung⟧ ist die Antizipation. + Ein Bild, das den Weg einer schnellen Bewegung als gestreckte, verwischte Form zeigt, heißt ⟦Wischbild⟧. + Kommt der Körper über das Ziel hinaus, spricht man von ⟦Überschwingen⟧. + Danach pendelt er mit kleiner werdendem Ausschlag zurück: Er schwingt ⟦aus⟧. + Ein schwerer Hammer bekommt bei Schlitter längere Haltezeiten vor und ⟦nach⟧ dem Schlag, nicht mehr Bilder in der Aktion. + gaps: + - label: Bewegung vor der Bewegung + hint: Sie geht in die andere Richtung als die Aktion. + accept: ["Ausholbewegung", "Ausholen"] + - label: Gestrecktes Bild + hint: Auf Englisch Smear. + accept: ["Smear", "Smear-Bild", "Smearbild", "Smear Frame"] + - label: Über das Ziel + hint: Auf Englisch Overshoot. + accept: ["Overshoot", "Überschießen"] + - label: Zurückpendeln + hint: Auf Englisch Settle. + - label: Zeitpunkt + hint: Das Gegenteil von vor. + explanation: | + Antizipation ist eine Gegenbewegung, das Wischbild verbindet einen großen Weg, Überschwingen und Ausschwingen bringen die Bewegung zur Ruhe. Der letzte Satz fasst Schlitters Beispiel zusammen: Die drei Bilder in der Mitte bleiben bei 50 ms, Ausholen und das Bild nach dem Schlag wachsen mit dem Gewicht der Waffe. + resources: + - title: Wikipedia · Smear frame + url: https://en.wikipedia.org/wiki/Smear_frame + + - id: wischbild-zu-lang + type: bug + title: Ein Schlauch in der Mitte + prompt: | + Eine Gliederpuppe wirft eine Kiste. Eine Testperson sagt nach dem dritten Durchlauf: „In der Mitte ist kurz so ein komischer Schlauch zu sehen.“ Die Zeichnungen stimmen. Finde die Zeile, die das verursacht. + lang: text + code: | + Bild Dauer Pose + 1 200 ms Ruhe + 2 250 ms ausgeholt (Key) + 3 150 ms Wischbild + 4 100 ms Kiste los (Key) + 5 50 ms über das Ziel + 6 300 ms Ruhe (Key) + lines: [4] + hints: + - Vergleich die Dauer des Wischbilds mit der Dauer der Keys. + explanation: | + Das Wischbild steht 150 ms, länger als die Pose, in der die Kiste loskommt. So lange liest das Auge es als eigene Form, und der Zuschauer beschreibt einen Schlauch statt einer Bewegung. Wischbilder stehen kurz, bei Schlitter 50 ms, also 3 Ticks. Welchen Wert du wählst, entscheidest du; der Fehler ist, dass ein Weg so lange steht wie ein Ziel. + resources: + - title: Slynyrd · Pixelblog 9, Melee Attacks + url: https://www.slynyrd.com/blog/2018/9/8/pixelblog-9-melee-attacks + + - id: ausholen-falsche-richtung + type: bug + title: Geschoben statt geworfen + prompt: | + Die Puppe wirft eine Kiste nach rechts, x wächst nach rechts. Drei Testpersonen beschreiben den Wurf mit Wörtern wie „schubst“ und „schiebt“; ein Ausholen erwähnt niemand. Finde die Zeile, die das verursacht. + lang: text + code: | + Wurf nach rechts, Hand-x in px + Bild x Pose + 1 20 Ruhe + 2 26 ausgeholt (Key) + 3 40 Wischbild + 4 52 Kiste los (Key) + 5 55 über das Ziel + 6 52 Ruhe + lines: [4] + hints: + - In welche Richtung bewegt sich die Hand zwischen Bild 1 und Bild 2? + explanation: | + Zwischen Ruhe (20) und Ausholpose (26) geht die Hand nach rechts, also schon in Wurfrichtung. Damit gibt es keine Gegenbewegung, und die Puppe beginnt den Wurf aus einer Pose, die schon halb vorn ist. Eine Antizipation liegt hier links vom Ruhewert, etwa bei 10. Wie weit, hängt von der Kraft ab, die du zeigen willst; die Richtung nicht. + resources: + - title: Wikipedia · Twelve basic principles, Anticipation + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Anticipation + + - id: drei-waffen-erklaeren + type: explain + title: Schwert, Speer, Hammer + prompt: | + Raymond Schlitter animiert in Pixelblog 56 drei Waffen mit je sechs Bildern und gibt diese Dauern an. Erkläre in wenigen Sätzen, wo das Gewicht der Waffen steckt und was gleich bleibt. + lang: text + code: | + Slynyrd, Pixelblog 56, ms je Bild + Bild 1 2 3 4 5 6 + Schwert 100 50 50 50 100 50 + Speer 200 50 50 50 150 50 + Hammer 250 50 50 50 300 100 + 1 Ausholen, 2–4 Schlag, + 5 gehalten, 6 zurück + points: + - Die Bilder 2 bis 4 bleiben bei allen Waffen bei 50 ms; der Schlag selbst wird nicht langsamer. + - Das Ausholen wächst mit dem Gewicht (100, 200, 250 ms). + - Das gehaltene Bild nach dem Schlag wächst am stärksten (100, 150, 300 ms); dort zeigt Schlitter Wucht und Gewicht. + - Längeres Ausholen kostet im Spiel Reaktionszeit, Schlitter nennt das selbst als Preis. + explanation: | + Alle drei Waffen haben dieselben Phasen, und die Bilder des Schlags stehen immer 50 ms. Das Gewicht steckt davor und danach. Das Ausholen wird länger, damit die Kraft angekündigt wird, und das Bild nach dem Schlag wird noch länger, weil eine schwere Waffe Zeit braucht, bis die Figur sie wieder im Griff hat. Schlitter schreibt dazu, ein längeres Ausholen könne sich wuchtiger anfühlen, bringe aber mehr Verzögerung nach der Eingabe. Für eine Spielfigur ist das eine Abwägung, die du in [Animation im Spiel](/animation/animation-im-spiel) triffst. + resources: + - title: Slynyrd · Pixelblog 56 + url: https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation + + - id: sprung-drei-ausholer + type: practice + title: Ein Sprung, drei Antizipationen + prompt: | + Plan auf Papier einen Mehlsack (oder eine Gliederpuppe), der hochspringt und landet, in drei Fassungen. Die Fassungen unterscheiden sich nur in der Tiefe der Hocke vor dem Absprung: flach, mittel, tief. Bildzahl, Dauern und alle anderen Posen bleiben gleich. Schreib vorher für jede Fassung einen Absichtssatz. Bau ein Daumenkino aus Haftzetteln, in dem du nur den Zettel mit der Hocke tauschst. + + Zeig die drei Fassungen danach jemandem im Beobachtungstest, in gemischter Reihenfolge, jede dreimal ohne Vorrede. Frag zu jeder „Was passiert da?“ und am Ende „Worin unterscheiden sich die drei?“. Notiere hier nur deine Pläne und die Antworten. + lang: prose + starter: | + Absichtssatz flach: + Absichtssatz mittel: + Absichtssatz tief: + Bildliste (Bild, Dauer, Pose): + Reihenfolge beim Zeigen: + Antworten (wörtlich, wer): + Abweichung von meiner Absicht: + checklist: + - Für jede Fassung steht ein Absichtssatz, geschrieben vor dem Zeichnen. + - Die drei Fassungen unterscheiden sich nur in der Tiefe der Hocke; Bildzahl und Dauern sind gleich. + - In jeder Fassung geht der Sack vor dem Absprung nach unten. + - Die Reihenfolge, in der du gezeigt hast, ist notiert. + - Die Antworten stehen wörtlich da, mit Initialen der Person. + - Du hast in einem Satz notiert, wo eine Antwort von deiner Absicht abweicht, ohne aus einer Antwort eine Regel zu machen. + explanation: | + Die Übung isoliert eine einzige Größe, die Tiefe der Antizipation. Weil alles andere gleich bleibt, kannst du einen Unterschied in den Antworten dieser Größe zuschreiben. Die gemischte Reihenfolge verhindert, dass der Zuschauer eine Steigerung erwartet. Ob „tief“ als kräftiger gelesen wird, beantwortet nicht diese Lektion, sondern deine Beobachtung; wie du dabei fragst, steht in [Körpersprache und Zustandswechsel](/animation/koerpersprache). + resources: + - title: Wikipedia · Anticipation (animation) + url: https://en.wikipedia.org/wiki/Anticipation_%28animation%29 + + - id: schmied-zaehlen + type: practice + title: Der Schmied von 1887 + prompt: | + Öffne Muybridges [Tafel 378](https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_hammering_an_anvil_%28rbm-QP301M8-1887-378%29.jpg), ein Schmied schlägt mit beiden Händen auf einen Amboss, und vergrößere die obere Reihe. Zähl, in wie vielen Bildern der Hammer steigt, in wie vielen er oben ist und in wie vielen er fällt. Markiere das Bild, das dem Aufschlag am nächsten ist, und beschreib in Stichpunkten, was Oberkörper und Knie danach tun. Notiere zum Schluss, was du für eine eigene Hammerstudie mit sechs Bildern übernehmen würdest. + lang: prose + starter: | + Bilder steigend: + Bilder oben: + Bilder fallend: + Bild am nächsten am Aufschlag: + Oberkörper und Knie danach: + Für meine Studie mit 6 Bildern: + checklist: + - Du hast die Bilder gezählt, nicht geschätzt, und die Zählung gilt für die obere Reihe. + - Du hast notiert, ob der Hammer länger steigt oder länger fällt. + - Das Bild am nächsten am Aufschlag ist mit seiner Nummer in der Reihe markiert. + - Du beschreibst die Haltung nach dem Aufschlag mit Körperteilen (Rücken, Knie, Arme), nicht mit Eindrücken. + - Deine Notiz für die eigene Studie nennt, welche Phase welche Bilder bekommt. + explanation: | + Muybridges Fotos sind eine gemeinfreie Referenz. Ob die Abstände zwischen den Aufnahmen gleich lang waren, verrät die Tafel nicht, deshalb zählst du Bilder, keine Millisekunden. Was du siehst, ist die Gegenbewegung in echt: Der Hammer muss hoch, bevor er fallen kann, und der Körper gibt nach dem Aufschlag nach. Für eine Pixelart-Studie mit sechs Bildern wählst du daraus wenige Keys aus. Mehr zum Arbeiten mit Referenzen steht in [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen). + resources: + - title: Muybridge · Animal Locomotion, Tafel 378 (Wikimedia Commons) + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_hammering_an_anvil_%28rbm-QP301M8-1887-378%29.jpg diff --git a/content/animation/modules/beobachten-schluesselposen.yaml b/content/animation/modules/beobachten-schluesselposen.yaml new file mode 100644 index 0000000..cec4531 --- /dev/null +++ b/content/animation/modules/beobachten-schluesselposen.yaml @@ -0,0 +1,477 @@ +id: beobachten-schluesselposen +title: Bewegung beobachten und in Schlüsselposen zerlegen +level: 1 +minutes: 110 +summary: Warum du Bewegungen filmst, statt sie dir auszudenken, wie du eine Aufnahme Bild für Bild liest und in Keys, Extreme, Breakdowns und Zwischenbilder zerlegst und wie du daraus einen Plan aus wenigen Strichfiguren machst. +place: unterwegs +goals: + - Du filmst eine Referenz mit dem Handy, gehst sie Bild für Bild durch und rechnest gezählte Videobilder in Millisekunden um. + - Du unterscheidest Schlüsselpose (Key), Extrem, Breakdown und Zwischenbild und findest sie in einer Bildliste oder Fotoserie. + - Du entscheidest begründet, wann Pose-to-Pose und wann Straight Ahead passt. + - Du planst eine Bewegung als drei bis sechs Thumbnails mit Handlungslinie, Bildnummern und Dauern. + - Du nutzt eine Referenz als Beleg für Timing und Posen, ohne sie abzupausen. +resources: + - title: Wikipedia · Straight ahead action and pose to pose + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Straight_ahead_action_and_pose_to_pose + - title: Saint11 · Animation Planning + url: https://saint11.art/blog/pixel-art-tutorials/#Planning + - title: Slynyrd · Pixelblog 50, Human Walk Cycle + url: https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle + - title: Wikimedia Commons · Muybridge, The Horse in Motion (1878) + url: https://commons.wikimedia.org/wiki/File:The_Horse_in_Motion_high_res.jpg + - title: Krita Manual · Animation with Krita + url: https://docs.krita.org/en/user_manual/animation.html#introduction-to-animation-how-to-make-a-walk-cycle +lesson: | + Du zeichnest eine Gliederpuppe, die von einem Stuhl aufsteht. Aus dem Kopf sind das drei Bilder: sitzen, halb oben, stehen. Beim Abspielen schwebt die Figur senkrecht aus dem Stuhl, als zöge sie jemand an einem Faden nach oben. Dabei stehst du jeden Tag auf. Du hast nur nie hingesehen. Wer aufsteht, bringt zuerst den Oberkörper weit nach vorn, über die Füße, und erst dann strecken sich die Beine. Warum das so sein muss, steht in [Schwerpunkt, Gleichgewicht und Bodenkontakt](/animation/schwerpunkt-balance). Aus dem Gedächtnis kennst du Anfang und Ende einer Bewegung, den Weg dazwischen selten. + + Diese Lektion zeigt, wie du Bewegung beobachtest, statt sie zu erfinden: filmen, Bild für Bild durchgehen, die wichtigen Posen finden und daraus einen Plan auf Papier machen. Das ist die Grundlage für alle weiteren Module, und alles davon geht unterwegs mit Handy, Bleistift und Haftzetteln. + + ## Hinsehen statt erinnern: Referenz mit dem Handy + + Für schnelle Bewegungen ist das Auge zu langsam. 1872 sollte der Fotograf Eadweard Muybridge für den Eisenbahnunternehmer Leland Stanford klären, ob ein laufendes Pferd in einem Moment alle vier Hufe in der Luft hat. 1878 lieferte er die Antwort mit zwölf Kameras, die nacheinander auslösten ([The Horse in Motion, Wikimedia Commons](https://commons.wikimedia.org/wiki/File:The_Horse_in_Motion_high_res.jpg)). Seine späteren Serien aus *Animal Locomotion* (1887) sind gemeinfrei und liegen ebenfalls auf Wikimedia Commons. Eine davon, einen Weitsprung, liest du in den Übungen. + + Dein Handy nimmt in Zeitlupe mehr Bilder pro Sekunde auf als ein normales Video. Auf dem iPhone ist das der Modus Slo-mo; die Bildrate wählst du in den Einstellungen unter *Kamera* ([Apple: Record a slow-motion video](https://support.apple.com/guide/iphone/record-a-video-iph61f49e4bb/ios#iph67bdd501c)). Google-Pixel-Telefone bieten Zeitlupe in Stufen an; für sehr schnelle Bewegungen empfiehlt Google 1/8x ([Pixel-Kamera-Hilfe](https://support.google.com/pixelcamera/answer/7064897?hl=en#slowmo_video)). Die Faktoren erklärt das Android-Entwicklerblog: Eine Aufnahme mit 120 Bildern pro Sekunde, abgespielt mit 30, läuft mit einem Viertel der Geschwindigkeit, 240 mit einem Achtel ([CameraX 1.5](https://developer.android.com/blog/posts/high-speed-capture-and-slow-motion-video-with-camera-x-1-5)). + + So wird eine Aufnahme brauchbar: + + - Das Handy steht fest, etwa an ein Buch gelehnt. Es schwenkt nicht und zoomt nicht. + - Du filmst von der Seite, mit dem ganzen Körper und den Füßen im Bild. + - Hinter dir ist eine ruhige, helle Fläche, damit sich die Umrisse abheben. + - Du nimmst die Bewegung drei- oder viermal auf und wählst danach die klarste Aufnahme. + + Danach gehst du die Aufnahme Bild für Bild durch. Am Computer geht das in VLC mit der Taste `E` für das nächste Bild ([VLC Hotkeys](https://wiki.videolan.org/QtHotkeys/)) und bei angehaltenen YouTube-Videos mit `.` und `,` ([YouTube-Tastenkürzel](https://support.google.com/youtube/answer/7631406?hl=en)). Am Handy hältst du das Video an und schiebst langsam durch die Zeitleiste der Galerie. + + Zähl die Bilder, statt die Dauer zu schätzen. Die Zeit ist die Zahl der Bilder geteilt durch die Aufnahmerate. Bei Zeitlupe zählt die Rate der Aufnahme, nicht die der Wiedergabe: + + ```python run + # Videobilder in ms + def ms(n, fps): + return n * 1000 / fps + + # 18 Bilder, drei Raten + for fps in (30, 120, 240): + print(fps, ms(18, fps)) + ``` + + Achtzehn Bilder sind bei 30 Bildern pro Sekunde 600 ms, in einer 240er-Zeitlupe nur 75 ms. Wer die Rate vergisst, plant eine Bewegung achtmal zu langsam. Wie aus Millisekunden die Ticks deines Spiels werden, steht in [Timing und Spacing](/animation/timing-spacing). + + > [!TIP] Ein Stapel Bücher als Stativ + > Lehn das Handy an etwas Festes: Bücher, eine Tasse, die Rückenlehne eines Stuhls. Starte die Aufnahme, geh in Position und warte zwei Sekunden, bevor du dich bewegst. So hast du am Anfang ein ruhiges Bild zum Vergleichen. + + ## Eine Referenz ist ein Beleg, keine Vorlage + + Bewegungen aus Filmaufnahmen abzuzeichnen heißt **Rotoskopie**. Max Fleischer hat das Verfahren 1915 erfunden ([Rotoscoping](https://en.wikipedia.org/wiki/Rotoscoping)). Jordan Mechner hat es in seinen Spielen *Karateka* und *Prince of Persia* ausgiebig genutzt ([Rotoscoping: Uses by other studios](https://en.wikipedia.org/wiki/Rotoscoping#Uses_by_other_studios)). David Rosen nennt *Prince of Persia* in seinem GDC-Vortrag als Beispiel dafür, dass so gewonnene Übergänge detailreich wirken, die Figur aber verzögert auf die Eingabe reagieren lassen ([An Indie Approach to Procedural Animation](https://www.youtube.com/watch?v=LNidsMesxSE&t=55s), ab 0:55). Was das für ein Spiel bedeutet, steht in [Animation im Spiel](/animation/animation-im-spiel). + + Für Tanzszenen der 1930er-Jahre nutzte Fleischer die Aufnahmen „as a guide for timing and positioning“. Die Zeichentrickfiguren mit ganz anderen Proportionen wurden in diese Positionen gezeichnet ([Rotoscoping](https://en.wikipedia.org/wiki/Rotoscoping)). Genau so nutzt du eine Referenz: + + - **Timing:** Wie viele Bilder vergehen zwischen Ausholen und Treffen, wie lange bleibt der Körper unten? + - **Posen:** Wo ist das Gewicht, welcher Körperteil bewegt sich zuerst, wohin zeigt der Oberkörper? + + Die Posen zeichnest du neu, mit den Proportionen deiner Figur. Du lässt weg, was nichts erzählt, und übertreibst, was im kleinen Bild verloren ginge. + + > [!PRAXIS] 72 Bilder Video, 8 Bilder Animation + > Raymond Schlitter (Slynyrd) beschreibt, wie er einen Gangzyklus aus Videoreferenzen baut. Ein einzelner Zyklus der Aufnahme, mit 60 Bildern pro Sekunde, hat 72 Bilder, und „Several frames are identical at such a high frame rate“. Er sucht von Hand 8 Bilder heraus und passt die Dauern an, damit das Tempo dem Video entspricht. Danach vergleicht er mit weiteren Referenzen und ändert, was nicht zu seiner Figur passt ([Pixelblog 50](https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle)). Die Referenz liefert die Auswahl der Posen, die Zeichnung bleibt seine. + + > [!WARNING] Abpausen und generierte Vorlagen + > Pausierst du alle Bilder einer Aufnahme ab, erbst du jede Unschärfe, jedes Zittern und die Proportionen der gefilmten Person. Für diesen Kurs gilt außerdem: Keine KI-generierten Videos oder Bilder als Vorlage. Sie belegen nicht, wie sich ein Körper bewegt, und jede Pose, die du zeichnest, ist deine eigene Arbeit. + + ## Keys, Extreme, Breakdowns und Zwischenbilder + + Eine Animation besteht aus Zeichnungen mit verschiedenen Aufgaben. Die Begriffe stammen aus dem Zeichentrickstudio, und sie helfen dir, beim Planen die wichtigen Bilder von den Füllbildern zu trennen. + + Eine **Schlüsselpose (Key)** legt Anfang und Ende eines Bewegungsabschnitts fest. Die Folge der Keys bestimmt, welche Bewegung der Zuschauer sieht ([Key frame](https://en.wikipedia.org/wiki/Key_frame)). Pedro Medeiros (Saint11) beschreibt Keys als „frames that define an animation, important poses to describe an action“ ([Animation Planning](https://saint11.art/blog/pixel-art-tutorials/#Planning)). Wer nur die Keys sieht, versteht schon, was passiert. + + Ein **Extrem** ist die Pose, in der eine Bewegung am weitesten geht und umkehrt: der tiefste Punkt einer Hocke, der weiteste Punkt beim Ausholen. Viele Keys sind Extreme, aber nicht jeder. + + Ein **Breakdown** liegt zwischen zwei Keys und entscheidet, auf welchem Weg die Figur von einem zum anderen kommt. In großen Studios setzen Assistenten die Breakdowns, „which define the movement in more detail“ ([Inbetweening](https://en.wikipedia.org/wiki/Inbetweening#Traditional_animation)). + + Ein **Zwischenbild (Inbetween)** füllt den Rest des Weges, ohne etwas Neues zu erzählen. Medeiros' Notizen dazu: „Fill the gaps“ und „Copying pasting helps a lot“. + + Richard Williams' *The Animator's Survival Kit* arbeitet mit denselben Begriffen: Keys, Extreme, Breakdowns ([Rezension bei AWN](https://www.awn.com/animationworld/animators-survival-kit-most-valuable-how-animate-book-you-will-ever-want-own)). Für das Aufstehen vom Stuhl sieht eine Bildliste so aus, mit K für Key, B für Breakdown und Z für Zwischenbild: + + ```text + Bild Art Pose + 1 K sitzt aufrecht + 2 Z Oberkörper geht vor + 3 B Brust über den Knien, + Gesäß hebt ab + 4 Z Beine halb gestreckt + 5 K steht + ``` + + Ersetz Bild 3 durch „Oberkörper aufrecht, Gesäß hebt ab“. Anfang und Ende bleiben gleich, aber die Figur steigt jetzt senkrecht auf: die schwebende Fassung aus dem Einstieg. Zwei Keys lassen viele Wege offen, der Breakdown wählt einen davon. + + Wie viele Keys eine Bewegung braucht, entscheidet die Handlung, nicht die Bildzahl. Schlitter zeigt seinen Gang mit 8, 6 und 4 Bildern; die 4er-Fassung „highlights the most important key frames“, wirkt allein aber etwas dünn ([Pixelblog 50](https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle)). Mariel Cartwright beschreibt für *Skullgirls*, dass schon zwei gut gewählte Posen eine schnelle Bewegung tragen, wenn die Bilder dazwischen nah an den Keys liegen ([GDC 2014](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=235s), ab 3:55). + + > [!MERKE] + > Key: was passiert. Breakdown: auf welchem Weg. Zwischenbild: füllt den Weg. Extrem: wo die Bewegung am weitesten geht und umkehrt. + + ## Pose-to-Pose oder Straight Ahead + + Frank Thomas und Ollie Johnston unterscheiden in *The Illusion of Life* zwei Arbeitsweisen. Bei **Straight Ahead** zeichnest du Bild für Bild vom Anfang bis zum Ende. Das ergibt fließende, lebendige Bewegung, aber Proportionen und genaue Posen gehen unterwegs leicht verloren. Bei **Pose-to-Pose** zeichnest du zuerst die Keys und füllst danach die Lücken. Oft werden beide kombiniert ([Straight ahead action and pose to pose](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Straight_ahead_action_and_pose_to_pose)). + + In Spielen überwiegt Pose-to-Pose, aus einem praktischen Grund: Du kennst die Keys und ihr Timing, bevor das erste Zwischenbild existiert, und kannst sie schon im Spiel ausprobieren. Jake Clark beschreibt den Ablauf bei *Cuphead*: zuerst die Keys, dann die Breakdowns, dann die vollständige Animation ([Cuphead's Animation Process](https://www.youtube.com/watch?v=RmGb-jU3uVQ&t=966s), ab 16:06). Das Krita-Handbuch geht im Tutorial für einen Gangzyklus genauso vor: erst die Keys, dann die Zwischenbilder ([Animation with Krita](https://docs.krita.org/en/user_manual/animation.html#introduction-to-animation-how-to-make-a-walk-cycle)). + + Straight Ahead lohnt sich, wo der Weg nicht vorher feststehen muss: Rauch, eine Flamme, ein Tuch im Wind. Nimmst du Pose-to-Pose für den Körper und zeichnest ein flatterndes Tuch danach Bild für Bild dazu, kombinierst du beides. + + ## Thumbnails: die Bewegung auf Papier planen + + Ein **Thumbnail** ist eine briefmarkengroße Skizze. Für Bewegungen genügt eine Gliederpuppe: ein Kreis für den Kopf, Striche für Körper und Glieder. Zieh in jede Pose zuerst die Handlungslinie, die Linie, die die Richtung der ganzen Pose zeigt ([Pose und Ausdruck](/pixelart/pose-ausdruck)). Drei bis sechs Thumbnails reichen für eine Bewegung. + + Medeiros plant komplexe Animationen in Stufen: ein Standbild, dann grobe Skizzen („Make a basic plan of the animation“, „Try to get the timing right, but don't worry too much“), dann die Keys fertig zeichnen, zuletzt die Zwischenbilder ([Animation Planning](https://saint11.art/blog/pixel-art-tutorials/#Planning)). Für dich heißt das: + + 1. **Absichtssatz:** ein Satz, was ein Zuschauer sehen soll, etwa „Die Puppe hebt eine schwere Kiste vom Boden“. + 2. **Referenz:** filmen, Keys suchen, ihre Bildnummern im Video notieren. + 3. **Thumbnails:** jeden Key als Strichfigur, darunter K oder B. + 4. **Dauern:** aus der Referenz ausrechnen, wie lange es von Key zu Key dauert. + 5. **Prüfen:** die Keys als Daumenkino blättern, bevor ein Zwischenbild existiert. + + Die Dauern zwischen den Keys liefert dir die Referenz. Hast du die Posen in einer Aufnahme mit 120 Bildern pro Sekunde bei Bild 1, 46, 70 und 118 gefunden: + + ```python run + # Posen im Video, 120 fps + k = [1, 46, 70, 118] + for a, b in zip(k, k[1:]): + ms = (b-a) * 1000 / 120 + print(a, "->", b, ms) + ``` + + Vom Stehen bis zum tiefsten Punkt vergehen 375 ms, das Anheben bis zur Brust dauert 200 ms, das Aufrichten 400 ms. Diese Zeiten verteilst du auf deine Zeichnungen, wie in [Timing und Spacing](/animation/timing-spacing) beschrieben. Als Plan unter den Thumbnails: + + ```text + Bild Art Pose Zeit + 1 K steht vor Kiste 375 ms + 2 K tief, greift 200 ms + 3 B Kiste an Brust 400 ms + 4 K steht, trägt hält + ``` + + Die letzte Spalte ist die Zeit bis zur nächsten Pose, nicht die Dauer einer einzelnen Zeichnung. Ein Daumenkino aus vier Haftzetteln zeigt dir in einer Minute, ob die Keys die Handlung erzählen. Zeig es jemandem ohne Vorrede und frag „Was passiert da?“. Das ist der **Beobachtungstest**: Antwort wörtlich notieren, nicht korrigieren, mit dem Absichtssatz vergleichen. Erst wenn die Keys verstanden werden, lohnen sich Zwischenbilder. + + > [!INTERVIEW] + > „Wie gehst du an eine neue Animation heran?“ Gute Antwort: Ich schreibe zuerst in einem Satz auf, was der Zuschauer lesen soll. Dann suche oder filme ich eine Referenz und zähle dort die Bilder zwischen den wichtigen Posen. Ich plane Pose-to-Pose: Thumbnails der Keys, Timing nur mit Keys, ein schneller Test, im Spiel oder als Daumenkino. Erst wenn die Keys lesbar sind, setze ich Breakdowns und Zwischenbilder. So kann ich Timing und Posen noch billig ändern. + + ## Häufige Fehler + + - **Aus dem Kopf animiert.** Die Bewegung hat den Anfang und das Ende, die du kennst, und einen erfundenen Weg dazwischen. Film die Bewegung, bevor du zeichnest. + - **Zeitlupe falsch umgerechnet.** Gezählt in der Wiedergabe, geteilt durch 30 statt durch die Aufnahmerate: Die Bewegung wird vier- oder achtmal zu langsam geplant. + - **Alles abgepaust.** 72 Bilder Referenz werden 72 Bilder Animation, mit den Proportionen der gefilmten Person. Wähle Keys aus und zeichne sie neu. + - **Zu viele Keys.** Wenn jedes Bild ein Key ist, ist keines wichtiger als das andere. Frag bei jedem: Fehlt ohne ihn etwas? + - **Keys ohne Breakdown.** Die Zwischenbilder nehmen dann den kürzesten Weg, und die Bewegung wird gerade und mechanisch. Mehr dazu in [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung). + - **Zwischenbilder zuerst.** Wer gleich alle Bilder zeichnet, ändert das Timing später nur noch ungern. Erst die Keys timen und prüfen. + - **Kamera bewegt.** Ein Handy, das mitgeht oder zoomt, macht jede Pose anders groß. Die Bilder lassen sich nicht mehr vergleichen. + + ## Zusammenfassung + + - Das Gedächtnis kennt Anfang und Ende einer Bewegung, die Referenz zeigt den Weg. Film mit festem Handy von der Seite, gern in Zeitlupe. + - Zeit = Bildzahl geteilt durch die Aufnahmerate. Bei Zeitlupe zählt die Rate der Aufnahme. + - Die Referenz ist Beleg für Timing und Posen. Du wählst aus, zeichnest neu und übertreibst; abgepaust wird nicht, generierte Vorlagen gibt es nicht. + - Keys erzählen, was passiert, Extreme markieren Umkehrpunkte, Breakdowns legen den Weg fest, Zwischenbilder füllen ihn. + - Pose-to-Pose plant Keys und Timing zuerst, Straight Ahead zeichnet durch. In Spielen überwiegt Pose-to-Pose, oft kombiniert mit Straight Ahead für Tuch, Rauch oder Flammen. + - Thumbnails mit Handlungslinie, Bildnummern und Dauern sind der Plan. Ein Daumenkino nur aus Keys und ein Beobachtungstest prüfen ihn. +exercises: + - id: was-macht-der-breakdown + type: choice + title: Die Pose dazwischen + prompt: | + Zwischen den Keys „sitzt“ und „steht“ zeichnest du eine Pose, in der die Brust über den Knien ist und das Gesäß abhebt. Was leistet diese Pose? + options: + - text: Sie legt fest, auf welchem Weg die Figur vom Sitzen zum Stehen kommt. + correct: true + why: Das ist die Aufgabe eines Breakdowns. Mit einer anderen Pose an dieser Stelle steigt die Figur senkrecht auf, bei gleichen Keys. + - text: Sie ist die wichtigste Pose der Bewegung, ohne sie versteht niemand die Handlung. + correct: false + why: Das wären Keys. Sitzen und Stehen allein erzählen schon, dass jemand aufsteht; der Breakdown bestimmt, wie. + - text: Sie liegt genau in der Mitte zwischen den Keys und füllt den Weg. + correct: false + why: So arbeitet ein Zwischenbild. Ein Breakdown muss nicht in der Mitte liegen und bringt eine neue Information, hier das Vorbeugen. + - text: Sie ist der Punkt, an dem die Bewegung umkehrt. + correct: false + why: Das beschreibt ein Extrem. Beim Aufstehen kehrt an dieser Stelle nichts um, die Figur geht weiter nach oben. + explanation: | + Keys sagen, was passiert, der Breakdown entscheidet, auf welchem Weg. Zwei Keys lassen viele Wege offen: senkrecht hochschweben, nach vorn kippen und aufrichten, sich mit den Händen abstützen. Erst der Breakdown wählt einen davon. Deshalb ist er nach den Keys die wichtigste Zeichnung und kommt vor allen Zwischenbildern. + resources: + - title: Wikipedia · Inbetweening, Traditional animation + url: https://en.wikipedia.org/wiki/Inbetweening#Traditional_animation + + - id: straight-ahead-wann + type: choice + title: Durchzeichnen oder planen? + prompt: | + Für welche dieser Aufgaben passt Straight Ahead besser als Pose-to-Pose? + options: + - text: Eine Flamme, die unregelmäßig flackert. + correct: true + why: Ihr Weg muss nicht vorher feststehen, und genaue Posen braucht sie nicht. Bild für Bild durchzuzeichnen ergibt hier eine lebendige Bewegung. + - text: Rauch, der aus einem Schornstein aufsteigt und zerfasert. + correct: true + why: Auch Rauch hat keine feste Form. Jedes Bild entsteht aus dem vorigen, und kleine Abweichungen stören nicht. + - text: Eine Gliederpuppe hebt eine Kiste, die Animation darf genau 6 Bilder haben. + correct: false + why: Bei fester Bildzahl willst du Keys und Timing zuerst festlegen. Straight Ahead endet oft mit mehr oder weniger Bildern als geplant. + - text: Ein Hammerschlag, dessen Keys du zuerst im Spiel ausprobieren willst. + correct: false + why: Dafür brauchst du die Keys, bevor die Zwischenbilder existieren. Genau das bietet Pose-to-Pose. + explanation: | + Thomas und Johnston beschreiben Straight Ahead als fließend und lebendig, aber schwer zu kontrollieren, was Proportionen und genaue Posen angeht. Pose-to-Pose gibt dir Keys und Timing zuerst, und genau die brauchst du, wenn eine Animation eine feste Bildzahl hat oder im Spiel getestet wird. Formlose Dinge wie Flammen und Rauch zeichnest du deshalb oft durch, Figuren planst du. + resources: + - title: Wikipedia · Straight ahead action and pose to pose + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Straight_ahead_action_and_pose_to_pose + + - id: ablauf-planen + type: order + title: Von der Idee zum Zwischenbild + prompt: | + Bring die Arbeitsschritte für eine neue Bewegung in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Absichtssatz schreiben + Referenz filmen und Bild für Bild durchgehen + Keys in der Referenz finden und ihre Bildnummern notieren + Thumbnails der Keys mit Handlungslinie zeichnen + Dauern von Key zu Key ausrechnen und die Keys als Daumenkino prüfen + Breakdowns einsetzen + Zwischenbilder zeichnen + explanation: | + Der Absichtssatz ist der Maßstab für alles Weitere, deshalb steht er vorn. Die Referenz liefert Posen und Timing, die Thumbnails übersetzen sie in deine Figur. Das Daumenkino aus Keys zeigt, ob die Handlung lesbar ist, solange Änderungen noch wenig kosten. Breakdowns legen danach die Wege fest, und erst dann füllen Zwischenbilder die Lücken. + resources: + - title: Saint11 · Animation Planning + url: https://saint11.art/blog/pixel-art-tutorials/#Planning + + - id: extrem-finden + type: output + title: Wo kehrt sie um? + prompt: | + Eine Gliederpuppe bückt sich nach einer Kiste und richtet sich wieder auf. Die Liste zeigt die Höhe ihrer Hüfte in jedem Bild. In welchem Bild liegt das Extrem nach unten? Antworte mit der Bildnummer. + lang: text + code: | + Bild Hüfte (px über Boden) + 1 20 + 2 17 + 3 12 + 4 9 + 5 10 + 6 14 + 7 20 + expected: | + 4 + accept: + - Bild 4 + - "4." + explanation: | + Bis Bild 4 sinkt die Hüfte, ab Bild 5 steigt sie wieder. Bild 4 ist der Umkehrpunkt, also das Extrem. Hier greift die Puppe die Kiste; als Key gehört diese Pose fast immer in den Plan. In einer echten Aufnahme findest du das Extrem genauso: Du suchst das Bild, nach dem eine Richtung wechselt. + resources: + - title: AWN · Rezension The Animator's Survival Kit + url: https://www.awn.com/animationworld/animators-survival-kit-most-valuable-how-animate-book-you-will-ever-want-own + + - id: sprung-gezaehlt + type: output + title: Vom Absprung bis zur Landung + prompt: | + Du hast einen Sprung mit 120 Bildern pro Sekunde gefilmt und in der Galerie Bild für Bild gezählt. Was gibt das Programm aus? + lang: python + code: | + def ms(n, fps): + return n * 1000 / fps + + absprung, landung = 37, 85 + n = landung - absprung + print(n, ms(n, 120)) + expected: | + 48 400.0 + explanation: | + Zwischen Bild 37 und Bild 85 liegen 48 Bilder. Bei 120 Bildern pro Sekunde sind das 48 / 120 = 0,4 Sekunden, also 400 ms. Hättest du durch 30 geteilt, weil die Zeitlupe mit 30 Bildern pro Sekunde abgespielt wird, kämen 1600 ms heraus, viermal zu viel. Die Kommazahl entsteht, weil `/` in Python immer eine Kommazahl liefert. + resources: + - title: Android Developers Blog · Slow-Motion Video with CameraX 1.5 + url: https://developer.android.com/blog/posts/high-speed-capture-and-slow-motion-video-with-camera-x-1-5 + + - id: acht-aus-zweiundsiebzig + type: output + title: Acht Bilder, gleiche Zeit + prompt: | + Ein Zyklus aus einer Aufnahme mit 60 Bildern pro Sekunde hat 72 Bilder. Du wählst daraus 8 Bilder aus und willst, dass der Zyklus genauso lange dauert wie im Video. Wie viele Millisekunden steht jedes der 8 Bilder, wenn alle gleich lang stehen? Antworte mit der Zahl. + lang: text + code: | + Aufnahme 72 Bilder, 60 fps + Auswahl 8 Bilder + Dauer je Bild ? ms + expected: | + 150 + accept: + - 150 ms + - 150ms + explanation: | + 72 Bilder bei 60 pro Sekunde sind 1,2 Sekunden, also 1200 ms. Verteilt auf 8 Bilder steht jedes 150 ms. So beschreibt es Slynyrd für seinen Gangzyklus: weniger Bilder auswählen und die Dauern so anpassen, dass das Tempo dem Video entspricht. Gleich lang müssen die Bilder später nicht bleiben; Keys dürfen länger stehen. + resources: + - title: Slynyrd · Pixelblog 50, Human Walk Cycle + url: https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle + + - id: begriffe-zerlegen + type: gap + title: Sechs Wörter fürs Zerlegen + prompt: | + Ergänze die fehlenden Begriffe. + lang: prose + code: | + Eine Pose, die Anfang oder Ende eines Bewegungsabschnitts festlegt, heißt ⟦Key⟧. + Die Pose, die den Weg zwischen zwei Keys festlegt, heißt ⟦Breakdown⟧. + Bilder, die den Rest des Weges füllen, heißen ⟦Zwischenbilder⟧. + Wer zuerst die Keys zeichnet und dann die Lücken füllt, arbeitet ⟦Pose-to-Pose⟧. + Wer vom ersten bis zum letzten Bild durchzeichnet, arbeitet ⟦Straight Ahead⟧. + Eine briefmarkengroße Planungsskizze heißt ⟦Thumbnail⟧. + gaps: + - label: Wichtige Pose + hint: Englisch, drei Buchstaben. + accept: ["Schlüsselpose", "Keyframe", "Key Frame", "Schlüsselbild"] + - label: Weg zwischen Keys + hint: Englisch, wörtlich „Aufschlüsselung“. + - label: Füllbilder + hint: Englisch Inbetweens. + accept: ["Inbetweens", "Inbetween", "In-betweens", "Zwischenbild", "Zwischenphasen"] + - label: Keys zuerst + hint: Von Pose zu Pose. + - label: Durchzeichnen + hint: Geradeaus. + accept: ["Straight Ahead Action"] + - label: Planungsskizze + hint: Englisch, wörtlich Daumennagel. + accept: ["Thumbnails", "Thumbnailskizze", "Thumbnail-Skizze"] + explanation: | + Key, Breakdown und Zwischenbild beschreiben die Aufgabe einer Zeichnung: was passiert, auf welchem Weg, und den Rest. Pose-to-Pose und Straight Ahead sind die beiden Arbeitsweisen aus *The Illusion of Life*. Thumbnails sind der billigste Ort, um Fehler zu finden: Eine Strichfigur neu zu zeichnen kostet Sekunden. + resources: + - title: Wikipedia · Key frame + url: https://en.wikipedia.org/wiki/Key_frame + + - id: key-zu-viel + type: bug + title: Ein Blatt zu viel + prompt: | + Du blätterst deine Keys für „Kiste heben“ als Daumenkino. Ein Blatt bringt nichts Neues: Lässt du es weg, erzählt das Daumenkino dasselbe. Finde die Zeile und korrigiere ihre Art. + lang: text + code: | + Bild Art Pose + 1 Key steht vor Kiste + 2 Key Hüfte halb unten + 3 Key tief, greift + 4 Breakdown Kiste vor Bauch + 5 Key steht, trägt + lines: [3] + fix: + - line: 3 + answers: + - " 2 Zwischenbild Hüfte halb unten" + - " 2 Inbetween Hüfte halb unten" + hints: + - Welche Pose liegt nur auf halbem Weg zwischen ihren Nachbarn? + explanation: | + „Hüfte halb unten“ liegt auf halbem Weg zwischen Stehen und dem tiefsten Punkt und erzählt nichts, was die Nachbarn nicht schon zeigen. Das ist ein Zwischenbild. Bild 4 ist dagegen ein echter Breakdown: Dass die Kiste nah am Bauch hochkommt, legt den Weg fest. Ein überzähliger Key kostet doppelt, weil du ihn ins Reine zeichnest und weil er beim Timing gleich wichtig behandelt wird wie die echten. + resources: + - title: Wikipedia · Key frame + url: https://en.wikipedia.org/wiki/Key_frame + + - id: aufnahme-unbrauchbar + type: bug + title: Mal groß, mal klein + prompt: | + Du gehst deine Aufnahme Bild für Bild durch, aber die Posen lassen sich nicht vergleichen: Die Figur ist mal größer, mal kleiner, und der Boden springt im Bild. Welcher Satz in deinen Aufnahmenotizen erklärt das? + lang: prose + code: | + Die Kamera filmt von der Seite, auf Hüfthöhe. + Hinter mir ist eine helle, leere Wand. + Ich gehe mit dem Handy mit und zoome nach, wenn ich mich entferne. + Ich nehme die Bewegung dreimal auf. + Am Anfang warte ich zwei Sekunden, bevor ich mich bewege. + lines: [3] + explanation: | + Eine Kamera, die mitgeht und zoomt, verändert in jedem Bild Größe und Lage der Figur. Dann misst du nicht mehr die Bewegung, sondern die Kamera. Ein festes Handy und ein fester Ausschnitt machen jede Pose vergleichbar, auch Schrittlängen und Höhen. Muss die Bewegung weit gehen, stell das Handy weiter weg, statt mitzugehen. + resources: + - title: Apple · Record a video with your iPhone camera + url: https://support.apple.com/guide/iphone/record-a-video-iph61f49e4bb/ios#iph67bdd501c + + - id: weitsprung-lesen + type: explain + title: Ein Weitsprung von 1887 + prompt: | + Muybridge hat einen Weitsprung von der Seite fotografiert, acht Bilder (Tafel 160, Link unten). Die Liste beschreibt, was in jedem Bild zu sehen ist. Erkläre in wenigen Sätzen, welche Bilder du als Keys nehmen würdest, welche Extreme sind und welches Bild ein guter Breakdown wäre. + lang: text + code: | + Bild Was zu sehen ist + 1 unscharf, letzter Schritt + 2 Absprung: ein Fuß am Boden, + Knie vorn hoch, Arme gebeugt + 3 in der Luft, hinteres Bein + noch gestreckt + 4 Knie an der Brust, + ganz zusammengekauert + 5 Beine strecken sich vor, + Arme schwingen zurück + 6 Beine ganz gestreckt, + Fersen kurz vor der Matte + 7 Landung, Knie tief gebeugt + 8 unscharf, nach der Landung + points: + - Absprung (2), Zusammenkauern in der Luft (4) und Landung (7) erzählen den Sprung; das sind die Keys. + - Bild 4 ist ein Extrem (am stärksten zusammengezogen), Bild 6 das Extrem der Streckung. + - Bild 5 ist ein guter Breakdown, weil es festlegt, dass die Beine nach vorn gehen, während die Arme zurückschwingen. + - Die übrigen Bilder zeigen Wege zwischen den Posen und würden in einer Animation zu Zwischenbildern. + explanation: | + Wer nur Bild 2, 4 und 7 sieht, versteht den Weitsprung: abspringen, zusammenziehen, landen. Das macht sie zu Keys. Bild 4 und Bild 6 sind Extreme, weil die Beine dort am weitesten angezogen und am weitesten gestreckt sind; danach kehrt die Richtung um. Bild 5 zeigt, wie der Körper vom Zusammenkauern in die Streckung kommt, mit Armen und Beinen in entgegengesetzter Richtung, und ist damit der Breakdown zwischen 4 und 6. Die unscharfen Randbilder taugen als Referenz für den Weg, nicht als Pose. + resources: + - title: Wikimedia Commons · Muybridge, Plate 160, Running broad jump + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_running_and_jumping_(rbm-QP301M8-1887-160).jpg + + - id: eigene-referenz + type: practice + title: Eine Bewegung filmen und zerlegen + prompt: | + Film dich oder jemanden, der einverstanden ist, bei einer alltäglichen Bewegung: von einem Stuhl aufstehen, eine Kiste anheben oder einen Ball werfen. Stell das Handy fest hin, film von der Seite, gern in Zeitlupe. Geh die beste Aufnahme Bild für Bild durch und notier die Bildnummern der Keys, des tiefsten oder weitesten Punkts und eines Breakdowns. Rechne die Dauer von Key zu Key in ms aus. + lang: prose + starter: | + Bewegung: + Aufnahmerate (fps): + Keys (Bildnummern, Pose): + Extrem (Bildnummer): + Breakdown (Bildnummer, Pose): + Dauern von Key zu Key (ms): + Was mich überrascht hat: + checklist: + - Das Handy stand fest, Ausschnitt und Zoom blieben während der Aufnahme gleich. + - Die Aufnahmerate ist notiert, und die Dauern sind mit ihr berechnet, nicht mit der Wiedergaberate. + - Jeder Key hat eine Bildnummer und eine kurze Beschreibung der Pose. + - Du hast mindestens einen Breakdown benannt und notiert, welchen Weg er festlegt. + - Unter „Was mich überrascht hat“ steht eine Beobachtung, die du vorher nicht erwartet hättest. + hints: + - Such zuerst die Bilder, in denen die Bewegung die Richtung wechselt. Das sind deine Extreme. + explanation: | + Die Übung trainiert das Hinsehen. Die Überraschung ist der wichtigste Eintrag: Sie zeigt die Stelle, an der deine Erinnerung von der Bewegung abweicht. Dauern aus einer Aufnahme sind ein Startwert; in der Animation darfst du sie verkürzen oder übertreiben. Die Notizen nimmst du in der nächsten Übung als Grundlage für deine Thumbnails. + resources: + - title: VideoLAN Wiki · QtHotkeys + url: https://wiki.videolan.org/QtHotkeys/ + + - id: thumbnails-kiste + type: practice + title: Vier Strichfiguren, eine Kiste + prompt: | + Plan auf Papier, wie eine Gliederpuppe eine Kiste vom Boden hebt, oder nimm die Bewegung aus deiner Referenz. Schreib zuerst den Absichtssatz. Zeichne drei bis sechs Thumbnails, jedes mit Handlungslinie, und schreib darunter Bildnummer, K oder B und die Dauer. Übertrag nur die Keys auf Haftzettel, blättere sie als Daumenkino und zeig es jemandem ohne Vorrede. Frag nur: „Was passiert da?“ + + Hier notierst du den Plan als Text und die Antwort des Zuschauers. + lang: prose + starter: | + Absichtssatz: + Thumbnails (Bild, K/B, Pose, Dauer): + Daumenkino nur aus Keys, Zuschauer sagt (wörtlich): + Abweichung von meiner Absicht: + Was ich vor den Zwischenbildern ändere: + checklist: + - Der Absichtssatz stand fest, bevor du die erste Strichfigur gezeichnet hast. + - Es sind drei bis sechs Thumbnails, jedes mit eingezeichneter Handlungslinie. + - Jedes Thumbnail ist als K oder B markiert und hat eine Dauer in ms. + - Die Antwort des Zuschauers steht wörtlich da; ohne Zuschauer hast du nach einer Nacht Abstand selbst geprüft und das markiert. + - Du hast notiert, was du ändern willst, bevor du Zwischenbilder zeichnest. + hints: + - Die Hüfte geht beim Heben nach hinten. Prüf in jedem Thumbnail, wo sie im Verhältnis zu den Füßen steht. + explanation: | + Die Übung trennt Planen und Zeichnen. Thumbnails sind schnell gemacht und schnell verworfen, deshalb probierst du hier Posen aus, nicht im Editor. Das Daumenkino nur aus Keys zeigt, ob die Handlung ohne Zwischenbilder lesbar ist. Was der Zuschauer sagt, ist eine Beobachtung, kein Urteil: Weicht sie von deiner Absicht ab, ändere Keys oder Dauern, bevor du weiterzeichnest. + resources: + - title: Saint11 · Animation Planning + url: https://saint11.art/blog/pixel-art-tutorials/#Planning diff --git a/content/animation/modules/boegen-ueberlappung.yaml b/content/animation/modules/boegen-ueberlappung.yaml new file mode 100644 index 0000000..f44447a --- /dev/null +++ b/content/animation/modules/boegen-ueberlappung.yaml @@ -0,0 +1,485 @@ +id: boegen-ueberlappung +title: Bögen, Nachziehen und Überlappung +level: 2 +minutes: 120 +summary: Warum Hände, Köpfe und Füße auf Bögen laufen und wie du einen Bogen prüfst, warum lose Teile nach dem Körper zur Ruhe kommen und wie du dieses Nachziehen in wenigen Pixeln planst, ohne dass es flattert. +place: unterwegs +goals: + - Du erklärst, warum das Ende eines drehenden Gelenks auf einem Bogen läuft, und erkennst Zwischenbilder, die den Bogen abkürzen. + - Du prüfst einen Bewegungsbogen auf Papier oder mit Onion Skinning und findest in einer Koordinatenliste das Bild, das herausfällt. + - Du unterscheidest Follow-through, Overlapping Action, Drag und Secondary Action an Beispielen. + - Du planst eine Gliederkette mit einem Bild Versatz je Glied und ein Nachschwingen mit abnehmendem Ausschlag. + - Du setzt Überlappung in Pixelart sparsam ein und erkennst, wann ein Teil flattert statt nachzuschwingen. +resources: + - title: Wikipedia · Twelve basic principles, Arc + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Arc + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + - title: Saint11 · Character Idle + url: https://saint11.art/blog/pixel-art-tutorials/#characterIdle + - title: Mariel Cartwright · Making Fluid and Powerful Animations For Skullgirls (GDC 2014) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=278s + - title: Aseprite Docs · Onion Skinning + url: https://www.aseprite.org/docs/onion-skinning/ +lesson: | + Deine Gliederpuppe winkt. Zwei Keys, Arm unten und Arm oben, dazwischen drei Zwischenbilder, genau in die Mitte gesetzt. Beim Abspielen zuckt die Hand in der Mitte der Bewegung zur Schulter hin, als würde der Arm kurz schrumpfen. Danach bleibt die Puppe stehen, und der Schal um ihren Hals bleibt im selben Bild stehen wie der Körper. Alles hält gleichzeitig an, wie aus einem Stück Holz. + + Beide Fehler haben mit Gelenken zu tun. Gelenke drehen, deshalb laufen die Enden von Armen und Beinen auf Bögen. Und lose Teile hängen am Körper und bewegen sich erst, wenn er sie zieht. Diese Lektion zeigt, wie du Bögen planst und prüfst, wie du Teile gegeneinander versetzt und wie viel davon in wenige Pixel passt. + + ## Bögen: Gelenke drehen, deshalb laufen Enden im Kreis + + Thomas und Johnston zählen den Bogen (Arc) zu den zwölf Grundprinzipien. Der Wikipedia-Artikel dazu beginnt mit „Most natural action tends to follow an arched trajectory“. Ein Glied, das um ein Gelenk dreht, beschreibt einen Bogen, ein geworfener Gegenstand eine Parabel. Die Ausnahme sind Maschinen, die sich oft auf geraden Linien bewegen ([Twelve basic principles: Arc](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Arc)). + + Der Grund ist Geometrie. Nimm einen gestreckten Arm mit fester Länge. Dreht er in der Schulter, bleibt die Hand immer gleich weit von der Schulter entfernt und läuft deshalb auf einem Kreis um sie. Setzt du die Zwischenbilder auf die gerade Linie zwischen zwei Keys, kürzt du den Kreis ab. Die Hand kommt der Schulter näher, und der Arm wird in diesen Bildern kürzer. Das Modell rechnet es für einen Arm von 10 Pixeln, der in der Schulter um 90 Grad dreht, in fünf Bildern: + + ```python run + from math import cos, sin + from math import hypot + from math import radians + + r = 10 # Armlänge, px + for i in range(5): + w = radians(i * 22.5) + x = r * cos(w) + y = r * sin(w) + b = round(hypot(x, y)) + g = i * 2.5 + s = hypot(r - g, g) + s = round(s, 1) + print(i + 1, b, s) + ``` + + Die zweite Spalte ist der Abstand der Hand zur Schulter auf dem Bogen: immer 10. Die dritte Spalte gilt für die Gerade: In der Mitte ist der Arm nur noch 7,1 Pixel lang, fast ein Drittel kürzer. Als Raster, `O` ist die Schulter, `#` die Hand auf dem Bogen, `+` die Hand auf der Geraden: + + ```text + # . . . . . . . . . . + . . . . # . . . . . . + . . + . . . . . . . . + . . . . . . . # . . . + . . . . . . . . . . . + . . . . . + . . . . . + . . . . . . . . . # . + . . . . . . . . . . . + . . . . . . . . + . . + . . . . . . . . . . . + O . . . . . . . . . # + ``` + + > [!MERKE] + > Ein Glied mit fester Länge dreht um sein Gelenk. Sein Ende läuft deshalb auf einem Bogen. Zwischenbilder auf der Geraden zwischen zwei Keys machen das Glied kürzer. + + Ein Bogen ist nicht immer ein Kreis um ein Gelenk. Der Kopf beim Gehen, der Hammerkopf beim Schlag, ein geworfener Ball: Alle laufen auf Kurven, weil mehrere Gelenke oder die Schwerkraft zusammenwirken. Je schneller eine Bewegung ist, desto flacher wird der Bogen nach vorn und desto weiter in Kurven, schreibt der Wikipedia-Artikel. Den Weg dazwischen bestimmt der Breakdown, wie in [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen) beschrieben. + + ## Bögen prüfen: einen Punkt durch alle Bilder verfolgen + + Klassische Animatoren zeichnen den Bogen leicht auf das Papier vor und radieren ihn später weg. Eine Bewegung, die ohne Grund aus ihrem Bogen fällt, wirkt sprunghaft statt fließend; als Beispiel nennt der Artikel einen zeigenden Finger, dessen Spitze in allen Zwischenbildern einem Bogen folgen soll ([Arc](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Arc)). + + Prüfen kannst du das unterwegs mit Haftzetteln. Leg sie übereinander gegen ein Fenster, wähle einen Punkt, etwa die Nasenspitze oder die Hand, und markiere ihn in jedem Bild auf einem obersten, leeren Zettel. Verbinde die Punkte. Eine glatte Kurve ist gut. Ein Knick, eine Zacke oder ein Punkt, der nach innen springt, zeigt das Bild, das du dir ansehen musst. Dieselbe Punktreihe zeigt dir auch das Spacing: Wo die Punkte eng liegen, ist die Bewegung langsam ([Timing und Spacing](/animation/timing-spacing)). + + Am Rechner übernimmt das **Onion Skinning**: Der Editor blendet die Bilder davor und danach durchscheinend ein. In Aseprite schaltest du es mit F3 um ([Onion Skinning](https://www.aseprite.org/docs/onion-skinning/)), in LibreSprite ebenfalls mit F3 ([Know your workspace](https://github.com/LibreSprite/libresprite.github.io/wiki/Know-your-workspace#animation)). Pixelorama hat es in der Zeitleiste ([Timeline: Onion Skinning](https://www.pixelorama.org/user_manual/user_interface/timeline#onion-skinning)), Krita im Onion-Skin-Docker ([Onion Skin Docker](https://docs.krita.org/en/reference_manual/dockers/onion_skin.html#onion-skin-docker)). Die Bedienung steht in [Einzelbilder im Editor](/animation/editor-zeitleiste). + + > [!TIP] Der Bildschirm als Leuchttisch + > Hast du die Bewegung als Video, halte es an, leg ein Stück Backpapier auf den Bildschirm und setz für jedes Bild einen Punkt an die Hand. Nach zehn Bildern siehst du den Bogen, den deine Hand wirklich gemacht hat. + + ## Follow-through, Overlapping Action und Drag + + Der Wikipedia-Artikel fasst unter *Follow through and overlapping action* drei verwandte Techniken zusammen, die den Eindruck erzeugen, dass eine Figur der Trägheit folgt ([Follow through and overlapping action](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action)): + + - **Follow-through:** Lose Teile bewegen sich weiter, nachdem die Figur angehalten hat, und werden dann zurückgezogen oder schwingen aus. + - **Overlapping Action:** Teile des Körpers bewegen sich mit verschiedenem Timing, etwa der Arm anders als der Kopf. + - **Drag:** Die Figur setzt sich in Bewegung, und Teile brauchen ein paar Bilder, um aufzuholen. + + Der Rumpf ist dabei der Kern. Arme, Beine, Kopf und Haare folgen seiner Bewegung, Kleidung und Gegenstände folgen den Gliedern. Daraus entsteht eine Kette: Hüfte, Schulter, Ellbogen, Hand, und am Ende ein Band oder Schal. Jedes Glied folgt dem vorigen mit einem kleinen Versatz. Richard Williams nennt das „successive breaking of joints“, das Abknicken der Gelenke nacheinander, und nutzt es, um Figuren biegsam wirken zu lassen ([AWN](https://www.awn.com/news/animators-survival-kit-now-available-mini-guides)). + + Eine Pendelkette aus drei Gliedern zeigt das in Zahlen. Glied 1 hängt oben, Glied 3 ist die Spitze. Die Werte sind Winkel in Grad. Jedes Glied übernimmt den Winkel des Glieds darüber aus dem Bild davor: + + ```text + Bild G1 G2 G3 + 1 0 0 0 + 2 20 0 0 + 3 40 20 0 + 4 45 40 20 + 5 40 45 40 + 6 40 40 45 + 7 40 40 40 + ``` + + Glied 1 schwingt über sein Ziel hinaus (45) und zurück (40). Glied 2 macht dasselbe ein Bild später, die Spitze zwei Bilder später. Das ganze Pendel steht erst in Bild 7 still. Im Spiel ist ein Versatz von einem Bild je Glied ein guter Startwert, weil wenige Bilder wenig Spielraum lassen. + + Kommt etwas zur Ruhe, schwingt es nicht ewig nach. Der Artikel spricht von Schwingungen mit verschiedener Dämpfung. Für die Zeichnung heißt das: Jeder Ausschlag ist kleiner als der vorige, bis er unter ein Pixel fällt. Ein Schalende, das zuerst 8 Pixel nach rechts schwingt und danach jeweils halb so weit zur anderen Seite: + + ```text + Bild links | rechts + 1 |######## 8 + 2 ####| 4 + 3 |## 2 + 4 #| 1 + 5 | 0 + ``` + + Nachbewegung gibt es auch am Ende einer ganzen Aktion: Der Körper schießt über die Zielpose hinaus und pendelt zurück. Das gehört zu [Antizipation, Aktion, Erholung](/animation/antizipation-erholung). Hier geht es um Teile, die gegeneinander versetzt sind. + + ## Secondary Action: eine zweite Handlung + + **Secondary Action** ist eine zusätzliche Handlung, die die Hauptbewegung stützt. Eine Figur geht und schwingt dabei die Arme, hat die Hände in den Taschen, spricht oder pfeift. Wichtig ist, dass sie die Hauptbewegung betont und nicht von ihr ablenkt; sonst lässt man sie weg ([Secondary action](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Secondary_action)). + + Der Unterschied zur Überlappung: Ein Schal, der nachschwingt, tut nichts von selbst, die Bewegung des Körpers treibt ihn. Eine Gliederpuppe, die im Gehen auf ihre Uhr schaut, tut etwas Eigenes. Die erste Frage lautet also: Wird das Teil bewegt, oder handelt die Figur? + + > [!NOTE] Ein Wort, zwei Bedeutungen + > In Tutorials für Spiele heißt nachziehendes Haar oft „secondary animation“. Pedro Medeiros (Saint11) schreibt etwa, er füge bei sechs Bildern „secondary animations, like the hair lagging behind the head“ hinzu ([Character Idle](https://saint11.art/blog/pixel-art-tutorials/#characterIdle)). Bei Thomas und Johnston wäre das Overlapping Action. Lass dich vom Wort nicht verwirren, frag nach der Ursache der Bewegung. + + ## Überlappung in wenigen Pixeln + + In einem Sprite mit vier oder sechs Bildern ist ein Bild Versatz der kleinste mögliche Schritt, und er reicht oft. Medeiros nennt in seinem Tutorial zu Ruheposen zwei Tricks. Bei drei Bildern macht das mittlere den Übergang des Kopfes weicher, „by delaying the face movement“. Und: „move the contents of the face/body/etc after the silhouette has moved“, also erst den Umriss bewegen, das Innere ein Bild später ([Character Idle](https://saint11.art/blog/pixel-art-tutorials/#characterIdle)). + + Ein hängendes Seil, oben angefasst und in zwei Bildern um je einen Pixel nach rechts gezogen. Jede Reihe folgt der Reihe darüber ein Bild später. Weil sich benachbarte Reihen nie um mehr als einen Pixel unterscheiden, bleibt das Seil eine zusammenhängende Linie: + + ```text + Bild 1 Bild 2 Bild 3 Bild 4 + ...#... ....#.. .....#. .....#. + ...#... ...#... ....#.. .....#. + ...#... ...#... ...#... ....#.. + ...#... ...#... ...#... ...#... + ``` + + Für Stoff im Wind beschreibt Medeiros eine Welle: „Fabric in the wind moves in a sine wave-like pattern“, und er stellt sich die Bewegung als Versatz in Windrichtung vor ([Fabric/Flags](https://saint11.art/blog/pixel-art-tutorials/#Fabric)). Das ist dieselbe Kette, nur dass die Welle immer weiterläuft. + + > [!PRAXIS] Skullgirls: Nachziehen statt Ausholen + > Mariel Cartwright beschreibt in ihrem GDC-Vortrag, dass Bewegungen der Spielfigur fast sofort reagieren müssen ([ab 3:13](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=193s)). Für Antizipation bleibt dann kaum Zeit. Die Information, die das Ausholen geliefert hätte, tragen bei *Skullgirls* deshalb Haare und Kleidung, die nachziehen ([Making Fluid and Powerful Animations For Skullgirls](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=278s), ab 4:38). Das Nachziehen kostet keine Reaktionszeit, weil es nach der Bewegung kommt. + + Wenige Pixel haben eine Kehrseite. Springt ein Haarbüschel jedes Bild um ein Pixel hin und her, sieht das Auge kein Schwingen, sondern ein Flackern. Medeiros' Regel für Animationen: „Keep track of clusters“ und „I avoid breaking clusters“ ([Pixel Art Fundamentals](https://saint11.art/blog/pixel-art-tutorials/#Fundamentals)). Ein Teil, das nachschwingt, bleibt eine zusammenhängende Pixelgruppe und bewegt sich als Ganzes. Und es braucht einen abnehmenden Ausschlag, damit es zur Ruhe kommt. Tyriq Plummer rät, Details wegzulassen, die eigene Nachbewegung bräuchten ([Pixel Art and Animation in the Hi-Bit Age](https://www.youtube.com/watch?v=ZR_JBgNEeVM&t=1393s), ab 23:13). Jedes lose Teil ist Arbeit in jedem Bild. + + > [!INTERVIEW] + > „Was ist der Unterschied zwischen Overlapping Action und Secondary Action?“ Gute Antwort: Overlapping Action heißt, dass Teile einer Figur mit versetztem Timing laufen, weil die Hauptbewegung sie mitzieht: Haare, Kleidung, die Hand nach dem Ellbogen. Secondary Action ist eine eigene, zusätzliche Handlung, etwa im Gehen auf die Uhr schauen. Sie soll die Hauptbewegung stützen, nicht von ihr ablenken. In Pixelart reicht für Überlappung oft ein Bild Versatz; ich achte darauf, dass der Ausschlag abnimmt, damit nichts flackert. + + ## Häufige Fehler + + - **Zwischenbilder auf der Geraden.** Die Hand zuckt zur Schulter, der Arm wird kurz kürzer. Verfolge einen Punkt durch alle Bilder und leg die Zwischenbilder auf den Bogen. + - **Alles hält gleichzeitig an.** Körper, Kopf und Schal stoppen im selben Bild. Lass jedes lose Teil ein Bild später ankommen als das, an dem es hängt. + - **Die Spitze führt.** Bewegt sich das Ende einer Kette vor ihrem Ansatz, sieht es aus, als zöge jemand daran. Die Bewegung läuft vom Rumpf nach außen. + - **Nachschwingen ohne Ende.** Gleich große Ausschläge kommen nie zur Ruhe. Jeder Ausschlag ist kleiner als der vorige. + - **Flattern statt Schwingen.** Ein Pixel hin, ein Pixel her, jedes Bild. Bewege Pixelgruppen als Ganzes und gib dem Ausschlag eine Richtung, die abnimmt. + - **Secondary Action, die ablenkt.** Eine zweite Handlung, die mehr Aufmerksamkeit bekommt als die erste, gehört an den Anfang oder ans Ende oder weg. + + ## Zusammenfassung + + - Gelenke drehen, deshalb laufen Hände, Füße und Köpfe auf Bögen. Zwischenbilder auf der Geraden machen Glieder kürzer. + - Bögen prüfst du, indem du einen Punkt durch alle Bilder verfolgst: auf Haftzetteln, auf Backpapier über einem Video oder mit Onion Skinning. + - Follow-through: Lose Teile bewegen sich weiter, wenn die Figur hält. Overlapping Action: Teile haben verschiedenes Timing. Drag: Teile holen beim Losgehen auf. + - Eine Kette folgt vom Rumpf nach außen, je Glied ein Bild Versatz, mit abnehmendem Nachschwingen. + - Secondary Action ist eine eigene Handlung, die die Hauptbewegung stützt; Overlapping Action wird von ihr getrieben. + - In Pixelart reicht oft ein Bild Versatz. Pixelgruppen bleiben zusammen, sonst flackert das Teil. +exercises: + - id: was-laeuft-auf-boegen + type: choice + title: Bogen oder Gerade? + prompt: | + Welche dieser Bewegungen laufen auf einem Bogen? + options: + - text: Die Hand einer Gliederpuppe, die winkt. + correct: true + why: Der Unterarm dreht im Ellbogen, der Oberarm in der Schulter. Die Hand läuft deshalb auf einem Bogen. + - text: Die Fußspitze beim Schritt nach vorn. + correct: true + why: Das Bein schwingt in der Hüfte und im Knie. Die Fußspitze beschreibt dabei eine Kurve, keine gerade Linie. + - text: Ein Ball, der schräg nach oben geworfen wird. + correct: true + why: Ein geworfener Gegenstand fliegt auf einer Parabel. Auch das ist ein Bogen, nur ohne Gelenk. + - text: Der Kolben in einem Zylinder. + correct: false + why: Mechanische Bewegungen laufen oft auf Geraden. Thomas und Johnston nennen sie ausdrücklich als Ausnahme. + - text: Ein Ball, der aus dem Stand senkrecht losgelassen wird. + correct: false + why: Ohne seitlichen Anstoß fällt er auf einer senkrechten Linie. Sein Spacing ändert sich, die Bahn bleibt gerade. + explanation: | + Alles, was um ein Gelenk dreht, läuft auf einem Bogen, und Würfe folgen einer Parabel. Gerade Bahnen gibt es bei Maschinen und bei einem Fall ohne seitliche Bewegung. Wer eine Bahn plant, fragt deshalb zuerst: Was dreht hier, und um welchen Punkt? + resources: + - title: Wikipedia · Twelve basic principles, Arc + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Arc + + - id: secondary-oder-overlap + type: choice + title: Bewegt oder gehandelt? + prompt: | + Eine Gliederpuppe geht von links nach rechts. Welche dieser Zusätze sind Secondary Action und keine Overlapping Action? + options: + - text: Sie schaut im Gehen auf ihre Armbanduhr. + correct: true + why: Das ist eine eigene Handlung der Figur, die neben dem Gehen passiert. + - text: Sie pfeift beim Gehen. + correct: true + why: Pfeifen ist eine zusätzliche Handlung. Der Wikipedia-Artikel nennt genau dieses Beispiel. + - text: Ihr Schal schwingt nach, als sie stehen bleibt. + correct: false + why: Der Schal handelt nicht, der Körper zieht ihn. Das ist Follow-through, ein Teil der Overlapping Action. + - text: Ihre Hand kommt ein Bild nach dem Ellbogen zur Ruhe. + correct: false + why: Das ist Versatz entlang einer Gelenkkette, also Overlapping Action. + explanation: | + Die Frage ist immer, was die Bewegung verursacht. Wird ein Teil von der Hauptbewegung mitgezogen, ist es Overlapping Action oder Follow-through. Tut die Figur etwas Eigenes, ist es Secondary Action. In Spiel-Tutorials heißt nachziehendes Haar trotzdem oft „secondary animation“; die Ursache entscheidet, nicht das Wort. + resources: + - title: Wikipedia · Twelve basic principles, Secondary action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Secondary_action + + - id: kette-kommt-zur-ruhe + type: order + title: Wer hält zuerst an? + prompt: | + Eine Gliederpuppe schwingt den Arm nach vorn und hält ein Band in der Hand. Bring die Teile in die Reihenfolge, in der sie zur Ruhe kommen, das erste zuerst. + lang: prose + lines: | + Der Oberkörper bleibt stehen. + Der Oberarm kommt in der Schulter zur Ruhe. + Der Unterarm kommt im Ellbogen zur Ruhe. + Die Hand kommt im Handgelenk zur Ruhe. + Das Band schwingt aus und hängt still. + explanation: | + Die Bewegung läuft vom Rumpf nach außen. Jedes Glied hängt am vorigen und kann erst stillstehen, wenn das vorige steht. Das Band am Ende hat keine eigene Kraft und schwingt am längsten. Dreht man die Reihenfolge um, geht die Bewegung von der Hand aus: Dann zieht etwas an der Hand, nicht der Körper am Arm. + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + + - id: spitze-kommt-an + type: output + title: Wann steht die Spitze? + prompt: | + Eine Pendelkette hat drei Glieder. Jedes Glied übernimmt den Winkel des Glieds darüber aus dem Bild davor. In Bild 1 stehen alle auf 0 Grad. In welchem Bild erreicht Glied 3, die Spitze, ihre Endstellung von 40 Grad? Antworte mit der Bildnummer. + lang: text + code: | + Bild 1 2 3 4 5 6 + Glied1 0 20 40 40 40 40 + expected: | + 5 + accept: + - Bild 5 + - "5." + hints: + - Schreib zuerst die Zeile für Glied 2, dann die für Glied 3. + explanation: | + Glied 2 läuft Glied 1 ein Bild hinterher: 0, 0, 20, 40, 40, 40. Glied 3 läuft Glied 2 ein Bild hinterher: 0, 0, 0, 20, 40, 40. Die Spitze erreicht 40 Grad also in Bild 5, zwei Bilder nach dem Ansatz. Bei drei Gliedern und einem Bild Versatz braucht die Kette zwei Bilder länger als ihr oberstes Glied. + resources: + - title: Saint11 · Fabric/Flags + url: https://saint11.art/blog/pixel-art-tutorials/#Fabric + + - id: ausschlag-halbiert + type: output + title: Ausschwingen in ganzen Pixeln + prompt: | + Das Modell lässt ein Schalende nachschwingen. Jeder Ausschlag geht halb so weit zur anderen Seite, Bruchteile fallen weg. Was gibt das Programm aus? + lang: python + code: | + a = 8 # Ausschlag in px + bild = 1 + while a != 0: + print(bild, a) + a = int(-a / 2) + bild += 1 + print(bild, a) + expected: | + 1 8 + 2 -4 + 3 2 + 4 -1 + 5 0 + explanation: | + Das Minuszeichen wechselt die Seite, die Division halbiert den Ausschlag: 8, −4, 2, −1. Danach ergibt −(−1) / 2 = 0,5, und `int` schneidet auf 0 ab. In ganzen Pixeln ist das Schalende nach vier Ausschlägen in Ruhe. Mit einem Faktor nahe 1 statt 0,5 würde es viel länger schwingen; der Faktor ist deine Entscheidung, wie weich das Material ist. + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + + - id: kette-ausfuellen + type: gap + title: Die Welle läuft weiter + prompt: | + Glied 1 schwingt über sein Ziel hinaus und zurück. Jedes Glied übernimmt den Winkel des Glieds darüber aus dem Bild davor. Ergänze die fehlenden Winkel. + lang: text + code: | + Bild G1 G2 G3 + 1 0 0 0 + 2 20 0 0 + 3 40 20 0 + 4 45 40 20 + 5 40 ⟦45⟧ ⟦40⟧ + 6 40 40 ⟦45⟧ + 7 40 40 ⟦40⟧ + gaps: + - label: G2 in Bild 5 + hint: G1 in Bild 4. + - label: G3 in Bild 5 + hint: G2 in Bild 4. + - label: G3 in Bild 6 + hint: G2 in Bild 5. + - label: G3 in Bild 7 + hint: G2 in Bild 6. + explanation: | + Das Überschwingen von Glied 1 auf 45 Grad wandert als Welle die Kette hinunter: Glied 2 schwingt in Bild 5 über, die Spitze in Bild 6. Erst in Bild 7 steht alles auf 40. So entsteht der Eindruck, dass die Kette Masse hat und am oberen Glied hängt. Saint11 beschreibt Stoff im Wind mit demselben Bild: eine Welle, die in Windrichtung versetzt weiterläuft. + resources: + - title: Saint11 · Fabric/Flags + url: https://saint11.art/blog/pixel-art-tutorials/#Fabric + + - id: begriffe-ueberlappung + type: gap + title: Fünf Wörter für Bewegung in Teilen + prompt: | + Ergänze die fehlenden Begriffe. + lang: prose + code: | + Das Ende eines Glieds, das um ein Gelenk dreht, läuft auf einem ⟦Bogen⟧. + Lose Teile, die sich weiterbewegen, nachdem die Figur angehalten hat, zeigen ⟦Follow-through⟧. + Teile, die sich mit versetztem Timing bewegen, zeigen ⟦Overlapping Action⟧. + Wenn Teile beim Losgehen ein paar Bilder brauchen, um aufzuholen, heißt das ⟦Drag⟧. + Eine eigene, zusätzliche Handlung neben der Hauptbewegung heißt ⟦Secondary Action⟧. + gaps: + - label: Bahn + hint: Englisch Arc. + accept: ["Kreisbogen", "Arc"] + - label: Weiterlaufen + hint: Englisch, „durchziehen“. + accept: ["Follow through", "Nachschwingen"] + - label: Versetztes Timing + hint: Englisch, „überlappende Handlung“. + accept: ["Overlap", "Überlappung"] + - label: Aufholen + hint: Englisch, „Nachschleifen“. + accept: ["Nachziehen"] + - label: Zusatzhandlung + hint: Englisch, „zweite Handlung“. + accept: ["Sekundäre Handlung", "Secondary"] + explanation: | + Follow-through, Overlapping Action und Drag fasst *The Illusion of Life* als ein Prinzip zusammen: Teile einer Figur folgen der Trägheit. Follow-through betrifft das Anhalten, Drag das Losgehen, Overlapping Action das versetzte Timing dazwischen. Secondary Action ist etwas anderes, eine Handlung der Figur selbst. + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + + - id: hand-zuckt + type: bug + title: Der Arm wird kurz kürzer + prompt: | + Eine Hand dreht um die Schulter bei (0, 0), der Arm ist 10 Pixel lang. Beim Abspielen zuckt die Hand in der Mitte der Bewegung zur Schulter hin. Finde das Bild und korrigiere es so, dass es auf dem Bogen liegt. + lang: text + code: | + Bild x y + 1 10 0 + 2 9 4 + 3 5 5 + 4 4 9 + 5 0 10 + lines: [4] + fix: + - line: 4 + answers: + - " 3 7 7" + hints: + - Rechne für jedes Bild aus, wie weit die Hand von der Schulter entfernt ist. + - Bild 3 liegt genau in der Mitte zwischen 0 und 90 Grad, also bei 45 Grad. + explanation: | + Bild 3 liegt auf der Geraden zwischen Bild 1 und Bild 5. Sein Abstand zur Schulter ist nur √50 ≈ 7,1 Pixel, alle anderen liegen bei etwa 10. Auf dem Bogen bei 45 Grad liegt die Hand bei 10 · cos 45° ≈ 7,1 in x und y, gerundet (7, 7). Solche Zwischenbilder entstehen, wenn man in die Mitte zwischen zwei Keys zeichnet statt auf den Bogen. + resources: + - title: Wikipedia · Twelve basic principles, Arc + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Arc + + - id: spitze-fuehrt + type: bug + title: Wer zieht da? + prompt: | + Eine Pendelkette soll am oberen Glied mitgezogen werden, jedes Glied ein Bild später als das darüber. Beim Abspielen schwingen in einem Bild das mittlere Glied und die Spitze wie ein steifes Stück mit, statt nachzuhängen. Finde die Zeile. + lang: text + code: | + Bild G1 G2 G3 + 1 0 0 0 + 2 20 0 0 + 3 40 20 20 + 4 40 40 20 + 5 40 40 40 + lines: [4] + fix: + - line: 4 + answers: + - " 3 40 20 0" + explanation: | + In Bild 3 springt Glied 3 auf 20 Grad, im selben Bild wie Glied 2. Nach der Regel müsste es noch auf 0 stehen und erst in Bild 4 auf 20 gehen. Bewegt sich die Spitze so früh wie ihr Ansatz, wird sie nicht mehr mitgezogen; die Bewegung kommt dann nicht mehr vom oberen Glied. Die Richtung der Bewegung in einer Kette verrät, wo die Kraft sitzt. + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + + - id: hammer-bogen + type: explain + title: Der Weg eines Hammerkopfs + prompt: | + Muybridge hat einen Schmied fotografiert, der mit beiden Händen auf einen Amboss schlägt (Tafel 378, Link unten). Die Liste beschreibt die seitliche Reihe. Erkläre in wenigen Sätzen, welchen Weg der Hammerkopf nimmt, warum, und was passieren würde, wenn du zwischen Bild 5 und Bild 9 Zwischenbilder auf der Geraden zeichnest. + lang: text + code: | + Bild Hammerkopf Arme + 1 vorn, am Amboss gestreckt + 2 vor der Brust gebeugt + 3 neben dem Kopf gebeugt + 4 hinter dem Kopf gebeugt + 5 senkrecht oben gestreckt + 6 oben, etwas vorn gestreckt + 7 vorn über dem Kopf gestreckt + 8 vorn, Kopfhöhe gestreckt + 9 am Amboss gestreckt + 10 vor der Brust gebeugt + points: + - Der Hammerkopf läuft auf einer gekrümmten Bahn, weil Schultern und Ellbogen drehen; das Ende der Gelenkkette beschreibt Bögen. + - Beim Ausholen (2 bis 4) sind die Arme gebeugt, der Hammer bleibt nah am Kopf, der Bogen ist eng. + - Beim Schlag (5 bis 9) sind die Arme gestreckt, der Hammer läuft auf einem weiten Bogen nach vorn unten. + - Zwischenbilder auf der Geraden von 5 nach 9 würden den Hammer zum Körper hin ziehen; die Arme wirkten kürzer, der Schlag verlöre seinen Schwung. + explanation: | + Der Hammerkopf hängt am Ende einer Kette aus Schultern, Ellbogen und Handgelenken. Beim Ausholen beugt der Schmied die Arme, der Hammer bleibt nah am Kopf und beschreibt einen engen Bogen. Beim Schlag streckt er die Arme, und der Hammer läuft auf einem weiten Bogen zum Amboss. Eine Gerade von Bild 5 nach Bild 9 schneidet diesen Bogen ab: Der Hammer käme dem Körper näher, die gestreckten Arme müssten kürzer werden. Zeichne deshalb den Bogen vor und setz die Zwischenbilder darauf. + resources: + - title: Wikimedia Commons · Muybridge, Plate 378, Blacksmith hammering + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_hammering_an_anvil_(rbm-QP301M8-1887-378).jpg + + - id: handpfad-nachzeichnen + type: practice + title: Der Weg deiner Hand + prompt: | + Film dich von der Seite, wie du einen Ball wirfst oder einen Arm hebst und senkst. Halte das Video an, leg Backpapier auf den Bildschirm oder nimm Screenshots in eine Zeichen-App, und setz für jedes Bild einen Punkt an die Hand. Verbinde die Punkte. Notier, was du siehst. + lang: prose + starter: | + Bewegung, Aufnahmerate: + Zahl der markierten Bilder: + Form des Pfads: + Wo liegen die Punkte eng, wo weit: + Knicke oder Sprünge (Bildnummer): + Was ich anders erwartet hätte: + checklist: + - Du hast in jedem aufeinanderfolgenden Bild denselben Punkt an der Hand markiert, ohne Bilder zu überspringen. + - Du hast die Form des Pfads beschrieben (gerade, Bogen, Schleife, S-Kurve). + - Du hast notiert, wo die Punkte eng und wo sie weit liegen. + - Knicke oder Sprünge sind mit Bildnummer notiert, oder du hast ausdrücklich notiert, dass es keine gibt. + hints: + - Wähle einen Punkt, den du in jedem Bild sicher wiederfindest, etwa den Knöchel des Zeigefingers. + explanation: | + Der nachgezeichnete Pfad zeigt Bogen und Spacing zugleich: die Form der Kurve und, über die Abstände der Punkte, wo die Hand schnell und wo sie langsam ist. Meist ist der echte Pfad runder und unregelmäßiger, als man ihn zeichnen würde. Den Pfad legst du später unter deine Keys, um die Zwischenbilder darauf zu setzen. + resources: + - title: Wikipedia · Twelve basic principles, Arc + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Arc + + - id: schal-daumenkino + type: practice + title: Ein Schal, der nachkommt + prompt: | + Zeichne eine Gliederpuppe mit einem Schal aus drei Gliedern auf Haftzettel: Sie geht drei Bilder lang nach rechts und bleibt stehen. Schreib zuerst den Absichtssatz. Plane den Schal mit einem Bild Versatz je Glied und einem Nachschwingen mit abnehmendem Ausschlag. Blättere das Daumenkino und zeig es jemandem ohne Vorrede. Frag nur: „Was passiert da?“ + lang: prose + starter: | + Absichtssatz: + Bildliste (Bild, Puppe, Schal G1, G2, G3): + Ausschläge beim Nachschwingen: + Zuschauer sagt (wörtlich): + Abweichung von meiner Absicht: + Was ich ändere: + checklist: + - Der Absichtssatz stand fest, bevor du gezeichnet hast. + - In der Bildliste kommt jedes Schalglied ein Bild nach dem Glied darüber zur Ruhe. + - Jeder Ausschlag beim Nachschwingen ist kleiner als der vorige, und der letzte ist 0. + - Die Antwort des Zuschauers steht wörtlich da; ohne Zuschauer hast du nach einer Nacht Abstand selbst geprüft und das markiert. + - Du hast notiert, was du ändern würdest, und an welcher Zeile der Bildliste. + hints: + - Plane zuerst nur die Puppe, dann G1, dann G2 und G3, jedes aus der Zeile davor abgeleitet. + explanation: | + Die Übung verbindet Drag beim Losgehen und Follow-through beim Anhalten an einem einzigen Objekt. Die Bildliste macht den Versatz prüfbar, bevor du zeichnest. Was der Zuschauer sagt, zeigt, ob er den Schal als mitgezogen liest; ob die Bewegung „weich“ oder „schwer“ wirkt, ist seine Beobachtung, keine Garantie deines Plans. + resources: + - title: Saint11 · Character Idle + url: https://saint11.art/blog/pixel-art-tutorials/#characterIdle diff --git a/content/animation/modules/editor-zeitleiste.yaml b/content/animation/modules/editor-zeitleiste.yaml new file mode 100644 index 0000000..5d61c79 --- /dev/null +++ b/content/animation/modules/editor-zeitleiste.yaml @@ -0,0 +1,529 @@ +id: editor-zeitleiste +title: "Einzelbilder im Editor: Zeitleiste, Onion Skinning, Vorschau, Export" +level: 1 +minutes: 130 +summary: Wie du eine geplante Bewegung in Aseprite, Pixelorama, LibreSprite oder Krita Bild für Bild anlegst, Dauern ohne neue Zeichnung änderst, mit Onion Skinning Spacing und Bögen siehst, Animationen mit Tags trennst und so exportierst, dass dein Timing beim nächsten Werkzeug ankommt. +place: pc +goals: + - Du legst Bilder, Ebenen und verknüpfte Cels in der Zeitleiste deines Editors an und benennst die Entsprechungen in den anderen drei Programmen. + - Du überträgst eine Bildliste mit Millisekunden in Bilddauern, Pixelorama-Faktoren oder Krita-Haltebilder, ohne das Timing zu verändern. + - Du stellst Onion Skinning so ein, dass du Spacing, Bögen und Konstanz prüfen kannst, und weißt, wann du es ausschaltest. + - Du trennst mehrere Animationen einer Figur mit Tags und spielst jede in Originalgröße in Schleife ab. + - Du exportierst ein Sprite-Sheet in Originalgröße mit Bilddauern oder einer Bildliste und ein vergrößertes GIF zum Zeigen. + - Du unterscheidest, welche Arbeit hier eine KI übernehmen darf und welche nicht. +resources: + - title: Aseprite Docs · Animation + url: https://www.aseprite.org/docs/animation/ + - title: Pixelorama · The Timeline + url: https://www.pixelorama.org/user_manual/user_interface/timeline + - title: Krita Manual · Animation Timeline Docker + url: https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html + - title: LibreSprite Wiki · Know your workspace, Animation + url: https://github.com/LibreSprite/libresprite.github.io/wiki/Know-your-workspace#animation + - title: Aseprite Docs · Command Line Interface + url: https://www.aseprite.org/docs/cli/ +lesson: | + Auf Papier hast du einen Ball geplant: Keys, einen Spacing-Chart und eine Bildliste mit Dauern ([Timing und Spacing](/animation/timing-spacing)). Jetzt soll er im Editor laufen, und dort heißt alles ein wenig anders. Aseprite spricht von Frames und Cels, Krita von Keyframes und Holds, Pixelorama rechnet mit Bildern pro Sekunde, wo Aseprite Millisekunden speichert. Wer die Begriffe nicht übersetzen kann, verliert sein Timing auf dem Weg vom Papier ins Spiel. + + Dieses Modul zeigt die Werkzeuge, die jede Animation im Editor braucht: Zeitleiste, Bilddauer, Tags, Vorschau, Onion Skinning und Export. Jeder Schritt steht für Aseprite 1.3.18.6 und für mindestens ein freies Programm: Pixelorama 1.2.3, LibreSprite 1.3 oder Krita. Aseprite brauchst du nicht; alles hier geht mit den freien Programmen. Installation, Leinwand, Palette und den Unterschied zwischen Speichern und Exportieren findest du in [Einen Pixel-Editor wählen und einrichten](/pixelart/editor-einrichten), den Import in Godot in [Eigene Sprites importieren](/godot/sprites-importieren). + + > [!NOTE] Krita 5.3 oder 6.0 + > `pacman -S krita` installiert unter CachyOS 6.0.4.1, Flathub und AppImage liefern 5.3.4.1. Laut Krita ist 6.0 derselbe Code wie 5.3, nur mit Qt 6 ([Release History](https://krita.org/en/release-history/)); das verlinkte Handbuch beschreibt 5.3. Für Pixel ist Krita nicht gebaut, seine Stärke hier ist die Zeitleiste mit Haltebildern. + + ## Die Zeitleiste: Bilder, Ebenen und Cels + + Alle vier Programme ordnen eine Animation als Raster. Spalten sind Bilder in zeitlicher Folge, Zeilen sind Ebenen. Ein einzelnes Feld heißt **Cel**, nach den Zelluloidfolien des Trickfilms. Aseprite definiert es so: „A cel (from celluloid) is one image in a specific frame and layer“ ([Cel](https://www.aseprite.org/docs/cel/)). Pixelorama beschreibt dasselbe Raster: Jede Kreuzung aus Bild und Ebene ist ein Cel ([The Timeline](https://www.pixelorama.org/user_manual/user_interface/timeline)). Ebenen trennen, was du getrennt ändern willst, etwa Figur, Schatten am Boden und eine Hilfslinie für den Boden. + + | Schritt | Aseprite 1.3.18.6 | LibreSprite 1.3 | Pixelorama 1.2.3 | Krita 5.3 / 6.0 | + | --- | --- | --- | --- | --- | + | Zeitleiste zeigen | Tab | Tab | immer unten | *Window › Workspace › Animation* | + | Bild als Kopie anfügen | Alt+N | Alt+N | Rechtsklick auf die Bildnummer, Bild klonen | *Create Duplicate Frame* | + | leeres Bild anfügen | Alt+B | Alt+B | Knopf oben in der Zeitleiste | *Create Blank Frame* | + | Bild vor, zurück | `.` `,` oder Pfeiltasten | Pfeiltasten | Klick auf die Bildnummer | im Zeitlineal ziehen | + | abspielen | Enter | Enter | F5, rückwärts F4 | Play im Docker | + + Quellen: Aseprite [New Frame](https://www.aseprite.org/docs/new-frame/) und [Animation](https://www.aseprite.org/docs/animation/#common-operations). LibreSprite hat keine Anleitung zur Animation; die Kürzel stammen aus seiner Tastaturbelegung ([gui.xml in v1.3](https://github.com/LibreSprite/LibreSprite/blob/v1.3/data/gui.xml)) und dem [Wiki](https://github.com/LibreSprite/libresprite.github.io/wiki/Know-your-workspace#animation). In Krita wird eine Ebene erst zur animierten Ebene, wenn du per Rechtsklick in die Zeitleiste ein erstes Bild anlegst ([Animating](https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#animating)). + + **Verknüpfte Cels** teilen sich ein Bild: „When you modify one of these cels, all linked cels are modified“ ([Linked Cels](https://www.aseprite.org/docs/linked-cels/)). In Aseprite und LibreSprite legst du sie mit Alt+M an, in Pixelorama per Rechtsklick auf das Cel. Krita nennt dasselbe **Clone Frames**, angelegt mit Alt und Ziehen ([Animation Timeline: Overview](https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#overview)). Sie passen, wenn eine Zeichnung mehrmals vorkommt, etwa eine Haltepose, die wiederkehrt. Zeichnest du versehentlich auf einem, änderst du alle. + + Der Kurs zählt Bilder ab 1, wie Aseprite in der Voreinstellung; dort lässt sich „First frame as 0“ einstellen ([Timeline: Preferences](https://www.aseprite.org/docs/timeline/#preferences)). Krita und die JSON-Daten aus dem Export zählen ab 0. Schreib in jede Bildliste, wie du zählst. + + ## Bilddauer: Timing ändern, ohne neu zu zeichnen + + Die Dauer eines Bildes ist eine Zahl, keine Zeichnung. Deshalb änderst du das Timing, ohne einen Pixel anzufassen. Jedes Programm speichert sie anders. + + **Aseprite und LibreSprite** speichern pro Bild Millisekunden: *Frame › Frame Properties* oder Taste P für das aktuelle Bild, für mehrere Bilder markieren und per Rechtsklick *Properties* ([Frame Duration](https://www.aseprite.org/docs/frame-duration/)). Das Feld heißt „Duration (milliseconds)“; die Doku nennt die Einheit nicht, die Oberfläche schon ([en.ini in 1.3.18.6](https://github.com/aseprite/aseprite/blob/v1.3.18.6/data/strings/en.ini)). *Frame › Constant Frame Rate* gibt allen Bildern dieselbe Dauer. + + **Pixelorama** rechnet wie Godot: eine Bildrate für die Zeitleiste, Standard 6, und je Bild ein Faktor. „By default, the duration of each frame is set to 1x, which means it will take exactly as much time as the timeline FPS“ ([Frames](https://www.pixelorama.org/user_manual/user_interface/timeline#frames)). Den Faktor setzt du per Rechtsklick auf die Bildnummer in den Eigenschaften des Bildes. Bei Bildrate 20 ist 1x genau 50 ms, und jedes Vielfache von 50 ms wird ein ganzer Faktor. + + **Krita** kennt keine Millisekunden. Das Handbuch betont, dass „frame timings are not based on units of time like seconds, but on frames“, und Krita „automatically holds each keyframe until the next keyframe on that layer“ ([Animation Timeline Docker](https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#overview)). Die Bildrate steht im Einstellungsmenü am rechten Ende der Docker-Leiste. Soll eine Zeichnung länger stehen, bekommt sie leere Felder dahinter: Rechtsklick, *Hold frames › Insert Hold Frame* ([Expanding upon your rough walk cycle](https://docs.krita.org/en/user_manual/animation.html#expanding-upon-your-rough-walk-cycle)). *Keyframes › Insert Multiple Keyframes* legt mehrere Bilder auf Einsen, Zweien oder Dreien an. + + Dieselbe Bildliste in allen vier Programmen: + + ```text + Bildliste Aseprite, Pixelorama Krita + LibreSprite FPS 20 20 fps + Bild 1 150 ms 150 3x 3 Felder + Bild 2 50 ms 50 1x 1 Feld + Bild 3 50 ms 50 1x 1 Feld + Bild 4 100 ms 100 2x 2 Felder + ``` + + 20 Bilder pro Sekunde teilen die 60 Ticks des Spiels ohne Rest ([Timing und Spacing](/animation/timing-spacing)). Die Umrechnung in FPS und Frame-Dauern von Godot steht in [In der Testszene prüfen](/animation/testszene). + + > [!TIP] Zeitlupe im Editor + > Aseprite spielt unter *Frame › Playback* mit 0,25- oder 0,5-facher Geschwindigkeit ab (laut [en.ini](https://github.com/aseprite/aseprite/blob/v1.3.18.6/data/strings/en.ini)), Krita hat einen Regler für die Abspielgeschwindigkeit im Docker ([Overview](https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#overview)). In Zeitlupe siehst du, ob ein Abstand aus der Reihe fällt. Die gespeicherten Dauern bleiben gleich. + + > [!PRAXIS] So zeigt es Saint11 + > Pedro Medeiros lässt in seiner ersten Aseprite-Animation einen Ball 4, 3, 2 und 1 Pixel steigen, hält ihn oben ein Bild lang und verlängert danach einzelne Bilder über *Frame properties* ([A Basic Aseprite Animation](https://saint11.art/pixel_art_articles/article3/#timing)). Erst zeichnen, dann timen, abspielen, nachstellen: Die Dauer justierst du am häufigsten nach. + + ## Tags, Schleifen und Vorschau in Originalgröße + + Eine Figur hat mehrere Animationen. Du trennst sie in einer Datei mit **Tags**. In Aseprite markierst du die Bilder und wählst *Frame › Tags › New Tag* oder drückst zweimal F2 ([Tags](https://www.aseprite.org/docs/tags/)). Jeder Tag hat eine Abspielrichtung, „Forward, Reverse, or Ping-pong“, und ein Feld „Repeat“, bei dem 0 „plays infinite in UI, once on export“ heißt ([Tag.repeats](https://www.aseprite.org/api/tag#tagrepeats)). LibreSprite hat denselben Menüpunkt ohne Repeat. In Pixelorama legst du einen Tag per Rechtsklick auf eine Bildnummer an, mit Name, Farbe und Bereich ([Frame tags](https://www.pixelorama.org/user_manual/user_interface/timeline#frame-tags)). Die Schleifenart gilt dort für die ganze Zeitleiste: Cycle, Ping-pong oder No loop ([Loop modes](https://www.pixelorama.org/user_manual/user_interface/timeline#loop-modes)). Krita hat keine Tags; dort setzt du den Abspielbereich im Einstellungsmenü der Zeitleiste oder nimmst eine Datei je Animation. + + Gib jedem Tag den Namen, den die Animation im Spiel trägt; die Namen sind ein Vertrag mit dem Code ([Animationen zuordnen](/godot/animationen)). + + Gezeichnet wird vergrößert, beurteilt in Originalgröße. In Aseprite öffnet F7 das Vorschaufenster, Shift+Enter spielt dort „the sprite animation (or the current tag)“ ([Preview Window](https://www.aseprite.org/docs/preview-window/)); LibreSprite hat *View › Preview*, ebenfalls F7. Pixelorama hat ein Panel Canvas Preview mit Abspielknopf, das das Handbuch nicht beschreibt; versteckte Panels blendest du unter *Window › Panels* ein ([User Interface Basics](https://www.pixelorama.org/user_manual/user_interface/user_interface_basics)). Damit dort nur ein Tag läuft, schaltest du in den Optionen der Zeitleiste „Animation plays only on frames of the same tag“ ein. Krita spielt auf der Leinwand ab, bei Zoom 100 %. Bei Aseprite denk an die Bildschirmskalierung von 200 % ([Einen Pixel-Editor wählen und einrichten](/pixelart/editor-einrichten)). + + ## Onion Skinning: die Nachbarbilder durchscheinen lassen + + **Onion Skinning** zeigt die Bilder vor und nach dem aktuellen als blasse Schatten, wie dünnes Papier auf dem Leuchttisch der Trickfilmzeichner ([Onion Skin Docker](https://docs.krita.org/en/reference_manual/dockers/onion_skin.html#onion-skin-docker)). So zeichnest du ein Zwischenbild und siehst die Keys davor und danach. + + - **Aseprite:** F3 oder das Onion-Skin-Symbol in der Zeitleiste; im Zahnrad stellst du ein, wie viele Bilder davor und danach erscheinen, und schaltest die Rot-Blau-Tönung ein ([Onion Skinning](https://www.aseprite.org/docs/onion-skinning/)). + - **LibreSprite:** F3 oder *View › Show Onion Skin*, mit denselben Einstellungen wie Aseprite. + - **Pixelorama:** zwei Knöpfe links neben der Schleifenart, einer schaltet, einer öffnet die Einstellungen mit Zahl der Bilder und dem Blau-Rot-Modus. Eine Ebene schließt du über ihre Eigenschaften aus, „Ignore in onion skinning“ ([Onion skinning](https://www.pixelorama.org/user_manual/user_interface/timeline#onion-skinning)). + - **Krita:** das Glühbirnen-Symbol an der animierten Ebene schaltet, der Onion Skin Docker regelt Deckkraft je Abstand, Tönung und Farben. + + Ein Ball rollt nach rechts und bremst ab. Bild 3 ist aktiv (`O`), die beiden Bilder davor (`v`) und das danach (`n`) erscheinen getönt. Welche Farbe wofür steht, hängt vom Programm ab: Pixelorama tönt die Bilder davor blau und danach rot, Krita davor rot und danach grün. + + ```text + v v O n + 1 2 3 4 + |-----16px------|---12px----|--8px--| + ``` + + Drei Prüfungen gehen nur so. **Spacing:** Die Abstände zwischen den Schatten sind dein Spacing-Chart, direkt auf der Leinwand. Hier werden sie kleiner, der Ball bremst. **Bögen:** Verbinde in Gedanken die Nasenspitze oder die Hand über alle Schatten; die Linie soll ein Bogen sein ([Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung)). **Konstanz:** Ist der Kopf in einem Bild eine Reihe größer, siehst du es am Rand des Schattens ([Form und Proportionen halten](/animation/form-konstanz)). + + Schalt es aus, wenn du ein Einzelbild für sich beurteilst, etwa seine Silhouette, und wenn du abspielst. Dann lenken die Schatten ab. + + > [!WARNING] Krita zeigt keine Schatten + > Krita zeigt Onion Skins nur auf Ebenen, die nicht deckend sind: „Krita will consider white to be white, not transparent“ ([Onion Skin Docker](https://docs.krita.org/en/reference_manual/dockers/onion_skin.html#onion-skin-docker)). Hast du beim Anlegen den Hintergrund als Rasterebene gewählt und darauf animiert, bleiben die Schatten aus. Leg eine neue, transparente Ebene für die Animation an. + + ## Export: Sprite-Sheet, Daten, Bildfolge und GIF + + Du exportierst für drei Empfänger. **Für das Spiel** ein Sprite-Sheet oder eine Bildfolge in 100 %, ohne abgeschnittene Ränder; welche Raster-Optionen Godot verträgt, steht in [Eigene Sprites importieren](/godot/sprites-importieren). + + - Aseprite: *File › Export › Export Sprite Sheet* (Ctrl+E). Im Dialog wählst du den Sheet Type, etwa „By Rows“, das laut Tooltip eine Zeile je Ebene oder Tag anlegt, und mit „Split Tags“ eine Zeile je Tag ([Sprite Sheet](https://www.aseprite.org/docs/sprite-sheet/#export)). + - LibreSprite: *File › Export Sprite Sheet* (Ctrl+Alt+E), mit Sheet Type, „Per Tag“ und JSON-Daten. + - Pixelorama: *File › Export* (Ctrl+E), Reiter für Bildfolge und Spritesheet; beim Sheet wählst du Zeilen und Spalten, unter „Frames“ einzelne Tags ([Save and Export](https://www.pixelorama.org/user_manual/save_and_export#export-a-spritesheet)). + - Krita: *File › Render Animation*, „Export as Image Sequence“, eine PNG-Datei je Bild ([Render Animation](https://docs.krita.org/en/reference_manual/render_animation.html#export-as-image-sequence)). + + **Für das Timing** die Bilddauern. Aseprite und LibreSprite schreiben sie in eine JSON-Datei neben das Sheet, wenn du „JSON Data“ anhakst, mit der Meta-Angabe für Tags auch die Tags. In Aseprite geht das auch an der Kommandozeile ([CLI](https://www.aseprite.org/docs/cli/#data)): + + ```bash + aseprite -b ball.aseprite \ + --sheet ball.png --data ball.json \ + --format json-array --list-tags + ``` + + `-b` startet ohne Oberfläche, `--format json-array` schreibt die Bilder als Liste, `--list-tags` legt die Tags unter `meta.frameTags` ab ([--list-tags](https://www.aseprite.org/docs/cli/#list-tags)). Pro Bild stehen in der Datei die Lage im Sheet (`frame`), Angaben zum Zuschnitt und die Dauer in Millisekunden (`duration`), wie in einem [Beispiel von Aseprite-Entwickler David Capello](https://gist.github.com/dacap/a32adb9248320326733a). Ein Tag steht als Name, Bereich und Richtung darin, mit gesetztem Repeat auch `"repeat"` ([doc_exporter.cpp](https://github.com/aseprite/aseprite/blob/v1.3.18.6/src/app/doc_exporter.cpp)). Bilder und Tags zählen ab 0. Das Skript rechnet die Länge jedes Tags aus, mit Daten, die auf die nötigen Felder gekürzt sind: + + ```python run + import json + + daten = json.loads(""" + {"frames": [ + {"filename": "ball 0.aseprite", "duration": 150}, + {"filename": "ball 1.aseprite", "duration": 50}, + {"filename": "ball 2.aseprite", "duration": 50}, + {"filename": "ball 3.aseprite", "duration": 100}, + {"filename": "ball 4.aseprite", "duration": 200}, + {"filename": "ball 5.aseprite", "duration": 200}], + "meta": {"frameTags": [ + {"name": "huepfen", "from": 0, "to": 3, + "direction": "forward"}, + {"name": "wackeln", "from": 4, "to": 5, + "direction": "pingpong"}]}} + """) + + dauern = [f["duration"] for f in daten["frames"]] + for tag in daten["meta"]["frameTags"]: + teil = dauern[tag["from"]:tag["to"] + 1] + print(tag["name"], teil, sum(teil), "ms") + ``` + + `huepfen` umfasst die Bilder 1 bis 4 und dauert 350 ms, `wackeln` die Bilder 5 und 6 mit 400 ms. Bei Ping-Pong läuft die Animation danach rückwärts, hin und zurück dauert also länger als die Summe. + + Pixelorama und Krita schreiben keine solche Datei. Pixelorama behält Bildrate und Faktoren in der `.pxo`-Datei; sein `--json` gibt die Projektdaten aus, keine Bildrechtecke ([CLI](https://www.pixelorama.org/user_manual/cli#options)). Krita schreibt beim Rendern für jedes Feld ein Bild, auch für Haltebilder, und das Timing steckt in der Zahl gleicher Bilder bei fester Bildrate. „Only Unique Frames“ lässt die Wiederholungen weg und damit dein Timing. Bei beiden gehört die Bildliste mit Dauern als Textdatei neben das Sheet. + + **Zum Zeigen** ein GIF oder APNG, um einen ganzen Faktor mit nächstem Nachbarn vergrößert, etwa für den Beobachtungstest am Handy. In Aseprite: *File › Export › Export As* (Ctrl+Alt+Shift+S), Dateiname `ball.gif`, „Resize“ auf 400 % ([Exporting](https://www.aseprite.org/docs/exporting/#automatic-resize-on-export)). Pixelorama exportiert GIF und APNG im selben Dialog wie die Bildfolge, vergrößert mit „Nearest“ und empfiehlt APNG, weil GIF dort langsam ist ([Export a sequence of images](https://www.pixelorama.org/user_manual/save_and_export#export-a-sequence-of-images)). LibreSprite exportiert GIF über *File › Export*. Krita rendert GIF oder Video mit dem Filter „Nearest Neighbour“, der laut Handbuch die Details von Pixelart besser erhält ([Export as Video](https://docs.krita.org/en/reference_manual/render_animation.html#export-as-video)). Ins Spiel geht immer der Export in 100 %. + + > [!INTERVIEW] + > „Wie übergibst du eine Animation an die Programmierung, damit das Timing ankommt?“ Gute Antwort: Als Sprite-Sheet in Originalgröße mit festem Raster, eine Zeile je Animation, dazu die Bilddauern als JSON oder Bildliste. Die Tag-Namen sind die Animationsnamen im Spiel. Ich sage, ob die Bildnummern ab 0 oder 1 zählen und welche Animationen sich wiederholen, und prüfe das Ergebnis im Spiel statt in der Vorschau. + + ## Fassungen speichern und was eine KI hier darf + + Vor jeder größeren Änderung speicherst du unter neuem Namen: `ball-v1.aseprite`, dann `ball-v2.aseprite`. In Aseprite und LibreSprite mit *File › Save As*, in Pixelorama mit *Save as…* (Shift+Ctrl+S, [Saving](https://www.pixelorama.org/user_manual/save_and_export#saving)), in Krita mit *File › Incremental Backup*, das eine Kopie zum Weiterarbeiten anlegt ([Workflow](https://docs.krita.org/en/user_manual/animation.html#workflow)). Die alte Fassung überschreibst du nie; die Werkstätten bauen darauf auf. + + > [!MERKE] Skripte ja, Bilder nein + > Export-Befehle und Skripte wie die beiden oben darf dir eine KI schreiben, erklären oder anpassen. Die Bilder nicht: keine generierte Figur als Vorlage, kein erzeugtes Zwischenbild, kein Werkzeug, das aus deinen Keys die Inbetweens rechnet. Jede Zeichnung, Pose und Bilddauer ist deine Arbeit. + + ## Häufige Fehler + + - **Dauer im falschen Bild.** Die Taste P ändert nur das aktuelle Bild. Für mehrere Bilder markierst du sie zuerst. + - **Bildrate statt Faktor geändert.** In Pixelorama gilt die Bildrate für alle Bilder. Ein einzelnes längeres Bild bekommt einen höheren Faktor. + - **„Only Unique Frames“ angehakt.** Krita lässt die Haltebilder weg, und alle Bilder stehen im Spiel gleich lang. + - **Vergrößert exportiert.** 150 % macht aus jedem Pixel abwechselnd ein und zwei Pixel. Fürs Spiel immer 100 %. + - **Ränder abgeschnitten.** Trim macht die Bilder verschieden groß, und die Figur springt beim Wechsel. + - **Timing nur im Kopf.** Ohne JSON oder Bildliste rät die nächste Station die Dauern. + + ## Zusammenfassung + + - Spalten sind Bilder, Zeilen Ebenen, ein Feld ist ein Cel. Verknüpfte Cels (Krita: Clone Frames) teilen ein Bild. + - Aseprite und LibreSprite speichern Millisekunden pro Bild, Pixelorama eine Bildrate mit Faktoren, Krita Felder einer festen Bildrate mit Haltebildern. + - Mit 20 Bildern pro Sekunde in Pixelorama und Krita wird jedes Vielfache von 50 ms ein ganzer Faktor oder eine ganze Zahl Felder. + - Tags trennen Animationen in einer Datei; ihr Name ist der Animationsname im Spiel. + - Onion Skinning zeigt Spacing, Bögen und Konstanz. Zum Beurteilen eines Einzelbilds schaltest du es aus. + - Fürs Spiel exportierst du in 100 % ohne Trim, mit JSON oder Bildliste. Zum Zeigen ein GIF mit ganzem Faktor. + - Skripte darf eine KI schreiben, Bilder nicht. +exercises: + - id: cel-bild-ebene + type: choice + title: Bild, Ebene, Cel + prompt: | + Welche Aussagen über die Zeitleiste stimmen? + options: + - text: Ein Cel ist das Bild einer Ebene in einem bestimmten Bild der Animation. + correct: true + why: So definieren es Aseprite und Pixelorama. Ein Bild der Animation besteht aus den Cels aller Ebenen. + - text: Änderst du ein verknüpftes Cel, ändern sich alle damit verknüpften. + correct: true + why: Verknüpfte Cels teilen sich ein Bild. In Krita heißt dasselbe Clone Frame. + - text: In Krita steht jede Zeichnung, bis auf derselben Ebene die nächste kommt. + correct: true + why: Krita hält jeden Keyframe automatisch bis zum nächsten. Haltezeit sind dort leere Felder hinter der Zeichnung. + - text: In Pixelorama hat jedes Bild eine eigene Dauer in Millisekunden. + correct: false + why: Pixelorama hat eine Bildrate für die Zeitleiste und je Bild einen Faktor, Standard 1x. Millisekunden speichern Aseprite und LibreSprite. + - text: Eine Ebene ist eine Spalte der Zeitleiste. + correct: false + why: Spalten sind Bilder in zeitlicher Folge, Ebenen sind Zeilen. + explanation: | + Die vier Programme ordnen dasselbe Raster an, nur mit anderen Wörtern und Zeiteinheiten. Wer weiß, dass Aseprites verknüpftes Cel Kritas Clone Frame ist und Pixeloramas Faktor Godots Frame-Dauer, kann zwischen Programmen wechseln, ohne sein Timing zu verlieren. + resources: + - title: Aseprite Docs · Cel + url: https://www.aseprite.org/docs/cel/ + + - id: ball-im-editor-ordnen + type: order + title: Vom Papier in den Editor + prompt: | + Bring die Arbeitsschritte für den Ball aus Timing und Spacing in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die Keys als einzelne Bilder zeichnen. + Jedem Key seine Dauer aus der Bildliste geben. + Nur die Keys abspielen und das Timing prüfen. + Onion Skinning einschalten und die Zwischenbilder zeichnen. + Die Zwischenbilder timen und alles in Originalgröße abspielen. + Sprite-Sheet und Bilddauern in 100 % exportieren. + explanation: | + Keys und ihr Timing kommen zuerst, weil sie die Bewegung tragen und sich am leichtesten ändern lassen. Erst wenn die Keys allein stimmen, lohnen Zwischenbilder; für sie brauchst du Onion Skinning, um die Abstände zu sehen. Beurteilt wird in Originalgröße, exportiert ganz am Ende, damit das Spiel die Fassung bekommt, die du geprüft hast. + resources: + - title: Krita Manual · Animation, Workflow + url: https://docs.krita.org/en/user_manual/animation.html#workflow + + - id: tag-laenge + type: output + title: Wie lang ist der Tag? + prompt: | + Der Tag `aufprall` umfasst in Aseprite die Bilder 3 bis 6. Wie viele Millisekunden dauert ein Durchlauf? Antworte mit der Zahl. + lang: text + code: | + Bild Dauer + 1 100 ms + 2 50 ms + 3 50 ms + 4 150 ms + 5 100 ms + 6 250 ms + 7 100 ms + expected: | + 550 + accept: + - 550 ms + explanation: | + Bild 3 bis 6 sind 50 + 150 + 100 + 250 = 550 ms. Die Bilder davor und danach gehören zu anderen Tags. In der JSON-Datei stünde dieser Tag als `"from": 2, "to": 5`, weil dort ab 0 gezählt wird. + resources: + - title: Aseprite Docs · Tags + url: https://www.aseprite.org/docs/tags/ + + - id: tag-skript + type: output + title: Was das Skript ausgibt + prompt: | + Was gibt das Programm aus? + lang: python + code: | + dauern = [100, 100, 50, 50, 300] + tags = [ + {"name": "anlauf", "from": 0, "to": 1}, + {"name": "sprung", "from": 2, "to": 4}, + ] + for tag in tags: + teil = dauern[tag["from"]:tag["to"] + 1] + print(tag["name"], sum(teil)) + expected: | + anlauf 200 + sprung 400 + explanation: | + `from` und `to` zählen ab 0 und schließen beide Enden ein. Deshalb steht im Slice `tag["to"] + 1`. `anlauf` umfasst die ersten beiden Dauern, 200 ms, `sprung` die übrigen drei, 50 + 50 + 300 = 400 ms. Ohne `+ 1` fiele das letzte Bild jedes Tags heraus. + resources: + - title: Aseprite Docs · CLI, --list-tags + url: https://www.aseprite.org/docs/cli/#list-tags + + - id: krita-haltebilder + type: output + title: Drei Felder bei 12 Bildern pro Sekunde + prompt: | + In Krita steht die Bildrate auf 12. Ein Key liegt auf Feld 4, der nächste auf Feld 7. Wie viele Millisekunden steht der erste Key? Antworte mit der Zahl. + lang: text + code: | + Feld 4 5 6 7 + K - - K + K = Keyframe, - = gehalten + expected: | + 250 + accept: + - 250 ms + explanation: | + Der Key auf Feld 4 hält über die Felder 5 und 6, bis auf Feld 7 der nächste kommt: drei Felder. Bei 12 Bildern pro Sekunde ist ein Feld 1000 / 12 ≈ 83,3 ms lang, drei Felder sind 250 ms. Im Spiel sind das genau 15 Ticks. + resources: + - title: Krita Manual · Animation Timeline Docker + url: https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#term-Blank-Keyframe + + - id: cli-befehl + type: gap + title: Sheet und Daten in einem Befehl + prompt: | + Ergänze den Befehl so, dass Aseprite ohne Oberfläche aus `ball.aseprite` ein Sheet `ball.png` und eine JSON-Datei `ball.json` als Liste schreibt, mit den Tags unter `meta.frameTags`. + lang: bash + code: | + aseprite ⟦-b⟧ ball.aseprite \ + ⟦--sheet⟧ ball.png ⟦--data⟧ ball.json \ + --format ⟦json-array⟧ ⟦--list-tags⟧ + gaps: + - label: ohne Oberfläche + hint: Kurzform von --batch. + accept: ["--batch"] + - label: Bilddatei + hint: Die Option heißt wie das englische Wort für ein Blatt Papier. + - label: JSON-Datei + hint: Englisch für Daten. + - label: Format + hint: Nicht die Voreinstellung json-hash. + - label: Tags + hint: Die Option listet etwas auf. + explanation: | + `-b` beendet Aseprite nach den Befehlen. `--sheet` und `--data` geben die beiden Ausgaben an, `--format json-array` schreibt die Bilder als Liste in Abspielreihenfolge, die Voreinstellung wäre `json-hash`. `--list-tags` schreibt zusammen mit `--data` die Tags in die Meta-Daten. Solche Befehle darf dir eine KI schreiben; prüf sie trotzdem gegen die Doku, bevor du sie in ein Skript übernimmst. + resources: + - title: Aseprite Docs · CLI, Export an animation to a sprite sheet + url: https://www.aseprite.org/docs/cli/#export-an-animation-to-a-sprite-sheet + + - id: werkzeugbegriffe + type: gap + title: Vier Programme, vier Wörter + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Die Bilder davor und danach blass anzeigen heißt ⟦Onion⟧ Skinning. + Was in Aseprite ein verknüpftes Cel ist, heißt in Krita ⟦Clone⟧ Frame. + In Pixelorama steht ein Bild mit dem Faktor 2x ⟦doppelt⟧ so lange, wie die Bildrate vorgibt. + In Krita verlängerst du eine Zeichnung mit Insert ⟦Hold⟧ Frame. + Ein Tag, der vorwärts und dann rückwärts läuft, hat die Richtung ⟦Ping-pong⟧. + gaps: + - label: Zwiebel + hint: Englisch für Zwiebel. + - label: Krita-Begriff + hint: Englisch für Klon. + - label: Faktor 2x + hint: Zweimal so lange. + accept: ["zweimal"] + - label: Haltebild + hint: Englisch für halten. + - label: Richtung + hint: Wie das Tischtennis. + accept: ["Pingpong"] + explanation: | + Onion Skinning kommt vom dünnen Papier auf dem Leuchttisch. Clone Frames teilen in Krita ein Bild wie verknüpfte Cels in Aseprite. Hold Frames sind leere Felder, über die Krita die Zeichnung davor hält. Ping-Pong läuft vor und zurück; für eine Aktion, die enden soll, ist das falsch, für ein Wackeln oder Atmen kann es passen. + resources: + - title: Krita Manual · Clone frames + url: https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#term-Clone-frames + + - id: export-150 + type: bug + title: Ungleiche Pixel + prompt: | + Im Spiel sind manche Pixel deiner Figur doppelt so breit wie andere, und die Kanten flimmern beim Laufen. Im Editor sieht alles sauber aus. Finde die Zeile in den Export-Einstellungen und korrigiere sie. + lang: text + code: | + Sheet Type By Rows, Split Tags + Trim aus + Resize 150 % + JSON Data an, Array, Meta Tags + Ausgabe held.png, held.json + lines: [3] + fix: + - line: 3 + answers: + - Resize 100 % + explanation: | + Bei 150 % wird aus jedem Pixel im Mittel anderthalb. Weil es keine halben Pixel gibt, werden abwechselnd ein und zwei Pixel daraus. Vergrößert wird nur zum Zeigen und nur um ganze Faktoren; ins Spiel geht der Export in 100 %, skaliert wird dort ([Eigene Sprites importieren](/godot/sprites-importieren)). + resources: + - title: Aseprite Docs · Automatic Resize on Export + url: https://www.aseprite.org/docs/exporting/#automatic-resize-on-export + + - id: krita-unique-frames + type: bug + title: Alle Bilder gleich schnell + prompt: | + Du hast in Krita bei 20 Bildern pro Sekunde animiert, mit langen Haltebildern auf den Keys. Im Spiel läuft die Animation mit 20 FPS, aber jede Zeichnung huscht gleich schnell vorbei, auch die Keys. Finde die Zeile in den Render-Einstellungen, die das verursacht. + lang: text + code: | + First Frame 0 + Last Frame 11 + Export as Image Sequence an + File Format PNG + Only Unique Frames an + lines: [5] + fix: + - line: 5 + answers: + - Only Unique Frames aus + explanation: | + Krita schreibt normalerweise für jedes Feld ein Bild, auch für gehaltene; so steckt das Timing in der Zahl gleicher Bilder. „Only Unique Frames“ schreibt nur die Keyframes, um Platz zu sparen. Damit fehlen die Wiederholungen, und bei fester Bildrate steht jede Zeichnung ein Feld lang. Willst du trotzdem nur die Zeichnungen exportieren, brauchst du die Bildliste mit Dauern daneben. + resources: + - title: Krita Manual · Export as Image Sequence + url: https://docs.krita.org/en/reference_manual/render_animation.html#export-as-image-sequence + + - id: json-erklaeren + type: explain + title: Was in der JSON-Datei steht + prompt: | + Ein Ausschnitt aus der Datei, die Aseprite mit `--format json-array --list-tags` geschrieben hat. Erkläre in wenigen Sätzen, was ein Programm daraus über Lage, Dauer und Abspielweise der Animation erfährt und worauf es beim Zählen achten muss. + lang: json + code: | + { "frames": [ + { "filename": "sack 0.aseprite", + "frame": { "x": 0, "y": 0, "w": 16, "h": 16 }, + "duration": 200 }, + { "filename": "sack 1.aseprite", + "frame": { "x": 16, "y": 0, "w": 16, "h": 16 }, + "duration": 50 }, + { "filename": "sack 2.aseprite", + "frame": { "x": 32, "y": 0, "w": 16, "h": 16 }, + "duration": 250 } + ], + "meta": { + "frameTags": [ + { "name": "landen", "from": 0, "to": 2, + "direction": "forward", "repeat": "1" } + ] + } + } + points: + - "`frame` gibt die Lage jedes Bildes im Sheet an; hier liegen drei Bilder zu 16 × 16 Pixeln nebeneinander." + - "`duration` ist die Dauer jedes Bildes in Millisekunden: 200, 50 und 250, zusammen 500 ms." + - Der Tag `landen` umfasst die Bilder 0 bis 2, also alle drei, läuft vorwärts und laut `repeat` genau einmal. + - Bilder und Tag-Grenzen zählen ab 0; das erste Bild der Bildliste im Kurs ist hier Bild 0. + explanation: | + Die Datei trennt Bild und Zeit: `frame` sagt, wo ein Bild im Sheet liegt, `duration`, wie lange es steht. Ein Importer kann daraus jede Animation mit ihrem Timing aufbauen, ohne dass jemand Dauern abtippt. `direction` und `repeat` sagen, wie der Tag abläuft; `repeat` erscheint nur, wenn du im Tag eine Zahl größer 0 gesetzt hast. Die Zählung ab 0 ist die häufigste Fehlerquelle beim Übertragen in eine Bildliste, die ab 1 zählt. + resources: + - title: Aseprite API · Tag.repeats + url: https://www.aseprite.org/api/tag#tagrepeats + + - id: ball-anlegen-exportieren + type: practice + title: Der Ball vom Papier im Editor + prompt: | + Nimm deinen Ball aus der Übung „Ein Ball auf Karopapier“ in [Timing und Spacing](/animation/timing-spacing) oder plane einen neuen Hüpfer. Leg ihn in deinem Editor an: Keys zeichnen, Dauern eintragen, nur die Keys abspielen, mit Onion Skinning die Zwischenbilder zeichnen, einen Tag `huepfen` anlegen, in Originalgröße in Schleife abspielen. Exportiere dann ein Sheet in 100 % mit Bilddauern (JSON oder Bildliste) und ein GIF mit ganzem Faktor. Notier hier den Ablauf so, wie du ihn in deinem Programm gemacht hast. + + Alle Zeichnungen machst du selbst. Den Export-Befehl darf dir eine KI schreiben. + lang: text + starter: | + Programm und Version: + Datei (Fassung): + Bildliste (Bild, Dauer, Key/Zwischenbild): + Onion Skinning (Einstellung): + Tag: + Export Sheet (Größe, Raster, Daten): + Export GIF (Faktor): + solution: | + Beispiel mit Aseprite 1.3.18.6; in LibreSprite gleich, + andere Programme in Klammern. + + Programm: Aseprite 1.3.18.6 + Datei: ball-v1.aseprite + Bildliste: + 1 150 ms Key, oben + 2 50 ms Zwischenbild + 3 50 ms Zwischenbild + 4 100 ms Key, Kontakt + 5 50 ms Zwischenbild + 6 100 ms Key, Rückprall oben + Onion Skinning: F3, 1 Bild davor, 1 danach, Rot-Blau + (Pixelorama: Knöpfe links der Schleifenart; + Krita: Glühbirne an der Ebene, Onion Skin Docker) + Dauern: P je Bild + (Pixelorama: FPS 20, Faktoren 3, 1, 1, 2, 1, 2; + Krita: 20 fps, Insert Hold Frame) + Tag: Bilder 1–6, Frame › Tags › New Tag, huepfen + Export Sheet: Ctrl+E, By Rows, kein Trim, + JSON Data als Array mit Tags, 100 % + (Pixelorama: File › Export, Spritesheet, plus + Bildliste als Textdatei; Krita: Render + Animation als Bildfolge, ohne Only Unique) + Export GIF: Export As, ball.gif, Resize 400 % + checklist: + - Programm und Version stehen in deiner Notiz. + - Die Keys haben andere Dauern als die Zwischenbilder. + - Es gibt einen Tag oder einen festgelegten Abspielbereich mit Namen. + - Das Sheet ist in 100 % exportiert, ohne Trim. + - Die Bilddauern liegen als JSON oder Bildliste neben dem Sheet. + - Das GIF ist um einen ganzen Faktor vergrößert. + explanation: | + Die Übung prüft das Werkzeug, nicht den Ball. Wenn Bildliste, Tag und Export einmal sitzen, kannst du jede spätere Studie in wenigen Minuten ins Spiel und aufs Handy bringen. Die Musterlösung zeigt nur die Bedienung; deine Bildliste und deine Zeichnungen sehen anders aus. + resources: + - title: Aseprite Docs · Sprite Sheet, Export + url: https://www.aseprite.org/docs/sprite-sheet/#export + + - id: eigener-spickzettel + type: practice + title: Dein Programm, deine Kürzel + prompt: | + Wähle das Programm, mit dem du animieren willst, und probier jeden Schritt der Lektion darin aus. Schreib dir einen Spickzettel: zu jedem Schritt das Menü oder Kürzel, das bei dir funktioniert hat, und was anders war als in der Lektion. Notier die Version, die dein Programm unter *Help › About* oder einem ähnlichen Menüpunkt anzeigt. + lang: prose + starter: | + Programm, Version: + Bild anfügen (Kopie / leer): + Bild vor, zurück, abspielen: + Dauer eines Bildes ändern: + Verknüpftes Cel / Clone Frame: + Tag oder Abspielbereich: + Vorschau in Originalgröße: + Onion Skinning an, Einstellungen: + Export Sheet mit Dauern: + Export GIF: + Anders als in der Lektion: + checklist: + - Die Version steht da, abgelesen im Programm. + - Jeder Schritt hat ein Menü oder Kürzel, das du selbst ausprobiert hast. + - Du hast notiert, wie dein Programm Dauern speichert (Millisekunden, Faktor oder Felder). + - Du hast notiert, wo die Bilddauern beim Export landen. + - Abweichungen von der Lektion sind festgehalten, oder „keine“. + explanation: | + Menüs ändern sich mit Versionen, die Begriffe dahinter nicht. Ein selbst geprüfter Zettel ist verlässlicher als jede Liste, auch diese Lektion. Die Frage, wo die Dauern beim Export landen, ist die wichtigste: An ihr hängt, ob dein Timing im Spiel ankommt. + resources: + - title: Pixelorama · Save and Export + url: https://www.pixelorama.org/user_manual/save_and_export diff --git a/content/animation/modules/form-konstanz.yaml b/content/animation/modules/form-konstanz.yaml new file mode 100644 index 0000000..2ce555d --- /dev/null +++ b/content/animation/modules/form-konstanz.yaml @@ -0,0 +1,485 @@ +id: form-konstanz +title: Form und Proportionen von Bild zu Bild halten +level: 2 +minutes: 110 +summary: Warum eine Figur in der Schleife pulsiert, flackert oder kocht, obwohl jedes Einzelbild stimmt, was in jedem Bild gleich bleiben muss, welche Werkzeuge im Editor und auf Papier dabei helfen und wie du eine Bewegung unter einem Pixel zeigst. +place: unterwegs +goals: + - Du erkennst in einer Bildfolge, wo eine Figur vom Modell abweicht (Maße, Augen, Kontur, Lichtseite), und unterscheidest gewollte von ungewollten Änderungen. + - Du findest in Pixelrastern die Reihe oder das Bild, das aus der Form fällt. + - Du setzt Onion Skinning, verknüpfte Bilder, Ebenen, Hilfslinien und eine feste Palette gezielt ein, in einem freien Editor oder in Aseprite. + - Du erklärst Sub-Pixel-Animation und wann Zwischentöne eine Bewegung unter einem Pixel zeigen, statt zu flimmern. + - Du prüfst jedes Einzelbild auf eine lesbare Silhouette und arbeitest eine Konstanz-Checkliste ab. +resources: + - title: Wikipedia · Model sheet + url: https://en.wikipedia.org/wiki/Model_sheet + - title: Wikipedia · Off-model + url: https://en.wikipedia.org/wiki/Off-model + - title: Saint11 (Pedro Medeiros) · < 1 Pixel Movement + url: https://saint11.art/blog/pixel-art-tutorials/#Subpixel + - title: Slynyrd (Raymond Schlitter) · Pixelblog 55, Top Down Character Animation + url: https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation + - title: Aseprite Docs · Onion Skinning + url: https://www.aseprite.org/docs/onion-skinning/ +lesson: | + Du hast eine Figur, die du schon gezeichnet hast, in vier Bildern atmen lassen. Jedes Bild für sich sieht gut aus. In der Schleife pulsiert der Kopf, ein Auge zuckt ohne Grund, und an der Schulter flackert die Kontur. Kein einzelnes Bild ist falsch gezeichnet. Die Bilder passen nicht zueinander: Im dritten ist der Kopf einen Pixel breiter, im vierten sitzt das Auge eine Reihe tiefer, im zweiten ist die Kontur an einer Stelle doppelt. In der Schleife sieht man genau diese Unterschiede, weil sich alles andere nicht bewegt. + + Diese Lektion zeigt, was in jedem Bild gleich bleiben muss, welche Ein-Pixel-Fehler in Pixelart typisch sind, mit welchen Werkzeugen du die Form hältst, wie du eine Bewegung unter einem Pixel zeigst und wie du jedes Bild auf seine Silhouette prüfst. Die Bedienung der Editoren steht in [Einzelbilder im Editor](/animation/editor-zeitleiste). + + ## Auf Modell bleiben: was in jedem Bild gleich ist + + In Animationsstudios hält ein **Modellblatt** (Model Sheet) fest, wie eine Figur aussieht: Proportionen, Ansichten, Haltungen und Gesten, damit sie von Szene zu Szene gleich bleibt, egal wer zeichnet ([Model sheet](https://en.wikipedia.org/wiki/Model_sheet)). Eine Zeichnung, die davon abweicht, ist **off model**: „art that does not match the style, design, or proportions that have been previously established“ ([Off-model](https://en.wikipedia.org/wiki/Off-model)). Du zeichnest allein, aber das Problem bleibt: Bild 3 entsteht an einem anderen Tag als Bild 1. Wie du ein Modellblatt für eine Pixelfigur anlegst, steht in [Ansichten und Maßstab](/pixelart/ansichten-massstab). + + Thomas und Johnston nennen das Prinzip dahinter *Solid Drawing*: Formen im Raum denken, mit Volumen und Gewicht ([Solid drawing](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Solid_drawing)). Für eine Pixelfigur heißt das, in jedem Bild bleiben gleich: + + - **Maße:** Gesamthöhe, Kopfbreite und -höhe, Länge und Dicke von Armen und Beinen. + - **Masse:** Wird ein Teil flacher, wird er breiter. Medeiros schreibt zu seinen Ruhezyklen: „Character doesn't change mass“ ([Character Idle](https://saint11.art/blog/pixel-art-tutorials/#characterIdle)). + - **Details:** Augenabstand und Augenreihe, Zahl der Finger, Lage von Scheitel, Gürtel oder Tasche. + - **Kontur:** überall gleich dick, meist ein Pixel. + - **Licht:** dieselbe Lichtseite in jedem Bild. + - **Palette:** dieselben Farben, keine neuen in einzelnen Bildern. + + Raymond Schlitter (Slynyrd) schreibt über seine Figur mit acht Richtungen: „The trick is keeping the thickness and length of appendages consistent. At such a small size, one pixel can make a huge difference.“ ([Pixelblog 55](https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation)). + + Nicht jede Änderung ist ein Fehler. Ein Ball, der beim Aufprall breiter und flacher wird, ist gestaucht, und das ist gewollt ([Gewicht zeigen](/animation/gewicht-aufprall)). Ein Wischbild verzerrt die Form absichtlich ([Antizipation, Aktion, Erholung](/animation/antizipation-erholung)). Eine Drehung ändert die Ansicht. Auch Studios gehen manchmal bewusst vom Modell weg, und Wikipedia nennt off model ausdrücklich auch als absichtliche Entscheidung. Die Regel für dich: Eine Änderung ist gewollt, wenn du ihren Grund in die Bildliste schreiben kannst. + + > [!MERKE] + > Maße, Masse, Details, Kontur, Licht und Palette bleiben von Bild zu Bild gleich. Was sich ändert, hat einen Grund, den du benennen kannst. + + ## Ein Pixel zu viel: typische Fehler in Pixelart + + Schlitter warnt in seiner Einführung: In einer Schleife „a single misplaced pixel can create an eyesore“, und weiter: „Respect the clusters of every single frame“ ([Pixelblog 8](https://www.slynyrd.com/blog/2018/8/19/pixelblog-8-intro-to-animation)). Ein **Cluster** ist eine zusammenhängende Gruppe gleichfarbiger Pixel. Medeiros schreibt für das Animieren: „Keep track of clusters“ und „I avoid breaking clusters“ ([Fundamentals 1](https://saint11.art/blog/pixel-art-tutorials/#Fundamentals)). + + Die häufigsten Abweichungen: + + - **Kopf wächst oder schrumpft** um einen Pixel, weil er in einem Bild neu gezeichnet wurde. + - **Auge springt** eine Reihe nach oben oder unten. + - **Kontur doppelt** an einer Stelle, oft an Schulter oder Knie. + - **Lichtseite wechselt**, weil Glanzpunkt oder Schatten in einem Bild auf der anderen Seite sitzen. + - **Kochen** (Boiling): Kanten, die in jedem Bild neu gezeichnet wurden, zittern, obwohl die Figur stillsteht. + + So sieht der wachsende Kopf aus, der obere Teil der Figur aus zwei Bildern: + + ```text + Bild 1 Bild 2 + ...###... ...####.. + ...###... ...####.. + ...###... ...####.. + ....#.... ....#.... + ..#####.. ..#####.. + .#.###.#. .#.###.#. + ``` + + Im Standbild fällt der eine Pixel kaum auf. In der Schleife pumpt der Kopf. + + Kochende Linien können ein Stilmittel sein. Die Zeichentrickserie *Ed, Edd n Eddy* zeichnete jede Pose dreimal durch, damit die Konturen zittern; ihr Schöpfer Danny Antonucci sagt, das „helps keep the characters alive“ ([Ed, Edd n Eddy, Animation](https://en.wikipedia.org/wiki/Ed,_Edd_n_Eddy#Animation)). In Pixelart ist Kochen meist ungewollt. Schlitter nennt es Rauschen: „Any flickering pixels that draw the eye away from the overall motion I would describe as noise.“ Er findet es am leichtesten „when repeatedly playing back the cycle at full speed“, und als Abhilfe schlägt er vor, Farben zu reduzieren und Cluster zu vereinfachen ([Pixelblog 58](https://www.slynyrd.com/blog/2025/10/2/pixelblog-58-top-down-character-animation-part-3)). + + ## Werkzeuge, die die Form halten + + ### Onion Skinning + + **Onion Skinning** zeigt die Nachbarbilder durchscheinend unter dem aktuellen Bild. Der Name kommt von dünnem Zwiebelschalenpapier, das Zeichner früher über eine Lichtquelle legten, um die Zeichnung davor und danach zu sehen ([Onion skinning](https://en.wikipedia.org/wiki/Onion_skinning)). Aseprite, LibreSprite, Pixelorama und Krita haben es alle; wie du es einschaltest und wie viele Bilder es zeigt, steht in [Einzelbilder im Editor](/animation/editor-zeitleiste). + + Damit vergleichst du Kopfoberkante, Augenreihe und Kontur mit dem Bild davor. Schalt es aus, wenn du Farben eines Einzelbilds beurteilst, denn die Tönung verfälscht sie. + + ### Kopieren statt neu zeichnen + + Jedes Neuzeichnen ist eine Gelegenheit, vom Modell abzuweichen. Kopier deshalb das vorige Bild und änder nur, was sich bewegt. Teile, die sich nicht ändern, kannst du **verknüpfen**: Verknüpfte Cels teilen sich ein Bild, „When you modify one of these cels, all linked cels are modified“ ([Linked Cels](https://www.aseprite.org/docs/linked-cels/)). Was verknüpft ist, kann zwischen den Bildern nicht auseinanderlaufen. Alle vier Editoren können Bilder kopieren und Cels verknüpfen, Krita nennt verknüpfte Bilder Clone Frames; die Bedienung steht in [Einzelbilder im Editor](/animation/editor-zeitleiste). Verschieb Teile mit der Auswahl um ganze Pixel, statt sie nachzuzeichnen. + + ### Teile auf Ebenen, Details zuletzt + + Leg Teile, die sich unabhängig bewegen, auf eigene Ebenen. Schlitter animiert zuerst eine schlichte Grundfigur und legt Umhang und Ausrüstung auf eine eigene Ebene darüber (Pixelblog 55). In [Pixelblog 25](https://www.slynyrd.com/blog/2020/1/23/pixelblog-25-motion-cycles) begründet er die Reihenfolge: „The more detailed the design, the more difficult it will be to keep the movement clean.“ Eine weitere Ebene mit waagrechten **Hilfslinien** an Kopfoberkante, Augen, Schultern, Hüfte und Füßen zeigt dir in jedem Bild, ob etwas verrutscht ist. Beim Export blendest du sie aus. Auf Karopapier übernehmen die Linien des Papiers diese Aufgabe. + + ### Eine feste Palette + + Nimm in jedem Bild dieselben Farben. Eine neue Farbe in einem einzigen Bild flackert in der Schleife. Wie du eine Palette anlegst, steht in [Farbe und Paletten](/pixelart/farbe-paletten). + + > [!PRAXIS] Fehler, die man nebeneinander nicht sieht + > Schlitter legte die acht Richtungen seiner Figur zuerst als Standbilder nebeneinander. Dann setzte er sie zu einer Drehung zusammen und spielte sie ab: „This revealed many errors and issues I could not see by looking at them next to each other.“ Beim Laufzyklus ordnete er alle Richtungen im Kreis an, ließ sie gleichzeitig laufen und prüfte Bild für Bild einen Körperteil nach dem anderen, besonders das Auf und Ab des Kopfes, den Drehpunkt der Schulter und den größten Ausschlag der Glieder (Pixelblog 55). Konstanz prüft man in Bewegung, nicht im Vergleich von Standbildern. + + ## Sub-Pixel-Animation: Bewegung unter einem Pixel + + Manchmal soll sich etwas weniger als einen Pixel bewegen, etwa der Brustkorb beim Atmen. Medeiros: „Wait, you can move things less than 1 pixel? No, you can't but you can fake some very subtle movements“ ([< 1 Pixel Movement](https://saint11.art/blog/pixel-art-tutorials/#Subpixel)). Der wichtigste Trick: „Fade colors for an illusion of <1 pixel movement“. Ein Mittelton zwischen Figur und Hintergrund liest das Auge als halben Schritt. Eine Kante, die in drei Bildern einen Pixel nach rechts wandert, `#` dunkel, `+` Mittelton: + + ```text + Bild 1 Bild 2 Bild 3 + ####.... ####+... #####... + ####.... ####+... #####... + ####.... ####+... #####... + ``` + + Medeiros nennt weitere Regeln: „Mostly move light, avoid moving shapes“ und „Note that the silhouette barely changes“. Eine Bewegung im Inneren, etwa ein Lichtfleck, der wandert, hält die Form konstant und bewegt trotzdem etwas. Seine Warnung: „Careful: too many colors makes everything look blurry“. In seinen Ruhezyklen mit sechs Bildern setzt er Sub-Pixel-Bewegung gezielt ein (Character Idle). Schlitter findet Rauschen oft gerade in den Sub-Pixeln (Pixelblog 58). Sub-Pixel ist ein Werkzeug für Ruhe und kleine Bewegungen, kein Ersatz für eine klare Pose. + + ## Jedes Bild lesbar: Silhouette pro Bild + + Konstanz heißt nicht, dass jedes Bild gleich aussieht, sondern dass jedes Bild dieselbe Figur zeigt und als Pose lesbar bleibt. Kyle Bunk (Firaxis) achtet darauf, dass jede Pose als Silhouette klar bleibt, und zeigt ein Gegenbeispiel: ein Bild mitten in einer Rolle, in dem die Figur zu einer schwarzen Kugel wird ([High Resolution Pixel Art and Animation, ab 10:23](https://www.youtube.com/watch?v=Ih65Kg4DTw8&t=623s)). Schlitter: „What looks best in one static position might become undefined noise in other frames of the animation“ (Pixelblog 55). Prüf deshalb jedes Bild für sich als schwarze Fläche; wie das geht, steht in [Silhouette und Formensprache](/pixelart/silhouette-formsprache) und [Prüfen, überarbeiten, dokumentieren](/pixelart/lesbarkeit-pruefen). Wischbilder sind die Ausnahme: Sie dürfen abstrakt sein, weil man sie nur im Vorbeigehen sieht. + + Weniger Details bedeuten weniger, was konstant bleiben muss. Tyriq Plummer zeigt eine Figur, deren Reißverschluss er auf eine Linie vereinfacht hat, weil er ihn sonst in jedem Bild neu ausarbeiten müsste ([Pixel Art and Animation in the Hi-Bit Age, ab 23:00](https://www.youtube.com/watch?v=ZR_JBgNEeVM&t=1380s)). + + Eine Prüfliste für jede Fassung: + + ```text + Konstanz-Check, Fassung … + [ ] Gesamthöhe gleich + [ ] Kopf: Breite, Höhe gleich + [ ] Augen: Reihe, Abstand + [ ] Arme, Beine: Länge, Dicke + [ ] Kontur überall 1 px + [ ] Lichtseite gleich + [ ] keine neuen Farben + [ ] Silhouette je Bild lesbar + [ ] jede Änderung mit Grund + ``` + + Prüf in dieser Reihenfolge: erst die Schleife in Originalgröße und voller Geschwindigkeit, mehrmals, und notier, wo etwas flackert. Dann die betroffenen Bilder mit Onion Skinning gegen ihre Nachbarn. Zuletzt misst du: Reihen und Spalten zählen geht im Editor mit Raster und auf Karopapier ohne Hilfsmittel. + + > [!TIP] Onion Skinning auf Papier + > Leg das neue Blatt über das vorige und halt beides gegen ein Fenster. Bei Haftzetteln klappst du das obere Blatt hin und her und siehst, was springt. Genau so haben Zeichner gearbeitet, bevor es Editoren gab. + + > [!INTERVIEW] + > „Was heißt ‚on model‘, und wie hältst du eine Pixelfigur über alle Bilder auf Modell?“ Gute Antwort: On model heißt, dass jedes Bild zur festgelegten Figur passt, in Proportionen, Details, Kontur, Licht und Farben. Ich arbeite mit einem Modellblatt, kopiere Bilder statt sie neu zu zeichnen, verknüpfe unveränderte Teile und lege bewegliche Teile auf Ebenen. Geprüft wird in der Schleife bei voller Geschwindigkeit, weil Flackern im Standbild nicht auffällt, dann mit Onion Skinning und Messen. Gewollte Änderungen wie Stauchen oder Wischbilder schreibe ich mit Grund in die Bildliste. + + ## Häufige Fehler + + - **Jedes Bild neu gezeichnet.** Die Kanten kochen. Kopier das vorige Bild und änder nur, was sich bewegt. + - **Nur Standbilder verglichen.** Nebeneinander sieht alles gleich aus. Spiel die Schleife ab. + - **Nur vergrößert geprüft.** Im Zoom siehst du Einzelheiten, in Originalgröße das, was ein Spieler sieht. Spiel die Schleife in Originalgröße ab. + - **Masse ändert sich.** Die Figur wird beim Atmen kleiner, ohne breiter zu werden. Höhe und Breite gehören zusammen. + - **Neue Farbe in einem Bild.** Ein Zwischenton, der nur einmal vorkommt, flackert. + - **Zu viele Zwischentöne.** Sub-Pixel mit vielen Farben macht die Figur unscharf. + - **Detail ohne Plan.** Ein Detail, das in jedem Bild neu gezeichnet werden muss, ist eine Stelle, an der die Form kippt. Vereinfach es vor dem Animieren. + - **Gewollte Änderung nicht notiert.** Später weißt du nicht mehr, ob die Stauchung in Bild 3 Absicht oder Versehen war. + + ## Zusammenfassung + + - On model heißt: Jedes Bild passt zur festgelegten Figur. Ein Modellblatt hält sie fest. + - Maße, Masse, Details, Kontur, Licht und Palette bleiben gleich, außer du änderst sie mit Grund. + - Typische Fehler sind ein Pixel: Kopf wächst, Auge springt, Kontur doppelt, Licht wechselt, Kanten kochen. + - Onion Skinning, Kopieren, verknüpfte Cels, Ebenen, Hilfslinien und eine feste Palette halten die Form, in jedem der vier Editoren. + - Sub-Pixel-Bewegung entsteht durch Zwischentöne und wanderndes Licht. Zu viele Töne machen unscharf. + - Jedes Bild braucht eine lesbare Silhouette, Wischbilder ausgenommen. + - Geprüft wird in der Schleife bei voller Geschwindigkeit, dann mit Onion Skinning und Messen. +exercises: + - id: fehler-oder-absicht + type: choice + title: Fehler oder Absicht? + prompt: | + Welche Unterschiede zwischen zwei Bildern einer Animation solltest du als möglichen Fehler prüfen? + options: + - text: Der Kopf ist in Bild 3 einen Pixel breiter, ohne dass sich die Figur dreht. + correct: true + why: Ohne Drehung gibt es keinen Grund für eine andere Kopfbreite. In der Schleife pumpt der Kopf. + - text: Der Glanzpunkt sitzt in einem Bild links oben, im nächsten rechts oben, obwohl das Licht gleich bleibt. + correct: true + why: Die Lichtseite gehört zum Modell. Ein Wechsel ohne Grund flackert. + - text: Im Kontaktbild ist der Ball breiter und flacher, bei etwa gleicher Fläche. + correct: false + why: Das ist Stauchen. Weil die Fläche gleich bleibt, bleibt die Masse gleich; die Änderung ist gewollt. + - text: Ein Wischbild zeigt den Arm als gestreckte, helle Form. + correct: false + why: Wischbilder verzerren absichtlich und stehen nur kurz. Sie müssen nicht auf Modell sein. + - text: Die Kontur ist in Bild 2 an der Schulter zwei Pixel dick, sonst überall einer. + correct: true + why: Eine doppelte Kontur an einer Stelle flackert in der Schleife, typisch nach dem Neuzeichnen. + explanation: | + Prüfen solltest du jede Änderung, für die du keinen Grund nennen kannst: Kopfbreite ohne Drehung, Lichtseite ohne neues Licht, Konturstärke ohne Absicht. Stauchen und Wischbilder ändern die Form ebenfalls, aber mit Grund, und gehören deshalb in die Bildliste statt in die Fehlerliste. Die Frage ist nie „ist es anders?“, sondern „weiß ich, warum es anders ist?“. + resources: + - title: Wikipedia · Off-model + url: https://en.wikipedia.org/wiki/Off-model + + - id: konstanz-pruefen + type: order + title: Erst abspielen, dann messen + prompt: | + Bring die Schritte einer Konstanzprüfung in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Die Schleife in Originalgröße und voller Geschwindigkeit mehrmals abspielen. + Notieren, wo etwas flackert, pulsiert oder springt. + Die betroffenen Bilder mit Onion Skinning gegen ihre Nachbarn legen. + Höhe, Kopfmaße, Augenreihe und Konturstärke zählen und mit dem Modell vergleichen. + Den abweichenden Teil aus einem guten Bild kopieren, statt ihn neu zu zeichnen. + Die Schleife erneut in voller Geschwindigkeit abspielen. + explanation: | + Zuerst die Schleife, weil Rauschen im Standbild nicht auffällt; Schlitter findet es am leichtesten beim wiederholten Abspielen in voller Geschwindigkeit. Onion Skinning und Messen grenzen die Ursache ein. Repariert wird durch Kopieren, weil ein neu gezeichneter Teil die nächste Abweichung mitbringt. Am Ende steht wieder die Schleife, denn nur dort zeigt sich, ob das Flackern weg ist. + resources: + - title: Slynyrd · Pixelblog 58 + url: https://www.slynyrd.com/blog/2025/10/2/pixelblog-58-top-down-character-animation-part-3 + + - id: augen-reihe + type: output + title: Wohin ist das Auge? + prompt: | + Zwei Bilder eines Würfels mit Augen. Um wie viele Reihen sind die Augen in Bild 2 verrutscht? Antworte mit der Zahl. + lang: text + code: | + Bild 1 Bild 2 + .######. .######. + #------# #------# + #-#--#-# #------# + #------# #-#--#-# + #++++++# #++++++# + .######. .######. + expected: | + 1 + accept: + - 1 Reihe + - eine + - eine Reihe + explanation: | + In Bild 1 stehen die Augen in der dritten Reihe, in Bild 2 in der vierten: eine Reihe tiefer, während der Würfel gleich bleibt. In der Schleife zuckt das Auge auf und ab. Das passiert oft, wenn ein Bild neu gezeichnet statt kopiert wurde. Eine Hilfslinie auf Augenhöhe hätte es sofort gezeigt. + resources: + - title: Slynyrd · Pixelblog 8 + url: https://www.slynyrd.com/blog/2018/8/19/pixelblog-8-intro-to-animation + + - id: messtabelle + type: output + title: Wie viele Bilder sind off model? + prompt: | + Du hast einen Ruhezyklus mit sechs Bildern ausgemessen. Gestaucht wird nichts, die Figur dreht sich nicht. Wie viele Bilder weichen vom Modell ab? Antworte mit der Zahl. + lang: text + code: | + Modell: Kopf 3×3, Augen Reihe 2, + Kontur 1 px + Bild Kopf Augen Kontur + 1 3×3 2 1 + 2 3×3 2 1 + 3 3×4 2 1 + 4 3×3 3 1 + 5 3×3 2 1 + 6 3×3 2 2 + expected: | + 3 + accept: + - 3 Bilder + - drei + explanation: | + Bild 3 hat einen Kopf mit 3 × 4 Pixeln, Bild 4 die Augen in Reihe 3, Bild 6 eine Kontur von 2 Pixeln. Drei Bilder, drei verschiedene Abweichungen. Weil es keine gewollte Stauchung und keine Drehung gibt, ist jede davon ein Kandidat für Flackern. Eine solche Tabelle ist mühsam, aber sie findet Fehler, die man beim Hinsehen übersieht. + resources: + - title: Wikipedia · Model sheet + url: https://en.wikipedia.org/wiki/Model_sheet + + - id: subpixel-weg + type: output + title: Anderthalb Pixel + prompt: | + Eine Kante wandert in vier Bildern nach rechts. Wenn du den Mittelton `+` als halben Pixel liest: Um wie viele Pixel ist die Kante von Bild 1 bis Bild 4 gewandert? Antworte mit der Zahl. + lang: text + code: | + Bild 1 ####.... + Bild 2 ####+... + Bild 3 #####... + Bild 4 #####+.. + expected: | + 1,5 + accept: + - "1.5" + - 1,5 px + - 1,5 Pixel + - anderthalb + explanation: | + Von Bild 1 zu 2 kommt ein halber Pixel dazu, von 2 zu 3 der zweite halbe, von 3 zu 4 wieder ein halber: zusammen 1,5 Pixel. Das Raster erlaubt nur ganze Pixel, der Mittelton täuscht den halben vor. So bewegt sich etwas in vier Bildern gleichmäßig, das ohne Mittelton nur in ganzen Pixeln springen könnte. Medeiros nennt das „Fade colors for an illusion of <1 pixel movement“. + resources: + - title: Saint11 · < 1 Pixel Movement + url: https://saint11.art/blog/pixel-art-tutorials/#Subpixel + + - id: werkzeuge-begriffe + type: gap + title: Fünf Werkzeuge der Konstanz + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Beim ⟦Onion Skinning⟧ siehst du die Nachbarbilder durchscheinend unter dem aktuellen Bild. + ⟦Verknüpfte⟧ Cels teilen sich ein Bild: Änderst du eines, ändern sich alle. + Ein Umhang auf einer eigenen ⟦Ebene⟧ lässt sich getrennt bearbeiten und ausblenden. + Ein Blatt, das Proportionen und Ansichten einer Figur festhält, heißt ⟦Modellblatt⟧. + Eine Bewegung unter einem Pixel täuschst du mit ⟦Zwischentönen⟧ vor. + gaps: + - label: Nachbarbilder sehen + hint: Benannt nach dünnem Papier. + accept: ["Onion-Skinning", "Zwiebelhaut"] + - label: Geteiltes Bild + hint: Auf Englisch linked. + accept: ["Verlinkte", "Linked", "Gelinkte"] + - label: Getrennt bearbeiten + hint: Auf Englisch Layer. + accept: ["Layer"] + - label: Festgelegte Figur + hint: Auf Englisch Model Sheet. + accept: ["Model Sheet", "Model-Sheet", "Modellbogen"] + - label: Farben zwischen Figur und Hintergrund + hint: Weder ganz dunkel noch leer. + accept: ["Mitteltönen", "Zwischenfarben", "Mittelton", "Zwischentöne", "Zwischenton", "Mitteltöne"] + explanation: | + Onion Skinning zeigt die Nachbarn, verknüpfte Cels verhindern, dass sich gleiche Teile auseinanderentwickeln, Ebenen trennen bewegliche Teile vom Rest. Das Modellblatt ist der Maßstab, an dem du jedes Bild misst. Zwischentöne zeigen Bewegungen unter einem Pixel, solange es wenige bleiben. + resources: + - title: Aseprite Docs · Linked Cels + url: https://www.aseprite.org/docs/linked-cels/ + + - id: kopf-pulsiert + type: bug + title: Der Kopf pulsiert + prompt: | + Ein Ruhezyklus mit drei Bildern läuft in Schleife. Bild 2 sinkt gewollt einen Pixel ab, Bild 3 soll Bild 1 gleichen. Beim Abspielen pulsiert der Kopf. Finde die Pixelreihe, in der Bild 3 vom Modell abweicht. + lang: text + code: | + Bild 1 Bild 2 Bild 3 + ......... ......... ...###... + ...###... ......... ...###... + ...###... ...###... ...###... + ...###... ...###... ...###... + ....#.... ...###... ....#.... + ..#####.. ....#.... ..#####.. + .#.###.#. ..#####.. .#.###.#. + .#.###.#. .#.###.#. .#.###.#. + ...###... .#.###.#. ...###... + ...#.#... ...###... ...#.#... + ...#.#... ...#.#... ...#.#... + ...#.#... ...#.#... ...#.#... + ...#.#... ...#.#... ...#.#... + lines: [2] + hints: + - Vergleich Bild 3 Reihe für Reihe mit Bild 1, nicht mit Bild 2. + explanation: | + In der ersten Pixelreihe hat nur Bild 3 einen Kopf. Sein Kopf ist vier Reihen hoch statt drei, der Rest stimmt mit Bild 1 überein. In der Schleife wird der Kopf so bei jedem dritten Bild größer. Bild 2 weicht auch ab, aber gewollt und als Ganzes: Die Figur sinkt einen Pixel, der Kopf bleibt gleich groß. Bild 3 als Kopie von Bild 1 anzulegen, hätte den Fehler verhindert. + resources: + - title: Aseprite Docs · New Frame + url: https://www.aseprite.org/docs/new-frame/ + + - id: licht-wechselt + type: bug + title: Die Kiste blinkt + prompt: | + Eine Kiste landet und wird dabei gewollt gestaucht. Das Licht kommt immer von links. Beim Abspielen blinkt die Kiste im mittleren Bild. Klick die Beschriftung des Bildes an, das aus der Reihe fällt. + lang: text + code: | + Bild 1 + ######## + #--++++# + #--++++# + #--++++# + #--++++# + ######## + Bild 2 (gestaucht) + ########## + #++++++--# + #++++++--# + #++++++--# + ########## + Bild 3 + ######## + #--++++# + #--++++# + #--++++# + #--++++# + ######## + lines: [8] + explanation: | + In Bild 2 liegt die helle Seite rechts, obwohl das Licht von links kommt. Die Stauchung selbst ist in Ordnung: 10 × 5 statt 8 × 6 Pixel, fast dieselbe Fläche. Gewollt war die Form, ungewollt der Lichtwechsel; in der Schleife springt die helle Fläche von links nach rechts und zurück. Beim Neuzeichnen einer gestauchten Pose passiert das leicht, wenn man das Licht nicht mitkopiert. + resources: + - title: Saint11 · Pixel Art Fundamentals 1 + url: https://saint11.art/blog/pixel-art-tutorials/#Fundamentals + + - id: kontur-doppelt + type: bug + title: Ein Rand flackert + prompt: | + Ein Ball soll in beiden Bildern gleich aussehen, nur der Glanz wandert. Beim Abspielen flackert der rechte Rand. Finde die Reihe und korrigiere sie so, dass Bild 2 wieder dieselbe Kontur hat wie Bild 1. + lang: text + code: | + Bild 1 Bild 2 + ..####.. ..####.. + .#--++#. .#+--+#. + #--++++# #+--+++# + #-+++++# #+-++++# + #++++++# #+++++## + #++++++# #++++++# + .#++++#. .#++++#. + ..####.. ..####.. + lines: [6] + fix: + - line: 6 + answers: + - "#++++++# #++++++#" + explanation: | + In der fünften Pixelreihe ist die Kontur von Bild 2 rechts zwei Pixel dick, in Bild 1 einer. Das wandernde Licht ist gewollt, eine Sub-Pixel-Bewegung im Inneren, bei der die Silhouette gleich bleibt. Die doppelte Kontur dagegen ändert die Silhouette an einer einzigen Stelle und flackert. Die korrigierte Reihe ist in beiden Bildern gleich. + resources: + - title: Saint11 · < 1 Pixel Movement + url: https://saint11.art/blog/pixel-art-tutorials/#Subpixel + + - id: subpixel-erklaeren + type: explain + title: Weniger als ein Pixel + prompt: | + Pedro Medeiros sammelt in einem Tutorial Tricks für Bewegungen unter einem Pixel. Erkläre in wenigen Sätzen, warum diese vier Regeln einer Figur helfen, auf Modell zu bleiben, und wo die Grenze liegt. + lang: text + code: | + Saint11, < 1 Pixel Movement + - Fade colors for an illusion + of <1 pixel movement + - Mostly move light, avoid + moving shapes + - Note that the silhouette + barely changes + - Careful: too many colors + makes everything look blurry + points: + - Ein Zwischenton an der Kante liest das Auge als halben Schritt, ohne dass die Form neu gezeichnet wird. + - Wer Licht statt Form bewegt, lässt Silhouette und Maße gleich; die Figur bleibt auf Modell. + - Weil die Silhouette fast gleich bleibt, eignet sich Sub-Pixel für kleine Bewegungen wie Atmen, nicht für große. + - Jeder zusätzliche Ton macht die Figur unschärfer und kann flackern; Schlitter findet Rauschen oft gerade in den Sub-Pixeln. + explanation: | + Sub-Pixel-Animation bewegt Farben, nicht Umrisse. Ein Mittelton an der Kante oder ein wandernder Lichtfleck zeigt Bewegung, während Silhouette, Maße und Kontur gleich bleiben, also genau die Dinge, die die Figur auf Modell halten. Die Grenze ist die Klarheit: Viele Zwischentöne verwischen die Figur, und Töne, die von Bild zu Bild auftauchen und verschwinden, werden zu Rauschen. Deshalb prüfst du Sub-Pixel-Bewegung immer in der Schleife bei voller Geschwindigkeit. + resources: + - title: Saint11 · < 1 Pixel Movement + url: https://saint11.art/blog/pixel-art-tutorials/#Subpixel + + - id: drei-bilder-karopapier + type: practice + title: Drei Bilder auf Karopapier + prompt: | + Nimm eine Figur, die du schon gezeichnet hast, oder eine Gliederpuppe, und zeichne sie auf Karopapier in drei Bildern einer kleinen Bewegung, etwa Atmen oder Kopfnicken, ein Kästchen pro Pixel. Zieh vorher waagrechte Hilfslinien an Kopfoberkante, Augen, Schultern, Hüfte und Füßen. Übertrag Bild 1 als Kopie in Bild 2 und 3 und änder nur, was sich bewegt. Notiere hier die Maße jedes Bildes und was du absichtlich änderst. + lang: prose + starter: | + Figur, Größe in Kästchen: + Bewegung: + Hilfslinien (Reihen): + Bild 1, Maße (Höhe, Kopf, Augenreihe): + Bild 2, Maße und gewollte Änderung: + Bild 3, Maße und gewollte Änderung: + Beim Hin- und Herblättern aufgefallen: + checklist: + - Für jedes Bild sind Gesamthöhe, Kopfmaße und Augenreihe notiert. + - Jede Abweichung vom Bild 1 hat einen notierten Grund. + - Kontur, Lichtseite und Farben sind in allen drei Bildern gleich. + - Du hast die Bilder übereinander gegen ein Fenster gehalten oder hin- und hergeblättert und das Ergebnis notiert. + explanation: | + Hilfslinien und Kopieren machen Konstanz zur Gewohnheit, bevor du im Editor arbeitest. Die Maße für jedes Bild aufzuschreiben, wirkt pedantisch, findet aber genau den einen Pixel, den man sonst erst in der Schleife bemerkt. Welche Figur du nimmst und wie sie sich bewegt, entscheidest du; die Übung prüft nur, ob sie in allen drei Bildern dieselbe bleibt. + resources: + - title: Wikipedia · Onion skinning + url: https://en.wikipedia.org/wiki/Onion_skinning + + - id: konstanz-check-anwenden + type: practice + title: Der Konstanz-Check an einer eigenen Animation + prompt: | + Nimm eine eigene Animation oder eine Studie aus diesem Kurs und arbeite den Konstanz-Check aus der Lektion ab. Spiel sie zuerst in Originalgröße und voller Geschwindigkeit, auf dem Handy etwa als GIF in der Galerie, und notier, wo etwas flackert. Geh danach Bild für Bild durch und notier jede Abweichung mit Bildnummer und Grund, falls es einen gibt. + lang: prose + starter: | + Animation, Fassung: + Beim Abspielen aufgefallen (wo, welches Bild): + Abweichungen (Bild, was, gewollt ja/nein, Grund): + Silhouette je Bild lesbar? Problembilder: + Was ich in der nächsten Fassung ändere: + checklist: + - Du hast zuerst in Originalgröße und voller Geschwindigkeit abgespielt und das notiert. + - Jede Abweichung steht mit Bildnummer da. + - Jede Abweichung ist als gewollt mit Grund oder als ungewollt markiert. + - Du hast jedes Bild einzeln auf seine Silhouette geprüft. + - Die Änderungen für die nächste Fassung kommen in eine neue Datei; die alte Fassung bleibt erhalten. + explanation: | + Die Checkliste macht aus einem Eindruck („irgendwas flackert“) eine Liste mit Bildnummern. Die Reihenfolge, erst abspielen, dann einzeln prüfen, folgt Schlitters Erfahrung, dass Rauschen in Bewegung auffällt und im Standbild nicht. Weil jede Änderung eine neue Fassung bekommt, kannst du danach vergleichen, ob die Korrektur geholfen hat. + resources: + - title: Slynyrd · Pixelblog 55 + url: https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation diff --git a/content/animation/modules/gehen-laufen.yaml b/content/animation/modules/gehen-laufen.yaml new file mode 100644 index 0000000..985d779 --- /dev/null +++ b/content/animation/modules/gehen-laufen.yaml @@ -0,0 +1,479 @@ +id: gehen-laufen +title: Gehen und Laufen in wenigen Bildern +level: 2 +minutes: 130 +summary: Aus welchen Posen ein Gangzyklus besteht, was die Flugphase beim Laufen ändert, welche Bilder bei vier, sechs oder acht Bildern bleiben, wie Gehen in der Draufsicht lesbar wird und wie ein Ruhezyklus lebt, ohne zu ticken. +place: unterwegs +goals: + - Du benennst die Posen eines Gangzyklus (Kontakt, Tiefpunkt, Passing, Hochpunkt) und ordnest sie in einer Bildliste. + - Du erklärst, was einen Laufzyklus vom Gehen unterscheidet, und wo der Körper beim Gehen und beim Laufen am tiefsten ist. + - Du kürzt einen Zyklus auf vier, sechs oder acht Bilder, behältst die tragenden Posen und rechnest Zyklusdauer und Schritte pro Sekunde aus. + - Du machst Gehen in der Draufsicht lesbar, mit Kopfbewegung, Staffelung und gespiegelten Bildern. + - Du planst einen Ruhezyklus mit wenigen Bildern, gleicher Masse und ungleichen Dauern. +resources: + - title: Saint11 (Pedro Medeiros) · Walk Cycle + url: https://saint11.art/blog/pixel-art-tutorials/#Walk + - title: Slynyrd (Raymond Schlitter) · Pixelblog 8, Intro to Animation + url: https://www.slynyrd.com/blog/2018/8/19/pixelblog-8-intro-to-animation + - title: Slynyrd · Pixelblog 55, Top Down Character Animation + url: https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation + - title: Wikipedia · Walk cycle + url: https://en.wikipedia.org/wiki/Walk_cycle + - title: Muybridge · Animal Locomotion, Tafel 3, Walking (Wikimedia Commons) + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_walking_%28rbm-QP301M8-1887-003%29.jpg +lesson: | + Deine Gliederpuppe geht in vier Bildern: rechtes Bein vorn, Beine zusammen, linkes Bein vorn, Beine zusammen. Die Beine bewegen sich, aber die Puppe gleitet wie auf Schienen über das Blatt. Ihr Kopf bleibt in jedem Bild auf derselben Höhe, und nichts an ihr verrät, dass sie ihr Gewicht von einem Bein aufs andere bringt. Beim Gehen hebt und senkt sich der Körper mit jedem Schritt. Dieses Auf und Ab musst du zeichnen, sonst fehlt es. + + Diese Lektion zeigt die Posen eines Gangzyklus, was beim Laufen anders ist, welche Bilder du bei vier, sechs oder acht Bildern behältst, wie Gehen in der Draufsicht lesbar bleibt und wie ein Ruhezyklus lebt, ohne zu ticken. Wie Godot die Richtung wählt und wie du Fußrutschen ausrechnest, steht in [Animationen zuordnen](/godot/animationen). + + ## Der Gangzyklus: Kontakt, Tiefpunkt, Passing, Hochpunkt + + Ein **Gangzyklus** (Walk Cycle) ist eine Folge von Bildern, die in Schleife läuft, damit man nicht jeden Schritt neu zeichnen muss ([Walk cycle](https://en.wikipedia.org/wiki/Walk_cycle)). Ein Zyklus enthält zwei Schritte, einen mit jedem Bein; ein **Schritt** ist also ein halber Zyklus. Jeder Schritt hat vier Posen. Pedro Medeiros (Saint11) beschreibt sie in seinem Tutorial zum Gehen ([Walk](https://saint11.art/blog/pixel-art-tutorials/#Walk)): + + - **Kontakt** (Contact): „The first frame where the front leg touches the ground“. Beide Füße sind am Boden, die Beine am weitesten gespreizt. + - **Tiefpunkt** (Down): „The impact causes the torso and head to go down“. Das vordere Bein fängt das Gewicht ab, sein Knie beugt sich. + - **Passing**: Das freie Bein schwingt am Standbein vorbei, der Körper steigt wieder. + - **Hochpunkt** (Up): „Highest point in the animation“. Der Körper steht oben auf dem Standbein und kippt gleich in den nächsten Kontakt. + + Der englische Wikipedia-Artikel nennt dieselben vier Posen, ist aber als schwach belegt markiert. Ausführlich behandelt Richard Williams das Gehen in seinem Lehrbuch *The Animator's Survival Kit*; den Teil gibt es seit 2021 als eigenes Heft „Walks“ ([AWN](https://www.awn.com/news/animators-survival-kit-now-available-mini-guides)). + + Zwei Regeln von Medeiros gelten für jeden Gang. „Arms always move with the opposite leg“: Ist das linke Bein vorn, ist der rechte Arm vorn. Und: „Leg on ground always moves towards the back“. Der Fuß, der trägt, wandert relativ zum Körper gleichmäßig nach hinten, während der Körper über ihn hinweggeht. + + Die Kopfhöhe in einem Zyklus mit acht Bildern, ein `#` je Pixel über der tiefsten Stelle plus eins: + + ```text + Bild Pose Kopf + 1 Kontakt R ### + 2 Tiefpunkt # + 3 Passing ### + 4 Hochpunkt ##### + 5 Kontakt L ### + 6 Tiefpunkt # + 7 Passing ### + 8 Hochpunkt ##### + ``` + + Der Kopf macht zwei Wellen pro Zyklus, eine je Schritt. Tief ist er kurz nach dem Kontakt, hoch um das Passing herum. + + Wo genau die Welle ihre Spitzen hat, hängt vom Stil ab. Raymond Schlitter (Slynyrd) hat für einen realistischen Gang Videoaufnahmen auf acht Bilder reduziert. Bei ihm ist die Figur im Kontakt am tiefsten und im Passing am größten ([Pixelblog 50](https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle)). Medeiros legt den tiefsten Punkt kurz hinter den Kontakt und den höchsten hinter das Passing. In beiden Fassungen ist der Kopf beim Passing nicht am tiefsten. Schlitter achtet außerdem auf die Form der Welle. Sein Kopf beschreibt eher Dreiecke: „If the head position across the sequence creates a perfect sine wave, the uniform motion feels a bit unnatural.“ + + > [!MERKE] + > Ein Zyklus hat zwei Schritte, jeder Schritt Kontakt, Tiefpunkt, Passing, Hochpunkt. Beim Gehen ist der Kopf nahe dem Kontakt tief und nahe dem Passing hoch. Die Arme schwingen gegen die Beine, der tragende Fuß wandert nach hinten. + + ## Laufen: die Flugphase + + Laufen unterscheidet sich vom Gehen durch einen Moment, in dem kein Fuß den Boden berührt. Wikipedia: „Running has an aerial phase in which both, or all, feet are above the ground at some stage“, während beim Gehen mindestens ein Fuß immer Kontakt hat ([Running](https://en.wikipedia.org/wiki/Running)). Damit verschiebt sich das Auf und Ab. Medeiros' Grundform eines Laufzyklus hat vier Posen je Schritt: „A simple cycle can be understood in 4 frames then you repeat everything, with the other leg“ ([Run Cycle](https://saint11.art/blog/pixel-art-tutorials/#RunCycleSimple)). + + - **Sprung**: beide Beine in der Luft, höchster Punkt. + - **Fallen**: Die Figur sinkt ein wenig, Arme und Beine öffnen sich, die weiteste Pose. + - **Kontakt**: Das vordere Bein trifft gestreckt auf. + - **Erholen** (Recover): Das vordere Bein geht zurück, das hintere vor, gleich kreuzen sie sich. Das ist der tiefste Punkt. + + Am tiefsten ist die laufende Figur also kurz nach dem Kontakt, wenn das Bein das Gewicht abfängt, am höchsten in der Luft. Beim Gehen liegt der höchste Punkt dagegen am Boden: Der Körper steht oben auf dem Standbein. Wer einen Gang durch kürzere Dauern zum Laufen machen will, bekommt deshalb kein Laufen, sondern einen hastigen Gang ohne Flugphase. + + Schlitter nennt in seiner Einführung drei Dinge für einen Laufzyklus mit wenigen Bildern: kräftige Schrittposen mit gestreckten Gliedern und nach vorn geneigtem Körper, ein Passing-Bild mit allen Gliedern nah am Körper, und senkrechte Bewegung, „to get the bounce effect“. Sein Vorbild ist der Lauf von Mega Man aus drei Zeichnungen, in dem das Passing-Bild zweimal vorkommt ([Pixelblog 8](https://www.slynyrd.com/blog/2018/8/19/pixelblog-8-intro-to-animation)). + + ## Wenige Bilder: vier, sechs oder acht + + Pixelart-Gänge haben selten zwölf Bilder. Medeiros vergleicht einen Gang mit zwölf und einen mit sechs Bildern und nennt den kurzen „Useful in low resolution“. In der Fassung mit zwölf markiert er drei Bilder je Schritt als wichtig: Kontakt, den tiefsten Punkt und das Passing. Schlitter beschreibt, wie er aus einem Laufzyklus mit acht Bildern kürzere macht. Kontakt und Passing behält er immer: „contact and pass frames are crucial keyframes“. Für sechs Bilder streicht er das Rückfederbild (Recoil), das dem Kontakt ähnelt, für vier Bilder den Hochpunkt (Pixelblog 8). Für seinen realistischen Gang schreibt er: „I feel 8 frames strikes a solid balance between economy and fluidity“. Die Fassung mit vier Bildern zeige die wichtigsten Keys, wirke allein aber etwas dünn (Pixelblog 50). + + Wer Bilder streicht, muss die übrigen länger stehen lassen, sonst wird der Gang schneller. Schlitter: „each pose in the 8-frame cycle is shown for 80 milliseconds, while each pose in the 4-frame cycle is shown 160 milliseconds.“ Das Modell rechnet Zyklusdauer und Schritte pro Sekunde: + + ```python run + # Bilder, ms je Bild + zyklen = [(8, 80), (4, 160), + (6, 100)] + for n, ms in zyklen: + dauer = n * ms + # 2 Schritte je Zyklus + pro_s = 2000 / dauer + print(n, dauer, + round(pro_s, 1)) + ``` + + Acht mal 80 und vier mal 160 ms ergeben beide 640 ms, rund drei Schritte pro Sekunde. Der Zyklus mit sechs Bildern zu je 100 ms aus Schlitters Draufsicht-Serie ist etwas schneller ([Pixelblog 58](https://www.slynyrd.com/blog/2025/10/2/pixelblog-58-top-down-character-animation-part-3)). 100 ms sind im Spiel genau 6 Ticks, 80 und 160 ms gehen nicht in ganzen Ticks auf; warum das zählt, steht in [Timing und Spacing](/animation/timing-spacing). + + Auch das Auf und Ab muss nicht gleichmäßig sein. In Schlitters Laufzyklus von oben geht der Kopf je Schritt einen Pixel nach unten, noch einen nach unten und zwei nach oben. Der Weg nach oben ist schneller als der nach unten, und der Kopf hüpft, statt einer Sinuswelle zu folgen ([Pixelblog 55](https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation)). + + Im Spiel kommt eine Größe dazu: Die Figur bewegt sich mit einem Tempo über den Boden. Passt es nicht zum Weg, den der tragende Fuß pro Zyklus nach hinten wandert, rutschen die Füße. Die Rechnung steht in [Animationen zuordnen](/godot/animationen). + + > [!PRAXIS] Beine zuerst + > Wie Schlitter seinen realistischen Gang aus 72 Videobildern auf acht verdichtet, steht in [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen). Für das Zeichnen eines Zyklus nennt er in [Pixelblog 25](https://www.slynyrd.com/blog/2020/1/23/pixelblog-25-motion-cycles) eine feste Reihenfolge: „Animate the legs first, then the arms, head, and overall body movement.“ + + ## Gehen in der Draufsicht + + In einem Top-down-Spiel siehst du die Figur von schräg oben, und sie geht in vier oder acht Richtungen. Schlitter zeichnet mindestens drei Ansichten, nach oben, nach unten und zur Seite, und spiegelt die Seite für die Gegenrichtung, solange die Figur symmetrisch ist. Mit vier Richtungen lasse sich auch Bewegung in acht Richtungen umsetzen, wie in Secret of Mana oder A Link to the Past ([Pixelblog 22](https://www.slynyrd.com/blog/2019/10/21/pixelblog-22-top-down-character-sprites)). Für acht Richtungen zeichnet er fünf Ansichten und spiegelt drei (Pixelblog 55). Was der Zeichenaufwand für deine Figur bedeutet, steht in [Ansichten und Maßstab](/pixelart/ansichten-massstab). + + Von vorn und hinten überdecken sich die Beine. Medeiros erinnert an die Staffelung: „feet behind legs, legs behind torso, torso behind head“ ([Top Down Walk Cycle](https://saint11.art/blog/pixel-art-tutorials/#TopDownWalkCycle)). Sein Zyklus von vorn hat sechs Bilder. In drei geht ein Bein vor und der Arm derselben Seite zurück, dann: „Then flip those 3 frames horizontally for the other leg movement“. Für die Ansicht von hinten rät er zu weniger Auf und Ab an Rumpf und Kopf, für die Seite zu starken Kontrastpunkten an Händen und Füßen. Beim Laufen denkt er Kopf, Körper und Füße als „3 shapes on top of each other“; spiegeln darf man alles außer Haaren und anderen asymmetrischen Teilen ([Top Down Run](https://saint11.art/blog/pixel-art-tutorials/#TopDownRun)). + + Von vorn trägt der Kopf den Schritt. Schlitter: „The core expression of the motion comes from the bob of the head“ (Pixelblog 55). Eine Gliederpuppe von vorn, 11 Pixel hoch, in drei Bildern: Kontakt rechts, Passing, Kontakt links. + + ```text + Bild 1 Bild 2 Bild 3 + ......... ...###... ......... + ...###... ...###... ...###... + ...###... ....#.... ...###... + ....#.... ..#####.. ....#.... + ..#####.. .#.###.#. ..#####.. + .#.###.#. .#.###.#. .#.###.#. + .#.###.#. ...###... .#.###.#. + ...###... ...#.#... ...###... + ...#.#... ...#.#... ...#.#... + ...#.#... ...#.#... ...#.#... + ...#.#... ...#.#... ...#.#... + ...#..... ......... .....#... + ``` + + Im Kontakt steht der Kopf einen Pixel tiefer, und der Fuß, der vorn aufsetzt, reicht einen Pixel weiter nach unten, weil er näher am Betrachter ist. Bild 3 ist Bild 1 gespiegelt. Ob so wenig Unterschied bei deiner Figurengröße reicht, siehst du im Daumenkino und später in Originalgröße in [der Testszene](/animation/testszene). + + ## Ruhezyklen: atmen, ohne zu ticken + + Steht die Figur, läuft ein **Ruhezyklus** (Idle). Medeiros' kürzester hat zwei Bilder: einen Pixel nach unten mit geöffneten Armen und gebeugten Knien, einen Pixel nach oben mit gesenkten Armen. Dazu: „Character doesn't change mass“ ([Character Idle](https://saint11.art/blog/pixel-art-tutorials/#characterIdle)). Ein drittes Bild in der Mitte macht das Absinken langsamer und den Übergang der Knie weicher. Er warnt: „Vertical movement alone is boring“, und lässt eine Bewegung zur Seite die senkrechte ausgleichen. + + Ein Ruhezyklus soll nicht ticken wie ein Metronom. Schlitter fand gleichmäßige Dauern in jeder Geschwindigkeit „a bit robotic“ und hält die Bilder an den Enden der Bewegung länger als die dazwischen (Pixelblog 55). In einem anderen Ruhezyklus mit acht Bildern stehen die Bilder 1 bis 4 mit dem höchsten Punkt je 100 ms und die Bilder 5 bis 8 mit dem tiefsten Punkt je 50 ms; so will er die Schwerkraft betonen ([Pixelblog 52](https://www.slynyrd.com/blog/2024/9/26/pixelblog-52-idle-fighting-stance)). Ein neutraler Plan für einen Mehlsack, der atmet: + + ```text + Bild Dauer Pose + 1 400 ms oben + 2 100 ms Mitte + 3 300 ms unten, 1 px tiefer + 2 100 ms Mitte + ``` + + Bild 2 steht zweimal in der Liste, die Schleife läuft hin und zurück. Die Enden stehen lange, die Mitte kurz, oben länger als unten. Zwei weitere Mittel gegen das Ticken: Teile versetzt bewegen, etwa den Kopf ein Bild später als den Rumpf, und mehrere Schleifen auf einem Bild verschieden lang machen. Medeiros: „Making animations with different durations confuses the eye and makes it harder to see when the loop starts over“ ([Seamless Looping](https://saint11.art/blog/pixel-art-tutorials/#loop)). + + Schlitter nennt den Ruhezyklus „one of the most effective means of displaying personality“. Wie Haltung und Timing einen Zustand zeigen, behandelt [Körpersprache und Zustandswechsel](/animation/koerpersprache). + + > [!TIP] Dein eigener Gang als Referenz + > Stell das Handy seitlich auf Hüfthöhe und geh ein paar Schritte durchs Bild, gern in Zeitlupe: Das iPhone 17 nimmt Zeitlupe mit 120 oder 240 Bildern pro Sekunde auf ([Apple](https://www.apple.com/iphone-17/specs/)), Pixel-Telefone bieten unter anderem 1/8x ([Google](https://support.google.com/pixelcamera/answer/7064897?hl=en#slowmo_video)). Bild für Bild geht es auf dem Handy, indem du in der Galerie langsam durch die Zeitleiste schiebst. + + > [!INTERVIEW] + > „Ein Gangzyklus mit vier Bildern wirkt steif. Was prüfst du zuerst?“ Gute Antwort: Ob der Kopf auf und ab geht, nahe dem Kontakt tief und nahe dem Passing hoch, und zwar nicht als gleichmäßige Welle. Dann, ob die Arme gegen die Beine schwingen und der tragende Fuß gleichmäßig nach hinten wandert. Danach die Dauern: Ein kürzerer Zyklus braucht längere Bilder, sonst wird der Gang hastig. Erst wenn das stimmt, frage ich, ob mehr Bilder nötig sind. Beim Kürzen behalte ich Kontakt und Passing. + + ## Häufige Fehler + + - **Kopf auf einer Höhe.** Die Figur gleitet. Zeichne das Auf und Ab, auch wenn es nur ein Pixel ist. + - **Kopf beim Passing am tiefsten.** Beim Gehen sackt die Figur dann ein, während das Bein vorbeischwingt. Tief gehört in die Nähe des Kontakts. + - **Arm und Bein derselben Seite vorn.** Die Arme schwingen gegen die Beine. + - **Bilder gestrichen, Dauer gleich gelassen.** Vier statt acht Bilder bei gleicher Dauer machen den Gang doppelt so schnell. + - **Laufen als schneller Gang.** Ohne Flugphase und Vorlage bleibt es ein Gang, nur hastiger. + - **Gleichmäßige Welle.** Ein Kopf, der wie ein Sinus schwingt, wirkt bei Schlitter mechanisch. Lass ihn langsamer sinken und schneller steigen oder umgekehrt. + - **Asymmetrisches mitgespiegelt.** Beim Spiegeln wandern Scheitel, Tasche oder Waffe auf die andere Seite. Diese Teile zeichnest du für die zweite Hälfte neu. + - **Ruhezyklus mit gleichen Dauern und wechselnder Masse.** Er tickt, und die Figur pumpt. Enden länger halten, Breite und Höhe zusammen ändern. + + ## Zusammenfassung + + - Ein Gangzyklus hat zwei Schritte mit je vier Posen: Kontakt, Tiefpunkt, Passing, Hochpunkt. + - Beim Gehen ist der Kopf nahe dem Kontakt tief und oben auf dem Standbein hoch. Beim Laufen ist er kurz nach dem Kontakt am tiefsten und in der Flugphase am höchsten. + - Die Arme schwingen gegen die Beine, der tragende Fuß wandert gleichmäßig nach hinten. + - Beim Kürzen bleiben Kontakt und Passing. Weniger Bilder brauchen längere Dauern, sonst wird der Gang schneller. + - Das Auf und Ab hüpft besser, als es schwingt: ungleiche Schritte nach unten und oben. + - In der Draufsicht trägt der Kopf den Schritt. Die zweite Hälfte ist oft die erste gespiegelt, außer asymmetrischen Teilen. + - Ein Ruhezyklus braucht wenige Bilder, gleiche Masse, kleine Amplitude und ungleiche Dauern. +exercises: + - id: gang-ordnen + type: order + title: Ein Zyklus, zwei Schritte + prompt: | + Bring die Posen eines Gangzyklus in die richtige Reihenfolge. Der Zyklus beginnt mit dem Kontakt des rechten Fußes. + lang: prose + lines: | + Kontakt: Die rechte Ferse setzt vorn auf, beide Füße sind am Boden. + Tiefpunkt: Das rechte Knie beugt sich, der Kopf sinkt. + Passing: Das linke Bein schwingt am rechten vorbei. + Hochpunkt: Der Körper steht oben auf dem rechten Bein. + Kontakt: Die linke Ferse setzt vorn auf, beide Füße sind am Boden. + Tiefpunkt: Das linke Knie beugt sich, der Kopf sinkt. + Passing: Das rechte Bein schwingt am linken vorbei. + Hochpunkt: Der Körper steht oben auf dem linken Bein. + explanation: | + Jeder Schritt läuft Kontakt, Tiefpunkt, Passing, Hochpunkt. Nach dem Kontakt rechts trägt das rechte Bein, also schwingt das linke vorbei und setzt im nächsten Kontakt auf. Der zweite Schritt ist der erste mit vertauschten Seiten. Wer Passing und Tiefpunkt vertauscht, lässt den Körper sinken, während das Bein vorbeischwingt. + resources: + - title: Saint11 · Walk Cycle + url: https://saint11.art/blog/pixel-art-tutorials/#Walk + + - id: gehen-oder-laufen + type: choice + title: Wann ist es Laufen? + prompt: | + Welche Aussagen über Gehen und Laufen stimmen? + options: + - text: Beim Laufen gibt es einen Moment, in dem kein Fuß den Boden berührt. + correct: true + why: Das ist die Flugphase, das wichtigste Merkmal des Laufens. + - text: Beim Gehen berührt immer mindestens ein Fuß den Boden. + correct: true + why: Deshalb hat ein Gangzyklus keine Pose, in der beide Füße in der Luft sind. + - text: Beim Laufen liegt der höchste Punkt in der Flugphase. + correct: true + why: In Medeiros' Laufzyklus ist die Pose mit beiden Beinen in der Luft die höchste. Am tiefsten ist die Figur kurz nach dem Kontakt. + - text: Ein Laufzyklus ist ein Gangzyklus mit kürzeren Bilddauern. + correct: false + why: Kürzere Dauern machen einen hastigen Gang. Zum Laufen fehlen Flugphase, Vorlage und der höchste Punkt in der Luft. + - text: Gehen und Laufen haben ihren höchsten Punkt an derselben Stelle des Zyklus. + correct: false + why: Beim Gehen liegt er am Boden, wenn der Körper oben auf dem Standbein steht, beim Laufen in der Luft. + explanation: | + Laufen hat eine Flugphase, Gehen nicht. Damit verschiebt sich der höchste Punkt: Beim Gehen steht der Körper oben auf dem gestreckten Standbein, beim Laufen ist er oben, während er fliegt. Am tiefsten ist er in beiden Fällen nahe dem Kontakt, wenn ein Bein das Gewicht abfängt. Wer das weiß, zeichnet einen Laufzyklus von Grund auf und beschleunigt keinen Gang. + resources: + - title: Wikipedia · Running + url: https://en.wikipedia.org/wiki/Running + - title: Saint11 · Run Cycle + url: https://saint11.art/blog/pixel-art-tutorials/#RunCycleSimple + + - id: sechs-mal-hundert + type: output + title: Schritte pro Sekunde + prompt: | + Ein Gangzyklus hat 6 Bilder zu je 100 ms. Wie viele Schritte macht die Figur pro Sekunde? Antworte mit einer Zahl mit einer Nachkommastelle. + lang: text + code: | + Bild 1 2 3 4 5 6 + ms 100 100 100 100 100 100 + expected: | + 3,3 + accept: + - "3.3" + - 3,3 Schritte + - "3,33" + - "3.33" + hints: + - Ein Zyklus enthält zwei Schritte. + explanation: | + Der Zyklus dauert 6 × 100 = 600 ms. Er enthält zwei Schritte, also dauert ein Schritt 300 ms, und in einer Sekunde passen 1000 / 300 ≈ 3,3 Schritte. Wer einen Schritt mit einem Zyklus verwechselt, kommt auf 1,7. Ein Vergleich mit deinem eigenen Gang zeigt dir, ob das eher Gehen oder schon Eilen ist. + resources: + - title: Slynyrd · Pixelblog 58 + url: https://www.slynyrd.com/blog/2025/10/2/pixelblog-58-top-down-character-animation-part-3 + + - id: bilder-streichen + type: output + title: Gestrichen, aber nicht verlängert + prompt: | + Ein Gang hat 8 Bilder zu je 125 ms. Du streichst Bilder und lässt jedes übrige Bild 125 ms stehen. Was gibt das Programm aus? Die dritte Zahl sind Schritte pro Minute. + lang: python + code: | + ms = 125 + for n in (8, 6, 4): + d = n * ms + print(n, d, 120000 / d) + expected: | + 8 1000 120.0 + 6 750 160.0 + 4 500 240.0 + explanation: | + Zwei Schritte pro Zyklus, also Schritte pro Minute = 2 × 60 000 / Zyklusdauer = 120 000 / d. Mit 8 Bildern dauert der Zyklus eine Sekunde, 120 Schritte pro Minute. Mit 4 Bildern bei gleicher Dauer je Bild ist er halb so lang, und die Figur macht doppelt so viele Schritte. Deshalb stellt Schlitter die gekürzten Zyklen langsamer: 160 statt 80 ms je Bild bei 4 statt 8 Bildern. + resources: + - title: Slynyrd · Pixelblog 8 + url: https://www.slynyrd.com/blog/2018/8/19/pixelblog-8-intro-to-animation + + - id: kopf-ausschlag + type: output + title: Wie weit hüpft der Kopf? + prompt: | + Ein Laufzyklus von oben nach Schlitters Muster: Die Liste nennt, wie sich der Kopf von Bild zu Bild bewegt, plus heißt nach oben. Um wie viele Pixel liegt die höchste Kopfposition über der tiefsten? Antworte mit der Zahl. + lang: text + code: | + Bild 1→2 2→3 3→4 4→5 5→6 6→1 + Kopf −1 −1 +2 −1 −1 +2 + expected: | + 2 + accept: + - 2 px + - 2 Pixel + hints: + - Setz den Kopf in Bild 1 auf 0 und rechne die Positionen der Reihe nach aus. + explanation: | + Mit Bild 1 bei 0 steht der Kopf in Bild 2 bei −1, in Bild 3 bei −2, in Bild 4 wieder bei 0, dann −1 und −2. Höchste Position 0, tiefste −2, Unterschied 2 Pixel. Die Bewegung nach unten verteilt sich auf zwei Bilder, die nach oben passiert in einem. Das ist Schlitters Mittel gegen die gleichmäßige Welle: Der Kopf hüpft. + resources: + - title: Slynyrd · Pixelblog 55 + url: https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation + + - id: achter-zyklus + type: gap + title: Acht Bilder benennen + prompt: | + Trag die fehlenden Posen ein. Die Balken zeigen die Kopfhöhe. + lang: text + code: | + Bild Kopf Pose + 1 ### Kontakt R + 2 # ⟦Tiefpunkt⟧ + 3 ### ⟦Passing⟧ + 4 ##### ⟦Hochpunkt⟧ + 5 ### ⟦Kontakt⟧ L + 6 # Tiefpunkt + 7 ### Passing + 8 ##### Hochpunkt + gaps: + - label: Bild 2 + hint: Das vordere Bein fängt das Gewicht ab. + accept: ["tiefpunkt", "Down", "down"] + - label: Bild 3 + hint: Das freie Bein schwingt vorbei. + accept: ["passing", "Passing-Pose"] + - label: Bild 4 + hint: Der Körper steht oben auf dem Standbein. + accept: ["hochpunkt", "Up", "up"] + - label: Bild 5 + hint: Der linke Fuß setzt auf. + accept: ["kontakt", "Contact", "contact"] + explanation: | + Die Kopfhöhe verrät die Posen: tief nach dem Kontakt (Tiefpunkt), wieder auf Kontakthöhe, während das Bein vorbeischwingt (Passing), ganz oben auf dem Standbein (Hochpunkt). Bild 5 beginnt den zweiten Schritt mit dem anderen Fuß. Die Bilder 5 bis 8 wiederholen 1 bis 4 mit vertauschten Seiten. + resources: + - title: Wikipedia · Walk cycle + url: https://en.wikipedia.org/wiki/Walk_cycle + + - id: passing-zu-tief + type: bug + title: Sie knickt ein + prompt: | + Eine Testperson sagt über deinen Gang: „Die knickt bei jedem Schritt kurz ein.“ Die Beine sind richtig gezeichnet. Finde die Zeilen, die das verursachen. + lang: text + code: | + Gehen, 8 Bilder, Kopfhöhe in px + Bild Pose Kopf + 1 Kontakt R 30 + 2 Tiefpunkt 29 + 3 Passing 28 + 4 Hochpunkt 32 + 5 Kontakt L 30 + 6 Tiefpunkt 29 + 7 Passing 28 + 8 Hochpunkt 32 + lines: [5, 9] + hints: + - In welchem Bild ist der Kopf am tiefsten, und welche Pose ist das? + explanation: | + Der Kopf ist im Passing mit 28 am tiefsten, genau während das freie Bein vorbeischwingt. Beim Gehen steigt der Körper dort wieder. Am tiefsten gehört er kurz nach dem Kontakt, in den Tiefpunkt. Mit 30 oder 31 im Passing liegt die tiefste Stelle wieder dort, wo das Bein das Gewicht abfängt. + resources: + - title: Slynyrd · Pixelblog 50 + url: https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle + + - id: arm-gleichseitig + type: bug + title: Ein Schritt ist anders + prompt: | + Beim Abspielen wirkt jeder zweite Schritt anders als der erste. Eine Testperson sagt: „Bei einem Schritt sieht sie steif aus.“ Finde die Zeile und korrigiere sie. + lang: text + code: | + Gehen, 4 Bilder, Seitenansicht + Bild Pose Bein vorn Arm vorn + 1 Kontakt rechts links + 2 Passing – – + 3 Kontakt links links + 4 Passing – – + lines: [5] + fix: + - line: 5 + answers: + - " 3 Kontakt links rechts" + explanation: | + Im zweiten Kontakt sind linkes Bein und linker Arm vorn. Arme schwingen gegen die Beine, also gehört der rechte Arm nach vorn. Im ersten Kontakt stimmt es, deshalb fällt nur jeder zweite Schritt auf. Beim Spiegeln der ersten Hälfte passiert dieser Fehler leicht, wenn man nur die Beine tauscht. + resources: + - title: Saint11 · Walk Cycle + url: https://saint11.art/blog/pixel-art-tutorials/#Walk + + - id: zwoelf-und-sechs + type: explain + title: Drei wichtige Bilder + prompt: | + Medeiros zeigt einen Gang mit 12 Bildern und einen mit 6. In der langen Fassung markiert er die Bilder 1, 3 und 5 als wichtig. Erkläre in wenigen Sätzen, warum gerade diese drei und was eine Fassung mit drei Bildern je Schritt verliert. + lang: text + code: | + Saint11, Walk (12 Bilder) + 1 Contact Fuß setzt auf + 2 Down Rumpf, Kopf sinken + 3 Down+ tiefstes Bild + 4 Prepare bereit zum Steigen + Passing + 5 Passing steigt + 6 Up höchstes Bild + 7–12 dasselbe, anderes Bein + wichtig: 1, 3, 5 + 6 Bilder: 3 je Bein + points: + - Kontakt zeigt die Schrittweite und den Moment, in dem das Gewicht auf das neue Bein geht. + - Das tiefste Bild trägt das Gewicht im Auf und Ab. + - Passing zeigt das Bein, das vorbeischwingt; ohne es springt das Bein von hinten nach vorn. + - Mit drei Bildern je Schritt fehlen die Übergänge und der Hochpunkt; die Bewegung wird ruckiger, die drei Posen tragen sie aber noch. + explanation: | + Kontakt, tiefster Punkt und Passing sind die Posen, an denen man einen Schritt erkennt: wie weit er ist, wo das Gewicht landet und wie das freie Bein nach vorn kommt. Die übrigen Bilder sind Übergänge und der Hochpunkt. Eine Fassung mit drei Bildern je Schritt verliert diese Übergänge und wird ruckiger, Medeiros hält sie aber für kleine Auflösungen für brauchbar. Die Bilder 7 bis 12 kosten kaum neue Arbeit, weil sie 1 bis 6 mit dem anderen Bein wiederholen. Schlitter kommt beim Kürzen zum selben Ergebnis: Kontakt und Passing bleiben. + resources: + - title: Saint11 · Walk Cycle + url: https://saint11.art/blog/pixel-art-tutorials/#Walk + + - id: eigener-gang + type: practice + title: Den eigenen Gang zählen + prompt: | + Film dich oder jemanden, der einverstanden ist, beim Gehen von der Seite: Handy auf Hüfthöhe, fester Standplatz, ein paar Schritte durchs Bild, gern in Zeitlupe. Geh das Video Bild für Bild durch, auf dem Handy durch langsames Schieben in der Galerie. Finde zwei aufeinanderfolgende Kontakte desselben Fußes und zähl die Bilder dazwischen. Markiere, in welchem Bild der Kopf am tiefsten und in welchem er am höchsten ist. Vergleich zum Schluss mit Muybridges [Tafel 3](https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_walking_%28rbm-QP301M8-1887-003%29.jpg). + lang: prose + starter: | + Aufnahme (Bilder pro Sekunde, Zeitlupe ja/nein): + Bilder von Kontakt rechts bis Kontakt rechts: + Bilder pro Schritt: + Kopf am tiefsten in Bild, Pose: + Kopf am höchsten in Bild, Pose: + Arme gegen die Beine (ja/nein): + Unterschied zu Muybridge: + checklist: + - Du hast die Bilder zwischen zwei Kontakten desselben Fußes gezählt, nicht geschätzt. + - Du hast die Aufnahmerate notiert, damit sich die Zahl in Millisekunden umrechnen lässt. + - Für den tiefsten und höchsten Kopf stehen Bildnummer und Pose da. + - Du hast notiert, ob deine Beobachtung zu Kontakt tief und Passing hoch passt oder davon abweicht. + - Deine Notiz beschreibt die Aufnahme, nicht wie du sie zeichnen würdest. + explanation: | + Eine eigene Aufnahme zeigt dir, wie viel Zeit ein Schritt wirklich braucht und wo das Gewicht sinkt. Aus der Zahl der Bilder und der Aufnahmerate kannst du später die Dauer deines Zyklus ableiten. Weicht dein Gang vom Schema ab, ist das kein Fehler, sondern Information: Schemata vereinfachen, Referenz zeigt, was passiert. Mehr zum Arbeiten mit Referenzen steht in [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen). + resources: + - title: Muybridge · Animal Locomotion, Tafel 3 (Wikimedia Commons) + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_walking_%28rbm-QP301M8-1887-003%29.jpg + + - id: vier-bilder-puppe + type: practice + title: Eine Gliederpuppe in vier Bildern + prompt: | + Zeichne auf Karopapier eine Gliederpuppe, etwa 16 Kästchen hoch, die von der Seite geht: vier Bilder, Kontakt rechts, Passing, Kontakt links, Passing. Schreib vorher einen Absichtssatz. Leg die Kopfhöhe jedes Bildes fest, bevor du die Beine zeichnest, und schreib die Dauern daneben. Zeichne danach dieselbe Puppe von vorn in drei Bildern wie in der Lektion. Übertrag beide auf Haftzettel und blättere sie als Daumenkino. + lang: prose + starter: | + Absichtssatz: + Seite, Kopfhöhe je Bild (Kästchen): + Seite, Dauer je Bild: + Arme (welcher vorn in Bild 1 und 3): + Vorn, was sich zwischen den Bildern ändert: + Im Daumenkino aufgefallen: + checklist: + - Der Kopf steht im Kontakt tiefer als im Passing, in beiden Ansichten. + - In jedem Kontakt ist der Arm vorn, der zum hinteren Bein gehört. + - Bild 3 ist Bild 1 mit vertauschten Seiten; du hast notiert, was du nicht gespiegelt hast. + - Zu jedem Bild steht eine Dauer, und die Zyklusdauer ist ausgerechnet. + - Du hast im Daumenkino geprüft, ob die Puppe gleitet, und das Ergebnis notiert. + explanation: | + Vier Bilder sind das Minimum, an dem man Kontakt und Passing übt. Die Kopfhöhe zuerst festzulegen zwingt dich, das Gewicht zu planen, bevor die Beine dich ablenken. Die Ansicht von vorn zeigt, wie wenig in der Draufsicht übrig bleibt und wie viel dann am Kopf hängt. Kommt beim Blättern ein Gleiten heraus, prüf zuerst die Kopfhöhen, dann die Dauern. + resources: + - title: Saint11 · Top Down Walk Cycle + url: https://saint11.art/blog/pixel-art-tutorials/#TopDownWalkCycle + + - id: ruhezyklus-planen + type: practice + title: Ein Mehlsack atmet + prompt: | + Plan auf Karopapier einen Ruhezyklus für einen Mehlsack oder eine Gliederpuppe mit drei Zeichnungen: oben, Mitte, unten. Der Unterschied zwischen oben und unten ist ein Kästchen. Leg die Dauern so fest, dass die Enden länger stehen als die Mitte, und schreib auf, ob die Schleife vorwärts oder hin und zurück läuft. Spiel ihn als Daumenkino ab und notiere, was dir auffällt. + lang: prose + starter: | + Figur: + Zeichnungen (was ändert sich, um wie viele Kästchen): + Bildliste (Bild, Dauer): + Schleife (vorwärts / hin und zurück): + Masse gleich? (Breite, Höhe je Zeichnung): + Im Daumenkino aufgefallen: + checklist: + - Der Unterschied zwischen oben und unten ist höchstens ein Kästchen. + - Die Enden stehen länger als die Mitte, und oben und unten sind nicht gleich lang. + - Für jede Zeichnung sind Breite und Höhe notiert; wird der Sack niedriger, wird er breiter. + - Neben der Bewegung nach oben und unten ändert sich noch etwas anderes, etwa die Breite oder die Lage eines Zipfels. + - Du hast notiert, ob der Zyklus beim Abspielen tickt, und was du ändern würdest. + explanation: | + Ein Ruhezyklus ist die Animation, die am längsten auf dem Bildschirm steht. Gleiche Dauern und gleiche Schritte machen daraus ein Metronom, ungleiche Dauern lassen ihn atmen. Dass Breite und Höhe zusammen wechseln, hält die Masse gleich, wie Medeiros es verlangt. Für eine eigene Figur gilt dasselbe; welche Haltung sie dabei hat, entscheidest du. + resources: + - title: Saint11 · Character Idle + url: https://saint11.art/blog/pixel-art-tutorials/#characterIdle diff --git a/content/animation/modules/gewicht-aufprall.yaml b/content/animation/modules/gewicht-aufprall.yaml new file mode 100644 index 0000000..efa9714 --- /dev/null +++ b/content/animation/modules/gewicht-aufprall.yaml @@ -0,0 +1,474 @@ +id: gewicht-aufprall +title: "Gewicht zeigen: schwer, leicht, Stauchen und Aufprall" +level: 2 +minutes: 120 +summary: Warum schwere Dinge nicht schneller fallen und woran man Gewicht trotzdem sieht, wie du Stauchen und Strecken mit gleicher Fläche in Pixel umrechnest, wie ein Aufprall mit Rückprall und Ausschwingen aufgebaut ist und wie eine Figur zeigt, dass etwas schwer ist. +place: unterwegs +goals: + - Du erklärst, warum schwere und leichte Gegenstände gleich schnell fallen, und nennst, woran ein Zuschauer Gewicht stattdessen abliest. + - Du planst Squash & Stretch mit gleichbleibender Fläche und rechnest Breite und Höhe in ganzen Pixeln aus. + - Du baust einen Aufprall aus letztem Fallbild, Kontaktbild mit Stauchung, Rückprall und Ausschwingen und rechnest Rückprallhöhen mit einem Faktor aus. + - Du unterscheidest Gummiball, Bowlingkugel und Wasserballon über Verformung, Rückprall und Haltezeiten. + - Du planst, wie eine Figur eine leichte und eine schwere Last hebt, und prüfst mit einem Beobachtungstest, ob der Unterschied gelesen wird. +resources: + - title: NASA · The Apollo 15 Hammer-Feather Drop + url: https://nssdc.gsfc.nasa.gov/planetary/lunar/apollo_15_feather_drop.html + - title: Wikipedia · Twelve basic principles, Squash and stretch + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Squash_and_stretch + - title: Saint11 · Squash and Stretch + url: https://saint11.art/blog/pixel-art-tutorials/#Squash + - title: Saint11 · A Basic Aseprite Animation, Squash and Stretch + url: https://saint11.art/pixel_art_articles/article3/#squash-and-stretch + - title: Wikipedia · Coefficient of restitution + url: https://en.wikipedia.org/wiki/Coefficient_of_restitution +lesson: | + Du animierst zwei Bälle nebeneinander, eine Bowlingkugel und einen Gummiball. Beide fallen aus derselben Höhe, du hast das Spacing sauber nach [Timing und Spacing](/animation/timing-spacing) geplant, beide springen ab und kommen zur Ruhe. Du zeigst sie jemandem und fragst, welcher schwerer ist. Er zuckt mit den Schultern. Die Bälle unterscheiden sich nur in der Farbe. + + Gewicht steckt in der Animation weniger in der Zeichnung als in der Bewegung: wie etwas aufprallt, wie es sich verformt, wie hoch es zurückspringt, wie lange es liegen bleibt und wie sehr sich eine Figur anstrengt, um es zu bewegen. Diese Lektion geht diese Merkmale einzeln durch. Alles geht auf Papier und mit dem Handy. + + ## Schwere Dinge fallen nicht schneller + + Am Ende des letzten Mondspaziergangs von Apollo 15 ließ David Scott einen Hammer und eine Falkenfeder gleichzeitig fallen. Ohne Luft kamen beide gleichzeitig am Boden an, wie Galilei es vorhergesagt hatte: „all objects released together fall at the same rate regardless of mass“ ([NASA: The Apollo 15 Hammer-Feather Drop](https://nssdc.gsfc.nasa.gov/planetary/lunar/apollo_15_feather_drop.html)). Auf der Erde bremst die Luft eine Feder oder einen Luftballon stark, eine Bowlingkugel und einen Gummiball kaum. Im Fall unterscheiden sie sich deshalb nicht, das Spacing 1 : 3 : 5 : 7 aus [Timing und Spacing](/animation/timing-spacing) gilt für beide. + + Wo zeigt sich Gewicht dann? Der Wikipedia-Artikel zu den zwölf Prinzipien von Thomas und Johnston sagt zum Timing: „an object's weight determines how it reacts to an impetus, like a push: a lightweight object will react faster than a heavy one“ ([Timing](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing)). Jonathan Cooper führt „Inertia & Momentum“, also Trägheit und Schwung, als Teil des Spielgefühls ([Five Fundamentals](https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/)). Daraus ergeben sich fünf Stellen, an denen ein Zuschauer Gewicht abliest: + + - **Anfahren und Abbremsen:** Schweres braucht länger, um in Bewegung zu kommen und um anzuhalten. + - **Verformung:** wie stark sich etwas beim Aufprall staucht. + - **Rückprall:** wie hoch es zurückspringt und wie schnell es zur Ruhe kommt. + - **Haltezeiten:** wie lange es nach dem Aufprall liegt, bevor sich wieder etwas regt. + - **Umgebung und Figur:** ob der Boden reagiert, ob Staub aufsteigt, wie sehr sich jemand anstrengt. + + > [!MERKE] + > Gewicht zeigt sich nicht im Fall, sondern an seinen Enden: beim Anfahren, beim Aufprall und beim Zur-Ruhe-Kommen. + + ## Squash & Stretch: andere Form, gleiche Menge + + Beim Stauchen und Strecken (Squash & Stretch) verformt sich ein Körper in Bewegungsrichtung. Der Wikipedia-Artikel zu den zwölf Prinzipien nennt als Zweck „a sense of weight and flexibility“, und das Wichtigste daran sei, „that an object's volume does not change“: Wird ein Ball senkrecht gestreckt, muss er waagerecht schmaler werden ([Squash and stretch](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Squash_and_stretch)). Pedro Medeiros (Saint11) formuliert dieselbe Regel für Pixelart: „When changing the width of an object, always change the height too, this way the mass is constant.“ Er nennt sie „the most important rule of squash and stretch“ ([Squash and Stretch](https://saint11.art/blog/pixel-art-tutorials/#Squash)). Masahiro Sakurai betont in seinem Video zu Stauchen und Skalieren ebenfalls, dass das Volumen gleich bleiben soll ([Squashing and Scaling](https://www.youtube.com/watch?v=Sm0LAm4sJKc&t=78s), ab 1:18). + + In einer Zeichnung ist das Volumen die Fläche: Breite mal Höhe bleibt ungefähr gleich. Für einen Ball von 16 × 16 Pixeln: + + ```python run + # Ball 16 x 16 px + flaeche = 16 * 16 + for h in (16, 15, 12, 20): + b = flaeche / h + print(h, round(b, 1), + round(b)) + ``` + + Schon ein Pixel Stauchung auf 15 Pixel Höhe verlangt 17 Pixel Breite. Auf 12 Pixel gestaucht wird er 21 breit, auf 20 gestreckt 13 schmal. In ganzen Pixeln geht die Rechnung selten genau auf, und der Umriss eines runden Balls folgt nicht exakt dem Rechteck. Zähl deshalb nach. Ein Ball von 8 Pixeln in drei Formen: + + ```text + rund gestaucht gestreckt + ..##.. + .####. + ..####.. ###### + .######. ###### + ######## ..######.. ###### + ######## .########. ###### + ######## ########## ###### + ######## ########## ###### + .######. .########. .####. + ..####.. ..######.. ..##.. + ``` + + Rund sind es 52 Pixel, gestaucht und gestreckt je 48. Das ist nah genug; ein Ball, der beim Stauchen 30 Pixel verliert, schrumpft sichtbar. + + Wann welche Form? In seinem Aseprite-Beispiel staucht Medeiros den Ball im Kontaktbild und streckt ihn im letzten Bild des Falls und im ersten Bild des Aufstiegs, „when the ball is at their fastest“. Und: „Keeping the volume is very important so your object doesn't look like it got smaller or bigger“ ([A Basic Aseprite Animation](https://saint11.art/pixel_art_articles/article3/#squash-and-stretch)). Wie stark, hängt vom Material ab: „stiff objects do not deform as much“ ([Squash and Stretch](https://saint11.art/blog/pixel-art-tutorials/#Squash)). Ein Gummiball darf sich deutlich stauchen, eine Bowlingkugel kaum oder gar nicht. + + > [!WARNING] Stauchen in der Luft + > Gestaucht wird erst, wenn der Ball den Boden berührt. Ein Ball, der schon ein Bild vorher breit und flach ist, prallt scheinbar gegen etwas Unsichtbares über dem Boden. Im Bild davor ist er am schnellsten und deshalb rund oder gestreckt. + + ## Der Aufprall: Kontakt, Rückprall, Ausschwingen + + Ein Aufprall hat eine feste Abfolge. Das letzte Bild vor dem Boden ist das schnellste, gestreckt oder rund. Im **Kontaktbild** berührt der Ball den Boden und ist am stärksten gestaucht. Dann folgt der **Rückprall**: gestreckt nach oben, langsamer werdend bis zum Scheitel. Danach fällt er wieder, prallt kleiner auf, und so weiter, bis er liegt. Das letzte Stück, in dem eine Bewegung immer kleiner wird und zur Ruhe kommt, heißt **Ausschwingen** (Settle). + + Wie hoch ein Ball zurückspringt, beschreibt die Physik mit der Stoßzahl (Coefficient of Restitution). Sie hängt von Ball und Boden gemeinsam ab, und für einen fallen gelassenen Ball ist sie die Wurzel aus dem Verhältnis von Rückprallhöhe zu Fallhöhe ([Coefficient of restitution](https://en.wikipedia.org/wiki/Coefficient_of_restitution)). Für die Animation reicht das Verhältnis der Höhen. Ein Beispiel dafür steht im selben Artikel: Ein Basketball muss nach den Regeln der FIBA aus 1800 mm Fallhöhe auf 1035 bis 1085 mm zurückspringen, also auf knapp 60 % ([Application in sports](https://en.wikipedia.org/wiki/Coefficient_of_restitution#Application_in_sports)). + + Mit einem Faktor von 0,6 und 48 Pixeln Fallhöhe rechnet das Modell jede Rückprallhöhe aus, bis sie unter ein Pixel fällt. Weil die Fallzeit mit der Wurzel der Höhe wächst (Weg ∝ Zeit², siehe Galilei in [Timing und Spacing](/animation/timing-spacing)), rechnet es auch aus, wie viele Bilder der Fall dauert, wenn der erste 8 Bilder braucht: + + ```python run + from math import sqrt + h = 48.0 # Fallhöhe, px + while h >= 1: + f = 8 * sqrt(h / 48) + f = round(f) + h1 = round(h, 1) + print(h1, f) + h = h * 0.6 + ``` + + Die Sprünge werden flacher und kürzer: von 8 Bildern pro Fall auf 6, 5, 4 und schließlich eines. Nach acht Aufprallen ist der Ball weniger als ein Pixel hoch, in einem Sprite also in Ruhe. Mit Faktor 0,8 hüpft er länger, mit 0,1 bleibt er fast sofort liegen. Welcher Faktor zu welchem Material passt, entscheidest du und prüfst es am Zuschauer. + + Für drei Bälle gleicher Größe könnte ein Plan so aussehen. Die Werte sind Entscheidungen, keine Messungen: + + ```text + Stauchung Faktor Ruhe + Gummi stark 0,7 spät + Bowling kaum 0,05 sofort + Wasser sehr stark 0,1 wackelt + ``` + + Der Wasserballon braucht ein eigenes Ausschwingen: Er liegt schon, aber seine Form schwingt noch zwischen breit und hoch hin und her, mit kleiner werdendem Ausschlag. Der Wikipedia-Artikel zu Follow-through beschreibt Ähnliches für Körper: Teile mit viel Gewebe bewegen sich eigenständiger als knochige ([Follow through and overlapping action](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action)). Wie man so ein Nachschwingen plant, steht in [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung). + + > [!PRAXIS] Gleiche Bilder, andere Haltezeiten + > Tyriq Plummer zeigt in seinem GDC-Vortrag über 2D-Animation für Spiele dieselben Zeichnungen mit verschiedenen Haltezeiten und beschreibt, dass die Fassung mit längeren Haltezeiten schwerer wirkt ([2D Animation for Games: A Primer](https://www.youtube.com/watch?v=PKZJmHrG4Yw&t=1162s), ab 19:22). Für deine Bowlingkugel heißt das: Das Kontaktbild und die Ruhe danach dürfen lange stehen. Ob es bei deinem Zuschauer so ankommt, prüfst du im Beobachtungstest. + + Auch die Umgebung kann Gewicht zeigen. Medeiros erinnert bei Sprüngen an Staub und Partikel („Don't forget dust and particles!“, [Jump](https://saint11.art/blog/pixel-art-tutorials/#Jump)) und bei Treffern daran, das getroffene Objekt reagieren zu lassen ([Impact](https://saint11.art/blog/pixel-art-tutorials/#Impact)). Eine Staubwolke, ein Brett, das nachfedert, ein Gegenstand, der vom Tisch hüpft: All das sind Mittel, um zu zeigen, wie viel da gelandet ist. + + > [!NOTE] Einfrieren und Wackeln + > Bildschirmwackeln und das kurze Einfrieren beim Treffer (Hitstop) sind Werkzeuge des Spiels, nicht der Zeichnung. Sie stehen in [Trefferfeedback](/combat/trefferfeedback). + + ## Eine Figur trägt Gewicht + + Hebt eine Figur etwas, zeigt sich das Gewicht der Last an der Figur. Bei einer schweren Last braucht sie länger, bis sich etwas bewegt: Sie greift, spannt an, und erst dann löst sich die Last vom Boden, langsam. Ihr Körper geht tiefer, die Hüfte weiter nach hinten (die Rechnung dazu steht in [Schwerpunkt, Gleichgewicht und Bodenkontakt](/animation/schwerpunkt-balance)). Wie Ausholen und Vorbereitung als Antizipation gezeichnet werden, vertieft [Antizipation, Aktion, Erholung](/animation/antizipation-erholung). + + Dieselben vier Zeichnungen einer Gliederpuppe, die eine Kiste hebt, können mit verschiedenen Dauern Verschiedenes zeigen: + + ```text + Dauer in ms + Bild Pose leicht schwer + 1 greift 100 300 + 2 Kiste hebt ab 50 250 + 3 Kiste am Bauch 50 150 + 4 steht, trägt 200 400 + ``` + + In der leichten Fassung liegt die Zeit am Ende, die Kiste fliegt fast hoch. In der schweren liegt sie am Anfang, beim Greifen und Anheben. Das folgt dem Satz von Thomas und Johnston: Leichtes reagiert schneller. Ob ein Zuschauer die schwere Fassung als schwer liest oder als zögerlich, sagt dir erst der **Beobachtungstest**: ohne Vorrede zeigen, „Was passiert da?“ fragen, die Antwort wörtlich notieren. Möglicherweise braucht „schwer“ neben dem Timing auch die tiefere Haltung. + + Ein klassisches Übungsobjekt für Gewicht ohne Gesicht ist der **Mehlsack**. Medeiros empfiehlt am Ende seines Aseprite-Artikels „the classic beginner's exercise of making an animated flour sack walking and jumping around“ ([A Basic Aseprite Animation](https://saint11.art/pixel_art_articles/article3/#now-what)). Ein Sack, der nach einem Sprung landet, staucht sich, sackt nach und schwingt aus, und alles, was er erzählt, steckt in Verformung und Timing. + + > [!INTERVIEW] + > „Wie zeigst du, dass ein Ball schwer ist, ohne ihn größer zu zeichnen?“ Gute Antwort: Nicht über den Fall, denn schwere und leichte Bälle fallen gleich schnell. Ich zeige es beim Aufprall: wenig Verformung, wenig Rückprall, ein langes Kontaktbild und eine lange Ruhe danach, dazu eine Reaktion der Umgebung, etwa Staub oder ein nachfedernder Boden. Beim Verformen halte ich die Fläche konstant. Und ich prüfe mit einem Zuschauer, ob er den Ball wirklich als schwer liest. + + ## Häufige Fehler + + - **Gewicht über die Fallgeschwindigkeit.** Schwere und leichte Bälle fallen gleich schnell. Plan den Fall für beide gleich und zeig den Unterschied am Aufprall. + - **Fläche nicht gehalten.** Der Ball wird breiter, aber nicht flacher, und wächst sichtbar. Breite mal Höhe nachrechnen, Pixel zählen. + - **Stauchen in der Luft.** Gestaucht wird im Kontaktbild, nicht davor. + - **Bowlingkugel wie Gummiball.** Gleiche Stauchung, gleicher Rückprall, gleiche Haltezeiten: Dann unterscheidet die beiden nur noch die Farbe. + - **Rückprall ohne Verlust.** Ein Ball, der immer gleich hoch springt, ist eine Maschine. Jeder Rückprall ist niedriger und kürzer als der vorige. + - **Kein Ende.** Ein Aufprall ohne Ausschwingen und Ruhe bricht ab. Die letzten Bilder, in denen fast nichts passiert, gehören dazu. + - **Wirkung behauptet.** „Schwer“ steht im Absichtssatz, nicht in der Animation. Ob es ankommt, zeigt der Beobachtungstest. + + ## Zusammenfassung + + - Schwere und leichte Gegenstände fallen ohne Luftwiderstand gleich schnell. Gewicht zeigt sich beim Anfahren, beim Aufprall und beim Zur-Ruhe-Kommen. + - Squash & Stretch ändert die Form, nicht die Fläche. In Pixeln: Breite mal Höhe nachrechnen und nachzählen. + - Gestreckt im schnellsten Bild vor und nach dem Boden, gestaucht im Kontaktbild, nie in der Luft. Steife Dinge verformen sich kaum. + - Jeder Rückprall erreicht einen festen Anteil der vorigen Höhe, ein Basketball knapp 60 %. Die Sprünge werden niedriger und kürzer, bis der Ball liegt. + - Lange Haltezeiten nach dem Aufprall, wenig Verformung und wenig Rückprall sind Mittel für „schwer“; die Umgebung kann mitspielen. + - Eine Figur zeigt Gewicht über Timing und Haltung: lange Vorbereitung, langsames Anheben, tiefer Körper. Ob es gelesen wird, prüft der Beobachtungstest. +exercises: + - id: woran-gewicht + type: choice + title: Woran sieht man Gewicht? + prompt: | + Zwei Bälle gleicher Größe, gleicher Farbe, aus derselben Höhe fallen gelassen. Woran kann ein Zuschauer ablesen, welcher schwerer ist? + options: + - text: Wie stark sich der Ball beim Aufprall verformt. + correct: true + why: Material und Gewicht zeigen sich in der Stauchung. Ein harter, schwerer Ball verformt sich kaum. + - text: Wie hoch er zurückspringt und wie schnell er zur Ruhe kommt. + correct: true + why: Der Rückprall ist eine Eigenschaft von Ball und Boden. Wenig Rückprall und eine schnelle Ruhe sind ein Mittel, um Schwere zu zeigen. + - text: Wie lange er nach dem Aufprall liegt, bevor sich wieder etwas regt. + correct: true + why: Haltezeiten sind eines der billigsten Mittel. Tyriq Plummer beschreibt, dass dieselben Bilder mit längeren Haltezeiten schwerer wirken. + - text: Wie schnell er fällt. + correct: false + why: Ohne nennenswerten Luftwiderstand fallen schwere und leichte Bälle gleich schnell. Das Spacing des Falls ist für beide gleich. + explanation: | + Der Fall verrät das Gewicht nicht, das hat der Hammer-Feder-Versuch auf dem Mond gezeigt. Gewicht zeigt sich an den Enden der Bewegung: beim Aufprall in Verformung und Rückprall, danach in der Haltezeit und im Ausschwingen. Deshalb planst du für zwei verschieden schwere Bälle denselben Fall und verschiedene Aufpralle. + resources: + - title: NASA · The Apollo 15 Hammer-Feather Drop + url: https://nssdc.gsfc.nasa.gov/planetary/lunar/apollo_15_feather_drop.html + + - id: flaeche-halten + type: choice + title: Welche Stauchung passt? + prompt: | + Ein Ball ist 16 × 16 Pixel groß. Welche gestauchte Form behält ungefähr seine Fläche? + options: + - text: 20 × 13 Pixel + correct: true + why: 20 · 13 = 260, fast genau 16 · 16 = 256. Flacher und dafür breiter. + - text: 20 × 16 Pixel + correct: false + why: Breiter, aber nicht flacher. Mit 320 Pixeln wächst der Ball um ein Viertel. + - text: 16 × 12 Pixel + correct: false + why: Flacher, aber nicht breiter. Mit 192 Pixeln schrumpft er sichtbar. + - text: 24 × 8 Pixel + correct: false + why: 192 Pixel, und die Form ist dreimal so breit wie hoch. Das ist eher ein Pfannkuchen als ein gestauchter Ball. + explanation: | + Beim Stauchen und Strecken ändert sich die Form, nicht die Menge. In einer Zeichnung heißt das: Breite mal Höhe bleibt ungefähr gleich. Medeiros nennt das die wichtigste Regel von Squash & Stretch, weil ein Ball sonst scheinbar wächst oder schrumpft. Für runde Formen zählst du die Pixel am Ende noch einmal nach. + resources: + - title: Saint11 · Squash and Stretch + url: https://saint11.art/blog/pixel-art-tutorials/#Squash + + - id: aufprall-ordnen + type: order + title: Ein Aufprall in Phasen + prompt: | + Bring die Phasen eines Gummiballs, der aus der Höhe fällt und liegen bleibt, in die richtige Reihenfolge. + lang: prose + lines: | + Letztes Bild vor dem Boden: am schnellsten, gestreckt. + Kontaktbild: Der Ball berührt den Boden und ist am stärksten gestaucht. + Erstes Bild nach oben: gestreckt, schnell. + Scheitel des Rückpralls: rund, die Bilder liegen dicht. + Zweiter, kleinerer Aufprall mit schwächerer Stauchung. + Ausschwingen: kleine Hüpfer, dann liegt der Ball. + explanation: | + Vor und nach dem Boden ist der Ball am schnellsten, deshalb gestreckt. Im Kontaktbild kehrt er die Richtung um und staucht sich. Am Scheitel ist er langsam und rund. Jeder weitere Aufprall ist kleiner, und am Ende steht eine Ruhe, die zur Animation gehört. + resources: + - title: Saint11 · A Basic Aseprite Animation, Squash and Stretch + url: https://saint11.art/pixel_art_articles/article3/#squash-and-stretch + + - id: ein-pixel-stauchung + type: output + title: Ein Pixel flacher + prompt: | + Was gibt das Programm aus? + lang: python + code: | + flaeche = 16 * 16 + for h in (15, 14): + print(h, round(flaeche / h)) + expected: | + 15 17 + 14 18 + explanation: | + 256 / 15 = 17,07, gerundet 17. 256 / 14 = 18,29, gerundet 18. Schon ein Pixel weniger Höhe verlangt bei einem 16-Pixel-Ball ein Pixel mehr Breite. In Pixelart ist das die kleinste sichtbare Stauchung, und für einen harten Ball kann sie die einzige sein. + resources: + - title: Wikipedia · Twelve basic principles, Squash and stretch + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Squash_and_stretch + + - id: rueckprall-zweiter + type: output + title: Der zweite Rückprall + prompt: | + Ein Ball fällt aus 50 Pixeln Höhe. Jeder Rückprall erreicht 60 % der Höhe davor. Wie hoch steigt er nach dem zweiten Aufprall? Antworte mit der Zahl in Pixeln. + lang: text + code: | + Fallhöhe 50 px + Faktor 0,6 + 1. Rückprall ? px + 2. Rückprall ? px + expected: | + 18 + accept: + - 18 px + - 18 Pixel + - "18.0" + explanation: | + Nach dem ersten Aufprall steigt der Ball auf 50 · 0,6 = 30 Pixel, nach dem zweiten auf 30 · 0,6 = 18. Der Faktor wirkt jedes Mal auf die vorige Höhe, nicht auf die Fallhöhe. Ein FIBA-Basketball erreicht etwa diesen Faktor. Für eine Bowlingkugel wählst du einen viel kleineren, für einen Flummi einen größeren. + resources: + - title: Wikipedia · Coefficient of restitution, Application in sports + url: https://en.wikipedia.org/wiki/Coefficient_of_restitution#Application_in_sports + + - id: formen-eintragen + type: gap + title: Rund, gestreckt oder gestaucht? + prompt: | + Ein Gummiball fällt, prallt auf und steigt wieder. Trag für die markierten Bilder die Form ein: rund, gestreckt oder gestaucht. + lang: text + code: | + Bild Höhe Form + 1 48 rund + 2 45 rund + 3 36 rund + 4 21 ⟦gestreckt⟧ + 5 0 ⟦gestaucht⟧ + 6 14 ⟦gestreckt⟧ + 7 25 rund + 8 29 ⟦rund⟧ + gaps: + - label: Bild 4 + hint: Das letzte und schnellste Bild vor dem Boden. + accept: ["Stretch"] + - label: Bild 5 + hint: Das Kontaktbild. + accept: ["Squash"] + - label: Bild 6 + hint: Das erste und schnellste Bild nach oben. + accept: ["Stretch"] + - label: Bild 8 + hint: Der Scheitel des Rückpralls. + explanation: | + Medeiros streckt den Ball im letzten Bild des Falls und im ersten des Aufstiegs, weil er dort am schnellsten ist, und staucht ihn im Kontaktbild. Am Scheitel ist der Ball langsam und bleibt rund. Die Bilder 1 bis 3 sind noch langsam genug für die runde Form. Wo die Grenze liegt, entscheidest du; die Reihenfolge rund, gestreckt, gestaucht, gestreckt, rund nicht. + resources: + - title: Saint11 · A Basic Aseprite Animation, Squash and Stretch + url: https://saint11.art/pixel_art_articles/article3/#squash-and-stretch + + - id: begriffe-gewicht + type: gap + title: Fünf Wörter für Gewicht + prompt: | + Ergänze die fehlenden Begriffe. + lang: prose + code: | + Verformung mit gleicher Fläche heißt ⟦Squash & Stretch⟧. + Das Bild, in dem der Ball den Boden berührt, heißt ⟦Kontaktbild⟧. + Das Hochspringen nach dem Aufprall heißt ⟦Rückprall⟧. + Das Kleinerwerden der Bewegung, bis etwas liegt, heißt ⟦Ausschwingen⟧. + Dass Schweres langsamer anfährt und anhält, liegt an seiner ⟦Trägheit⟧. + gaps: + - label: Stauchen und Strecken + hint: Englisch, zwei Wörter mit S. + accept: ["Squash and Stretch", "Squash und Stretch", "Stauchen und Strecken"] + - label: Berührung + hint: Englisch contact. + accept: ["Kontakt", "Contact"] + - label: Zurückspringen + hint: Englisch rebound. + accept: ["Abprall", "Rebound"] + - label: Zur Ruhe kommen + hint: Englisch settle. + accept: ["Settle", "Auspendeln"] + - label: Physik + hint: Englisch inertia. + accept: ["Masse", "Inertia"] + explanation: | + Squash & Stretch beschreibt die Verformung, Kontaktbild und Rückprall den Aufprall, das Ausschwingen sein Ende. Trägheit ist der Grund, warum Schweres langsamer reagiert, und damit der Grund für längere Haltezeiten und langsamere Starts. Mit diesen Wörtern lässt sich jeder Aufprall in einer Bildliste beschreiben. + resources: + - title: Wikipedia · Twelve basic principles, Timing + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing + + - id: kugel-als-gummiball + type: bug + title: „Ein Gummiball“ + prompt: | + Diese Bildliste soll eine Bowlingkugel zeigen, die auf einen Holzboden fällt. Drei Zuschauer sagen ohne Vorrede: „Ein Gummiball.“ Finde die Zeilen, die das verursachen. + lang: text + code: | + Bild Höhe B x H Dauer + 1 48 16x16 50 ms + 2 37 16x16 50 ms + 3 21 16x16 50 ms + 4 0 22x12 50 ms + 5 28 16x16 50 ms + 6 0 16x16 400 ms + lines: [5, 6] + hints: + - Der Fall ist für schwere und leichte Bälle gleich. Such nach dem Bild am Boden und dem danach. + explanation: | + Bild 4 staucht die Kugel auf 22 × 12, so stark wie einen Gummiball; eine harte Kugel verformt sich kaum, etwa 17 × 15 oder gar nicht. Bild 5 lässt sie auf 28 von 48 Pixeln zurückspringen, fast 60 % wie ein Basketball. Die Fallbilder 1 bis 3 sind richtig: Die Abstände 11, 16 und 21 wachsen gleichmäßig, und schwer und leicht fallen gleich. Für eine Bowlingkugel bleiben die Stauchung klein und der Rückprall winzig, und das Kontaktbild darf länger stehen. + resources: + - title: Saint11 · Squash and Stretch + url: https://saint11.art/blog/pixel-art-tutorials/#Squash + + - id: stauchen-in-der-luft + type: bug + title: Gegen eine unsichtbare Wand + prompt: | + Ein Gummiball fällt auf den Boden. Zuschauer sagen, er pralle kurz über dem Boden gegen etwas, bevor er landet. Finde die Zeile und korrigiere die Form. + lang: text + code: | + Bild Höhe Form + 1 48 rund + 2 37 rund + 3 21 gestaucht + 4 0 gestaucht + 5 14 gestreckt + lines: [4] + fix: + - line: 4 + answers: + - " 3 21 gestreckt" + - " 3 21 rund" + explanation: | + In Bild 3 ist der Ball noch 21 Pixel über dem Boden, aber schon gestaucht. Stauchung zeigt einen Widerstand, und hier gibt es keinen; das Auge sucht deshalb etwas Unsichtbares. Im letzten Bild vor dem Boden ist der Ball am schnellsten und gehört gestreckt oder rund. Gestaucht wird er erst im Kontaktbild 4. + resources: + - title: Saint11 · A Basic Aseprite Animation, Squash and Stretch + url: https://saint11.art/pixel_art_articles/article3/#squash-and-stretch + + - id: zwei-baelle-erklaeren + type: explain + title: Gleicher Fall, anderer Aufprall + prompt: | + Zwei Bildlisten für Bälle gleicher Größe. Erkläre in wenigen Sätzen, welche Unterschiede das Gewicht zeigen sollen und warum die ersten beiden Bilder in beiden gleich sind. + lang: text + code: | + Gummiball + Bild Höhe B x H Dauer + 1 48 16x16 50 ms + 2 36 14x18 50 ms + 3 0 20x13 50 ms + 4 19 14x18 50 ms + 5 29 16x16 100 ms + + Bowlingkugel + Bild Höhe B x H Dauer + 1 48 16x16 50 ms + 2 36 16x16 50 ms + 3 0 17x15 150 ms + 4 2 16x16 50 ms + 5 0 16x16 400 ms + points: + - Der Fall (Bild 1 und 2) ist gleich, weil schwere und leichte Gegenstände gleich schnell fallen. + - Der Gummiball staucht sich stark (20 × 13), die Kugel kaum (17 × 15); in beiden Fällen bleibt die Fläche etwa gleich. + - Der Gummiball springt auf 29 von 48 Pixeln zurück, die Kugel nur auf 2. + - Die Kugel bleibt lange im Kontaktbild (150 ms) und liegt danach lange still (400 ms); diese Haltezeiten sollen Schwere zeigen. + - Der Gummiball ist im schnellsten Bild vor und nach dem Boden gestreckt, die Kugel nicht, weil sie steif ist. + explanation: | + Beide Listen teilen den Fall, denn das Gewicht ändert das Fallen nicht. Die Unterschiede beginnen am Boden. Der Gummiball verformt sich stark, streckt sich vor und nach dem Kontakt und springt auf rund 60 % zurück, alles in kurzen Bildern. Die Kugel staucht sich um ein Pixel, hüpft kaum und steht lange im Kontaktbild und in der Ruhe. Ob ein Zuschauer daraus „schwer“ liest, ist eine Frage für den Beobachtungstest, nicht für die Bildliste. + resources: + - title: Tyriq Plummer · 2D Animation for Games, A Primer (ab 19:22) + url: https://www.youtube.com/watch?v=PKZJmHrG4Yw&t=1162s + + - id: drei-baelle + type: practice + title: Gummi, Bowling, Wasser + prompt: | + Plane drei Bälle gleicher Größe, die aus derselben Höhe auf denselben Boden fallen: einen Gummiball, eine Bowlingkugel und einen Wasserballon. Schreib für jeden einen Absichtssatz und eine Bildliste mit Höhe, Breite × Höhe und Dauer. Zeichne sie auf Haftzettel oder als Spacing-Chart. Zeig sie jemandem nacheinander ohne Vorrede und frag zu jedem: „Was passiert da?“ Danach, wenn du magst: „Woraus könnte der Ball sein?“ + lang: prose + starter: | + Gummiball, Absichtssatz und Bildliste: + Bowlingkugel, Absichtssatz und Bildliste: + Wasserballon, Absichtssatz und Bildliste: + Zuschauer zu Ball 1, 2, 3 (wörtlich): + Abweichung von meiner Absicht: + checklist: + - Die Fallbilder sind bei allen drei Bällen gleich, Höhen und Dauern. + - In jeder gestauchten oder gestreckten Form weicht Breite mal Höhe höchstens 10 % von der runden Form ab. + - Gestaucht wird nur im Kontaktbild, nie in einem Bild über dem Boden. + - Die drei Bälle unterscheiden sich in mindestens zwei Größen nach dem Kontakt (Stauchung, Rückprall, Haltezeit, Ausschwingen). + - Die Antworten des Zuschauers stehen wörtlich da; ohne Zuschauer hast du nach einer Nacht Abstand selbst geprüft und das markiert. + hints: + - Leg zuerst den Fall einmal fest und kopier ihn dreimal. Ändere nur, was ab dem Kontaktbild passiert. + explanation: | + Die Übung zwingt dich, Gewicht dort zu zeigen, wo es sichtbar wird: ab dem Kontaktbild. Weil der Fall gleich bleibt, kann der Zuschauer die Bälle nur am Aufprall unterscheiden. Seine Antworten zeigen dir, welches Mittel bei ihm ankommt. Weicht eine Antwort ab, ändere eine Größe und frag erneut, statt alles auf einmal umzubauen. + resources: + - title: Wikipedia · Coefficient of restitution + url: https://en.wikipedia.org/wiki/Coefficient_of_restitution + + - id: leichte-schwere-kiste + type: practice + title: Leicht oder schwer gehoben + prompt: | + Zeichne vier Thumbnails einer Gliederpuppe, die eine Kiste vom Boden hebt. Plane dazu zwei Fassungen: eine für eine leichte, eine für eine schwere Kiste. Ändere zuerst nur die Dauern. Zeig beide Fassungen als Daumenkino ohne Vorrede und frag: „Was passiert da?“ Wenn die schwere Fassung nicht als schwer gelesen wird, ändere in einer dritten Fassung zusätzlich die Haltung und teste erneut. + lang: prose + starter: | + Absichtssatz leicht: + Absichtssatz schwer: + Thumbnails (Bild, Pose): + Dauern leicht / schwer: + Zuschauer zu leicht (wörtlich): + Zuschauer zu schwer (wörtlich): + Fassung 3, was geändert, Zuschauer sagt: + checklist: + - Fassung 1 und 2 nutzen dieselben vier Zeichnungen, nur die Dauern unterscheiden sich. + - In der schweren Fassung liegt mehr Zeit beim Greifen und Anheben als in der leichten. + - Jede Fassung hat einen eigenen Absichtssatz, geschrieben vor dem Test. + - Die Antworten stehen wörtlich da; ohne Zuschauer hast du nach einer Nacht Abstand selbst geprüft und das markiert. + - Falls es eine dritte Fassung gibt, ist notiert, welche Zeichnung du geändert hast und warum. + hints: + - Leichtes reagiert schneller, Schweres langsamer. Verschieb die Zeit zwischen Anfang und Ende der Bewegung. + explanation: | + Die Übung trennt die Wirkung des Timings von der Wirkung der Haltung. Oft reicht Timing allein nicht: Eine langsame Bewegung kann auch als zögerlich oder müde gelesen werden. Animatoren nehmen deshalb oft eine tiefere, angestrengte Haltung dazu; ob das Bild dadurch eindeutiger wird, zeigt dir die dritte Fassung im Test. Was dein Zuschauer sagt, ist die Grundlage für die nächste Fassung, nicht ein Urteil über die erste. + resources: + - title: Wikipedia · Twelve basic principles, Timing + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing diff --git a/content/animation/modules/koerpersprache.yaml b/content/animation/modules/koerpersprache.yaml new file mode 100644 index 0000000..de8cfd8 --- /dev/null +++ b/content/animation/modules/koerpersprache.yaml @@ -0,0 +1,510 @@ +id: koerpersprache +title: Körpersprache in Bewegung und lesbare Zustandswechsel +level: 2 +minutes: 120 +summary: Welche Größen sich ändern, wenn dieselbe Bewegung einen anderen Zustand zeigen soll, wie du einen Zustandswechsel mit Kontrast, Haltezeit und Übergang lesbar machst und wie der Beobachtungstest zeigt, was andere darin erkennen, ohne dass du die Antwort vorgibst. +place: unterwegs +goals: + - Du nennst die Größen, die sich zwischen zwei Zuständen derselben Bewegung ändern lassen, und formulierst eine Änderung als Hypothese statt als Garantie. + - Du planst einen Zustandswechsel mit deutlichem Posenkontrast, ausreichender Haltezeit und, wo nötig, einem Übergangsbild. + - Du schätzt ab, ob ein Unterschied von ein, zwei Pixeln bei deiner Figurengröße groß genug für einen Test ist. + - Du führst einen Beobachtungstest durch, vom Absichtssatz über die Vorführung ohne Vorrede bis zum wörtlichen Protokoll. + - Du erkennst Fragen, die eine Antwort vorgeben, und formulierst sie offen und neutral. + - Du wertest eine Abweichung vom Absichtssatz als Information und ziehst aus einer einzelnen Antwort keinen Schluss. +resources: + - title: Wikipedia · Twelve basic principles of animation, Staging + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Staging + - title: Wikipedia · Walk cycle + url: https://en.wikipedia.org/wiki/Walk_cycle + - title: Amy Schade · Avoid Leading Questions to Get Better Insights from Participants (Nielsen Norman Group) + url: https://www.nngroup.com/articles/leading-questions/ + - title: Saint11 (Pedro Medeiros) · Death / Take Hit + url: https://saint11.art/blog/pixel-art-tutorials/#Death + - title: Masahiro Sakurai · Exaggerate to Make Up for Information Loss + url: https://www.youtube.com/watch?v=Ivwt37x-2EU +lesson: | + Du willst, dass deine Gliederpuppe müde geht. Du nimmst den Gangzyklus aus [Gehen und Laufen](/animation/gehen-laufen) und verdoppelst jede Dauer. Eine Freundin sieht ihn dreimal und sagt: „Die schleicht sich an jemanden ran.“ Langsamer heißt nicht müde. Ein Zuschauer liest einen Zustand aus mehr als dem Tempo: aus Haltung, Kopf, Armen, Schrittlänge und daraus, wo eine Bewegung verweilt. Was er liest, erfährst du erst, wenn du ihn fragst, und zwar so, dass du ihm die Antwort nicht in den Mund legst. + + Diese Lektion zeigt, welche Größen sich ändern lassen, wenn dieselbe Bewegung einen anderen Zustand zeigen soll, wie du den Wechsel von einem Zustand in den nächsten lesbar machst und wie der **Beobachtungstest** funktioniert, auf den die anderen Module dieses Kurses verweisen. Haltung, Handlungslinie und Ausdruck im Standbild stehen in [Pose und Ausdruck](/pixelart/pose-ausdruck). Hier geht es um die zeitliche Seite. + + ## Dieselbe Bewegung, ein anderer Zustand + + Der Wikipedia-Artikel zum Gangzyklus, als schwach belegt markiert, nennt Gewicht, Gleichgewicht, Timing und Rhythmus als Größen, mit denen Animatoren eine Bewegung glaubhaft machen, und schreibt: „Changes in these elements can also make the same basic walk communicate different personalities, such as confidence, sadness, or excitement.“ ([Walk cycle](https://en.wikipedia.org/wiki/Walk_cycle)). Thomas und Johnston fassen das Ziel unter *Staging*: eine Idee, ob Handlung, Persönlichkeit, Ausdruck oder Stimmung, „completely and unmistakably clear“ zu zeigen ([Staging](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Staging)). + + Für eine Bewegung, die du schon hast, stehen dir diese Stellschrauben zur Verfügung: + + ```text + Größe Frage + Tempo Zyklus kurz/lang? + Verweilen Welche Pose steht? + Haltung Rumpf vor, aufrecht? + Kopf hoch, tief, vorn? + Schritt weit oder kurz? + Arme Ausschlag groß/klein? + Auf und Ab stark oder flach? + ``` + + Eine einzige Größe kann eine Lesart verschieben. Raymond Schlitter (Slynyrd) gibt zwei gehenden Figuren verschieden weite Armschwünge. Den engeren beschreibt er als absichtlich steif und geschäftsmäßig, den weiteren als beschwingt ([Pixelblog 50](https://www.slynyrd.com/blog/2024/5/24/pixelblog-50-human-walk-cycle)). Medeiros übertreibt beim Laufen von oben die Arme, „to make it more expressive“ ([Top Down Run](https://saint11.art/blog/pixel-art-tutorials/#TopDownRun)). + + Aus solchen Größen bauen Animatoren Konventionen: ein tiefer Kopf und kleine Schritte für Erschöpfung, Vorlage und weite Schritte für Eile. Konventionen sind keine Gesetze. Ein hängender Kopf kann als müde, traurig oder suchend gelesen werden, je nachdem, was der übrige Körper tut. Schreib deshalb jede Änderung als Hypothese auf. Ein Plan für zwei Fassungen desselben Gangs mit acht Bildern, je Schritt: + + ```text + Absicht A ruhig B müde? + Kontakt 100 ms 200 ms + Tiefpunkt 100 ms 250 ms + Passing 100 ms 100 ms + Hochpunkt 100 ms 50 ms + Schritt 400 ms 600 ms + Kopf 0 −1 px + Armschwung 2 px 1 px + ``` + + B unterscheidet sich in mehr als dem Tempo. B verweilt unten, in Kontakt und Tiefpunkt, und huscht über den Hochpunkt. Der Kopf sitzt tiefer, die Arme schwingen weniger. Das Fragezeichen hinter „müde“ bleibt stehen, bis jemand die Fassung gesehen hat. + + ### Wo eine Bewegung verweilt + + Das Verweilen sagt oft mehr als das Tempo. In Schlitters Ruhezyklus stehen die Bilder um den höchsten Punkt 100 ms und die des Absinkens 50 ms; er will so die Schwerkraft betonen ([Pixelblog 52](https://www.slynyrd.com/blog/2024/9/26/pixelblog-52-idle-fighting-stance)). Dreh das um, und die Figur hängt unten und kommt nur kurz hoch. Gerade der Ruhezyklus trägt Zustände. Schlitter nennt ihn „one of the most effective means of displaying personality“ (Pixelblog 52), Medeiros schlägt für die Ruhe kleine Zusatzanimationen vor wie Blinzeln, Gähnen, Umsehen und Kratzen ([Character Idle](https://saint11.art/blog/pixel-art-tutorials/#characterIdle)). + + > [!PRAXIS] Eine Größe, eine Absicht + > Als Schlitter seiner Figur Schwert und Schild gab, verkleinerte er im Laufzyklus den Armschwung, damit die Ausrüstung Gewicht bekommt ([Pixelblog 58](https://www.slynyrd.com/blog/2025/10/2/pixelblog-58-top-down-character-animation-part-3)). Er ändert eine einzige Größe und sagt dazu, welche Lesart er beabsichtigt. So arbeitest du auch: eine Änderung, ein Absichtssatz, ein Test. Wer drei Größen auf einmal ändert, weiß hinterher nicht, welche gewirkt hat. + + ## Zustandswechsel lesbar machen + + Ein Zustandswechsel ist der Moment, in dem eine Figur von einem Zustand in den nächsten geht: Sie geht ruhig, hört etwas, bleibt stehen und horcht. Drei Dinge machen ihn lesbar. + + **Kontrast.** Die neue Pose muss sich deutlich von der alten unterscheiden, am besten schon in der Silhouette ([Silhouette und Formensprache](/pixelart/silhouette-formsprache)). Masahiro Sakurai lässt eine getroffene Figur sofort in eine extreme Schmerzpose springen, weit weg von der Ruhepose ([Damage Animations](https://www.youtube.com/watch?v=0xHE3ypX96U&t=12s), ab 0:12). Medeiros schreibt über das Getroffenwerden: „The first frame is the strongest“ ([Death](https://saint11.art/blog/pixel-art-tutorials/#Death)). + + **Haltezeit.** Die neue Pose muss lange genug stehen, damit das Auge sie liest. Ein Wechsel, der in einem Zwischenbild steckt und gleich weiterläuft, ist kein Wechsel, sondern ein Zucken. + + **Übergang.** Ein harter Schnitt in die neue Pose ist schnell, ein Übergangsbild zeigt den Weg. Oft geht dabei der Kopf voraus. Thomas und Johnston nennen auch den Blick, der einer Handlung vorausgeht, eine Antizipation ([Anticipation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Anticipation)). Ein Plan für die horchende Puppe: + + ```text + Bild Dauer Pose + 1–8 Zyklus geht ruhig + 9 100 ms Kopf dreht (Key) + 10 150 ms Schritt stockt + 11 500 ms steht, horcht (Key) + 12 300 ms Ruhe: horchen + ``` + + Auch eine Bewegung, die abbricht, kann einen Wechsel zeigen. Medeiros' Figur steht nach einem Treffer langsam wieder auf und gibt auf halbem Weg auf: „Stop recover in the middle“, die Knie beugen sich, Arme und Kopf ziehen nach. Der Zuschauer sieht eine Richtung, die nicht zu Ende geht. + + Übergänge kosten im Spiel Zeit, in der die Figur nicht tut, was der Spieler will. Wann du sie dir leistest, klärt [Animation im Spiel](/animation/animation-im-spiel); dort steht auch, wie ein Studio nach Rückmeldungen Wendeanimationen ergänzte. Wie du einen Wechsel Bild für Bild im Spiel prüfst, zeigt [die Testszene](/animation/testszene). + + ## Kleine Figuren, kleine Unterschiede + + In Pixelart ist ein Zustand oft ein, zwei Pixel. Sakurai erklärt, dass Bewegungen kleiner oder weit entfernter Figuren winzig aussehen, und übertreibt deshalb (ab 1:20 und 2:04 in [Exaggerate to Make Up for Information Loss](https://www.youtube.com/watch?v=Ivwt37x-2EU&t=80s)). Steht die Kamera weit über der Figur, wie oft in Top-down-Spielen, ist sie klein im Bild. Eine Gliederpuppe von der Seite, 12 Pixel hoch: aufrecht (A), Kopf einen Pixel tiefer und einen vor (B), Kopf zwei Pixel tiefer und zwei vor, Schultern und Arme einen tiefer (C): + + ```text + Bild A Bild B Bild C + ..###.. ....... ....... + ..###.. ...###. ....... + ..###.. ...###. ....### + ...#... ...###. ....### + ...#... ...#... ....### + ...##.. ...##.. ...#... + ...#.#. ...#.#. ...##.. + ...#.#. ...#.#. ...#.#. + ...#... ...#... ...#.#. + ..#.#.. ..#.#.. ..#.#.. + ..#.#.. ..#.#.. ..#.#.. + ..#.#.. ..#.#.. ..#.#.. + ``` + + Zwischen A und B liegt ein Pixel am Kopf. Ob jemand diesen Unterschied in Originalgröße bemerkt, ist eine Frage für den Test. Zeig im Zweifel zuerst die deutlichere Fassung C und geh zurück, wenn sie übertrieben gelesen wird. Was C bedeutet, müde, traurig oder suchend, sagt dir das Raster nicht. + + ## Der Beobachtungstest: fragen, ohne die Antwort vorzugeben + + Du kennst deine Absicht, und sie färbt alles, was du in deiner Animation siehst. Der Beobachtungstest zeigt, was jemand sieht, der sie nicht kennt. Er dauert wenige Minuten. Die Methode stammt aus Testlesen und Usability-Tests; Hintergrund, lautes Denken und Protokollformen stehen in [Testlesen und Playtest](/narrative/testlesen-playtest). Hier die Fassung für Animationen, auf die alle Module dieses Kurses verweisen. + + ### 1. Vorher: Absicht und Fragen aufschreiben + + Schreib den **Absichtssatz** auf, für dich: einen Satz, was ein Zuschauer lesen soll, etwa „Die Puppe ist müde und schleppt sich weiter“. Leg die Fragen vorher fest, denn spontan formulierte Fragen rutschen leicht ins Suggestive. Bereite das Material so vor, dass nichts die Absicht verrät: kein Dateiname wie `puppe-muede.gif` im Bild, kein Titel, keine Notiz daneben. Ein Daumenkino, ein GIF in einer Handy-App oder der Prüfstand am PC genügen. + + ### 2. Zeigen: ohne Vorrede, dreimal + + Sag nur: „Ich zeig dir eine kurze Animation.“ Kein Wort darüber, was sie zeigt oder was du wissen willst. Lass sie dreimal in Schleife laufen. Kommentier nicht, zeig auf nichts und verzieh keine Miene. + + ### 3. Fragen: offen zuerst, gezielt zuletzt + + Die erste Frage ist offen: „Was passiert da?“. Geht es um einen Zustand, folgt: „Wie fühlt sich die Figur?“. Beide geben keine Antwort vor. Erst ganz am Ende, wenn dein Kriterium es verlangt, kommt eine gezielte Frage, etwa „Was ist zwischen dem ersten und dem zweiten Teil anders?“. So färbt sie die früheren Antworten nicht. + + Eine suggestive Frage enthält die Antwort oder eine Auswahl davon: + + - „Siehst du, wie müde sie ist?“ gibt die Antwort vor und lässt nur Ja oder Nein. + - „Ist sie müde oder traurig?“ gibt zwei Antworten vor. + - „Ist das zu langsam?“ gibt Größe und Wertung vor. + - „Gefällt es dir?“ fragt nach Gefallen, nicht nach dem, was gelesen wird. + + Amy Schade von der Nielsen Norman Group warnt: „Leading questions result in biased or false answers, as respondents are prone to simply mimic the words of the interviewer.“ ([Avoid Leading Questions](https://www.nngroup.com/articles/leading-questions/)). Wer „müde“ sagt, hört „müde“ zurück. Fragt die Testperson zurück („Was soll das sein?“), gib die Frage zurück: „Was meinst du?“. + + ### 4. Notieren: wörtlich + + Schreib die Antworten wörtlich auf, in Anführungszeichen, auch Zögern, Lachen und Rückfragen. Dazu Fassung, Datum, Initialen und ob die Person eine frühere Fassung kennt. Korrigier nicht, erklär nicht, verteidige nichts. Wer nach der ersten Antwort erklärt, was gemeint war, bekommt danach Antworten auf seine Erklärung, nicht auf die Animation. Deine Deutung kommt in eine eigene Zeile. + + ```text + Beobachtungstest + Fassung puppe-gang-v2 + Datum … + Absicht „Die Puppe ist müde + und schleppt sich + weiter.“ + Gezeigt 3× Schleife, Handy, + ohne Dateinamen + Person J., kennt v1 nicht + Frage 1 „Was passiert da?“ + Antwort „Die geht spazieren, + ganz langsam.“ + Frage 2 „Wie fühlt sich die + Figur?“ + Antwort „Hm. Gelangweilt?“ + Vergleich müde: nicht genannt + langsam: genannt + Nächstes meine Entscheidung + ``` + + ### 5. Vergleichen: Abweichung ist Information + + Leg die Antworten neben den Absichtssatz: getroffen, teilweise, anders. Eine Abweichung ist keine Note für dich und kein Fehler der Testperson. Sie zeigt, was deine Animation tatsächlich erzählt. Frag dich danach selbst, was in den Bildern zu dieser Lesart führen könnte: Hier wurde das Tempo gelesen, die Haltung nicht. + + Eine einzelne Antwort ist kein Beleg. Sie zeigt eine Lesart. Erst wenn mehrere Personen unabhängig voneinander Ähnliches sagen, hast du ein Muster. Wer eine frühere Fassung gesehen hat, sieht die neue nicht mehr unbefangen; für jede neue Fassung brauchst du deshalb möglichst eine neue Person. Ist niemand da, prüf selbst nach mindestens einer Nacht Abstand und markiere die Notiz als „eigener Blick“. Das ist schwächer als ein fremder Blick, aber besser als keiner. Was du nach dem Test änderst, entscheidest du. Der Test sagt dir, was gelesen wurde, nicht, was du tun sollst. + + > [!MERKE] Der Beobachtungstest in fünf Schritten + > Absichtssatz aufschreiben und für dich behalten. Ohne Vorrede dreimal in Schleife zeigen. Offen fragen, „Was passiert da?“, gezielt erst zuletzt. Wörtlich notieren, nichts erklären. Mit dem Absichtssatz vergleichen: Eine Antwort ist ein Hinweis, kein Beweis. + + > [!WARNING] Die Antwort steckt im Material + > Ein Dateiname, ein Ordner mit dem Namen „müde“, ein Satz wie „Ich hab da was Trauriges gemacht“: Jeder Hinweis vor dem Zeigen ist eine suggestive Frage. Prüf das Material, bevor du es zeigst. + + > [!INTERVIEW] + > „Wie prüfst du, ob eine Animation den Zustand zeigt, den du meinst?“ Gute Antwort: Ich schreibe vorher einen Absichtssatz und zeige die Animation dann jemandem, der sie nicht kennt, ohne Vorrede und in Schleife. Ich frage offen, was passiert, und erst danach gezielt. Die Antworten notiere ich wörtlich und vergleiche sie mit meiner Absicht. Weicht eine ab, frage ich mich, was in den Bildern dazu führt. Eine Antwort ist ein Hinweis; ein Muster brauche ich von mehreren Personen, und für jede neue Fassung möglichst neue Leute. + + ## Häufige Fehler + + - **Nur das Tempo geändert.** Langsamer liest sich als langsam, nicht als müde. Ändere, wo die Bewegung verweilt, Haltung, Kopf und Arme. + - **Der Unterschied ist ein Pixel.** Bei kleinen Figuren geht er unter. Zeig zuerst die deutlichere Fassung. + - **Die neue Pose huscht vorbei.** Ein Zustandswechsel braucht eine Haltezeit auf der neuen Pose. + - **Konvention als Garantie.** „Hängender Kopf heißt traurig“ ist eine Hypothese. Prüf sie. + - **Suggestivfrage.** „Wirkt sie müde?“ liefert „müde“. Frag „Was passiert da?“. + - **Die Absicht im Material.** Dateiname, Titel oder eine Vorbemerkung verraten die Antwort. + - **Gedeutet statt notiert.** „Fand es zu schwach“ ist deine Zusammenfassung. Notier, was gesagt wurde. + - **Eine Antwort als Urteil.** Eine Person zeigt eine Lesart, kein Gesetz. + + ## Zusammenfassung + + - Dieselbe Bewegung zeigt andere Zustände über Tempo, Verweilen, Haltung, Kopf, Schrittlänge, Arme und Auf und Ab. + - Konventionen wie der hängende Kopf sind Hypothesen. Jede Änderung bekommt einen Absichtssatz und einen Test. + - Ein Zustandswechsel wird lesbar durch Kontrast der Posen, eine Haltezeit auf der neuen Pose und, wo nötig, ein Übergangsbild. Oft geht der Kopf voraus. + - Bei kleinen Pixelfiguren sind Unterschiede schnell zu klein. Sakurai übertreibt, um das auszugleichen. + - Der Beobachtungstest: Absichtssatz, ohne Vorrede dreimal zeigen, offen fragen, wörtlich notieren, vergleichen. + - Eine suggestive Frage oder ein verräterischer Dateiname macht den Test wertlos. + - Eine Abweichung ist Information. Eine Antwort ist kein Beleg, ein Muster braucht mehrere unbefangene Personen. +exercises: + - id: muede-kandidaten + type: choice + title: Erster Versuch für „müde“ + prompt: | + Du willst, dass ein Gang müde gelesen wird. Welche Änderungen sind sinnvolle Kandidaten für einen ersten Versuch, den du danach im Beobachtungstest prüfst? + options: + - text: Kontakt und Tiefpunkt länger halten, den Hochpunkt kürzer + correct: true + why: Die Bewegung verweilt dann unten. Das ändert, wo der Gang Zeit verbringt. Das Tempo allein täte das nicht. + - text: Kopf und Schultern etwas tiefer, Armschwung kleiner + correct: true + why: Haltung und Armausschlag sind übliche Stellschrauben. Ob sie als müde gelesen werden, zeigt der Test. + - text: Jede Dauer verdoppeln und sonst nichts ändern + correct: false + why: Das ändert nur das Tempo. Ein langsamer Gang kann als vorsichtig, schleichend oder gemütlich gelesen werden. + - text: Gleichmäßig verteilte Zwischenbilder einfügen + correct: false + why: Gleichmäßig verteilte Bilder machen eine Bewegung flüssiger, aber sie ändern weder die Haltung noch, wo die Bewegung verweilt. + - text: Die Datei „puppe-muede“ nennen, damit der Zuschauer weiß, worauf er achten soll + correct: false + why: Damit gibst du die Antwort vor, und der Test misst nur noch, ob jemand lesen kann. + explanation: | + Ein Zustand zeigt sich in mehreren Größen gleichzeitig: wo die Bewegung verweilt, wie der Körper sich hält, wie weit die Arme schwingen. Nur das Tempo zu ändern, lässt viele Lesarten offen. Keine dieser Änderungen garantiert „müde“. Sie sind Kandidaten, und welcher funktioniert, zeigt erst ein Zuschauer, der die Absicht nicht kennt. + resources: + - title: Wikipedia · Walk cycle + url: https://en.wikipedia.org/wiki/Walk_cycle + + - id: testablauf + type: order + title: Ein Test von vorn bis hinten + prompt: | + Bring die Schritte eines Beobachtungstests in die richtige Reihenfolge. + lang: prose + lines: | + Absichtssatz und Fragen aufschreiben, ohne sie zu zeigen. + Material prüfen: kein Dateiname, kein Titel, der die Absicht verrät. + Ohne Vorrede sagen, dass du eine kurze Animation zeigst. + Die Animation dreimal in Schleife zeigen. + Fragen: „Was passiert da?“ + Antwort wörtlich notieren, ohne zu erklären. + Zuletzt die gezielte Frage stellen, falls dein Kriterium sie braucht. + Antworten mit dem Absichtssatz vergleichen und selbst entscheiden, was sich ändert. + alternatives: + - [2, 1, 3, 4, 5, 6, 7, 8] + explanation: | + Absicht und Fragen stehen vorher fest, damit du sie nicht unter dem Eindruck der ersten Reaktion umformulierst. Das Material kommt vor dem Zeigen dran, weil ein verräterischer Dateiname nicht mehr zurückzunehmen ist. Die offene Frage kommt vor der gezielten, damit diese die erste Antwort nicht färbt. Verglichen und entschieden wird erst danach und allein. + resources: + - title: Kara Pernice · Talking with Users in a Usability Test (NN/g) + url: https://www.nngroup.com/articles/talking-to-users/ + + - id: neutrale-fragen + type: choice + title: Welche Frage ist neutral? + prompt: | + Du zeigst eine Animation, in der eine Gliederpuppe stehen bleibt und horcht. Welche Fragen geben keine Antwort vor? + options: + - text: „Was passiert da?“ + correct: true + why: Offen, ohne Wertung und ohne Begriff, den die Person übernehmen könnte. + - text: „Wie fühlt sich die Figur?“ + correct: true + why: Sie fragt nach dem Zustand, ohne einen zu nennen. Sie setzt nur voraus, dass die Figur etwas fühlt, deshalb kommt sie nach der ersten Frage. + - text: „Siehst du, wie sie aufhorcht?“ + correct: false + why: Die Antwort steckt in der Frage, und es bleibt nur Ja oder Nein. + - text: „Ist sie erschrocken oder neugierig?“ + correct: false + why: Zwei vorgegebene Antworten. Wer etwas Drittes gesehen hat, sagt es dann oft nicht. + - text: „Ist der Halt zu kurz?“ + correct: false + why: Die Frage nennt die Stelle und unterstellt ein Problem. Ob jemandem der Halt überhaupt auffällt, erfährst du so nicht. + explanation: | + Neutral ist eine Frage, die weder eine Antwort noch eine Wertung enthält. Laut Amy Schade (Nielsen Norman Group) übernehmen Befragte oft die Wörter der Fragenden; deshalb liefern suggestive Fragen verzerrte Antworten. Fang mit „Was passiert da?“ an, frag dann nach dem Zustand und stell gezielte Fragen ganz zum Schluss. + resources: + - title: Amy Schade · Avoid Leading Questions (NN/g) + url: https://www.nngroup.com/articles/leading-questions/ + + - id: zeit-bis-pose + type: output + title: Wann steht die neue Pose? + prompt: | + Die Puppe geht und bleibt dann horchend stehen. Wie viele Millisekunden vergehen vom Beginn von Bild 9 bis zu dem Moment, in dem die Pose „steht, horcht“ erscheint? Antworte mit der Zahl. + lang: text + code: | + Bild Dauer Pose + 9 100 ms Kopf dreht (Key) + 10 150 ms Schritt stockt + 11 500 ms steht, horcht (Key) + 12 300 ms Ruhe: horchen + expected: | + 250 + accept: + - 250 ms + explanation: | + Bild 9 steht 100 ms, Bild 10 150 ms, danach erscheint Bild 11: 100 + 150 = 250 ms. Die 500 ms von Bild 11 zählen nicht mit, sie sind die Haltezeit auf der neuen Pose. Beide Zahlen sind für die Lesbarkeit wichtig: wie schnell der Wechsel kommt und wie lange die neue Pose danach steht. + + - id: kopf-tiefer + type: output + title: Wie viel tiefer? + prompt: | + Um wie viele Pixel liegt die Oberkante des Kopfes in Bild C tiefer als in Bild A? Antworte mit der Zahl. + lang: text + code: | + Bild A Bild C + ..###.. ....... + ..###.. ....... + ..###.. ....### + ...#... ....### + ...#... ....### + ...##.. ...#... + ...#.#. ...##.. + ...#.#. ...#.#. + ...#... ...#.#. + ..#.#.. ..#.#.. + ..#.#.. ..#.#.. + ..#.#.. ..#.#.. + expected: | + 2 + accept: + - 2 px + - 2 Pixel + explanation: | + In A beginnt der Kopf in der ersten Reihe, in C in der dritten: zwei Pixel tiefer, dazu zwei Pixel nach vorn. Bei einer 12 Pixel hohen Figur sind zwei Pixel ein Sechstel der Höhe. Wie viel davon in Originalgröße auffällt, entscheidet kein Raster, sondern ein Test mit jemandem, der die Fassungen nicht kennt. + resources: + - title: Masahiro Sakurai · Exaggerate to Make Up for Information Loss (ab 1:20) + url: https://www.youtube.com/watch?v=Ivwt37x-2EU&t=80s + + - id: test-begriffe + type: gap + title: Fünf Wörter für den Test + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Vor dem Test schreibst du einen ⟦Absichtssatz⟧: was ein Zuschauer lesen soll. + Die Antworten notierst du ⟦wörtlich⟧, ohne sie zusammenzufassen. + Eine Frage, die die Antwort vorgibt, ist ⟦suggestiv⟧. + Eine einzelne Antwort ist ein Hinweis, kein ⟦Beweis⟧. + Sagen mehrere unbefangene Personen Ähnliches, hast du ein ⟦Muster⟧. + gaps: + - label: Vorher + hint: Ein Satz, den du für dich behältst. + - label: Wie notieren? + hint: Genau so, wie es gesagt wurde. + accept: ["wortwörtlich", "im Wortlaut"] + - label: Art der Frage + hint: Auf Englisch leading. + accept: ["suggestiv gestellt", "eine Suggestivfrage", "führend"] + - label: Was eine Antwort nicht ist + hint: Ein Wort aus dem Gericht. + accept: ["Beleg"] + - label: Mehrere Antworten + hint: Etwas, das sich wiederholt. + accept: ["Befund"] + explanation: | + Der Absichtssatz ist dein Maßstab, die wörtliche Notiz dein Material. Suggestive Fragen verfälschen das Material, bevor du es hast. Eine Antwort zeigt eine Lesart; erst mehrere unbefangene Personen ergeben ein Muster, nach dem du eine Änderung begründen kannst. + resources: + - title: "Jakob Nielsen · Thinking Aloud: The #1 Usability Tool (NN/g)" + url: https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/ + + - id: skript-mit-vorgabe + type: bug + title: Alle sagen „müde“ + prompt: | + Nach deinem Test sagen alle drei Personen „müde“. Ein Freund wiederholt den Test mit drei anderen Personen, aber ohne dein Skript, und niemand sagt „müde“. Finde die Zeile im Skript, die die Ergebnisse verzerrt. + lang: prose + code: | + Ich zeig dir eine kurze Animation, dreimal hintereinander. + (Die Animation läuft dreimal in Schleife.) + Was passiert da? + Siehst du, wie müde die Puppe ist? + Was ist dir sonst noch aufgefallen? + lines: [4] + explanation: | + Die vierte Zeile enthält die Antwort. Wer sie hört, übernimmt das Wort „müde“, ob er es vorher gesehen hat oder nicht. Die anderen Zeilen sind neutral: Die Ansage verrät nichts, „Was passiert da?“ und „Was ist dir sonst noch aufgefallen?“ sind offen. Neutral wäre an der Stelle „Wie fühlt sich die Figur?“, nach der offenen Frage gestellt. + resources: + - title: Amy Schade · Avoid Leading Questions (NN/g) + url: https://www.nngroup.com/articles/leading-questions/ + + - id: protokoll-pruefen + type: bug + title: Zwei Zeilen zu viel gedeutet + prompt: | + Dieses Protokoll soll später zeigen, was eine Person gesehen hat. Zwei Zeilen verletzen die Regeln des Beobachtungstests. Finde sie. + lang: prose + code: | + Fassung: kiste-wurf-v3 + Absicht: Die Puppe wirft die schwere Kiste mit aller Kraft. + Person: M., hat keine frühere Fassung gesehen. + Frage: Was passiert da? + Antwort: Sie fand den Wurf zu schwach. + Vergleich: Kraft nicht genannt, schwer nicht genannt. + Ergebnis: Die Antizipation ist zu kurz, das ist damit bewiesen. + lines: [5, 7] + explanation: | + Zeile 5 ist keine wörtliche Antwort, sondern deine Zusammenfassung; was M. gesagt hat, lässt sich später nicht mehr nachlesen. Zeile 7 macht aus einer Antwort einen Beweis und nennt gleich die Ursache. Eine Person zeigt eine Lesart, und warum sie so liest, ist deine Vermutung, die in einer eigenen Zeile als Vermutung stehen darf. Die übrigen Zeilen halten fest, was du vorher wolltest und was passiert ist. + resources: + - title: "Jakob Nielsen · Thinking Aloud: The #1 Usability Tool (NN/g)" + url: https://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/ + + - id: sturz-erklaeren + type: explain + title: Erholen und aufgeben + prompt: | + Pedro Medeiros zeigt in seinem Tutorial „Death / Take Hit“, wie eine Figur getroffen wird, sich erholen will und aufgibt. Erkläre in wenigen Sätzen, wodurch die Wechsel zwischen diesen Zuständen lesbar werden. + lang: text + code: | + Saint11, Death / Take Hit + Impact The first frame is + the strongest + Recover Slowly get back to + idle position + Give up Stop recover in the + middle, bend the + knees, arms and head + lag behind + Hit Overshoot ground + ground (+1 pixel down), + arm bounce, rest + points: + - Das erste Bild des Treffers ist die stärkste Pose, der Kontrast zur Ruhe macht den Wechsel sofort sichtbar. + - Die Erholung ist langsam und hat eine Richtung, zurück zur Ruhe. + - Das Aufgeben zeigt sich daran, dass diese Richtung mitten im Weg abbricht und die Knie nachgeben. + - Arme und Kopf kommen später als der Rumpf und zeigen so, dass der Rumpf die Bewegung führt. + - Der Aufprall endet mit Überschwingen und einer Ruhe, der neue Zustand steht. + explanation: | + Jeder Wechsel bekommt etwas, woran das Auge ihn festmacht. Der Treffer kommt mit der stärksten Pose im ersten Bild, also mit maximalem Kontrast. Die Erholung baut eine Erwartung auf, weil sie langsam in eine Richtung läuft, und genau diese Erwartung bricht das Aufgeben, wenn die Bewegung auf halbem Weg kippt. Nachziehende Arme und Kopf zeigen, dass der Rumpf führt. Das Ende mit Überschwingen und Ruhe gibt dem neuen Zustand eine Haltezeit. Ob das bei Medeiros' Zuschauern so gelesen wird, sagt das Tutorial nicht; es beschreibt, was er zeichnet. + resources: + - title: Saint11 · Death / Take Hit + url: https://saint11.art/blog/pixel-art-tutorials/#Death + + - id: zwei-zustaende + type: practice + title: Eine Puppe, zwei Zustände + prompt: | + Zeichne auf Papier einen Gang einer Gliederpuppe mit vier bis acht Bildern in zwei Zuständen. Die Zustände wählst du, etwa eilig und vorsichtig, oder zwei eigene. Schreib für jede Fassung einen Absichtssatz und eine Liste der Größen, die du änderst. Bau beide als Daumenkino und zeig sie im Beobachtungstest mindestens einer Person, die sie nicht kennt, in zufälliger Reihenfolge. Ist niemand da, prüf nach einer Nacht selbst und markier das. + lang: prose + starter: | + Zustand A, Absichtssatz: + Zustand B, Absichtssatz: + Geänderte Größen (A → B): + Bildliste B (Bild, Dauer, Pose): + Person, kennt die Fassungen? (ja/nein): + Antworten zu A (wörtlich): + Antworten zu B (wörtlich): + Vergleich mit der Absicht: + checklist: + - Beide Fassungen zeigen dieselbe Bewegung mit derselben Bildzahl. + - Die geänderten Größen sind einzeln aufgelistet, und es ist mehr als nur das Tempo. + - Für jede Fassung stand der Absichtssatz vor dem Test fest. + - Die Fragen waren „Was passiert da?“ und „Wie fühlt sich die Figur?“, und die Antworten stehen wörtlich da. + - Du hast notiert, wo eine Antwort abweicht, ohne daraus eine Regel zu machen. + - Ein eigener Blick ist als solcher markiert. + explanation: | + Die Übung verbindet beide Hälften des Moduls: Stellschrauben bewusst ändern und prüfen, was davon ankommt. Weil die Bewegung gleich bleibt, kannst du Unterschiede in den Antworten deinen Änderungen zuordnen. Wenn nur das Tempo gelesen wird, weißt du, welche Größe du als Nächstes verstärkst. Eine Person liefert eine Lesart; für ein Muster wiederholst du den Test mit weiteren. + resources: + - title: Wikipedia · Walk cycle + url: https://en.wikipedia.org/wiki/Walk_cycle + + - id: wechsel-planen + type: practice + title: Die Puppe horcht auf + prompt: | + Plan einen Zustandswechsel: Eine Gliederpuppe geht ruhig, hört etwas und bleibt horchend stehen. Zeichne Thumbnails der Keys auf Papier und schreib eine Bildliste mit Dauern. Leg fest, in welchem Bild der Wechsel zum ersten Mal sichtbar wird, welche Pose den neuen Zustand zeigt und wie lange sie steht. Teste den Wechsel mit „Was passiert da?“. + lang: prose + starter: | + Absichtssatz: + Keys (Bild, Pose): + Bildliste (Bild, Dauer, Pose): + Erstes Bild mit sichtbarem Wechsel: + Neue Pose, Haltezeit: + Antwort (wörtlich, wer): + Vergleich mit der Absicht: + checklist: + - Die Bildliste nennt das Bild, in dem der Wechsel beginnt, und eine Haltezeit für die neue Pose. + - Die neue Pose unterscheidet sich von der Gangpose schon in der Silhouette, nicht erst in einem Detail. + - Du hast entschieden und notiert, ob ein Übergangsbild zwischen Gang und neuer Pose steht. + - Die Antwort steht wörtlich da, und du hast sie mit dem Absichtssatz verglichen. + explanation: | + Ein Wechsel braucht einen Anfang, eine neue Pose und Zeit auf dieser Pose. Wer das in der Bildliste festlegt, prüft im Test nicht mehr „irgendwie“, sondern eine konkrete Annahme: Ab Bild 9 sieht man es, ab Bild 11 steht es. Weicht die Antwort ab, siehst du an der Liste, wo du ansetzt, etwa beim Kontrast der Pose oder bei ihrer Haltezeit. + resources: + - title: Wikipedia · Twelve basic principles, Staging + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Staging + + - id: fragen-vorbereiten + type: practice + title: Dein Testzettel + prompt: | + Bereite den Zettel für deinen nächsten Beobachtungstest vor, zu einer Studie, die du schon hast. Schreib den Absichtssatz, die Ansage vor dem Zeigen, die offene Frage, die Frage nach dem Zustand und, falls nötig, eine gezielte Frage für den Schluss. Prüf jede Frage: Enthält sie ein Wort aus deinem Absichtssatz? + lang: prose + starter: | + Studie und Fassung: + Absichtssatz (nur für mich): + Ansage: + Frage 1: + Frage 2: + Gezielte Frage zuletzt: + Wörter aus dem Absichtssatz in den Fragen: + Material ohne verräterischen Namen? (ja/nein): + checklist: + - Keine Frage und nicht die Ansage enthält ein Wort aus deinem Absichtssatz. + - Keine Frage lässt sich nur mit Ja oder Nein beantworten, außer der gezielten am Schluss. + - Keine Frage bietet zwei Antworten zur Auswahl an. + - Du hast notiert, wie du Dateiname und Titel versteckst. + explanation: | + Die meisten Fehler eines Beobachtungstests passieren vor dem Zeigen. Ein Wort aus dem Absichtssatz in der Frage reicht, damit die Testperson es zurückgibt. Wer den Zettel vorher schreibt und prüft, muss im Gespräch nichts improvisieren. Denselben Zettel kannst du für jede Fassung wieder benutzen, nur die Person sollte neu sein. + resources: + - title: Amy Schade · Avoid Leading Questions (NN/g) + url: https://www.nngroup.com/articles/leading-questions/ diff --git a/content/animation/modules/schwerpunkt-balance.yaml b/content/animation/modules/schwerpunkt-balance.yaml new file mode 100644 index 0000000..a139f7a --- /dev/null +++ b/content/animation/modules/schwerpunkt-balance.yaml @@ -0,0 +1,488 @@ +id: schwerpunkt-balance +title: Schwerpunkt, Gleichgewicht und Bodenkontakt +level: 2 +minutes: 110 +summary: Wie der Schwerpunkt einer Figur über die Zeit wandert, warum er über der Stützfläche liegen muss, damit sie steht, warum ein tragender Fuß sich nicht bewegt und wie du in der Draufsicht mit dem Schatten zeigst, wo der Boden ist. +place: unterwegs +goals: + - Du schätzt den Schwerpunkt einer Pose und prüfst mit dem Lot, ob er über der Stützfläche liegt. + - Du planst, wie der Schwerpunkt vor einem Schritt, beim Aufstehen und beim Heben wandert, bevor sich die Füße bewegen. + - Du rechnest den gemeinsamen Schwerpunkt aus Figur und Last aus und leitest daraus die Haltung ab. + - Du hältst tragende Füße zwischen Kontaktbildern fest und findest rutschende Füße in einer Bildliste. + - Du zeigst in einer Draufsicht Höhe über den Abstand zwischen Figur und Schatten und hältst den Schatten am Boden. +resources: + - title: Wikipedia · Balance (ability) + url: https://en.wikipedia.org/wiki/Balance_(ability) + - title: Wikipedia · Center of mass, A system of particles + url: https://en.wikipedia.org/wiki/Center_of_mass#A_system_of_particles + - title: Saint11 · Top Down Tricks + url: https://saint11.art/blog/pixel-art-tutorials/#TopDownTricks + - title: Game Anim · The Five Fundamentals of Video Game Animation + url: https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/ + - title: Wikimedia Commons · Muybridge, Plate 317, Lifting and heaving a rock + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_throwing_rock_(rbm-QP301M8-1887-317).jpg +lesson: | + Deine Gliederpuppe steht von einem Stuhl auf, und in einem anderen Versuch hebt sie eine Kiste. Beide Male stimmt etwas nicht, ohne dass du sagen kannst, was. Beim Aufstehen schwebt sie nach oben, als hinge sie an einem Haken. Mit der Kiste in den Armen steht sie kerzengerade, als wöge die Kiste nichts. Und beim ersten Schritt danach rutscht der Fuß, auf dem sie steht, ein Stück mit. + + Alle drei Fehler haben dieselbe Ursache: Die Zeichnungen wissen nicht, wo das Gewicht ist. Richard Williams betont im Band *Flexibility and Weight* seines *Animator's Survival Kit*, wie wichtig es ist, „where the weight is in every drawing“ zu wissen: woher es kommt, worüber es wandert und wohin es geht ([AWN](https://www.awn.com/news/animators-survival-kit-now-available-mini-guides)). Wie eine einzelne Pose ihr Gewicht zeigt, steht in [Pose und Ausdruck](/pixelart/pose-ausdruck). Diese Lektion fragt, wie der Schwerpunkt **über die Zeit** wandert, und was die Füße dabei tun. + + ## Schwerpunkt, Lot und Stützfläche + + Der **Schwerpunkt** ist der Punkt, an dem du einen Körper unterstützen könntest, ohne dass er kippt. Für einen Körper aus mehreren Teilen ist er der nach Masse gewichtete Mittelwert ihrer Positionen ([Center of mass](https://en.wikipedia.org/wiki/Center_of_mass#A_system_of_particles)). Bei einem aufrecht stehenden Erwachsenen liegt er rund 10 cm über der Stelle, an der der Oberschenkel an der Hüfte ansetzt ([Center of mass: Body motion](https://en.wikipedia.org/wiki/Center_of_mass#Body_motion)). Bewegt sich ein Arm, ein Bein oder der Oberkörper, wandert der Schwerpunkt mit. + + Die **Stützfläche** ist die Fläche, auf der der Körper steht: beide Füße und alles dazwischen. Steht die Figur auf einem Bein, schrumpft sie auf diesen einen Fuß. Stützt sie sich mit der Hand an einer Wand ab, wächst sie bis zur Hand. Gleichgewicht heißt in der Biomechanik, das **Lot**, also die senkrechte Linie vom Schwerpunkt nach unten, innerhalb der Stützfläche zu halten ([Balance](https://en.wikipedia.org/wiki/Balance_(ability))). + + ```text + Boden ....[=========].... + Lot A ^ stabil + Lot B ^ kippt + ``` + + Liegt das Lot neben der Stützfläche, kippt der Körper, bis ein Fuß oder eine Hand ihn auffängt. Beides kann gewollt sein: Ein Sturz beginnt so, und jeder Schritt nach vorn auch. Ungewollt ist es, wenn eine Figur stillsteht und das Lot daneben liegt. Dann steht sie, wie ein Mensch nicht stehen kann. + + > [!TIP] Das Lot auf dem Papier + > Leg ein Lineal oder einen Faden senkrecht durch die Hüfte deiner Strichfigur. Markiere die Füße als Strecke auf der Bodenlinie. Fällt das Lot zwischen die Füße, steht die Figur. In einer Fotoserie kannst du dasselbe tun: Das Lot durch die Hüfte jedes Bilds zeigt dir, wann das Gewicht von einem Fuß auf den anderen geht. + + Jonathan Cooper zählt in seinen fünf Grundlagen der Spielanimation „Collision & Center of Mass/Balance“ zur Lesbarkeit ([Five Fundamentals](https://www.gameanim.com/2020/04/04/the-five-fundamentals-of-video-game-animation/)). Ein Zuschauer liest das Gleichgewicht einer Figur mit, auch wenn er es nicht benennen kann. + + > [!MERKE] + > Steht eine Figur still, fällt das Lot von ihrem Schwerpunkt in die Stützfläche. Bevor ein Fuß sich hebt, muss das Gewicht über dem anderen sein. + + ## Der Schwerpunkt wandert, bevor die Füße es tun + + Willst du aus dem Stand einen Fuß heben, schrumpft die Stützfläche auf den anderen Fuß. Das Lot muss also vorher dorthin, sonst kippst du zur Seite. Von vorn gesehen wandert die Hüfte deshalb über den Standfuß, und erst danach hebt sich der andere, das **Spielbein**. Als Bildliste, x in Pixeln von links: + + ```text + Bild Hüfte Fuß L Fuß R + 1 16 12 20 + 2 18 12 20 + 3 20 12 20 + 4 20 hebt 20 + ``` + + In Bild 3 steht die Hüfte über dem rechten Fuß. Erst in Bild 4 hebt sich der linke. Zeichnest du das Heben schon in Bild 2, hängt das Gewicht über einer Stelle, an der kein Fuß mehr steht. + + Beim Aufstehen vom Stuhl ist es dasselbe in der Seitenansicht. Im Sitzen tragen Sitzfläche und Füße gemeinsam. Damit die Füße allein tragen können, muss der Oberkörper so weit nach vorn, dass das Lot über den Füßen liegt. Erst dann hebt das Gesäß ab und die Beine strecken sich. Fehlt diese Vorlage, steigt die Figur senkrecht auf und schwebt. + + Beim Gehen hebt sich der Schwerpunkt, wenn das Standbein senkrecht steht, und sinkt, wenn die Beine gespreizt sind; der Körper „vaults“ über das Bein am Boden ([Walking](https://en.wikipedia.org/wiki/Walking)). Wie du daraus einen Gangzyklus baust, steht in [Gehen und Laufen](/animation/gehen-laufen). + + ## Last tragen: ein gemeinsamer Schwerpunkt + + Hebt eine Figur eine Kiste, zählt der Schwerpunkt von Figur und Kiste zusammen. Hält sie die Kiste vor dem Bauch, zieht die Kiste ihn nach vorn. Damit das Lot über den Füßen bleibt, muss etwas nach hinten. Ein Modell mit Masse und waagerechter Position der Teile, die Füße bei x = 0: + + ```python run + def sp(teile): + m = mx = 0 + for masse, x in teile: + m += masse + mx += masse * x + return mx / m + + # (kg, x in cm), Füße bei 0 + puppe = (60, 0) + kiste = (20, 30) + print(sp([puppe, kiste])) + puppe = (60, -10) + print(sp([puppe, kiste])) + ``` + + Mit der Kiste 30 cm vor dem Körper liegt der gemeinsame Schwerpunkt 7,5 cm vor den Füßen. Verlagert die Puppe ihr eigenes Gewicht um 10 cm nach hinten, steht das Lot wieder über den Füßen. Die Zahlen sind ein Modell, das Prinzip zeigt sich in jeder Aufnahme: Je schwerer die Last und je weiter sie vom Körper ist, desto mehr muss die Figur dagegenhalten. Daraus folgen zwei Dinge, die du zeichnest: + + - **Beim Bücken geht die Hüfte nach hinten**, während Kopf und Arme nach vorn gehen. + - **Eine schwere Last bleibt nah am Körper**, und der Körper lehnt sich gegen sie. Trägt die Figur etwas auf einer Seite, neigt sie sich zur anderen. + + Muybridge hat einen Mann fotografiert, der einen 75 Pfund schweren Stein hebt und wegstößt, aus drei Blickwinkeln ([Plate 317](https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_throwing_rock_(rbm-QP301M8-1887-317).jpg)). In der seitlichen Reihe siehst du, wie weit die Hüfte beim Greifen hinter die Fersen geht. Wie eine Figur durch Haltung und Timing zeigt, dass etwas schwer ist, vertieft [Gewicht zeigen](/animation/gewicht-aufprall). + + ## Bodenkontakt: Ein tragender Fuß steht still + + Ein Fuß, der Gewicht trägt, bewegt sich nicht gegen den Boden. In der Zeichnung heißt das: Vom **Kontaktbild**, in dem er aufsetzt, bis zu dem Bild, in dem er sich hebt, bleibt er auf denselben Pixeln. Der Körper bewegt sich über ihm, der Fuß nicht. Rutscht er auch nur ein Pixel, sieht die Figur aus, als stünde sie auf Eis. + + ```text + Bild Standfuß Spielbein Hüfte + 1 20 10 15 + 2 20 10 19 + 3 20 16 21 + 4 20 24 23 + 5 20 30 26 + ``` + + Der Standfuß bleibt bei x = 20, bis das Spielbein in Bild 5 aufsetzt. Erst danach darf er sich heben. Prüf das mit Onion Skinning oder mit übereinandergelegten Haftzetteln: Der tragende Fuß muss in allen Bildern deckungsgleich sein. + + Im Spiel kommt eine zweite Quelle für rutschende Füße dazu: Die Figur bewegt sich per Code über den Boden, und das Tempo passt nicht zur Schrittlänge der Animation. Wie du das ausrechnest, steht in [Animationen in Godot](/godot/animationen). + + > [!PRAXIS] Schritte nach Strecke statt nach Zeit + > David Rosen erzählt in seinem GDC-Vortrag, dass sein Lauf nur zwei Keys hat und von der zurückgelegten Strecke angetrieben wird, nicht von der Zeit. Weil Animation und Bewegung über den Boden so aneinander hängen, rutschen die Füße nicht ([An Indie Approach to Procedural Animation](https://www.youtube.com/watch?v=LNidsMesxSE&t=329s), ab 5:29). Für gezeichnete Sprites ist das nicht direkt übertragbar, das Prinzip schon: Der Fuß am Boden gibt das Tempo vor. + + ## Draufsicht: Höhe und Boden auf derselben Achse + + In einer Seitenansicht ist oben oben. In einer Draufsicht, auch der schrägen 3/4-Ansicht vieler Top-down-Spiele, heißt „weiter oben auf dem Bildschirm“ zweierlei: weiter hinten auf dem Boden oder höher in der Luft. Das Auge braucht einen Anker, um beides zu trennen, und das ist der **Schatten**. Er bleibt am Boden, an der Stelle, über der die Figur ist. + + Pedro Medeiros (Saint11) beschreibt das für die Technik von Top-down-Spielen: Schwebende Objekte bekommen ihren Bezugspunkt dort, „they would touch the ground“, und Kollisionen sind „like a ground projection of what it would be in 3-D“ ([Top Down Tricks](https://saint11.art/blog/pixel-art-tutorials/#TopDownTricks)). Maßgeblich ist die Position auf dem Boden. Die Höhe zeichnest du als Abstand darüber. Ein Sprung: + + ```text + Bild 1 Bild 2 Bild 3 + o + o /|\ + o /|\ / \ + /|\ / \ + / \ + === === === + ``` + + Der Schatten bleibt in allen drei Bildern auf derselben Zeile, nur die Figur steigt. Als Bildliste mit Bildschirmzeilen: Figur y = Schatten y − Höhe. + + ```text + Bild Schatten Höhe Figur + 1 100 0 100 + 2 100 6 94 + 3 100 10 90 + 4 100 12 88 + ``` + + Dasselbe gilt im Kleinen. Medeiros' wippende Ruheposen bewegen den Körper um ein Pixel nach unten und wieder nach oben, mit gebeugten Knien, und „Character doesn't change mass“ ([Character Idle](https://saint11.art/blog/pixel-art-tutorials/#characterIdle)). Raymond Schlitter lässt den Körper in einem Top-down-Lauf aus sechs Bildern um −1, −1 und +2 Pixel wippen ([Pixelblog 55](https://www.slynyrd.com/blog/2025/3/24/pixelblog-55-top-down-character-animation)). Das Auf und Ab über festen Füßen und festem Schatten zeigt, dass Gewicht auf den Beinen liegt. + + Aus der Draufsicht sind Figuren oft klein, und kleine Figuren verlieren Bewegungsinformation; wie Animatoren das mit Übertreibung ausgleichen, steht in [Körpersprache und Zustandswechsel](/animation/koerpersprache). Für Gewicht heißt das: Ein Pixel Einsinken kann zu wenig sein. Ob es reicht, zeigt der Beobachtungstest. Damit der Schatten im Spiel am richtigen Fleck bleibt, gehört der Ursprung des Sprites an die Füße ([Sprites importieren](/godot/sprites-importieren)). + + > [!INTERVIEW] + > „Wie zeigst du in einem Top-down-Spiel, dass eine Figur springt?“ Gute Antwort: Über den Abstand zum Schatten. Die Position der Figur ist der Punkt am Boden, dort bleibt der Schatten. Die Höhe zeichne ich als Versatz nach oben. Steigen Figur und Schatten gemeinsam, hat sich der Bodenpunkt verschoben: Das ist eine Bewegung nach hinten, kein Sprung. Beim Landen achte ich darauf, dass die Füße wieder genau auf den Schatten treffen, und prüfe, ob Zuschauer den Sprung als Sprung erkennen. + + ## Häufige Fehler + + - **Aufstehen ohne Vorbeugen.** Das Lot bleibt hinter den Füßen, die Figur schwebt nach oben. Erst den Oberkörper über die Füße, dann die Beine strecken. + - **Fuß hebt, bevor das Gewicht verlagert ist.** Das Gewicht hängt über einer Stelle ohne Fuß. Die Hüfte wandert zuerst über den Standfuß. + - **Last ohne Gegengewicht.** Eine Figur trägt eine schwere Kiste und steht kerzengerade. Hüfte nach hinten, Last nah an den Körper. + - **Rutschender Standfuß.** Ein tragender Fuß verschiebt sich zwischen Kontakt und Abheben. Er bleibt auf denselben Pixeln. + - **Schatten springt mit.** Steigt der Schatten mit der Figur, hat sie sich auf dem Boden nach hinten bewegt. Der Schatten bleibt am Boden. + - **Gleichgewicht nur in den Keys geprüft.** Ein Zwischenbild, in dem das Lot neben den Füßen liegt, sieht man beim Abspielen als Wackeln. Prüf jedes Bild. + + ## Zusammenfassung + + - Steht eine Figur still, fällt das Lot von ihrem Schwerpunkt in die Stützfläche. Liegt es daneben, kippt sie, bis ein Fuß sie auffängt. + - Der Schwerpunkt wandert vor den Füßen: Erst geht das Gewicht über den Standfuß, dann hebt sich das Spielbein. Beim Aufstehen geht der Oberkörper zuerst über die Füße. + - Figur und Last haben einen gemeinsamen Schwerpunkt. Eine schwere Last zieht ihn weg, die Figur hält mit Hüfte oder Neigung dagegen. + - Ein tragender Fuß bleibt vom Kontaktbild bis zum Abheben auf denselben Pixeln. + - In der Draufsicht ist der Schatten der Boden. Höhe ist der Abstand zwischen Figur und Schatten, und der Schatten steigt nicht mit. + - Kleine Figuren aus der Ferne brauchen deutlichere Bewegungen. Ob ein Pixel Einsinken reicht, prüfst du mit einem Zuschauer. +exercises: + - id: kiste-im-gleichgewicht + type: choice + title: Bücken, ohne zu kippen + prompt: | + Eine Gliederpuppe bückt sich nach einer schweren Kiste und hebt sie an. Was hält sie dabei im Gleichgewicht? + options: + - text: Die Hüfte geht nach hinten, während Kopf und Arme nach vorn gehen. + correct: true + why: Das Gewicht hinter den Füßen gleicht das Gewicht vor den Füßen aus. Das Lot bleibt in der Stützfläche. + - text: Die Kiste bleibt beim Anheben nah am Körper. + correct: true + why: Je näher die Last, desto weniger zieht sie den gemeinsamen Schwerpunkt nach vorn. + - text: Die Knie bleiben durchgestreckt, nur der Oberkörper klappt nach vorn. + correct: false + why: Ohne Hüfte nach hinten liegt das Gewicht von Oberkörper und Kiste vor den Füßen. Die Puppe kippt nach vorn. + - text: Die Arme strecken sich weit nach vorn, um die Kiste früh zu greifen. + correct: false + why: Weit vorgestreckte Arme mit Last ziehen den Schwerpunkt nach vorn, also aus der Stützfläche heraus. + explanation: | + Beim Heben haben Figur und Kiste einen gemeinsamen Schwerpunkt, und sein Lot muss über den Füßen bleiben. Alles, was vor den Füßen ist, braucht ein Gegengewicht dahinter, meist die Hüfte. Eine nahe Last braucht weniger davon als eine ferne. In Muybridges Tafel 317 siehst du beides: Gesäß weit hinten beim Greifen, Stein nah am Bauch beim Anheben. + resources: + - title: Wikimedia Commons · Muybridge, Plate 317 + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_throwing_rock_(rbm-QP301M8-1887-317).jpg + + - id: sprung-von-oben + type: choice + title: Ein Sprung in der Draufsicht + prompt: | + In deinem Top-down-Spiel springt eine Figur auf der Stelle. Wie zeigst du in den Zeichnungen, dass sie in die Höhe geht und nicht nach hinten läuft? + options: + - text: Die Figur steigt auf dem Bildschirm nach oben, der Schatten bleibt auf seiner Zeile. + correct: true + why: Der Schatten markiert den Punkt am Boden. Der wachsende Abstand zu ihm zeigt Höhe. + - text: Figur und Schatten steigen gemeinsam auf dem Bildschirm nach oben. + correct: false + why: Steigt der Bodenpunkt mit, hat sich die Figur auf dem Boden nach hinten bewegt, statt in die Höhe zu gehen. + - text: Die Figur bleibt auf ihrer Zeile, der Schatten wandert nach unten. + correct: false + why: Der Abstand zum Schatten wächst zwar, aber der Bodenpunkt wandert nach vorn. So springt die Figur auf dich zu, nicht auf der Stelle. + - text: Die Figur wird in jedem Bild ein Pixel breiter. + correct: false + why: Das ändert die Form, nicht die Höhe. Ohne Abstand zum Schatten gibt es keinen Hinweis auf einen Sprung. + explanation: | + In der Draufsicht teilen sich Höhe und Tiefe die senkrechte Bildschirmachse. Der Schatten trennt sie, weil er immer am Boden bleibt. Saint11 beschreibt dieselbe Idee für die Technik: Bezugspunkt eines schwebenden Objekts ist die Stelle, an der es den Boden berühren würde. Die Höhe ist der Abstand darüber. + resources: + - title: Saint11 · Top Down Tricks + url: https://saint11.art/blog/pixel-art-tutorials/#TopDownTricks + + - id: aufstehen-ordnen + type: order + title: Vom Stuhl hoch + prompt: | + Bring die Phasen beim Aufstehen von einem Stuhl in die richtige Reihenfolge. + lang: prose + lines: | + Die Puppe sitzt, Sitzfläche und Füße tragen gemeinsam. + Der Oberkörper beugt sich vor, das Lot wandert Richtung Füße. + Das Lot liegt über den Füßen, das Gesäß hebt ab. + Die Beine strecken sich, der Oberkörper richtet sich auf. + Die Puppe steht, das Lot fällt zwischen die Füße. + explanation: | + Solange die Sitzfläche mitträgt, darf das Lot hinter den Füßen liegen. Bevor das Gesäß abhebt, müssen die Füße allein tragen, also muss das Lot vorher über ihnen sein. Deshalb kommt das Vorbeugen vor dem Strecken. Wer die Reihenfolge umdreht, zeichnet eine Figur, die aus dem Stuhl schwebt. + resources: + - title: Wikipedia · Balance (ability) + url: https://en.wikipedia.org/wiki/Balance_(ability) + + - id: welche-posen-stehen + type: output + title: Steht sie oder kippt sie? + prompt: | + Für vier Posen kennst du die Lage des Lots und die Stützfläche, beides in Pixeln von links. Welche Posen stehen, ohne dass die Figur einen Schritt machen oder sich festhalten muss? Antworte mit den Nummern, aufsteigend, durch Komma getrennt, etwa `2, 4`. + lang: text + code: | + Pose Lot bei x Stützfläche + 1 12 10 bis 20 + 2 22 10 bis 20 + 3 15 14 bis 16 + 4 9 10 bis 20 + expected: | + 1, 3 + accept: + - "1,3" + - 1 3 + - 1 und 3 + explanation: | + Pose 1 hat das Lot bei 12, also zwischen 10 und 20. Pose 3 steht auf einer schmalen Fläche, etwa einem Bein, aber das Lot trifft sie genau. Bei Pose 2 liegt das Lot rechts neben den Füßen, bei Pose 4 links daneben; beide kippen, bis ein Fuß sie auffängt. Eine schmale Stützfläche ist wackelig, aber nicht falsch, solange das Lot darin liegt. + resources: + - title: Wikipedia · Balance (ability) + url: https://en.wikipedia.org/wiki/Balance_(ability) + + - id: mehlsack-tragen + type: output + title: Ein Mehlsack vor dem Bauch + prompt: | + Eine Gliederpuppe trägt einen Mehlsack vor dem Bauch und lehnt sich dabei zurück. Was gibt das Programm aus? + lang: python + code: | + def sp(teile): + m = mx = 0 + for masse, x in teile: + m += masse + mx += masse * x + return mx / m + + # (kg, x in cm), Füße bei 0 + puppe = (60, -5) + sack = (30, 10) + print(sp([puppe, sack])) + expected: | + 0.0 + explanation: | + 60 · (−5) + 30 · 10 = −300 + 300 = 0, geteilt durch 90 kg ergibt 0. Der gemeinsame Schwerpunkt liegt genau über den Füßen. Ein halb so schwerer Sack, nur 15 kg statt 30, bräuchte für dasselbe Ergebnis nur halb so viel Zurücklehnen. Je schwerer die Last, desto deutlicher die Gegenbewegung, und genau die zeigt dem Zuschauer das Gewicht. + resources: + - title: Wikipedia · Center of mass, A system of particles + url: https://en.wikipedia.org/wiki/Center_of_mass#A_system_of_particles + + - id: sprung-zeilen + type: gap + title: Wo steht die Figur? + prompt: | + Ein Sprung in der Draufsicht, in Bildschirmzeilen. Der Schatten bleibt auf Zeile 100, die Höhe steigt und fällt. Ergänze die Zeile der Figur nach der Regel Figur = Schatten − Höhe. + lang: text + code: | + Bild Schatten Höhe Figur + 1 100 0 100 + 2 100 6 94 + 3 100 10 ⟦90⟧ + 4 100 12 ⟦88⟧ + 5 100 10 ⟦90⟧ + 6 100 6 94 + 7 100 0 ⟦100⟧ + gaps: + - label: Bild 3 + hint: 100 − 10. + - label: Bild 4 + hint: 100 − 12. + - label: Bild 5 + hint: Gleiche Höhe wie Bild 3. + - label: Bild 7 + hint: Wieder am Boden. + explanation: | + Bildschirmzeilen zählen von oben, deshalb heißt höher eine kleinere Zahl. Die Figur steigt von 100 auf 88 und fällt zurück, während der Schatten auf 100 bleibt. In Bild 7 treffen Füße und Schatten wieder zusammen: Das ist der Kontakt. Das Spacing der Höhen (6, 4, 2 aufwärts) bremst zum Scheitel hin wie bei jedem Wurf. + resources: + - title: Saint11 · Top Down Tricks + url: https://saint11.art/blog/pixel-art-tutorials/#TopDownTricks + + - id: begriffe-gleichgewicht + type: gap + title: Fünf Wörter fürs Gleichgewicht + prompt: | + Ergänze die fehlenden Begriffe. + lang: prose + code: | + Der Punkt, an dem man einen Körper unterstützen könnte, ohne dass er kippt, heißt ⟦Schwerpunkt⟧. + Die Fläche aus beiden Füßen und allem dazwischen heißt ⟦Stützfläche⟧. + Die senkrechte Linie vom Schwerpunkt nach unten heißt ⟦Lot⟧. + Das Bein, das das Gewicht trägt, während das andere schwingt, heißt ⟦Standbein⟧. + Das Bild, in dem ein Fuß aufsetzt, heißt ⟦Kontaktbild⟧. + gaps: + - label: Ausgleichspunkt + hint: Englisch center of mass. + accept: ["Massenmittelpunkt", "Körperschwerpunkt"] + - label: Fläche unter der Figur + hint: Englisch base of support. + accept: ["Unterstützungsfläche", "Standfläche"] + - label: Senkrechte + hint: Maurer prüfen damit Wände. + accept: ["Schwerelot", "Lotlinie"] + - label: Tragendes Bein + hint: Gegenteil von Spielbein. + accept: ["Standfuß"] + - label: Aufsetzen + hint: Englisch contact. + accept: ["Kontakt", "Kontaktpose", "Contact"] + explanation: | + Schwerpunkt, Lot und Stützfläche sind das ganze Werkzeug für Gleichgewicht: Fällt das Lot in die Fläche, steht die Figur. Standbein und Kontaktbild sagen, welcher Fuß gerade trägt und ab wann. Mit diesen fünf Wörtern lässt sich jede Bildliste auf Gewicht prüfen. + resources: + - title: Wikipedia · Center of mass + url: https://en.wikipedia.org/wiki/Center_of_mass#A_system_of_particles + + - id: standfuss-rutscht + type: bug + title: Wie auf Eis + prompt: | + Eine Gliederpuppe macht aus dem Stand einen Schritt nach vorn. Genau in dem Bild, in dem der vordere Fuß aufsetzt, rutscht die Figur, als stünde sie auf Eis. Finde die Zeile und korrigiere sie. + lang: text + code: | + Bild Standfuß Spielbein Hüfte + 1 20 10 15 + 2 20 10 19 + 3 20 16 21 + 4 20 24 23 + 5 23 30 26 + lines: [6] + fix: + - line: 6 + answers: + - " 5 20 30 26" + hints: + - Welcher Fuß trägt in Bild 5 noch Gewicht? + explanation: | + In Bild 5 setzt das Spielbein gerade erst auf. Bis dahin trägt der Standfuß das ganze Gewicht und darf sich nicht bewegen. Er springt aber von 20 auf 23, also rutscht er unter der Figur weg. Richtig bleibt er bei 20 und hebt sich frühestens im nächsten Bild, wenn das vordere Bein das Gewicht übernommen hat. + resources: + - title: Pixelorama · Timeline, Onion Skinning + url: https://www.pixelorama.org/user_manual/user_interface/timeline#onion-skinning + + - id: schatten-springt-mit + type: bug + title: Ein Hüpfer nach hinten + prompt: | + Eine Figur springt in der Draufsicht auf der Stelle. In Bild 3 sieht es aus, als hüpfe sie ein Stück nach hinten, statt nach oben zu gehen. Finde die Zeile und korrigiere sie. + lang: text + code: | + Bild Schatten Höhe Figur + 1 100 0 100 + 2 100 6 94 + 3 90 10 80 + 4 100 12 88 + 5 100 6 94 + 6 100 0 100 + lines: [4] + fix: + - line: 4 + answers: + - " 3 100 10 90" + explanation: | + In Bild 3 steigt der Schatten von Zeile 100 auf 90. Der Schatten ist der Punkt am Boden; steigt er, hat die Figur sich auf dem Boden nach hinten bewegt. Die Figur selbst steht dann mit Zeile 80 zu hoch. Richtig bleibt der Schatten auf 100 und die Figur steht bei 100 − 10 = 90. + resources: + - title: Saint11 · Top Down Tricks + url: https://saint11.art/blog/pixel-art-tutorials/#TopDownTricks + + - id: stein-heben-lesen + type: explain + title: Ein Stein von 75 Pfund + prompt: | + Muybridge hat einen Mann fotografiert, der einen schweren Stein hebt und wegstößt (Tafel 317, Link unten). Die Liste beschreibt die seitliche Reihe. Erkläre in wenigen Sätzen, wo in den Bildern 2 bis 8 das Gewicht ist und warum der Mann die Haltungen so wählt. + lang: text + code: | + Bild Was zu sehen ist + 1 steht, Stein vor den Füßen + 2 beugt sich vor, Gesäß + hinten, Hände greifen + 3 Knie tief gebeugt, Gesäß + weit hinten, Hände am Stein + 4 Stein vor dem Bauch, nah am + Körper, Oberkörper hebt sich + 5 Stein auf Kopfhöhe an der + Schulter, Körper aufrecht + 6 Stein an der Schulter + 7 Stein an der Schulter, Knie + tiefer gebeugt + 8 stößt ab, Gewicht auf einem + Fuß, andere Ferse hebt ab + 9 Stein ist weg + 10 hinteres Bein schwingt vor + 11 Bein noch vorn in der Luft + 12 steht auf beiden Füßen + points: + - Beim Greifen (2 und 3) geht das Gesäß weit nach hinten, während Kopf und Arme nach vorn gehen; so bleibt das Lot über den Füßen. + - Beim Anheben (4 und 5) bleibt der Stein nah am Körper; der gemeinsame Schwerpunkt von Mann und Stein bleibt so über der Stützfläche. + - Mit dem Stein an der Schulter (6 und 7) liegt die Last über dem Körper; das tiefere Knie in Bild 7 holt Schwung für den Stoß. + - Beim Stoß (8) verlagert er das Gewicht auf einen Fuß, die Stützfläche wird klein, und nach dem Abwurf (9 bis 12) findet er den Stand wieder. + explanation: | + In jedem Bild vor dem Stoß sorgt der Mann dafür, dass das Lot vom gemeinsamen Schwerpunkt aus Körper und Stein über seinen Füßen bleibt. Beim Greifen gleicht das Gesäß hinten den vorgebeugten Oberkörper aus, beim Heben bleibt der Stein dicht am Bauch, und an der Schulter liegt er fast über den Füßen. Das Einsinken in Bild 7 ist die Vorbereitung auf den Stoß; wie man so etwas als Antizipation zeichnet, steht in [Antizipation, Aktion, Erholung](/animation/antizipation-erholung). Erst beim Stoß gibt er das Gleichgewicht kurz auf und fängt sich danach. + resources: + - title: Wikimedia Commons · Muybridge, Plate 317 + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_throwing_rock_(rbm-QP301M8-1887-317).jpg + + - id: aufstehen-thumbnails + type: practice + title: Das Lot beim Aufstehen + prompt: | + Zeichne auf Papier vier bis sechs Thumbnails einer Gliederpuppe, die von einem Stuhl aufsteht, von der Seite. Markiere in jedem Thumbnail den Schwerpunkt als Punkt, zieh das Lot nach unten und markiere die Stützfläche auf der Bodenlinie. Wenn du magst, film dich vorher selbst dabei. + lang: prose + starter: | + Absichtssatz: + Thumbnail 1 (Pose, Lot, Stützfläche): + Thumbnail 2: + Thumbnail 3: + Thumbnail 4: + Bild, in dem das Gesäß abhebt: + Liegt das Lot dort über den Füßen? + checklist: + - Jedes Thumbnail hat einen markierten Schwerpunkt, ein Lot und eine markierte Stützfläche. + - In dem Thumbnail, in dem das Gesäß abhebt, fällt das Lot auf die Füße. + - Solange das Gesäß sitzt, ist die Sitzfläche Teil der Stützfläche und als solche markiert. + - Im letzten Thumbnail fällt das Lot zwischen die Füße. + - Hast du dich gefilmt, ist notiert, in welchem Videobild das Gesäß abhebt. + hints: + - Der Schwerpunkt liegt beim Stehen etwa auf Hüfthöhe. Beugt sich der Oberkörper vor, wandert er mit nach vorn. + explanation: | + Die Übung macht sichtbar, was die Erinnerung auslässt: das Vorbeugen vor dem Aufstehen. Mit Lot und Stützfläche in jedem Thumbnail prüfst du Gleichgewicht, bevor du einen einzigen Pixel setzt. Dieselbe Prüfung funktioniert für Hinsetzen, Bücken und den ersten Schritt aus dem Stand. + resources: + - title: Wikipedia · Balance (ability) + url: https://en.wikipedia.org/wiki/Balance_(ability) + + - id: sprung-mit-schatten + type: practice + title: Ein Sprung von oben gesehen + prompt: | + Plane einen Sprung auf der Stelle in einer Draufsicht, mit einer Gliederpuppe oder einem Ball und einem Schatten darunter. Schreib den Absichtssatz, leg die Höhen für sechs bis acht Bilder fest und zeichne sie auf Haftzettel, den Schatten immer an derselben Stelle. Zeig das Daumenkino jemandem ohne Vorrede und frag nur: „Was passiert da?“ + lang: prose + starter: | + Absichtssatz: + Bildliste (Bild, Höhe, Figur-Zeile): + Schatten-Zeile: + Zuschauer sagt (wörtlich): + Abweichung von meiner Absicht: + Was ich ändere: + checklist: + - Der Schatten steht auf allen Zetteln an derselben Stelle. + - Für jedes Bild ist die Figur-Zeile als Schatten-Zeile minus Höhe ausgerechnet. + - Die Höhen wachsen zum Scheitel hin in kleiner werdenden Schritten und fallen danach in wachsenden Schritten. + - Im letzten Bild treffen Figur und Schatten wieder zusammen. + - Die Antwort des Zuschauers steht wörtlich da; ohne Zuschauer hast du nach einer Nacht Abstand selbst geprüft und das markiert. + hints: + - Ein Bogen für die Höhen steht in Timing und Spacing beim fallenden Ball. Spiegle ihn für den Aufstieg. + explanation: | + Die Übung trennt die beiden Bedeutungen der senkrechten Achse in der Draufsicht. Bleibt der Schatten fest, kann der Zuschauer Höhe und Tiefe auseinanderhalten. Ob er es tut, zeigt seine Antwort: Sagt er „sie läuft nach hinten“, ist der Abstand zum Schatten zu klein oder der Schatten fehlt im Bild. Eine Antwort ist kein Beweis, sie zeigt dir, wo du nachbesserst. + resources: + - title: Saint11 · Top Down Tricks + url: https://saint11.art/blog/pixel-art-tutorials/#TopDownTricks diff --git a/content/animation/modules/testszene.yaml b/content/animation/modules/testszene.yaml new file mode 100644 index 0000000..dd2af47 --- /dev/null +++ b/content/animation/modules/testszene.yaml @@ -0,0 +1,691 @@ +id: testszene +title: "In der Testszene prüfen: Lesbarkeit und Übergänge" +level: 3 +minutes: 150 +summary: Wie dein Timing unverändert in Godot ankommt, wie ein Prüfstand deine Animationen im Spieltakt abspielt, anhält und jeden Bildwechsel mit Tick protokolliert, und wie du damit Lesbarkeit in Originalgröße, Übergänge und die Zeit bis zur erkennbaren Pose prüfst. +place: pc +goals: + - Du rechnest Bilddauern aus deinem Editor in FPS und Frame-Dauer einer SpriteFrames-Ressource um, ohne das Timing zu verändern. + - Du richtest den Prüfstand mit deinen eigenen Animationen ein und startest ihn mit fester Bildrate. + - Du liest aus dem Log ab, wie viele Ticks nach einer Eingabe eine Pose erscheint und wie lange jedes Bild steht. + - Du prüfst Lesbarkeit in Originalgröße vor drei Grautönen, in Bewegung und mit einem zweiten Menschen an der Tastatur. + - Du prüfst jeden Übergang aus jedem Bild heraus und trennst Sprünge durch Export oder Ursprung von Zeichenfehlern. +resources: + - title: Godot Docs · AnimatedSprite2D + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html + - title: Godot Docs · SpriteFrames + url: https://docs.godotengine.org/en/stable/classes/class_spriteframes.html + - title: Godot Docs · 2D sprite animation + url: https://docs.godotengine.org/en/stable/tutorials/2d/2d_sprite_animation.html + - title: Godot Docs · Engine.time_scale + url: https://docs.godotengine.org/en/stable/classes/class_engine.html#class-engine-property-time-scale + - title: Godot Docs · Command line tutorial + url: https://docs.godotengine.org/en/stable/tutorials/editor/command_line_tutorial.html +lesson: | + Im Editor sieht deine Animation fertig aus: 400 % Zoom, heller Grund, eine Schleife, die du so oft abspielst, wie du willst. Im Spiel ist vieles anders. Die Figur steht in Originalgröße vor einem Boden, die Aktion startet mitten aus dem Laufen, und nach ihrem letzten Bild springt die Figur in die Ruhe zurück, in welches Bild der Ruhe auch immer. Ob eine Bewegung dort lesbar ist und ob ihre Übergänge sitzen, siehst du erst im Spiel. + + Dieses Modul baut dafür einen Prüfstand in Godot 4.7: eine Szene, die deine Animationen im Spieltakt abspielt, anhält, Bild für Bild weiterschaltet und jeden Bildwechsel mit Tick ins Log schreibt. Das Skript ist technisches Gerüst. So etwas darf dir eine KI schreiben, und hier steht es fertig, geprüft mit Godot 4.7.2. Die Bilder, ihr Timing und jede Änderung, zu der dich der Prüfstand bringt, sind deine Arbeit. + + ## Vom Editor nach Godot: das Timing mitnehmen + + Zwischen Editor und Prüfstand liegen drei Schritte, und alle drei stehen in anderen Modulen: der Export als Sprite-Sheet oder Bildfolge in [Einzelbilder im Editor](/animation/editor-zeitleiste), der Import mit scharfem Filter und dem Ursprung an den Füßen in [Eigene Sprites importieren](/godot/sprites-importieren) und die SpriteFrames-Ressource mit FPS, Loop und Frame-Dauer in [Animationen zuordnen](/godot/animationen). Hier geht es nur um eine Frage: Kommt dein Timing unverändert an? + + Dein Editor speichert für jedes Bild eine Dauer in Millisekunden. Godot rechnet anders. Eine Animation hat eine Geschwindigkeit in FPS, jedes Bild einen Faktor namens Frame-Dauer, und ein Bild steht Faktor geteilt durch FPS Sekunden lang ([get_frame_duration](https://docs.godotengine.org/en/stable/classes/class_spriteframes.html#class-spriteframes-method-get-frame-duration)). Die Umrechnung geht ohne Rundung, wenn du den größten gemeinsamen Teiler deiner Dauern als Grundtakt nimmst: + + ```python run + from math import gcd + from functools import reduce + + # Bilddauern aus deinem Editor + dauern_ms = [100, 50, 150, 300] + + basis = reduce(gcd, dauern_ms) + fps = 1000 / basis + faktoren = [d // basis for d in dauern_ms] + print(f"FPS {fps:g}, Frame-Dauer {faktoren}") + for d in dauern_ms: + print(f"{d} ms = {d * 60 / 1000:g} Ticks") + ``` + + 20 FPS mit den Faktoren 2, 1, 3 und 6 ergeben genau 100, 50, 150 und 300 ms. Die Zeilen darunter zeigen, wie viele Spieltakte zu 1/60 Sekunde jedes Bild steht. Sind es ganze Zahlen, steht das Bild in jedem Durchlauf gleich lang. Bei 80 ms wären es 4,8 Ticks, und das Bild stünde mal 4, mal 5 Takte; warum, steht in [Timing und Spacing](/animation/timing-spacing). Krumme Werte wie 83 und 167 ms ergeben einen Grundtakt von 1 ms und 1000 FPS. Hast du mit 83 ms „5 Ticks“ gemeint, trag lieber 12 FPS und den Faktor 1 ein. + + > [!TIP] + > Schreib die Dauern aus dem Editor ins Prüfprotokoll, bevor du sie in Godot einträgst. Wirkt die Animation im Spiel anders als im Editor, vergleichst du zuerst diese Zahlen. + + ## Der Prüfstand: Szene und Skript + + Nimm ein Godot-Projekt mit scharfen Pixeln und ganzzahliger Skalierung, etwa das Testgelände aus dem Godot-Kurs oder die Testszene aus Combat. Die Einstellungen stehen in [Godot-Start](/combat/godot-start) und [Pixelraster und Skalierung](/godot/pixelraster); die Positionen unten gehen von einem Bild mit 320 × 180 Pixeln aus. Leg eine neue Szene mit drei Nodes an: + + ```text + Pruefstand (Node2D) pruefstand.gd + ├── Figur (AnimatedSprite2D) Position (160, 100) + │ Sprite Frames: deine .tres + └── Info (Label) Position (4, 2) + Font Sizes 8 + ``` + + Bei der Figur wählst du im Inspektor unter *Sprite Frames* deine SpriteFrames-Ressource. Beim Label stellst du unter *Theme Overrides → Font Sizes* (im deutschen Editor *Theme-Überschreibungen → Schriftgrößen*) die Größe auf 8, sonst ist der Text breiter als das Bild. Das Skript hängst du an `Pruefstand`: + + ```gdscript title=pruefstand.gd + extends Node2D + + ## Prüfstand für eigene Animationen. Technisches Gerüst, keine Gestaltung: + ## Die Bilder kommen aus deinem Editor. Namen, Tempo und Tasten sind Platzhalter. + ## + ## Pfeiltasten gedrückt halten: Figur läuft, Animation "bewegung" + ## Leertaste Aktion einmal abspielen, danach zurück + ## 1 bis 9 eine Animation direkt abspielen (alphabetisch) + ## P anhalten und weiter + ## , und . angehalten: ein Bild zurück und vor + ## T Zeitlupe 1 → 0,5 → 0,25 + ## H Hintergrund dunkel → mittel → hell + ## Z Zoom 1× bis 4×, nur ganze Faktoren + + @export var ruhe := &"ruhe" + @export var bewegung := &"bewegung" + @export var aktion := &"aktion" + @export var tempo := 40.0 ## Pixel pro Sekunde, Platzhalter + @export var spiegeln := true ## Blick nach links = gespiegelt + + const HINTERGRUENDE := [Color("#202020"), Color("#7f7f7f"), Color("#e0e0e0")] + const ZEITLUPEN := [1.0, 0.5, 0.25] + + @onready var figur: AnimatedSprite2D = $Figur + @onready var info: Label = $Info + + var _ziel := &"" # Zustand, den die Eingabe verlangt + var _druck := -1 # Tick der letzten Eingabe, die den Zustand geändert hat + var _wunsch := &"" # per Taste verlangte Animation, startet im nächsten Tick + var _frei := false # true: Animation per Zifferntaste gewählt + var _angehalten := false + var _gemeldet := "" + var _hg := 0 + var _zl := 0 + var _zoom := 1 + + + func _ready() -> void: + if figur.sprite_frames == null: + print("Figur hat keine SpriteFrames. Im Inspektor unter Sprite Frames zuweisen.") + set_process(false) + set_physics_process(false) + set_process_unhandled_input(false) + return + figur.frame_changed.connect(_melden) + figur.animation_changed.connect(_melden) + figur.animation_finished.connect(_fertig) + for anim in [ruhe, bewegung, aktion]: + if not figur.sprite_frames.has_animation(anim): + print("Fehlt in SpriteFrames: ", anim) + if figur.sprite_frames.get_animation_loop_mode(aktion) != SpriteFrames.LOOP_NONE: + print("Hinweis: ", aktion, " wiederholt sich und endet nie. Loop ausschalten.") + RenderingServer.set_default_clear_color(HINTERGRUENDE[_hg]) + _waehlen(Vector2.ZERO) + _melden() + + + func _physics_process(delta: float) -> void: + if _angehalten: + return + if _wunsch != &"": + _ziel = _wunsch + _wunsch = &"" + _druck = Engine.get_physics_frames() + figur.play(_ziel) + return + var richtung := Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down") + if _frei and richtung == Vector2.ZERO: + return # Per Zifferntaste gewählt: läuft, bis du dich bewegst. + _frei = false + if figur.animation == aktion and figur.is_playing(): + return # Die Aktion läuft zu Ende, die Figur steht so lange. + _waehlen(richtung) + if richtung != Vector2.ZERO: + var rand := get_viewport_rect().size + figur.position = (figur.position + richtung * tempo * delta).clamp(Vector2.ZERO, rand) + if spiegeln and richtung.x != 0.0: + figur.flip_h = richtung.x < 0.0 + + + func _waehlen(richtung: Vector2) -> void: + var ziel := bewegung if richtung != Vector2.ZERO else ruhe + if ziel != _ziel: + if _ziel != &"": # Wechsel durch Eingabe, nicht durch das Ende der Aktion + _druck = Engine.get_physics_frames() + _ziel = ziel + if figur.animation != _ziel or not figur.is_playing(): + figur.play(_ziel) + + + func _fertig() -> void: + if figur.animation == aktion and not _frei: + _ziel = &"" + _waehlen(Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")) + + + func _unhandled_input(event: InputEvent) -> void: + if event.is_action_pressed("ui_accept"): + if not _angehalten and not (figur.animation == aktion and figur.is_playing()): + _frei = false + _wunsch = aktion + return + var key := event as InputEventKey + if key == null or not key.pressed or key.echo: + return + var taste := key.keycode + if taste >= KEY_1 and taste <= KEY_9 and not _angehalten: + var namen := figur.sprite_frames.get_animation_names() + var nummer := taste - KEY_1 + if nummer < namen.size(): + _frei = true + _wunsch = namen[nummer] + match taste: + KEY_P: + _angehalten = not _angehalten + if _angehalten: + figur.pause() + else: + figur.play() + KEY_COMMA, KEY_PERIOD: + if _angehalten: + var anzahl := figur.sprite_frames.get_frame_count(figur.animation) + var schritt := 1 if taste == KEY_PERIOD else -1 + figur.set_frame_and_progress(wrapi(figur.frame + schritt, 0, anzahl), 0.0) + KEY_T: + _zl = (_zl + 1) % ZEITLUPEN.size() + Engine.time_scale = ZEITLUPEN[_zl] + KEY_H: + _hg = (_hg + 1) % HINTERGRUENDE.size() + RenderingServer.set_default_clear_color(HINTERGRUENDE[_hg]) + KEY_Z: + _zoom = _zoom % 4 + 1 + figur.scale = Vector2.ONE * _zoom + + + func _process(_delta: float) -> void: + var frames := figur.sprite_frames + var anim := figur.animation + var ms := frames.get_frame_duration(anim, figur.frame) / frames.get_animation_speed(anim) * 1000.0 + info.text = "%s %d/%d %d ms\n%s Zeit %.2f Zoom %d" % [ + anim, figur.frame + 1, frames.get_frame_count(anim), roundi(ms), + "Pause" if _angehalten else "läuft", Engine.time_scale, _zoom] + + + ## Schreibt jeden Bildwechsel mit Physik-Tick in die Ausgabe, + ## dahinter die Ticks seit der letzten Eingabe, die den Zustand geändert hat. + func _melden() -> void: + var zeile := "%s %d" % [figur.animation, figur.frame + 1] + if zeile == _gemeldet: + return + _gemeldet = zeile + var seit := "" if _druck < 0 else " +%d" % (Engine.get_physics_frames() - _druck) + print("%5d %s%s" % [Engine.get_physics_frames(), zeile, seit]) + ``` + + Die drei Namen oben sind Platzhalter. Heißen deine Animationen anders, trägst du sie im Inspektor ein. Welche Zustände du überhaupt prüfst, entscheidest du. Das Skript erledigt vier Dinge: + + - **Zustände wählen.** `_physics_process` läuft 60-mal pro Sekunde ([Idle and Physics Processing](https://docs.godotengine.org/en/stable/tutorials/scripting/idle_and_physics_processing.html)). Hältst du eine Pfeiltaste, spielt `bewegung`, sonst `ruhe`. Leertaste und Ziffern setzen einen Wunsch, den der nächste Tick erfüllt. So beginnen alle Wechsel an derselben Stelle im Takt, und die Zahlen im Log lassen sich vergleichen. + - **Die Aktion zu Ende spielen.** Solange `aktion` läuft, wartet die Bewegung. Am Ende sendet das Sprite `animation_finished`, und `_fertig` wählt sofort Ruhe oder Bewegung. Das Signal kommt nur, wenn die Animation nicht wiederholt wird ([animation_finished](https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-signal-animation-finished)). Deshalb prüft `_ready` den Loop-Modus. Godot 4.7 kennt dafür drei Zustände, in diesem Kurs Aus, Wiederholen und Ping-Pong genannt ([LoopMode](https://docs.godotengine.org/en/stable/classes/class_spriteframes.html#enum-spriteframes-loopmode)). Im SpriteFrames-Panel ist das ein einziger Loop-Knopf, der bei jedem Klick weiterschaltet: aus, Wiederholen, Ping-Pong. Bei Ping-Pong wechselt nur sein Symbol, wer zweimal klickt, landet also unbemerkt dort. Die ältere Abfrage `get_animation_loop` liefert bei Ping-Pong `false` (geprüft mit 4.7.2) und würde diesen Fall übersehen. + - **Beobachten.** P hält an, Komma und Punkt schalten Bild für Bild über `set_frame_and_progress` ([set_frame_and_progress](https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-method-set-frame-and-progress)), T stellt `Engine.time_scale` auf halbe oder Viertelgeschwindigkeit ([time_scale](https://docs.godotengine.org/en/stable/classes/class_engine.html#class-engine-property-time-scale)); die Anzeige schreibt den Wert mit Dezimalpunkt, etwa `Zeit 0.50`, im Text steht er deutsch als 1,0, 0,5 und 0,25, H wechselt die Löschfarbe des Bildschirms ([set_default_clear_color](https://docs.godotengine.org/en/stable/classes/class_renderingserver.html#class-renderingserver-method-set-default-clear-color)), Z vergrößert die Figur um ganze Faktoren. Die Ziffern spielen eine Animation direkt ab, in alphabetischer Reihenfolge, so wie `get_animation_names` die Namen liefert ([get_animation_names](https://docs.godotengine.org/en/stable/classes/class_spriteframes.html#class-spriteframes-method-get-animation-names)). + - **Messen.** Jeder Bildwechsel landet mit Tick im Log, dahinter die Ticks seit der letzten Eingabe, die den Zustand geändert hat. `play` mit einer neuen Animation sendet `frame_changed` nur, wenn sich die Bildnummer ändert. Deshalb hört `_melden` auch auf `animation_changed` und schreibt jede Zeile nur einmal. + + > [!WARNING] Der Prüfstand ist kein Spiel + > Tempo, Spiegeln und „die Aktion läuft immer zu Ende“ sind Platzhalter, damit sich etwas bewegt. Ob eine Aktion in deinem Spiel abbrechbar ist und wie schnell die Figur läuft, sind Designentscheidungen. Sie gehören in [Animation im Spiel](/animation/animation-im-spiel) und [Anatomie eines Angriffs](/combat/angriffsphasen). Spiegeln passt nur zu Figuren, die links und rechts gleich aussehen dürfen ([Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab)). + + ## Das Log lesen: Ticks seit der Eingabe + + Starte die Szene im Editor mit F6 (*Aktuelle Szene abspielen*). Für Läufe, die du wiederholen und vergleichen willst, startest du sie aus dem Terminal mit fester Bildrate. `--fixed-fps` schaltet die Synchronisation mit der echten Zeit ab, jeder Durchlauf rechnet dann genau eine 1/60 Sekunde ([Command line tutorial](https://docs.godotengine.org/en/stable/tutorials/editor/command_line_tutorial.html)): + + ```console + $ godot --path . --fixed-fps 60 res://pruefstand.tscn + ``` + + Der folgende Lauf stammt aus Godot 4.7.2. Die Animationen sind Platzhalter aus Rechtecken: `ruhe` mit 2 Bildern zu je 250 ms, `bewegung` mit 4 Bildern zu je 83 ms, `aktion` mit 5 Bildern zu 83, 167, 83, 83 und 250 ms, Loop aus. Alle drei laufen mit 12 FPS, die Frame-Dauern sind 3, 3 bei `ruhe`, 1, 1, 1, 1 bei `bewegung` und 1, 2, 1, 1, 3 bei `aktion`. Ein kleines Skript hat die Tasten in festen Ticks gedrückt: + + ```text + --- Pfeil rechts gedrückt + 40 bewegung 1 +0 + 44 bewegung 2 +4 + 49 bewegung 3 +9 + 54 bewegung 4 +14 + 59 bewegung 1 +19 + --- Pfeil rechts losgelassen + 62 ruhe 1 +0 + 76 ruhe 2 +14 + 91 ruhe 1 +29 + --- Leertaste + 101 aktion 1 +0 + 105 aktion 2 +4 + 115 aktion 3 +14 + 120 aktion 4 +19 + 125 aktion 5 +24 + 140 ruhe 1 +39 + ``` + + Die erste Spalte ist der Physik-Tick ([get_physics_frames](https://docs.godotengine.org/en/stable/classes/class_engine.html#class-engine-method-get-physics-frames)), dann folgen Animation und Bild, gezählt ab 1, dann die Ticks seit der Eingabe. Drei Dinge liest du daraus ab. + + **Wann eine Pose erscheint.** Das dritte Bild der Aktion steht 14 Ticks nach dem Druck da, rund 233 ms. Ist das die Pose, an der man die Aktion erkennt, wartet ein Zuschauer so lange auf sie. + + **Wie lange jedes Bild steht.** Ab dem zweiten Bild stimmen die Abstände mit den Dauern überein: 10 Ticks für 167 ms, 5 für 83 ms, 15 für 250 ms. Das erste Bild nach jedem Wechsel steht einen Tick kürzer, 4 statt 5 und 14 statt 15. Godot rechnet die Animation im selben Durchlauf schon weiter, in dem sie startet: Nach dem Tick mit `play` zieht der Prozess-Schritt bereits eine 1/60 Sekunde ab. Bei einer Ausholpose, die nur ein Bild lang steht, ist das ein Fünftel ihrer Zeit. Wenn du das weißt, suchst du den fehlenden Tick nicht in deiner Zeichnung. + + **Wie Übergänge liegen.** In Tick 62 springt die Figur aus `bewegung 1` in `ruhe 1`. Hättest du in Tick 52 losgelassen, käme der Wechsel aus `bewegung 3`. Der Prüfstand schneidet hart, aus jedem Bild heraus. Welches Bild es war, zeigt dir das Log, wie es aussieht, zeigt dir die Pause. + + > [!NOTE] Messen mit Zeit 1,0 + > In Zeitlupe läuft der Physik-Takt weiter mit 60 Ticks pro echter Sekunde, die Animation aber langsamer ([Bildrate und Simulation](/godot/bildrate-simulation)). Im selben Lauf mit Zeit 0,5 steht das zweite Bild der Aktion 20 statt 10 Ticks. Zum Zusehen ist das gut, zum Messen nicht. + + ## Lesbarkeit prüfen: Originalgröße, Grund, Bewegung + + Im Editor arbeitest du vergrößert. Im Spiel sieht man die Figur so groß, wie das Spiel sie zeigt. Prüf jede Animation deshalb zuerst mit Zoom 1 in deiner Spielauflösung. Ob eine Bewegung wirkt, misst kein Programm. Deine Fragen sind trotzdem beobachtbar: + + - Erkennst du nach einem Durchlauf, was die Figur tut, ohne den Namen in der Anzeige zu lesen? + - Bleibt die Silhouette vor dunklem, mittlerem und hellem Grund erkennbar (Taste H)? Verschwindet ein Arm vor einem der drei, ist das ein Befund für [Form und Proportionen halten](/animation/form-konstanz) oder für die Tonwerte deiner Palette ([Licht, Schatten und Tonwerte](/pixelart/licht-werte)). + - Liest sich die Bewegung noch, während die Figur läuft? Was im Stand klar ist, kann in Bewegung untergehen. + - Rutschen die Füße? Das hängt an Tempo und Schrittweg; die Rechnung steht in [Animationen zuordnen](/godot/animationen). Den Platzhalter `tempo` änderst du im Inspektor. + + Wie deine Figuren vor echten Level-Hintergründen bestehen, behandelt später der Kurs Leveldesign. Hier reichen drei neutrale Grautöne. + + Der wichtigste Test braucht einen zweiten Menschen. Gib die Tastatur ab, nenn nur die Tasten und frag nach ein paar Sekunden: „Was macht die Figur, wenn du die Leertaste drückst?“ Schreib die Antwort wörtlich auf und erklär nichts. Das ist der Beobachtungstest aus [Körpersprache und Zustandswechsel](/animation/koerpersprache), diesmal mit Steuerung: Der andere sieht die Aktion so, wie ein Spieler sie sieht, ausgelöst von seiner eigenen Hand. + + > [!PRAXIS] Früh ins Spiel, nicht erst am Ende + > Bei Cuphead kamen nach der Schilderung von Jake Clark (Studio MDHR) zuerst die Extreme einer Animation ins Spiel. Das Team prüfte dort, wie viele Frames bis zu der Pose vergehen, die dem Spieler tatsächlich schadet, und zeichnete erst danach aus ([Cuphead's Animation Process and Philosophy, GDC 2017](https://www.youtube.com/watch?v=RmGb-jU3uVQ&t=1096s), ab 18:16). Bei Klei gingen grobe Lauf- und Angriffsanimationen früh an die Designer ([2D Animation at Klei Entertainment](https://www.youtube.com/watch?v=8_KBjd0iaCU&t=142s), ab 2:22). Für dich heißt das: Schon der Posentest mit nur den Keys gehört in den Prüfstand. + + ## Übergänge prüfen: der Moment des Schnitts + + Ein Übergang besteht aus dem letzten Bild vor dem Wechsel und dem ersten danach. Löse jeden Wechsel mehrmals aus, aus verschiedenen Bildern, und sieh ihn in Zeitlupe 0,25 an. Springt etwas, liest du im Log ab, aus welchem Bild der Wechsel kam. Dann spielst du beide Animationen mit den Ziffern an, hältst an und schaltest zu den beiden Bildern. Oder du legst sie im Editor mit Onion Skinning übereinander. + + | Wechsel | Woraus | Worauf du achtest | + | --- | --- | --- | + | Ruhe → Bewegung | jedes Bild der Ruhe | Springt die Figur in Höhe oder Breite? | + | Bewegung → Ruhe | jedes Bild des Zyklus, auch Fuß in der Luft | Kommt die Figur an, oder ploppt sie in die Ruhe? | + | → Aktion | aus Ruhe und aus Bewegung | Unterscheidet sich das erste Bild sichtbar von der Ruhe? | + | Aktion → zurück | in Ruhe, mit gehaltener Pfeiltaste in Bewegung | Passt die letzte Pose zur ersten danach? | + + Drei Befunde kommen oft vor. **Ein Sprung um ein, zwei Pixel** ist oft kein Zeichenfehler. Häufig wandert der Ursprung zwischen den Animationen, etwa weil der Export leere Ränder je Animation abgeschnitten hat und die Bilder danach verschieden groß sind. Prüf zuerst Leinwand und Ursprung ([Eigene Sprites importieren](/godot/sprites-importieren)). **Volumen oder Proportion springt**, wenn die letzte Pose der einen Animation anders gezeichnet ist als die erste der nächsten ([Form und Proportionen halten](/animation/form-konstanz)). **Die Aktion verschluckt ihren Anfang**, wenn ihr erstes Bild aussieht wie die Ruhe: Der Spieler sieht dann vier Ticks lang nichts. Sakurai lässt seine Figuren deshalb ab dem Druck weit in die Ausholpose springen ([Making Lead-ins Instant and Impactful](https://www.youtube.com/watch?v=E8DKndKkHw8), ab 0:46). + + Was du daraus machst, entscheidest du: ein Übergangsbild, eine Ruhepose, die näher an der letzten Pose der Aktion liegt, ein Zyklus, der dort endet, wo die Ruhe beginnt, oder ein harter Schnitt, der so bleiben darf. Der Prüfstand schlägt nichts vor. Er hält den Moment fest, über den du entscheidest. Was du daraufhin änderst, ist eine **Korrektur nach dem Prüfstand**, keine dritte Überarbeitung der Werkstatt: Du darfst sie als neue Datei oder als Commit speichern und hältst sie im Prüfprotokoll unter Entscheidung und Ergebnis fest. + + ## Spieltempo, Eingabe und Ton im Protokoll + + Für jede Aktion trägst du drei Werte aus dem Log ins Prüfprotokoll ein: + + 1. **Ticks bis zum ersten veränderten Bild.** Im Prüfstand immer +0, weil er ab dem Tick zählt, in dem der Wechsel beginnt, dem ersten nach dem Druck. Die Frage ist, ob man ihn sieht. + 2. **Ticks bis zur Pose, an der man die Aktion erkennt.** So lange wartet ein Zuschauer. Ob das zu deinem Spiel passt, klärst du mit [Animation im Spiel](/animation/animation-im-spiel). + 3. **Ticks bis zurück in Ruhe oder Bewegung.** Solange die Aktion läuft, gehorcht die Figur keiner Richtung. Im Beispiel sind das 39 Ticks, rund 650 ms. + + Den Ton markierst du nur. Welche Bilder tragen einen Schritt, einen Aufprall, ein Ausholen? Notier ihre Nummern. Wie Godot einen Ton an ein Bild hängt, steht in [Audio zuordnen](/godot/audio). Wie der Ton klingt, ist Stoff des späteren Kurses Sound. + + ```text + Prüfprotokoll Datum, Godot 4.7.2 + Animation aktion, Fassung 3 + Zoom 1, Grund dunkel / mittel / hell + erstes Bild +0, anders als ruhe? ja/nein + Erkennungspose Bild 3, +14 Ticks (233 ms) + zurück +39 Ticks (650 ms) + Übergänge bewegung → aktion: 1 px Sprung + Ton-Bilder 3 (Aufprall) + Beobachtung „…“ (wörtlich, wer, wann) + Entscheidung … + Ergebnis … (neuer Lauf nach der Korrektur) + ``` + + > [!INTERVIEW] + > „Deine Animation sieht im Editor gut aus und wirkt im Spiel falsch. Wie gehst du vor?“ Gute Antwort: Zuerst trenne ich Timing, Darstellung und Zeichnung. Ich vergleiche die Dauern aus dem Editor mit dem, was das Spiel zeigt, in einem Log mit festen Ticks. Dann sehe ich mir die Figur in Originalgröße vor dem Spielhintergrund an und am Übergang Bild für Bild. Erst wenn Timing und Darstellung stimmen, ändere ich Zeichnungen, eine Sache pro Durchgang, und prüfe danach neu. + + ## Häufige Fehler + + - **Nur im Editor beurteilt.** 400 % Zoom und weißer Grund zeigen Details, die im Spiel niemand sieht, und verstecken Probleme, die jeder sieht. + - **In Zeitlupe gemessen.** Ticks aus einem Lauf mit Zeit 0,5 sind doppelt so lang. Gemessen wird mit Zeit 1,0, zugesehen in Zeitlupe. + - **Loop an der Aktion.** Die Figur kehrt nie zurück. Der Prüfstand meldet das beim Start, auch bei Ping-Pong. + - **Krumme Dauern übernommen.** 83 und 167 ms ergeben 1000 FPS und Faktoren wie 83 und 167. Gemeinte 5 Ticks trägst du als 12 FPS ein. + - **Ein Sprung für einen Zeichenfehler gehalten.** Erst Leinwand und Ursprung prüfen, dann zeichnen. + - **Zwei Dinge auf einmal geändert.** Nach jeder Änderung neu prüfen und protokollieren. Sonst weißt du nicht, welche gewirkt hat. + - **Den Prüfstand als Urteil genommen.** Er misst und zeigt. Ob 650 ms zu lang sind, sagt er nicht. + + ## Zusammenfassung + + - Aus Millisekunden im Editor werden in Godot FPS und Frame-Dauer. Grundtakt ist der größte gemeinsame Teiler der Dauern, FPS = 1000 / Grundtakt. + - Ganze Ticks pro Bild halten das Timing in jedem Durchlauf gleich. + - Der Prüfstand spielt Ruhe, Bewegung und eine Aktion, hält an, schaltet Bild für Bild und schreibt jeden Bildwechsel mit Tick ins Log. + - Im Prüfstand mit Godot 4.7.2 steht das erste Bild nach einem Wechsel einen Tick kürzer. + - Lesbarkeit prüfst du in Originalgröße, vor drei Grautönen, in Bewegung und mit einem zweiten Menschen an der Tastatur. + - Übergänge prüfst du aus jedem Bild heraus. Sprünge kommen oft von Export oder Ursprung statt von der Zeichnung. + - Gemessen wird mit Zeit 1,0. Was du an deiner Animation änderst, entscheidest du. +exercises: + - id: editor-oder-pruefstand + type: choice + title: Was erst der Prüfstand zeigt + prompt: | + Welche dieser Fragen beantwortet dir der Prüfstand, die Vorschau im Editor aber nicht? + options: + - text: Aus welchem Bild der Bewegung die Figur in die Ruhe wechselt, wenn du loslässt, und wie dieser Schnitt aussieht. + correct: true + why: Der Wechsel hängt am Moment deiner Eingabe. Im Editor spielt jede Animation für sich; den Schnitt zwischen zwei Animationen gibt es dort nicht. + - text: Wie viele Ticks nach dem Druck die Pose erscheint, an der man die Aktion erkennt. + correct: true + why: Das Log zählt ab der Eingabe im Spieltakt. Der Editor kennt weder Eingabe noch Ticks. + - text: Ob die Bewegung lesbar bleibt, während die Figur durch das Bild läuft. + correct: true + why: Im Prüfstand bewegt sich die Figur mit `tempo` über den Grund. In der Vorschau steht sie auf der Stelle. + - text: Ob ein Zuschauer die Aktion als schwer empfindet. + correct: false + why: Das misst kein Programm. Dafür brauchst du den Beobachtungstest mit einem zweiten Menschen; der Prüfstand liefert nur die Gelegenheit dazu. + - text: Ob die Hand in der Aktion auf einem sauberen Bogen läuft. + correct: false + why: Bögen prüfst du besser im Editor mit Onion Skinning, wo du alle Bilder übereinander siehst. Der Prüfstand zeigt immer nur ein Bild. + explanation: | + Der Editor zeigt jede Animation isoliert, vergrößert und in Schleife. Der Prüfstand zeigt, was nur im Spiel entsteht: Eingabe, Spieltakt, Wechsel zwischen Animationen und Bewegung über den Grund. Wirkung und Zeichenqualität bleiben bei dir und deinen Zuschauern. + resources: + - title: Godot Docs · AnimatedSprite2D + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html + + - id: pruefablauf + type: order + title: Erst messen, dann ändern + prompt: | + Bring die Schritte einer Prüfrunde in die Reihenfolge, in der du sie machst. + lang: prose + lines: | + Bilddauern aus dem Editor in FPS und Frame-Dauer umrechnen + SpriteFrames zuweisen und den Loop der Aktion ausschalten + Den Prüfstand mit Zeit 1,0 und fester Bildrate starten + Abweichungen im Log suchen, bevor du eine Zeichnung änderst + Eine einzige Sache an der Animation ändern + Neu prüfen und ins Protokoll schreiben + explanation: | + Die Umrechnung kommt zuerst, weil sonst schon die Zahlen im Spiel nicht stimmen. Ohne ausgeschalteten Loop endet die Aktion nie, und das Log zeigt keine Rückkehr. Gemessen wird mit Zeit 1,0, und erst wenn das Log keine technische Ursache zeigt, ändert eine Zeichnung etwas. Eine Änderung pro Runde hält das Ergebnis zuordenbar. + resources: + - title: Godot Docs · get_frame_duration + url: https://docs.godotengine.org/en/stable/classes/class_spriteframes.html#class-spriteframes-method-get-frame-duration + + - id: millisekunden-bis-pose + type: output + title: Wie lange wartet der Zuschauer? + prompt: | + Aus dem Lauf der Lektion. Wie viele Millisekunden nach dem Druck erscheint das dritte Bild der Aktion? Ein Tick ist 1/60 Sekunde. Antworte mit einer ganzen Zahl. + lang: text + code: | + --- Leertaste + 101 aktion 1 +0 + 105 aktion 2 +4 + 115 aktion 3 +14 + 120 aktion 4 +19 + expected: | + 233 + accept: + - 233 ms + - "233,3" + - "233.3" + - 233,3 ms + - 233.3 ms + explanation: | + Die letzte Spalte zählt die Ticks seit der Eingabe: +14. 14 × 1000 / 60 ≈ 233 ms. Wer 115 − 101 rechnet, kommt auf dasselbe, denn die Aktion beginnt im Tick 101. Wer 115 / 60 rechnet, misst ab dem Start des Spiels statt ab dem Druck. + resources: + - title: Godot Docs · Engine.get_physics_frames + url: https://docs.godotengine.org/en/stable/classes/class_engine.html#class-engine-method-get-physics-frames + + - id: fps-aus-millisekunden + type: output + title: Vom Editor in die SpriteFrames + prompt: | + Was gibt das Programm aus? + lang: python + code: | + from math import gcd + from functools import reduce + + dauern_ms = [120, 40, 80, 200] + + basis = reduce(gcd, dauern_ms) + fps = 1000 / basis + faktoren = [d // basis for d in dauern_ms] + print(f"FPS {fps:g}, Frame-Dauer {faktoren}") + expected: | + FPS 25, Frame-Dauer [3, 1, 2, 5] + hints: + - Welche größte Zahl teilt 120, 40, 80 und 200 ohne Rest? + explanation: | + Der größte gemeinsame Teiler ist 40 ms, also 1000 / 40 = 25 FPS. Jedes Bild bekommt seine Dauer geteilt durch 40 als Faktor: 3, 1, 2 und 5. Probe: 3 / 25 s = 120 ms. Mit einem kleineren Grundtakt wie 20 ms ginge es auch (50 FPS, Faktoren 6, 2, 4, 10); der größte gemeinsame Teiler liefert nur die kleinsten ganzen Faktoren. + resources: + - title: Godot Docs · get_frame_duration + url: https://docs.godotengine.org/en/stable/classes/class_spriteframes.html#class-spriteframes-method-get-frame-duration + + - id: zeitlupe-ticks + type: output + title: Ein Bild in Zeitlupe + prompt: | + Ein Bild der Aktion dauert 250 ms. Du hast mit T auf Zeit 0,5 gestellt. Wie viele Ticks liegen im Log zwischen diesem Bild und dem nächsten? Das Bild ist nicht das erste nach einem Wechsel. Antworte mit der Zahl. + lang: text + code: | + Dauer 250 ms + Zeit 0,5 + Physik-Takt 60 Ticks pro Sekunde + expected: | + 30 + accept: + - 30 Ticks + explanation: | + 250 ms sind bei Zeit 1,0 genau 15 Ticks. `Engine.time_scale` halbiert die Spielzeit pro Tick, die Zahl der Ticks pro echter Sekunde bleibt 60. Die Animation braucht also doppelt so viele Ticks: 30. Im selben Lauf wie in der Lektion, nach T, steht dieses Bild ab Tick 270 und `ruhe` ab 300. Deshalb misst du mit Zeit 1,0 und siehst in Zeitlupe nur zu. + resources: + - title: Godot Docs · Engine.time_scale + url: https://docs.godotengine.org/en/stable/classes/class_engine.html#class-engine-property-time-scale + + - id: spriteframes-eintragen + type: gap + title: Vier Dauern, eine Animation + prompt: | + Im Editor hat deine Aktion vier Bilder mit 100, 100, 200 und 100 ms und läuft einmal ab. Trag die Werte für die SpriteFrames-Ressource in Godot ein, mit den kleinsten ganzen Faktoren. + lang: text + code: | + Animation aktion + Geschwindigkeit ⟦10⟧ FPS + Loop ⟦aus⟧ + Frame-Dauer Bild 1: ⟦1⟧ + Bild 2: ⟦1⟧ + Bild 3: ⟦2⟧ + Bild 4: ⟦1⟧ + gaps: + - label: FPS + hint: Der größte gemeinsame Teiler der Dauern ist der Grundtakt. + accept: ["10.0"] + - label: Loop + hint: Die Aktion soll enden, damit der Prüfstand zurückkehrt. + accept: ["Aus", "LOOP_NONE", "0", "nein", "Nein"] + - label: Bild 1 + hint: Dauer geteilt durch den Grundtakt. + accept: ["1.0"] + - label: Bild 2 + hint: Gleich lang wie Bild 1. + accept: ["1.0"] + - label: Bild 3 + hint: Doppelt so lang wie der Grundtakt. + accept: ["2.0"] + - label: Bild 4 + hint: Wieder der Grundtakt. + accept: ["1.0"] + explanation: | + Grundtakt 100 ms, also 10 FPS. Die Faktoren sind die Dauern geteilt durch 100: 1, 1, 2, 1. Der Loop muss aus sein, sonst sendet das Sprite nie `animation_finished`, und die Figur kehrt nicht zurück. Probe: Bild 3 steht 2 / 10 s = 200 ms, im Spiel 12 Ticks. + resources: + - title: Godot Docs · SpriteFrames LoopMode + url: https://docs.godotengine.org/en/stable/classes/class_spriteframes.html#enum-spriteframes-loopmode + + - id: aktion-endet-nie + type: bug + title: Hin und her, ohne Ende + prompt: | + Nach der Leertaste spielt die Aktion vorwärts, dann rückwärts, dann wieder vorwärts und kehrt nie in die Ruhe zurück. Finde die Zeile in der SpriteFrames-Übersicht und korrigiere sie. + lang: text + code: | + Animation FPS Loop Bilder + ruhe 12 Wiederholen 2 + bewegung 12 Wiederholen 4 + aktion 12 Ping-Pong 5 + lines: [4] + fix: + - line: 4 + answers: + - aktion 12 Aus 5 + - aktion 12 aus 5 + - aktion 12 LOOP_NONE 5 + explanation: | + Ping-Pong ist ein Loop-Modus: Die Animation läuft vor und zurück, ohne zu enden, und `animation_finished` kommt nie. Ruhe und Bewegung dürfen wiederholen, sie laufen, bis eine Eingabe sie ablöst. Eine Aktion, nach der die Figur zurückkehren soll, braucht Loop aus. Der Prüfstand meldet den Fall beim Start, weil er `get_animation_loop_mode` abfragt; `get_animation_loop` hätte bei Ping-Pong `false` geliefert. + resources: + - title: Godot Docs · animation_finished + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-signal-animation-finished + + - id: figur-springt-beim-wechsel + type: bug + title: Zwei Pixel nach oben + prompt: | + Beim Wechsel von `ruhe` zu `bewegung` springt die Figur zwei Pixel nach oben. Im Editor stehen beide Animationen auf derselben Leinwand an derselben Stelle, und in Zeitlupe sieht jedes Bild für sich richtig aus. Du hast jede Animation einzeln mit diesen Einstellungen exportiert. Finde die Zeile, die den Sprung verursacht. + lang: text + code: | + Export Sprite-Sheet, eine Zeile + Leinwand 32 × 32, in beiden Animationen gleich + Ränder leere Ränder abschneiden + Abstand 0 Pixel + Skalierung 100 % + lines: [3] + explanation: | + Schneidet der Export leere Ränder ab, hängt die Bildgröße davon ab, wo in jeder Animation gezeichnet wurde. Hat die Bewegung oben vier leere Zeilen mehr als die Ruhe, sind ihre Bilder vier Pixel niedriger. Godot zentriert jedes Bild auf denselben Punkt ([centered](https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-property-centered)), also stehen die Füße der Bewegung zwei Pixel höher, und beim Wechsel springt die Figur. Exportierst du mit voller Leinwand, liegt die Figur in jedem Bild an derselben Stelle. Erst wenn das ausgeschlossen ist, lohnt der Blick in die Zeichnungen. + resources: + - title: Godot Docs · 2D sprite animation + url: https://docs.godotengine.org/en/stable/tutorials/2d/2d_sprite_animation.html + + - id: log-erklaeren + type: explain + title: Was das Log über den Wechsel sagt + prompt: | + Erkläre in wenigen Sätzen, was in den Ticks 62 und 140 passiert, warum das jeweils erste Bild nach einem Wechsel im Log einen Tick kürzer steht und wie lange die Aktion die Figur bindet. + lang: text + code: | + --- Pfeil rechts losgelassen + 62 ruhe 1 +0 + 76 ruhe 2 +14 + 91 ruhe 1 +29 + --- Leertaste + 101 aktion 1 +0 + 105 aktion 2 +4 + 115 aktion 3 +14 + 120 aktion 4 +19 + 125 aktion 5 +24 + 140 ruhe 1 +39 + points: + - In Tick 62 wechselt die Figur hart aus dem gerade laufenden Bild der Bewegung in das erste Bild der Ruhe; ein anderer Zeitpunkt hätte aus einem anderen Bild geschnitten. + - In Tick 140 endet die Aktion, `animation_finished` löst die Wahl aus, und die Ruhe beginnt ohne Pause. + - Das erste Bild nach einem Wechsel steht einen Tick kürzer, weil Godot die Animation im Starttick schon um 1/60 Sekunde weiterrechnet. + - Die Aktion bindet die Figur 39 Ticks, rund 650 ms; so lange gehorcht sie keiner Richtung. + explanation: | + Beim Loslassen in Tick 62 wählt `_waehlen` die Ruhe und startet sie sofort, egal in welchem Bild die Bewegung gerade war. Hier war es Bild 1, ein anderer Moment hätte ein anderes Bild getroffen. Deshalb prüfst du Übergänge aus jedem Bild. In Tick 140 ist das letzte Bild der Aktion abgelaufen, das Sprite sendet `animation_finished`, und `_fertig` startet die Ruhe im selben Durchlauf. Dass `ruhe 2` nach 14 statt 15 Ticks kommt und `aktion 2` nach 4 statt 5, liegt an Godot: Der Prozess-Schritt im Starttick rechnet schon eine 1/60 Sekunde ab. Von 101 bis 140 sind es 39 Ticks, in denen die Figur keiner Eingabe folgt; ob das zu deinem Spiel passt, entscheidest du. + resources: + - title: Godot Docs · animation_finished + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-signal-animation-finished + + - id: pruefstand-einrichten + type: practice + title: Den Prüfstand in Betrieb nehmen + prompt: | + Richte den Prüfstand in deinem Godot-Projekt ein, mit Szene und Skript aus der Lektion. Hast du noch keine eigene Animation in Godot, nimm eine Studie aus [Neutrale Studien in Varianten](/animation/werkstatt-studien), etwa den Ball als `aktion`, und lege für `ruhe` und `bewegung` je eine Animation mit einem einzigen Bild an. + + Starte die Szene aus dem Terminal mit `--fixed-fps 60`, drück jede Taste einmal und kopier die ersten Zeilen des Logs hierher. Notier die Godot-Version. + lang: text + starter: | + Godot-Version: + SpriteFrames-Datei: + Animationen (Name, Bilder, FPS, Loop): + + Log (erste Zeilen): + + solution: | + Beispiel für die Form, mit den Platzhaltern der Lektion: + + Godot-Version: 4.7.2 + SpriteFrames-Datei: res://figur/platzhalter.tres + Animationen: + aktion 5 Bilder, 12 FPS, Loop aus + bewegung 4 Bilder, 12 FPS, Wiederholen + ruhe 2 Bilder, 12 FPS, Wiederholen + + Log: + 0 ruhe 1 + 15 ruhe 2 + 30 ruhe 1 + --- Pfeil rechts gedrückt + 40 bewegung 1 +0 + 44 bewegung 2 +4 + checklist: + - Die Szene hat die Nodes `Pruefstand`, `Figur` und `Info` mit dem Skript am obersten Node. + - Beim Start erscheint kein Hinweis auf fehlende Animationen oder einen Loop an der Aktion. + - Das Log zeigt nach der Leertaste die Aktion und danach die Rückkehr in Ruhe oder Bewegung. + - P, Komma, Punkt, T, H und Z tun, was die Tabelle im Skript sagt. + - Godot-Version und die Werte der SpriteFrames stehen in deiner Notiz. + explanation: | + Die erste Runde prüft das Werkzeug, nicht deine Animation. Erst wenn das Log Ruhe, Bewegung, Aktion und Rückkehr zeigt, kannst du Zahlen aus späteren Läufen vertrauen. Die Version gehört in jede Notiz, weil sich Verhalten wie der kürzere erste Tick mit einer neuen Godot-Version ändern kann. + resources: + - title: Godot Docs · Command line tutorial + url: https://docs.godotengine.org/en/stable/tutorials/editor/command_line_tutorial.html + + - id: lesbarkeit-protokoll + type: practice + title: In Originalgröße und mit fremder Hand + prompt: | + Nimm Fassung 3 deiner eigenen Figur aus [Werkstatt: eine eigene Figur](/animation/werkstatt-figur). Prüf nur die Zustände, die es in deinem Satz gibt. Hast du nur diese eine Animation, leg `ruhe` als Animation mit einem Bild an, aus ihrer ersten oder letzten Zeichnung, oder nimm die Gliederpuppe aus dem Projekt [Zyklen und Zustandswechsel](/animation/projekte/zyklen-und-wechsel); ist deine Animation ein Zyklus, trag sie als `bewegung` ein. Prüf sie im Prüfstand mit Zoom 1 vor allen drei Gründen, im Stand und, wenn es eine Bewegung gibt, in Bewegung. Dann gib die Tastatur einem anderen Menschen, nenn nur die Tasten und frag nach ein paar Durchläufen: „Was macht die Figur, wenn du die Leertaste drückst?“ Schreib die Antwort wörtlich auf und füll das Prüfprotokoll aus. Ist niemand da, prüf nach einer Nacht Abstand selbst und markier das. + + Die KI-Regel gilt: Ändern wirst du die Animation selbst. Hier sammelst du nur Befunde. + lang: prose + starter: | + Prüfprotokoll, Datum, Godot-Version: + Animation und Fassung: + Absichtssatz: + Animationen im Satz (Name, Bilder): + Zoom 1, dunkel / mittel / hell: + In Bewegung (falls vorhanden): + Erkennungspose (Bild, Ticks, ms): + Zurück nach (Ticks, ms): + Ton-Bilder: + Beobachtungstest (wer, wörtlich): + Abweichung vom Absichtssatz: + checklist: + - Du hast bei Zoom 1 vor allen drei Gründen geprüft und für jeden notiert, ob die Silhouette erkennbar bleibt. + - Erkennungspose und Rückkehr stehen mit Ticks und Millisekunden aus dem Log da, gemessen mit Zeit 1,0. + - Die Antwort des Zuschauers steht wörtlich da, oder die Selbstprüfung ist als solche markiert. + - Du hast die Antwort mit deinem Absichtssatz verglichen und die Abweichung in einem Satz beschrieben, ohne sie schon zu bewerten. + - Die Ton-Bilder sind mit Nummern markiert. + explanation: | + Das Protokoll trennt Messung, Beobachtung und Entscheidung. Messwerte kommen aus dem Log, die Wirkung kommt aus dem, was ein anderer Mensch sagt, und beides vergleichst du mit deiner Absicht. Eine einzelne Antwort ist kein Beweis, aber sie zeigt dir, wo du genauer hinsehen solltest. Die Entscheidung, was du änderst, triffst du in der nächsten Übung. + resources: + - title: Godot Docs · Engine.time_scale + url: https://docs.godotengine.org/en/stable/classes/class_engine.html#class-engine-property-time-scale + + - id: uebergaenge-pruefen + type: practice + title: Jeder Schnitt, aus jedem Bild + prompt: | + Prüf die Übergänge nach der Tabelle der Lektion, aber nur die, die es in deinem Satz gibt. Hast du nur eine Animation, leg `ruhe` als Animation mit einem Bild aus ihrer ersten oder letzten Zeichnung an und prüf den Einstieg in die Aktion und den Ausstieg aus ihr, oder nimm die Gliederpuppe aus dem Projekt [Zyklen und Zustandswechsel](/animation/projekte/zyklen-und-wechsel). Löse jeden Wechsel aus mehreren Bildern aus, sieh ihn in Zeitlupe 0,25 an und notier, aus welchem Bild er kam. + + Wähl einen Befund, entscheide selbst, was du änderst, und ändere genau diese eine Sache im Editor. Das ist eine Korrektur nach dem Prüfstand, keine dritte Überarbeitung: Speichere sie als neue Datei oder als Commit, halt sie im Prüfprotokoll unter Entscheidung und Ergebnis fest und prüf neu. + lang: prose + starter: | + Animationen im Satz (Name, Bilder): + Wechsel / aus Bild / Befund (nur, was es gibt): + Ruhe → Bewegung: + Bewegung → Ruhe: + → Aktion: + Aktion → zurück: + + Gewählter Befund: + Ursache geprüft (Export, Ursprung, Zeichnung): + Entscheidung (welche Bilder, vorher, nachher): + Korrektur gespeichert als (Datei oder Commit): + Ergebnis (neuer Lauf): + checklist: + - Für jeden Wechsel, den es in deinem Satz gibt, steht mindestens ein Ausgangsbild mit Befund oder „kein Sprung“; bei nur einer Animation sind das Einstieg und Ausstieg über eine Ruhe mit einem Bild. + - Bei einem Sprung hast du Export und Ursprung geprüft, bevor du eine Zeichnung geändert hast. + - Du hast genau eine Sache geändert und als neue Datei oder Commit gespeichert, die vorige bleibt erhalten. + - Entscheidung und Ergebnis stehen im Prüfprotokoll, als Korrektur nach dem Prüfstand und nicht als dritte Überarbeitung. + - Das Ergebnis stammt aus einem neuen Lauf im Prüfstand. + - Die Änderung hast du selbst gezeichnet oder getimt; keine Bilder stammen aus einem Generator. + explanation: | + Übergänge sind die Stellen, an denen eine Animation im Spiel am häufigsten bricht, und sie gibt es im Editor nicht. Wer aus jedem Bild prüft, findet den einen Schnitt, der nur in einem von vier Fällen springt. Die Reihenfolge Export, Ursprung, Zeichnung spart Arbeit, weil die ersten beiden schneller zu prüfen sind und oft die Ursache sind. Eine Änderung pro Runde hält das Ergebnis zuordenbar. Die zwei Überarbeitungen der Werkstatt bleiben abgeschlossen; was du hier änderst, belegt das Prüfprotokoll als Korrektur. + resources: + - title: Godot Docs · AnimatedSprite2D set_frame_and_progress + url: https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html#class-animatedsprite2d-method-set-frame-and-progress diff --git a/content/animation/modules/timing-spacing.yaml b/content/animation/modules/timing-spacing.yaml new file mode 100644 index 0000000..61f0055 --- /dev/null +++ b/content/animation/modules/timing-spacing.yaml @@ -0,0 +1,510 @@ +id: timing-spacing +title: "Timing und Spacing: wann und wie weit" +level: 1 +minutes: 120 +summary: Warum dieselben Zeichnungen schwer, leicht, zögernd oder hastig wirken können, wie du Dauer und Abstand der Bilder getrennt planst, warum ein fallender Ball dir das Spacing vorgibt und wie deine Millisekunden im Spiel auf ganzen Ticks landen. +place: unterwegs +goals: + - Du unterscheidest Timing (wie lange) und Spacing (wie weit) und liest beides aus einer Bildliste und einem Spacing-Chart ab. + - Du planst Ease-in und Ease-out mit einem Spacing-Chart und setzt Haltezeiten gezielt auf Schlüsselposen. + - "Du leitest das Spacing eines fallenden Balls aus dem Verhältnis 1 : 3 : 5 : 7 ab und erkennst, wo ein Ease falsch ist." + - Du rechnest Bilddauern in Spiel-Ticks zu 1/60 Sekunde um und wählst Dauern, die ohne Rundung aufgehen. + - Du vergleichst zwei Timings derselben Zeichnungen mit einem Beobachtungstest, statt ihre Wirkung zu behaupten. +resources: + - title: Wikipedia · Twelve basic principles of animation + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation + - title: Wikipedia · Inbetweening, Frame frequency + url: https://en.wikipedia.org/wiki/Inbetweening#Frame_frequency + - title: Mariel Cartwright · Fluid and Powerful Animation within Frame Restrictions (GDC 2014) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw + - title: Aseprite Docs · Frame Duration + url: https://www.aseprite.org/docs/frame-duration/ + - title: Godot Docs · Idle and Physics Processing + url: https://docs.godotengine.org/en/stable/tutorials/scripting/idle_and_physics_processing.html +lesson: | + Du hast einen Ball gezeichnet, der hüpft: acht Bilder, jedes 100 ms lang, die Abstände zwischen den Zeichnungen gleich groß. Er bewegt sich, aber er fällt nicht. Er schwebt auf und ab wie an einem Faden. An den Zeichnungen liegt es nicht, jede für sich ist ein runder Ball. Es liegt an zwei Zahlen, die du nicht bewusst gewählt hast: wie lange jede Zeichnung steht und wie weit sie von der vorigen entfernt ist. + + Diese beiden Zahlen heißen Timing und Spacing. Sie entscheiden, ob etwas beschleunigt oder bremst, ob eine Figur zögert oder zuschlägt. Diese Lektion trennt sie, zeigt, wie du sie auf Papier planst, und rechnet sie in die Takte um, in denen dein Spiel läuft. Alles hier geht unterwegs, mit Bleistift, Karopapier und dem Handy. + + ## Timing und Spacing: zwei verschiedene Fragen + + **Timing** ist die Zeit, die eine Bewegung bekommt: wie viele Bilder, wie viele Millisekunden. Frank Thomas und Ollie Johnston zählen es in *The Illusion of Life* (1981) zu den zwölf Grundprinzipien der Animation. Timing ist dort die Zahl der Zeichnungen für eine Handlung, und sie bestimmt das Tempo auf der Leinwand ([Twelve basic principles: Timing](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing)). **Spacing** ist der Abstand zwischen den Zeichnungen, also wie weit sich etwas von einem Bild zum nächsten bewegt. Der Pixelartist Pedro Medeiros (Saint11) fasst es in einem Satz: „The distance between drawings gives us the feeling of acceleration“ ([Easings](https://saint11.art/blog/pixel-art-tutorials/#Easings)). + + Ein Ball rollt in fünf Bildern von A nach B, jedes Bild gleich lang. Jeder Strich `|` ist eine Zeichnung: + + ```text + A B + |------|------|------|------| + 1 2 3 4 5 + ``` + + Gleiche Abstände bei gleicher Dauer bedeuten ein konstantes Tempo. So bewegt sich ein Förderband, kein Ball. Dieselben fünf Bilder in derselben Gesamtzeit, anders verteilt: + + ```text + A B + |-|----|--------|-----------| + 1 2 3 4 5 + ``` + + Jetzt liegen die ersten Zeichnungen dicht beieinander und die letzten weit auseinander: Der Ball beschleunigt. Gleiche Gesamtzeit, gleiche Bildzahl, andere Bewegung. Deshalb planst du beides getrennt. Die Dauer sagt, wie lange etwas dauert, der Abstand sagt, wie es sich dabei bewegt. + + > [!MERKE] + > Timing: wie lange. Spacing: wie weit von Bild zu Bild. Dicht beieinander heißt langsam, weit auseinander heißt schnell. + + ## Haltezeiten, Einsen und Zweien + + Film läuft mit 24 Bildern pro Sekunde. Zeichentrickfilme zeichnen trotzdem selten 24 Zeichnungen pro Sekunde. Meist steht jede Zeichnung zwei Filmbilder lang. Das heißt „auf Zweien“ (on twos) und ergibt 12 Zeichnungen pro Sekunde. Schnelle Bewegungen kommen „auf Einsen“, langsame auch auf Dreien oder Vieren ([Inbetweening: Frame frequency](https://en.wikipedia.org/wiki/Inbetweening#Frame_frequency)). + + Pixelart-Editoren lassen jedes Bild verschieden lang stehen. In Aseprite und LibreSprite hat jedes Bild eine Dauer in Millisekunden, in Aseprite unter *Frame → Frame Properties*, Kürzel P ([Frame Duration](https://www.aseprite.org/docs/frame-duration/)). Pixelorama rechnet wie Godot mit einer Bildrate und einem Faktor je Bild ([Timeline: Frames](https://www.pixelorama.org/user_manual/user_interface/timeline#frames)). Krita zählt in Bildern einer festen Bildrate und hält jede Zeichnung, bis die nächste kommt ([Animation Timeline](https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#overview)). Die Bedienung steht in [Einzelbilder im Editor](/animation/editor-zeitleiste). Das Ergebnis ist überall dasselbe: Nicht jede Zeichnung muss gleich lang stehen. + + Eine Bildliste, auch Belichtungsblatt genannt, hält das fest. Ein Sprung mit fünf Zeichnungen: + + ```text + Bild Dauer Pose + 1 200 ms Hocke (Key) + 2 50 ms Absprung + 3 50 ms Streckung + 4 150 ms Scheitel (Key) + 5 250 ms Landung (Key) + ``` + + Die Schlüsselposen (Keys) stehen lange, damit das Auge sie liest. Die Zwischenbilder huschen vorbei. Sie zeigen den Weg, einzeln erkennen muss man sie nicht. Eine **Haltezeit** (Hold) ist genau das: eine Zeichnung, die länger stehen bleibt als ihre Nachbarn. + + > [!PRAXIS] Keys halten, Wischbilder kurz + > Bei wenigen Zeichnungen ist die Dauer das billigste Werkzeug, das du hast: Eine Haltezeit kostet keine neue Zeichnung. Sprite-Animatoren halten deshalb die Schlüsselposen länger und lassen schnelle Zwischenbilder wie Wischbilder (Smears) nur kurz stehen, so beschreibt es Mariel Cartwright für Skullgirls ([GDC 2014, ab 11:59](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=719s)); mehr in [Anatomie eines Angriffs](/combat/angriffsphasen). + + > [!TIP] Daumenkino im Bus + > Ein Block Haftzettel ist ein Animationsprogramm ohne Akku. Zeichne auf das letzte Blatt zuerst, eine Zeichnung pro Blatt, und blättere mit dem Daumen von hinten nach vorn. Eine Haltezeit baust du, indem du dieselbe Zeichnung auf zwei oder drei Blätter überträgst. + + ## Spacing-Charts: Ease-in und Ease-out planen + + Animatoren notieren das Spacing zwischen zwei Keys als kleines Diagramm, den **Spacing-Chart** (oft auch Timing-Chart genannt): eine Linie von Key zu Key, ein Strich für jede Zeichnung. Thomas und Johnston nennen das Prinzip dahinter *slow in and slow out*. Körper brauchen Zeit, um zu beschleunigen und abzubremsen, deshalb liegen am Anfang und am Ende einer Bewegung mehr Zeichnungen als in der Mitte ([Slow in and slow out](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Slow_in_and_slow_out)). In der Animation heißt das Abbremsen in einen Key hinein **Ease-in** und das Anfahren aus einem Key heraus **Ease-out**. Vorsicht: Godots `Tween` und CSS benennen es umgekehrt, dort startet `EASE_IN` bzw. `ease-in` langsam und wird schneller ([Tween: EASE_IN](https://docs.godotengine.org/en/stable/classes/class_tween.html#class-tween-constant-ease-in), [MDN: ease-in](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#ease-in)). + + Ein Abbremsen planst du klassisch durch Halbieren. Jedes Zwischenbild liegt in der Mitte zwischen dem vorigen und dem Ziel: + + ```python run + # Keys A und B in Pixeln + a, b = 0, 64 + x = a + for i in range(1, 5): + x = (x + b) / 2 + print(i, x) + ``` + + Die Abstände sind 32, 16, 8 und 4 Pixel, das letzte Stück bis B noch einmal 4. Als Chart, ein Zeichen für 2 Pixel: + + ```text + |---------------|-------|---|-|-| + A 1 2 3 4 B + ``` + + Ein Anfahren aus A ist das Spiegelbild. Für eine Bewegung, die anfährt und abbremst, halbierst du von beiden Keys zur Mitte hin. Eine Hand, die auf etwas zeigt, ein Kopf, der sich dreht, eine Tür, die zufällt: Fast alles beschleunigt und bremst. Ob ein Key mit Ease erreicht wird oder hart, entscheidest du. Der nächste Abschnitt zeigt einen Fall, in dem ein Ease falsch ist. + + ## Der fallende Ball: Die Physik liefert das Spacing + + Ein losgelassener Ball legt in gleichen Zeitabschnitten Wege zurück, die sich wie 1 : 3 : 5 : 7 verhalten. Galileo Galilei hat das 1638 in den *Discorsi* beschrieben: Die Wege in gleichen Zeitabschnitten verhalten sich „as the odd numbers beginning with unity“ ([Two New Sciences, Third Day](https://galileoandeinstein.phys.virginia.edu/tns_draft/tns_153to160.html)). Der Grund: Die Geschwindigkeit wächst gleichmäßig, also wächst auch der Weg pro Bild jedes Mal um dieselbe Menge. + + ```python run + # Weg seit dem Loslassen + vorher = 0 + for bild in range(1, 6): + weg = bild * bild + print(bild, weg, + weg - vorher) + vorher = weg + ``` + + Die dritte Spalte ist das Spacing: 1, 3, 5, 7, 9. Ein Pixelball, der in vier Schritten 48 Pixel fällt, liegt deshalb 3, 12, 27 und 48 Pixel unter dem Start, mit Abständen von 3, 9, 15 und 21 Pixeln. Als Höhe über dem Boden, ein `#` für 3 Pixel: + + ```text + Bild Höhe + 1 ################ 48 + 2 ############### 45 + 3 ############ 36 + 4 ####### 21 + 5 0 + ``` + + In ganzen Pixeln wird daraus oft eine einfachere Reihe. Medeiros lässt den Ball in seinem Aseprite-Beispiel 4, 3, 2 und 1 Pixel steigen und hält ihn oben ein Bild lang ([A Basic Aseprite Animation](https://saint11.art/pixel_art_articles/article3/#timing)). Sakurai beschreibt für Sprünge dieselbe Idee: Die Schwerkraft ändert die Geschwindigkeit in jedem Frame um denselben Betrag ([Jump Physics](https://www.youtube.com/watch?v=noKsDZ-UPq8&t=21s), ab 0:21). Ob 1, 3, 5, 7 oder 1, 2, 3, 4: Gleichmäßig beschleunigt ist eine Bewegung, wenn der Abstand von Bild zu Bild immer um denselben Betrag wächst. + + Oben am Scheitel liegen die Zeichnungen dicht, unten weit auseinander. Ein hüpfender Ball bekommt sein Ease von der Schwerkraft: Er bremst zum höchsten Punkt hin ab und fährt aus ihm heraus wieder an. Am Boden gibt es dagegen kein Ease. Der Ball ist im Bild vor dem Kontakt am schnellsten und wechselt im Kontaktbild die Richtung. Wer hier aus Gewohnheit abbremst, setzt den Ball sanft ab, statt ihn aufprallen zu lassen. Wie der Aufprall selbst aussieht, mit Stauchen und Rückprall, steht in [Gewicht zeigen](/animation/gewicht-aufprall). + + > [!NOTE] + > Ohne Luftwiderstand fallen schwere und leichte Bälle gleich schnell. Das Spacing des Falls verrät das Gewicht also nicht. Gewicht zeigt sich beim Aufprall, beim Rückprall und darin, wie schwer sich etwas in Bewegung setzen lässt; auch das steht in [Gewicht zeigen](/animation/gewicht-aufprall). + + ## Millisekunden und Spiel-Ticks + + Dein Spiel zeigt ein Bild nicht zu beliebigen Zeitpunkten. Godot rechnet die Physik standardmäßig 60-mal pro Sekunde, und ein 60-Hz-Bildschirm wechselt sein Bild 60-mal pro Sekunde ([Idle and Physics Processing](https://docs.godotengine.org/en/stable/tutorials/scripting/idle_and_physics_processing.html)). Ein solcher Takt, ein **Tick**, dauert rund 16,7 ms. Eine Zeichnung ist im Spiel deshalb immer eine ganze Zahl von Ticks lang zu sehen. Liegt deine Dauer dazwischen, rundet das Spiel, und zwar nicht jedes Mal gleich. Das Modell hier rechnet für jede von fünf Zeichnungen den Tick `e`, in dem sie vorbei ist, und gibt aus, wie viele Ticks sie stand: + + ```python run + from math import ceil + + tick = 1000 / 60 # ms + ms = 80 # je Bild + vorher = 0 + for n in range(1, 6): + e = ceil(n * ms / tick) + print(n, e - vorher) + vorher = e + ``` + + Setz `ms` auf 100 oder 50 und lass den Block erneut laufen. 100 ms sind genau 6 Ticks, 50 ms genau 3. 80 ms sind 4,8 Ticks: Vier Zeichnungen stehen 5 Ticks, die fünfte nur 4. In einem gleichmäßigen Zyklus kann daraus ein kleines Stolpern im Takt werden. Ob du es siehst, prüfst du in [der Testszene](/animation/testszene), die jeden Bildwechsel mit seinem Tick protokolliert. Dauern, die aufgehen: + + ```text + Ticks genau im Editor + 3 50 ms 50 ms + 4 66,7 ms 67 ms + 5 83,3 ms 83 ms + 6 100 ms 100 ms + 9 150 ms 150 ms + 12 200 ms 200 ms + ``` + + Bei 67 und 83 ms rundet schon der Editor, weil er ganze Millisekunden speichert. In Godot trägst du dann die gemeinten Ticks ein, etwa 12 FPS für 5 Ticks pro Bild; wie, zeigt [die Testszene](/animation/testszene). Film-Timing passt übrigens nicht: Auf Einsen bei 24 Bildern pro Sekunde steht jede Zeichnung 41,7 ms, also 2,5 Ticks. Animierst du in einem Programm mit Zeitleiste wie Krita, stell die Bildrate auf einen Teiler von 60: 12, 15, 20, 30 oder 60. Auf Bildschirmen mit 144 Hz rundet Godot auf deren Bildwechsel; die Details stehen in [Bildrate und Simulation](/godot/bildrate-simulation). + + ## Timing verändert, was eine Bewegung erzählt + + Dieselben Zeichnungen können Verschiedenes erzählen. Thomas und Johnston halten Timing für entscheidend, um Stimmung, Gefühl und Reaktion einer Figur zu zeigen ([Timing](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing)). Ein neutrales Beispiel: Eine Gliederpuppe dreht den Kopf von links nach rechts, drei Zeichnungen, zwei Bildlisten. + + ```text + Fassung A Fassung B + Bild Dauer Bild Dauer + 1 400 ms 1 150 ms + 2 50 ms 2 450 ms + 3 400 ms 3 150 ms + ``` + + In A springt der Kopf von einer Seite zur anderen, die Mitte huscht vorbei. In B verweilt er in der Mitte. Ob A wie ein schneller Blick wirkt und B wie Zögern, weißt du erst, wenn es jemand anderes sieht. Animatoren setzen solche Unterschiede bewusst ein, garantieren kann die Wirkung keiner. Deshalb gehören zu jeder Timing-Entscheidung zwei Dinge. Der **Absichtssatz** sagt vorher in einem Satz, was ein Zuschauer lesen soll. Im **Beobachtungstest** zeigst du beide Fassungen ohne Vorrede, fragst „Was passiert da?“ und schreibst die Antworten wörtlich auf. Wie man fragt, ohne die Antwort vorzugeben, steht in [Körpersprache und Zustandswechsel](/animation/koerpersprache). + + > [!INTERVIEW] + > „Was ist der Unterschied zwischen Timing und Spacing?“ Gute Antwort: Timing ist, wie lange eine Bewegung dauert und wie lange jede Zeichnung steht. Spacing ist, wie weit die Zeichnungen auseinanderliegen. Bei gleichem Timing macht das Spacing aus einer gleichmäßigen Bewegung eine, die beschleunigt oder bremst. In Pixelart kommt dazu, dass jedes Bild seine eigene Dauer haben kann und dass im Spiel jede Dauer auf ganzen Ticks landet. + + ## Häufige Fehler + + - **Alle Bilder gleich lang.** Eine einheitliche Dauer ist eine Voreinstellung, keine Entscheidung. Keys länger, Zwischenbilder kürzer. + - **Gleichmäßiges Spacing überall.** Es wirkt mechanisch. Frag bei jeder Bewegung, wo sie beschleunigt und wo sie bremst. + - **Ease in den Aufprall.** Ein Ball, der vor dem Boden langsamer wird, landet nicht, er setzt auf. + - **Timing geändert, Spacing gemeint.** Ruckelt eine Bewegung, weil ein Abstand doppelt so groß ist wie seine Nachbarn, hilft eine längere Dauer nicht. Erst den Chart ansehen. + - **Dauern zwischen den Ticks.** 80 ms ergeben 4,8 Ticks, und eine von fünf Zeichnungen steht kürzer. 50, 100 und 150 ms gehen genau auf. + - **24 Bilder pro Sekunde übernommen.** 41,7 ms pro Zeichnung sind 2,5 Ticks. Für ein Spiel mit 60 Ticks passen 12, 15, 20, 30 oder 60. + - **Wirkung behauptet statt geprüft.** „Langsam wirkt traurig“ ist eine Konvention, kein Gesetz. Prüf es mit einem Zuschauer. + + ## Zusammenfassung + + - Timing ist die Dauer, Spacing der Abstand zwischen den Zeichnungen. Beide planst du getrennt. + - Dicht beieinander heißt langsam, weit auseinander schnell. Ease-in und Ease-out legen mehr Zeichnungen an Ende und Anfang einer Bewegung. + - Klassisch steht eine Zeichnung auf Zweien, 12 pro Sekunde. In Pixelart hat jedes Bild eine eigene Dauer: Keys lang, Zwischenbilder kurz. + - Ein fallender Ball legt Wege im Verhältnis 1 : 3 : 5 : 7 zurück. Am Scheitel liegen die Zeichnungen dicht, am Boden weit, und in den Aufprall gehört kein Ease. + - Im Spiel landet jede Dauer auf ganzen Ticks zu 16,7 ms. 50, 100 und 150 ms gehen genau auf, 80 ms nicht. + - Timing verändert, was eine Bewegung erzählt. Ob sie es beim Zuschauer tut, zeigt erst der Beobachtungstest. +exercises: + - id: timing-oder-spacing + type: choice + title: Dauer oder Abstand? + prompt: | + Welche Aussagen beschreiben Spacing? + options: + - text: Die Zeichnungen am Anfang einer Bewegung liegen enger beieinander als am Ende. + correct: true + why: Das ist der Abstand von Zeichnung zu Zeichnung, also Spacing. Hier beschleunigt die Bewegung. + - text: Der Ball ist in Bild 4 doppelt so weit von Bild 3 entfernt wie Bild 3 von Bild 2. + correct: true + why: Auch das beschreibt Abstände zwischen den Zeichnungen. Bei gleicher Dauer heißt es, dass der Ball schneller wird. + - text: Die Hocke vor dem Sprung steht 200 ms, die beiden Zwischenbilder je 50 ms. + correct: false + why: Das sind Dauern, also Timing. Wo die Zeichnungen liegen, sagt diese Angabe nicht. + - text: Die ganze Bewegung dauert 600 ms und hat 8 Bilder. + correct: false + why: Gesamtdauer und Bildzahl sind Timing. Mit denselben 8 Bildern und 600 ms kann die Bewegung gleichmäßig sein, beschleunigen oder bremsen. + - text: Die Animation läuft auf Zweien. + correct: false + why: Auf Zweien heißt, jede Zeichnung steht zwei Filmbilder lang. Das ist eine Angabe zur Dauer. + explanation: | + Timing beantwortet „wie lange“: Gesamtdauer, Bildzahl, Dauer pro Bild, auf Einsen oder Zweien. Spacing beantwortet „wie weit“: wie die Zeichnungen auf dem Weg verteilt sind. Beides zusammen ergibt die Geschwindigkeit in jedem Moment. Wer sie getrennt denkt, weiß bei einer Bewegung, die nicht stimmt, welche der beiden Zahlen er ändern muss. + resources: + - title: Wikipedia · Twelve basic principles, Timing + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing + + - id: ball-planen + type: order + title: Ein Hüpfer, Schritt für Schritt + prompt: | + Bring die Arbeitsschritte für einen Ball, der einmal auf den Boden fällt und abprallt, in eine sinnvolle Reihenfolge. + lang: prose + lines: | + Absichtssatz schreiben: was ein Zuschauer lesen soll + Keys festlegen: Startpunkt, Kontakt mit dem Boden, höchster Punkt danach + Timing festlegen: wie viele Bilder und wie lange jedes steht + Spacing-Chart zwischen den Keys zeichnen + Zwischenbilder nach dem Chart zeichnen + Abspielen und mit dem Absichtssatz vergleichen + explanation: | + Der Absichtssatz kommt zuerst, weil er der Maßstab für alles Weitere ist. Keys legen fest, wo die Bewegung hinwill, erst dann lohnt die Frage, wie lange sie dafür braucht. Der Chart braucht Keys und Bildzahl, und die Zwischenbilder brauchen den Chart. Wer Zwischenbilder ohne Chart zeichnet, landet fast immer bei gleichmäßigem Spacing. + resources: + - title: Wikipedia · Straight ahead action and pose to pose + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Straight_ahead_action_and_pose_to_pose + + - id: chart-lesen + type: output + title: Wo ist er am schnellsten? + prompt: | + Alle fünf Bilder stehen gleich lang. Zwischen welchen zwei Bildern bewegt sich der Ball am schnellsten? Antworte mit den beiden Nummern, etwa `1-2`. + lang: text + code: | + A B + |--|------|-----------|-----| + 1 2 3 4 5 + expected: | + 3-4 + accept: + - 3 und 4 + - 3 4 + - 3–4 + - 3 - 4 + - 3 bis 4 + - zwischen 3 und 4 + explanation: | + Bei gleicher Dauer pro Bild ist der größte Abstand die höchste Geschwindigkeit. Zwischen 3 und 4 liegen 12 Zeichen, mehr als zwischen allen anderen Paaren (3, 7 und 6). Die Bewegung fährt also an, ist in der Mitte am schnellsten und bremst zum Ende hin, nur nicht so gleichmäßig wie mit halbierten Abständen. + resources: + - title: Wikipedia · Slow in and slow out + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Slow_in_and_slow_out + + - id: halbieren-vorhersagen + type: output + title: Abbremsen durch Halbieren + prompt: | + Was gibt das Programm aus? + lang: python + code: | + a, b = 0, 32 + x = a + for zwischen in range(1, 4): + x = (x + b) / 2 + print(zwischen, x) + expected: | + 1 16.0 + 2 24.0 + 3 28.0 + explanation: | + Jedes Zwischenbild liegt in der Mitte zwischen dem vorigen und dem Ziel: 16, dann 24, dann 28. Die Abstände halbieren sich (16, 8, 4), die Bewegung bremst in den Key B hinein. Das `.0` kommt von der Division mit `/`, die in Python immer eine Kommazahl liefert. Auf dem Papier legst du dieselben Punkte mit dem Lineal an: Mitte, Mitte der Mitte und so weiter. + + - id: ungerade-zahlen + type: output + title: Der dritte Schritt + prompt: | + Ein Ball fällt aus dem Stand, alle Bilder stehen gleich lang, und Bild 1 ist der Moment des Loslassens. Zwischen Bild 1 und Bild 2 legt er 2 Pixel zurück. Wie viele Pixel legt er zwischen Bild 3 und Bild 4 zurück, wenn du mit dem Verhältnis 1 : 3 : 5 : 7 aus der Lektion rechnest? Antworte mit der Zahl. + lang: text + code: | + Bild 1 → 2 2 px + Bild 2 → 3 ? + Bild 3 → 4 ? + expected: | + 10 + accept: + - 10 px + - 10 Pixel + hints: + - "Die Wege pro Bild verhalten sich wie 1 : 3 : 5 : 7." + explanation: | + Die Abstände wachsen wie die ungeraden Zahlen. Mit 2 Pixeln als Einheit sind das 2, 6 und 10 Pixel. Seit dem Loslassen hat der Ball dann 2, 8 und 18 Pixel zurückgelegt, also 2 mal 1, 4 und 9: Der Weg wächst mit dem Quadrat der Zeit. Auch die Reihe 2, 4, 6 wächst gleichmäßig, beginnt aber nicht im Moment des Loslassens; Pixelartists nutzen solche Reihen oft. Entscheidend ist in beiden Fällen, dass der Abstand von Bild zu Bild immer um denselben Betrag wächst. + + - id: ticks-zyklus + type: output + title: Fünf mal 80 + prompt: | + Ein Zyklus hat 5 Bilder zu je 80 ms. Wie viele Ticks dauert ein ganzer Durchlauf bei 60 Ticks pro Sekunde? Antworte mit der Zahl. + lang: text + code: | + Bild 1 2 3 4 5 + ms 80 80 80 80 80 + expected: | + 24 + accept: + - 24 Ticks + explanation: | + 5 × 80 ms sind 400 ms, und 400 ms × 60 / 1000 sind genau 24 Ticks. Auf die einzelnen Bilder lässt sich das nicht gleich verteilen, denn 24 / 5 = 4,8. Im Modell der Lektion stehen vier Bilder je 5 Ticks und eines 4. Mit 100 ms pro Bild wären es 30 Ticks, gleichmäßig 6 pro Bild. + resources: + - title: Godot Docs · Idle and Physics Processing + url: https://docs.godotengine.org/en/stable/tutorials/scripting/idle_and_physics_processing.html + + - id: begriffe-timing + type: gap + title: Fünf Wörter für den Werkzeugkasten + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Steht jede Zeichnung zwei Filmbilder lang, animierst du auf ⟦Zweien⟧. + Bei 24 Bildern pro Sekunde sind das ⟦12⟧ Zeichnungen pro Sekunde. + Liegen Zeichnungen dicht beieinander, ist die Bewegung dort ⟦langsam⟧. + Das Abbremsen in einen Key hinein heißt ⟦Ease-in⟧. + Eine Zeichnung, die länger steht als ihre Nachbarn, ist eine ⟦Haltezeit⟧. + gaps: + - label: Auf … + hint: On twos auf Deutsch. + accept: ["twos", "zweiern"] + - label: Zeichnungen pro Sekunde + hint: 24 geteilt durch 2. + accept: ["zwölf"] + - label: Tempo + hint: Wenig Weg pro Bild. + accept: ["langsamer", "träge"] + - label: Abbremsen + hint: Auch slow in genannt. + accept: ["Ease in", "slow in", "Slow-in"] + - label: Länger stehen + hint: Auf Englisch Hold. + accept: ["Hold", "Haltepose", "Halt"] + explanation: | + Auf Zweien heißt 12 Zeichnungen pro Sekunde bei 24 Filmbildern. Dichte Zeichnungen bedeuten wenig Weg pro Bild, also langsam. Ease-in ist das Abbremsen in einen Key, Ease-out das Anfahren aus einem Key. Eine Haltezeit kostet keine neue Zeichnung und gibt dem Auge Zeit, eine Pose zu lesen. + resources: + - title: Wikipedia · Inbetweening, Frame frequency + url: https://en.wikipedia.org/wiki/Inbetweening#Frame_frequency + + - id: zoegern-vor-dem-boden + type: bug + title: Ein Zögern vor dem Boden + prompt: | + Ein Ball soll aus dem Stand auf den Boden fallen, alle Bilder gleich lang. Beim Abspielen scheint er kurz vor dem Boden zu zögern und springt dann in den Kontakt. Finde die Zeile und korrigiere sie. + lang: text + code: | + Bild Höhe in px + 1 48 + 2 45 + 3 36 + 4 27 + 5 0 + lines: [5] + fix: + - line: 5 + answers: + - " 4 21" + hints: + - Rechne die Abstände von Bild zu Bild aus. + - "Im freien Fall wachsen die Abstände wie 1 : 3 : 5 : 7." + explanation: | + Die Abstände sind 3, 9, 9 und 27 Pixel. Zwischen Bild 3 und 4 wird der Ball nicht schneller, danach springt er um 27 Pixel. Im freien Fall müssten es 3, 9, 15 und 21 sein, Bild 4 also auf 48 − 27 = 21 Pixel Höhe. So steigt der Abstand gleichmäßig, und der schnellste Schritt kommt direkt vor dem Kontakt. + resources: + - title: Wikipedia · Slow in and slow out + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Slow_in_and_slow_out + + - id: hocke-verschluckt + type: bug + title: Die Hocke ist weg + prompt: | + Testleser sagen über deinen Sprung: „Er hebt einfach ab.“ Die Hocke vor dem Absprung ist gezeichnet, aber niemand bemerkt sie. Finde die Zeile in der Bildliste, die das verursacht. + lang: text + code: | + Bild Dauer Pose + 1 150 ms Stand + 2 50 ms Hocke (Key) + 3 50 ms Absprung + 4 50 ms Streckung + 5 150 ms Scheitel (Key) + 6 200 ms Landung (Key) + lines: [3] + explanation: | + Die Hocke ist ein Key, steht aber nur 50 ms, so kurz wie die Zwischenbilder davor und danach. Das Auge hat keine Zeit, sie zu lesen. Welche Dauer sie bekommt, entscheidest du; der Fehler ist, dass ein Key wie ein Zwischenbild getimt ist. Die Zeichnung zu ändern hilft hier nicht, die Dauer schon. + resources: + - title: Mariel Cartwright · GDC 2014 (ab 11:59) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=719s + + - id: haltezeiten-erklaeren + type: explain + title: Lange Keys, kurze Wege + prompt: | + Ein Hammer schlägt auf einen Pflock, fünf Zeichnungen. Erkläre in wenigen Sätzen, warum die Dauern so verteilt sind und was passieren würde, wenn jedes Bild 100 ms stünde. + lang: text + code: | + Bild Dauer Pose + 1 250 ms ausgeholt (Key) + 2 33 ms Wischbild + 3 200 ms Aufschlag (Key) + 4 83 ms Nachfedern + 5 300 ms Ruhe (Key) + points: + - Die Keys (ausgeholt, Aufschlag, Ruhe) stehen lange, damit das Auge die Posen liest. + - Das Wischbild steht kurz, es zeigt den Weg und muss nicht einzeln erkannt werden. + - Der kurze Weg zwischen ausgeholt und Aufschlag macht den Schlag schnell, ohne dass er weniger Bilder braucht. + - Mit 100 ms pro Bild stünde das Wischbild dreimal so lange wie hier, und der Schlag würde langsamer. + explanation: | + Die Dauern folgen dem, was das Auge lesen soll. Ausgeholt und Aufschlag sind die Posen, an denen man die Handlung erkennt, die Ruhe am Ende zeigt, dass sie vorbei ist. Das Wischbild ist ein Weg, kein Ziel, deshalb steht es nur 33 ms, also 2 Ticks. Mit 100 ms pro Bild würde aus dem Schlag ein gleichmäßiges Durchklicken. Mariel Cartwright beschreibt für Skullgirls genau diese Verteilung: Keys halten, Smears kurz. + resources: + - title: Mariel Cartwright · GDC 2014 (ab 11:59) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=719s + + - id: ball-auf-papier + type: practice + title: Ein Ball auf Karopapier + prompt: | + Plan auf Karopapier einen Ball, der aus dem Stand auf den Boden fällt und einmal abprallt, nicht ganz so hoch wie vorher. Schreib zuerst den Absichtssatz. Zeichne dann die Keys, einen Spacing-Chart für den Fall und einen für den Aufstieg und darunter die Bildliste mit Dauern. Wenn du magst, übertrag es auf Haftzettel und blättere es als Daumenkino. + + Hier notierst du nur die Zahlen und was dir beim Abspielen auffällt. + lang: prose + starter: | + Absichtssatz: + Keys (Bild, Höhe): + Spacing Fall (Abstände): + Spacing Aufstieg (Abstände): + Dauer pro Bild: + Beim Abspielen aufgefallen: + checklist: + - Der Absichtssatz steht da, bevor du gezeichnet hast. + - Die Abstände im Fall wachsen von Bild zu Bild, und der größte liegt direkt vor dem Kontakt. + - Im Aufstieg werden die Abstände zum höchsten Punkt hin kleiner. + - Der höchste Punkt nach dem Abprall liegt tiefer als der Startpunkt. + - Die Dauern sind Vielfache von 50 ms oder als Ticks angegeben. + explanation: | + Die Übung trainiert, Spacing aus einer Ursache abzuleiten statt nach Gefühl zu verteilen. Fall und Aufstieg sind Spiegelbilder, beide mit dem Ease am Scheitel und ohne Ease am Boden. Dass der Ball nach dem Abprall weniger hoch kommt, ist der erste Hinweis auf Material und Gewicht; mehr dazu in [Gewicht zeigen](/animation/gewicht-aufprall). Das Daumenkino zeigt dir, ob dein Chart aufgeht, bevor du eine einzige Zeichnung im Editor machst. + resources: + - title: Wikipedia · Slow in and slow out + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Slow_in_and_slow_out + + - id: fall-filmen + type: practice + title: Einen echten Fall Bild für Bild ansehen + prompt: | + Lass einen kleinen Ball oder einen Radiergummi vor einer ruhigen Wand fallen und film es mit dem Handy, gern in Zeitlupe. Geh das Video Bild für Bild durch: auf dem Handy, indem du in der Galerie langsam durch die Zeitleiste schiebst, am PC etwa in VLC, wo die Taste E ein Bild weiterspringt ([VLC Hotkeys](https://wiki.videolan.org/QtHotkeys/)). Notier für das Stück vom Loslassen bis zum Aufprall, wie viele Bilder es sind und ob die Abstände von Bild zu Bild wachsen. Wenn das Video die Zeitlupe nachträglich verlangsamt, notier auch die Aufnahmerate. + lang: prose + starter: | + Gegenstand, Fallhöhe (geschätzt): + Aufnahmerate: + Bilder vom Loslassen bis Kontakt: + Abstände (wachsen sie?): + Was mich überrascht hat: + checklist: + - Du hast die Zahl der Bilder vom Loslassen bis zum Kontakt gezählt, nicht geschätzt. + - Du hast notiert, ob die Abstände von Bild zu Bild wachsen. + - Du hast notiert, wie das Bild direkt vor dem Kontakt aussieht (scharf oder verwischt, Abstand zum Boden). + - Deine Notiz beschreibt die Aufnahme, nicht wie du den Fall zeichnen würdest. + explanation: | + Eine echte Aufnahme schlägt jede Erinnerung. Aus dem Gedächtnis schätzt man einen Fall leicht länger und gleichmäßiger, als er ist; die gezählten Bilder zeigen dir, wie es bei dir war. Am Bild vor dem Kontakt siehst du oft Bewegungsunschärfe: Der Gegenstand ist dort am schnellsten. Diese Beobachtung ist die Grundlage für das Spacing ohne Ease am Boden. Mehr zum Arbeiten mit eigenen Referenzen steht in [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen). + resources: + - title: Wikipedia · Twelve basic principles, Timing + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing + + - id: zwei-timings + type: practice + title: Dieselben Zeichnungen, zwei Timings + prompt: | + Zeichne eine Gliederpuppe in drei Posen auf drei Haftzettel: Kopf links, Kopf in der Mitte, Kopf rechts. Plane zwei Bildlisten mit verschiedenen Dauern, wie Fassung A und B in der Lektion, aber mit deinen eigenen Werten. Schreib für jede Fassung einen Absichtssatz. Zeig beide Fassungen jemandem ohne Vorrede, indem du die Zettel im Takt der Dauern wechselst oder sie in einer App abspielst. Frag nur: „Was passiert da?“ + lang: prose + starter: | + Fassung A, Dauern: + Absichtssatz A: + Fassung B, Dauern: + Absichtssatz B: + Zuschauer zu A (wörtlich): + Zuschauer zu B (wörtlich): + Abweichung von meiner Absicht: + checklist: + - Beide Fassungen nutzen dieselben drei Zeichnungen, nur die Dauern unterscheiden sich. + - Für jede Fassung steht vorher ein Absichtssatz. + - Die Antworten des Zuschauers stehen wörtlich da, ohne deine Deutung. + - Ist niemand da, hast du nach einer Nacht Abstand selbst geprüft und das markiert. + - Du hast in einem Satz notiert, wo die Antwort von deiner Absicht abweicht. + explanation: | + Die Übung trennt die Wirkung des Timings von der Wirkung der Zeichnungen, weil nur das Timing sich ändert. Was der Zuschauer sagt, ist eine Beobachtung, kein Urteil über deine Arbeit. Weicht die Antwort von deiner Absicht ab, ist das die nützlichste Information der Übung. Eine einzelne Antwort beweist nichts; sie zeigt, wo du weiter ausprobierst. + resources: + - title: Wikipedia · Twelve basic principles, Timing + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing diff --git a/content/animation/modules/werkstatt-figur.yaml b/content/animation/modules/werkstatt-figur.yaml new file mode 100644 index 0000000..7a7ad13 --- /dev/null +++ b/content/animation/modules/werkstatt-figur.yaml @@ -0,0 +1,472 @@ +id: werkstatt-figur +title: "Werkstatt: eine eigene Figur, zwei Überarbeitungen" +level: 3 +minutes: 180 +summary: Du animierst eine selbst gewählte Bewegung einer eigenen Figur in 4 bis 12 Bildern, erst als Posentest, dann als Fassung 1, und überarbeitest sie zweimal nach Beobachtungstests, mit aufgehobenen Fassungen, einem Überarbeitungsprotokoll und der Übergabe an die Testszene. +place: pc +goals: + - Du wählst Figur, Bewegung und Umfang selbst und hältst die Absicht in einem Absichtssatz fest, bevor du zeichnest. + - Du timst zuerst nur die Keys als Posentest und ergänzt Breakdowns und Zwischenbilder erst, wenn die Keys tragen. + - Du prüfst jede Fassung vom Großen zum Kleinen und holst vor jeder Überarbeitung einen Beobachtungstest ein. + - Du dokumentierst zwei Überarbeitungen im Überarbeitungsprotokoll, mit Grund für jede Änderung und ohne eine Fassung zu überschreiben. + - Du begründest, warum eine KI in dieser Werkstatt keine Bilder, Zwischenbilder oder Urteile liefert, und nennst, was sie übernehmen darf. +resources: + - title: Mariel Cartwright · Making Fluid and Powerful Animations For 'Skullgirls' (GDC 2014) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw + - title: Jake Clark · Cuphead's Animation Process and Philosophy (GDC 2017) + url: https://www.youtube.com/watch?v=RmGb-jU3uVQ + - title: Krita Manual · Animation with Krita, Workflow + url: https://docs.krita.org/en/user_manual/animation.html#workflow + - title: Thomas Vasseur · Art Design Deep Dive, Dead Cells + url: https://www.gamedeveloper.com/production/art-design-deep-dive-using-a-3d-pipeline-for-2d-animation-in-i-dead-cells-i- +lesson: | + Ab hier zeichnest du keine Bälle und Säcke mehr, sondern eine eigene Figur. Welche, entscheidest du, und welche Bewegung sie macht, auch. Der Kurs schlägt dir nichts vor: keine Figur, keine Bewegung, keinen Stil, auch nichts, was zu deinem Spiel passen könnte. Er gibt dir einen Ablauf, ein Protokoll und Fragen, mit denen du prüfst, ob die Bewegung zeigt, was du willst. + + Das Werkzeug dafür ist die Überarbeitung. Eine erste Fassung zeigt selten genau das, was du gemeint hast. Wie weit sie davon entfernt ist, erfährst du von Menschen, die sie ohne Erklärung sehen. In dieser Werkstatt überarbeitest du eine kleine Animation zweimal, Fassung 1 zu 2 zu 3, und hältst jeden Schritt so fest, dass du ihn später zeigen und begründen kannst. + + > [!NOTE] Zeit einplanen + > Plan mindestens drei Sitzungen mit je einer Nacht dazwischen: Fassung 1, Überarbeitung 1, Überarbeitung 2. Die Beobachtungstests brauchen andere Menschen; verabrede sie früh. Die ersten acht Übungen gehen schnell, die letzten vier sind die Werkstatt. + + ## Figur, Bewegung und Ablauf + + ### Figur, Bewegung und Umfang wählen + + Nimm eine Figur, die du schon gezeichnet hast, etwa aus [Vom Entwurf zum Sprite](/pixelart/sprite-entwerfen). Dann übst du hier Bewegung und nicht nebenbei noch Figurendesign. Hast du ein Modellblatt, leg es neben die Zeitleiste; es hält Proportionen und Farben fest ([Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab)). + + Für die Bewegung gibt der Kurs nur Grenzen für den Umfang vor, keine Inhalte: + + - **Eine Bewegung**, die du in einem Satz beschreiben kannst. Ob Zyklus oder einmalige Aktion, entscheidest du. + - **4 bis 12 Bilder.** Weniger als vier tragen kaum Spacing, mehr als zwölf überarbeitest du nicht zweimal mit Sorgfalt. + - **Eine Ansicht**, also eine Richtung. Weitere Richtungen kommen später ([Ansichten, Maßstab und große Kreaturen](/pixelart/ansichten-massstab)). + + Klein ist hier ein Vorteil. Du zeichnest drei Fassungen und holst zwei Beobachtungstests ein. Bei 40 Bildern würdest du nach der ersten Fassung nur noch flicken. + + ### Der Ablauf: vom Absichtssatz zur dritten Fassung + + 1. **Absichtssatz:** was ein Zuschauer lesen soll. + 2. **Referenz:** dich selbst filmen oder eine gemeinfreie Aufnahme suchen, etwa eine Tafel von Eadweard Muybridge auf [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_walking_%28rbm-QP301M8-1887-003%29.jpg), und Bild für Bild ansehen ([Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen)). + 3. **Thumbnails und Keys** auf Papier. + 4. **Posentest:** nur die Keys im Editor, getimt. + 5. **Fassung 1:** Breakdowns und Zwischenbilder ergänzt. + 6. **Beobachtungstest 1**, dann **Überarbeitung 1** zu Fassung 2. + 7. **Beobachtungstest 2**, dann **Überarbeitung 2** zu Fassung 3. + 8. **Reflexion** und Übergabe an die Testszene. + + Jede Stufe liegt als eigene Datei vor. Exportierst du zu jeder Fassung ein GIF, hast du die Reihe auch auf dem Handy: + + ```text + figur-v1-keys Posentest, nur Keys + figur-v1 Fassung 1 + Beobachtungstest 1 + figur-v2 Fassung 2 (Überarbeitung 1) + Beobachtungstest 2 + figur-v3 Fassung 3 (Überarbeitung 2) + Reflexion, dann Testszene + ``` + + Statt neuer Dateien geht auch ein Commit je Fassung, mit dem Grund in der Commit-Nachricht ([git commit](https://git-scm.com/docs/git-commit)). In Krita legt *File › Incremental Backup* eine Kopie zum Weiterarbeiten an ([Workflow](https://docs.krita.org/en/user_manual/animation.html#workflow)). Wichtig ist nur, dass keine Fassung die vorige ersetzt. + + ## Posentest: erst die Keys, dann die Zwischenbilder + + Das Krita-Handbuch beschreibt den klassischen Ablauf in einem Satz: Man macht Keyframes, „which contain the important poses, and then draw frames in between“ ([Workflow](https://docs.krita.org/en/user_manual/animation.html#workflow)). Im **Posentest** spielst du nur diese Keys ab, jede mit ihrer geplanten Dauer. Liest man die Bewegung schon an ihnen? Stehen die Haltezeiten richtig? Änderungen kosten jetzt eine Zeichnung, später eine Zeichnung und alle Zwischenbilder um sie herum. + + Mariel Cartwright beschreibt für Skullgirls, dass zuerst die Keys kommen und die Zwischenbilder sich an ihnen orientieren; schon zwei Posen können eine schnelle Bewegung lesbar machen ([Making Fluid and Powerful Animations For 'Skullgirls'](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=235s), ab 3:55). Später im Vortrag sagt sie sinngemäß, dass klare und gehaltene Keys wichtiger sind als besonders weiche Übergänge ([ab 19:04](https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=1144s)). Thomas Vasseur arbeitet bei Dead Cells genauso: „Once, and only once, the animation is convincing and correctly timed with the least amount of frames possible, I add interpolation frames before or after the key frames.“ ([Art Design Deep Dive](https://www.gamedeveloper.com/production/art-design-deep-dive-using-a-3d-pipeline-for-2d-animation-in-i-dead-cells-i-)). + + Danach kommen die **Breakdowns**, die Posen, die den Weg zwischen zwei Keys festlegen, und zuletzt die Zwischenbilder. Was Keys, Extreme und Breakdowns unterscheidet, steht in [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen). Den Posentest kannst du auch schon im Prüfstand abspielen ([In der Testszene prüfen](/animation/testszene)). + + > [!PRAXIS] Cuphead: Keys, Breakdowns, dann alles + > Jake Clark von Studio MDHR beschreibt für Cuphead dieselbe Reihenfolge: erst die Keys, dann die Breakdowns, dann die vollständige Animation mit allen Zeichnungen auf Einsen ([Cuphead's Animation Process and Philosophy, GDC 2017](https://www.youtube.com/watch?v=RmGb-jU3uVQ&t=966s), ab 16:06). Die Reihenfolge schützt die aufwendigste Arbeit, die vielen Zwischenbilder, vor späten Änderungen an den Keys. Wer allein zeichnet, spart damit am meisten. + + ## Prüfreihenfolge: vom Großen zum Kleinen + + Bevor du eine Fassung zeigst und bevor du überarbeitest, gehst du sie mit dieser Liste durch, von oben nach unten: + + ```text + 1 Handlung Liest man, was passiert? Keys, Silhouette + 2 Timing Haltezeiten, Gesamtdauer, wo es stockt + 3 Spacing Abstände, Ease, Bögen (Onion Skinning) + 4 Gewicht Schwerpunkt, Bodenkontakt, Stauchung + 5 Überlappung Teile, die nachziehen oder vorauseilen + 6 Konstanz Proportion, Volumen, Licht in jedem Bild + 7 Details einzelne Pixel, Kanten, Zittern + 8 Lesbarkeit bei 1× und vor dunklem und hellem Grund + ``` + + Die Punkte verweisen auf die Module des Kurses: Timing auf [Timing und Spacing](/animation/timing-spacing), Bögen und Überlappung auf [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung), Gewicht auf [Schwerpunkt, Gleichgewicht und Bodenkontakt](/animation/schwerpunkt-balance) und [Gewicht zeigen](/animation/gewicht-aufprall), Konstanz auf [Form und Proportionen halten](/animation/form-konstanz). + + Eine Überarbeitung arbeitet von oben nach unten. Wer bei Punkt 7 anfängt, poliert Pixel, die nach einer Timing-Änderung neu gezeichnet werden. Liest ein Zuschauer die Handlung nicht, ist kein Detail die Ursache. Das gilt auch, wenn das Detail dich am meisten stört. + + ## Beobachtungstest und Überarbeitungsprotokoll + + ### Der Beobachtungstest vor jeder Überarbeitung + + Vor jeder Überarbeitung holst du einen Beobachtungstest ein, so wie in [Körpersprache und Zustandswechsel](/animation/koerpersprache) beschrieben: ohne Vorrede, dreimal in Schleife, „Was passiert da?“, Antworten wörtlich, nichts erklären. In der Werkstatt kommen drei Punkte dazu. + + - **Wer sieht welche Fassung?** Ein neuer Zuschauer für Test 2 liest Fassung 2 unbefangen. Derselbe Zuschauer wie in Test 1 kann sagen, was sich geändert hat, hat aber Fassung 1 im Kopf. Beides ist nützlich. Notier, wen du gefragt hast. + - **Abweichung ist Information.** Liest dein Zuschauer etwas anderes als dein Absichtssatz, ist das kein Urteil über dich, sondern der Ausgangspunkt der nächsten Überarbeitung. + - **Die Absicht darf sich ändern, aber sichtbar.** Gefällt dir, was der Zuschauer gelesen hat, besser als dein Plan, darfst du den Absichtssatz ändern. Dann steht der alte im Protokoll daneben, mit Grund. + + Ist niemand da, siehst du die Fassung nach mindestens einer Nacht Abstand selbst an und markierst das. Ein einzelner Mensch ist kein Beleg; er zeigt dir, wo du genauer hinsiehst. Wie man Rückmeldungen sammelt, ohne sie zu lenken, steht in [Testlesen und Playtest](/narrative/testlesen-playtest). + + ### Das Überarbeitungsprotokoll + + Zu jeder Fassung ab Fassung 2 gehört ein Eintrag mit sieben Feldern: Fassung, Datum, Absichtssatz, Beobachtung, Änderung, Grund und Ergebnis. Dazu schreibst du den Dateinamen, damit klar ist, welche Datei der Eintrag beschreibt. + + ```text + Fassung 2 + Datum 2026-11-03 + Datei figur-v2 (figur-v1 bleibt) + Absichtssatz „…“ (unverändert / geändert, warum) + Beobachtung eigene: … + Test 1 (wer, wann): „…“ (wörtlich) + Änderung Bild 3: Dauer 100 → 250 ms + Bild 5: neu gezeichnet, … + Grund je Änderung: welche Beobachtung, welcher + Teil des Absichtssatzes + Ergebnis eigener Blick nach der Änderung: … + Test 2 (wer, wann): „…“ + ``` + + Drei Regeln halten das Protokoll brauchbar. **Jede Änderung hat einen Grund**, und der Grund nennt eine Beobachtung oder einen Teil des Absichtssatzes, nicht „sah besser aus“. **Änderungen nennen Bilder und Zahlen**: welches Bild, welche Dauer vorher und nachher, was an der Zeichnung anders ist. **Das Ergebnis kommt aus einem neuen Blick**, nicht aus der Erwartung beim Ändern. Das Ergebnis von Test 2 trägst du nach, sobald du ihn gemacht hast; es ist zugleich die Beobachtung für Fassung 3. + + So entsteht aus drei Dateien und zwei Einträgen eine Geschichte, die du erzählen kannst: was du wolltest, was andere sahen, was du geändert hast und warum. Das gleiche Vorgehen für Texte zeigt [Überarbeiten mit eigenen Kriterien](/narrative/ueberarbeiten). + + > [!INTERVIEW] + > „Zeig uns eine Animation und erzähl, wie sie entstanden ist.“ Gute Antwort: Ich zeige Fassung 1 und die letzte nebeneinander und sage, was ich zeigen wollte. Dann erzähle ich, was ein Zuschauer in Fassung 1 tatsächlich gesehen hat, welche Änderungen ich daraufhin gemacht habe, in welchen Bildern und warum, und was der zweite Test ergab. Ich nenne auch eine Änderung, die nichts gebracht hat, und eine Stelle, die ich bewusst gelassen habe. + + ## KI in der Werkstatt + + Figur, Posen, Keys, Breakdowns, Zwischenbilder und Timing stammen von dir. Keine generierten Bilder als Vorlage oder Referenz, keine erzeugten Zwischenbilder, kein Hochrechnen deiner Figur auf eine andere Auflösung. Eine KI darf hier nur technische Arbeit beschleunigen: ein Skript, das deine Fassungen als GIF exportiert und nebeneinanderlegt, Git-Befehle für Commits je Fassung, ein Export-Befehl für das Sheet. + + > [!WARNING] Auch Fragen sind Aufträge + > „Was stimmt an meiner Animation nicht?“ oder „Wie wirkt sie schwerer?“ liefern von einer KI Vorschläge für Posen und Timing, also für die Arbeit, die du übst. Rückmeldung holst du dir von Menschen im Beobachtungstest. Ihre Antworten beschreiben, was sie sehen; was du daraus machst, entscheidest du. + + ## Übergabe an die Testszene + + Fassung 3 ist das Ende dieser Werkstatt, nicht das Ende der Animation. Im Editor siehst du sie isoliert und vergrößert. Wie sie im Spieltakt wirkt, in Originalgröße, mit Eingabe und Übergängen zu anderen Animationen, prüfst du in [In der Testszene prüfen](/animation/testszene). Was du dort findest, hältst du im Prüfprotokoll fest. Änderst du danach etwas, ist das eine Korrektur nach dem Prüfstand, keine dritte Überarbeitung. + + ## Häufige Fehler + + - **Zu groß angefangen.** Nach Fassung 1 fehlt die Kraft für zwei Überarbeitungen. Bleib bei 4 bis 12 Bildern. + - **Zwischenbilder vor dem Posentest.** Jede Änderung an einem Key reißt die Bilder um ihn herum mit. Erst die Keys timen. + - **Fassung überschrieben.** Ohne Fassung 1 kannst du nicht zeigen, was Überarbeitung 1 gebracht hat. Vor jeder Änderung unter neuem Namen speichern. + - **Änderung ohne Grund.** „Sah besser aus“ ist kein Grund. Nenn die Beobachtung oder den Teil des Absichtssatzes. + - **Pixel vor Timing.** Der Zuschauer liest die Handlung nicht, und du glättest Kanten. Arbeite die Prüfliste von oben ab. + - **Absichtssatz still angepasst.** Er passt plötzlich genau zur Fassung, weil du ihn danach umgeschrieben hast. Den alten daneben stehen lassen. + - **Test erklärt.** „Gleich siehst du, wie sie …“ vor dem Zeigen macht den Test wertlos. Erst zeigen, dann fragen. + + ## Zusammenfassung + + - Figur und Bewegung wählst du selbst: eine Bewegung, 4 bis 12 Bilder, eine Ansicht. + - Absichtssatz, Referenz, Thumbnails und Keys kommen vor dem Editor. + - Im Posentest spielst du nur die Keys mit ihrem Timing. Breakdowns und Zwischenbilder folgen, wenn die Keys tragen. + - Jede Fassung ist eine eigene Datei oder ein eigener Commit: `-v1-keys`, `-v1`, `-v2`, `-v3`. + - Vor jeder Überarbeitung ein Beobachtungstest; überarbeitet wird vom Großen zum Kleinen. + - Das Protokoll hält Fassung, Datum, Absichtssatz, Beobachtung, Änderung, Grund und Ergebnis fest. + - Bilder und Urteile kommen nicht von einer KI. Nach Fassung 3 geht die Animation in die Testszene. +exercises: + - id: werkstatt-ablauf + type: order + title: Vom Satz zur dritten Fassung + prompt: | + Bring die Schritte der Werkstatt in die Reihenfolge, in der du sie machst. + lang: prose + lines: | + Absichtssatz schreiben und eine Referenz suchen. + Thumbnails auf Papier zeichnen und die Keys festlegen. + Posentest: nur die Keys im Editor timen und abspielen. + Breakdowns und Zwischenbilder ergänzen und als Fassung 1 speichern. + Beobachtungstest 1, dann Überarbeitung 1 zu Fassung 2. + Beobachtungstest 2, dann Überarbeitung 2 zu Fassung 3. + Reflexion schreiben und Fassung 3 in der Testszene prüfen. + explanation: | + Der Absichtssatz kommt vor allem anderen, weil jede spätere Prüfung an ihm misst. Thumbnails und Keys auf Papier sind die billigste Stufe. Im Posentest prüfst du Keys und Timing, bevor Zwischenbilder jede Änderung teuer machen. Jede Überarbeitung beginnt mit einem Test, damit sie auf einer Beobachtung beruht. Die Testszene steht am Ende, weil sie fragt, ob die fertige Bewegung im Spieltakt besteht. + resources: + - title: Krita Manual · Animation, Workflow + url: https://docs.krita.org/en/user_manual/animation.html#workflow + + - id: was-zuerst + type: choice + title: Was ändern, was lassen? + prompt: | + Ein neutrales Beispiel. Absichtssatz: „Die Figur hebt eine schwere Kiste vom Boden auf.“ Test 1 ergibt: „Sie bückt sich und steht wieder auf.“ Außerdem flackert in Bild 4 ein Pixel an der Hand. Was gehst du in Überarbeitung 1 zuerst an? + options: + - text: Keys und Timing des Moments, in dem die Kiste vom Boden kommt, damit man das Heben überhaupt liest. + correct: true + why: Der Zuschauer liest die Handlung nicht. Das ist Punkt 1 der Prüfliste; erst wenn das Heben ankommt, lohnen die kleineren Punkte. + - text: Das flackernde Pixel in Bild 4 korrigieren. + correct: false + why: Ein Detail aus Punkt 7. Es stört, erklärt aber nicht, warum niemand das Heben sieht. Und ändert sich Bild 4 durch die Überarbeitung, zeichnest du es ohnehin neu. + - text: Mehr Zwischenbilder einfügen, damit die Bewegung weicher läuft. + correct: false + why: Weichere Übergänge machen die Handlung nicht lesbarer. Wichtiger sind klare, gehaltene Keys. + - text: Die Kiste dunkler färben, damit sie schwerer aussieht. + correct: false + why: Möglich, aber eine Änderung an der Farbe beantwortet nicht, warum das Heben fehlt. Außerdem wüsstest du nach einer Farbänderung nicht, ob Bewegung oder Farbe gewirkt hat. + explanation: | + Die Prüfreihenfolge geht vom Großen zum Kleinen, weil große Änderungen kleine mitreißen. Wer zuerst Pixel korrigiert, macht Arbeit, die die nächste Timing-Änderung zunichtemacht. Die Beobachtung „bückt sich und steht wieder auf“ sagt, dass ein Teil der Handlung fehlt; dort setzt die Überarbeitung an. Welche Pose oder Dauer du dafür änderst, entscheidest du. + resources: + - title: Mariel Cartwright · GDC 2014 (ab 19:04) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=1144s + + - id: ki-auftrag + type: choice + title: Was die Maschine hier darf + prompt: | + Welcher Auftrag an eine KI passt zur Regel dieser Werkstatt? + options: + - text: Schreib ein Skript, das `figur-v1` bis `figur-v3` als GIF exportiert und nebeneinander auf eine HTML-Seite legt. + correct: true + why: Das ist technische Arbeit. Die Bilder darin stammen alle von dir; das Skript ordnet sie nur an. + - text: Zeichne die Zwischenbilder zwischen meinen Keys. + correct: false + why: Zwischenbilder sind Teil der Animation. Sie zu zeichnen ist genau das, was du hier übst. + - text: Sag mir, was an meiner Animation nicht stimmt. + correct: false + why: Die Antwort liefert Vorschläge für Posen und Timing. Rückmeldung holst du dir von Menschen im Beobachtungstest. + - text: Erzeuge mir ein Referenzvideo der Bewegung. + correct: false + why: Auch eine generierte Referenz ist eine Vorlage, die dir Posen vorgibt. Referenz filmst du selbst oder nimmst gemeinfreie Aufnahmen. + explanation: | + Die Grenze verläuft zwischen Technik und Gestaltung. Ein Export-Skript hat eine richtige Lösung, die nicht von deiner Absicht abhängt. Posen, Zwischenbilder, Referenzen und Urteile hängen an ihr; wer sie abgibt, übt nicht mehr das Animieren, sondern das Auswählen. + resources: + - title: Krita Manual · Animation, Workflow + url: https://docs.krita.org/en/user_manual/animation.html#workflow + + - id: dauer-fassung-2 + type: output + title: Wie lang ist Fassung 2? + prompt: | + Fassung 1 hat die Bildliste unten. Überarbeitung 1 verlängert Bild 2 auf 200 ms und streicht Bild 4. Wie viele Millisekunden dauert Fassung 2? Antworte mit der Zahl. + lang: text + code: | + Fassung 1 + Bild 1 2 3 4 5 6 + ms 150 100 50 50 200 100 + expected: | + 700 + accept: + - 700 ms + explanation: | + Fassung 1 dauert 650 ms. Bild 2 wird 100 ms länger, Bild 4 fällt mit 50 ms weg: 650 + 100 − 50 = 700 ms. Fassung 2 hat dann fünf Bilder. Im Protokoll stehen beide Änderungen mit Bildnummer, vorher und nachher; die Nummern beziehen sich auf Fassung 1, deshalb schreibst du dazu, dass ab Bild 5 alles um eins nach vorn rückt. + resources: + - title: Aseprite Docs · Frame Duration + url: https://www.aseprite.org/docs/frame-duration/ + + - id: ticks-bis-pose + type: output + title: Wann sieht man die Pose? + prompt: | + In Fassung 2 ist Bild 3 die Pose, an der man erkennt, was die Figur tut. Nach wie vielen Ticks ab dem Start der Animation erscheint sie, bei 60 Ticks pro Sekunde? Antworte mit der Zahl. + lang: text + code: | + Fassung 2 + Bild 1 2 3 4 5 + ms 150 200 50 200 100 + expected: | + 21 + accept: + - 21 Ticks + explanation: | + Bild 3 beginnt nach 150 + 200 = 350 ms, und 350 ms sind 350 × 60 / 1000 = 21 Ticks. In der Testszene misst du diesen Wert nach, dort ab dem Tastendruck. Ob 21 Ticks für deine Bewegung passen, entscheidest du mit [Animation im Spiel](/animation/animation-im-spiel). + resources: + - title: Godot Docs · physics_ticks_per_second + url: https://docs.godotengine.org/en/stable/classes/class_projectsettings.html#class-projectsettings-property-physics-common-physics-ticks-per-second + + - id: werkstatt-regeln + type: gap + title: Fünf Regeln der Werkstatt + prompt: | + Ergänze die fehlenden Wörter. + lang: prose + code: | + Bevor du zeichnest, schreibst du einen ⟦Absichtssatz⟧. + Im Posentest spielst du nur die ⟦Keys⟧ ab. + Jede Fassung speicherst du als eigene Datei oder als eigenen ⟦Commit⟧. + Jede Änderung im Protokoll hat einen ⟦Grund⟧. + Überarbeitet wird vom Großen zum ⟦Kleinen⟧. + gaps: + - label: Vor dem Zeichnen + hint: Ein Satz, was ein Zuschauer lesen soll. + - label: Im Posentest + hint: Die Schlüsselposen, englisch. + accept: ["Schlüsselposen", "Key-Posen", "Keyframes"] + - label: Fassung in Git + hint: Ein Schnappschuss im Repository. + - label: Zu jeder Änderung + hint: Warum du sie gemacht hast. + accept: ["Begründung"] + - label: Reihenfolge + hint: Gegenteil von groß. + explanation: | + Der Absichtssatz ist der Maßstab für jeden Test. Im Posentest prüfst du Keys und Timing, solange Änderungen billig sind. Eigene Dateien oder Commits halten jede Fassung zum Vergleich bereit. Ein Grund verbindet jede Änderung mit einer Beobachtung, und die Reihenfolge vom Großen zum Kleinen verhindert, dass du Details polierst, die die nächste große Änderung wieder umwirft. + resources: + - title: Jake Clark · Cuphead, GDC 2017 (ab 16:06) + url: https://www.youtube.com/watch?v=RmGb-jU3uVQ&t=966s + + - id: protokoll-ohne-beleg + type: bug + title: Nichts mehr zu zeigen + prompt: | + Drei Wochen später willst du zeigen, was Überarbeitung 1 gebracht hat. Du kannst Fassung 1 nicht mehr abspielen, und eine der beiden Änderungen kannst du nicht erklären. Finde die zwei Zeilen im Protokoll, die das verursachen. + lang: text + code: | + Fassung 2 + Datum 2026-11-03 + Datei figur-v1, überschrieben + Absichtssatz „Sie hebt eine schwere Kiste auf.“ + Beobachtung Test 1, Lea: „Sie bückt sich.“ + Änderung Bild 3: 100 → 250 ms + Grund Lea las das Heben nicht; Bild 3 ist der Key. + Änderung Bild 5: Kopf 1 px tiefer + Grund – + Ergebnis eigener Blick: Heben in Bild 3 lesbar + lines: [3, 9] + explanation: | + Zeile 3: Fassung 2 wurde unter dem Namen von Fassung 1 gespeichert, Fassung 1 ist weg. Richtig wäre `figur-v2`, und `figur-v1` bleibt liegen. Zeile 9: Die zweite Änderung hat keinen Grund. Ob sie aus einer Beobachtung kam oder aus einem Gefühl beim Zeichnen, weißt du nach drei Wochen nicht mehr. Die erste Änderung zeigt, wie es geht: Bild, Zahl vorher und nachher, und ein Grund, der die Beobachtung nennt. + resources: + - title: Krita Manual · Animation, Workflow (Incremental Backup) + url: https://docs.krita.org/en/user_manual/animation.html#workflow + + - id: vasseur-erst-timing + type: explain + title: Erst überzeugend, dann weich + prompt: | + Thomas Vasseur beschreibt seine Arbeitsweise bei Dead Cells. Erkläre in wenigen Sätzen, was er erst tut und was danach, warum diese Reihenfolge Arbeit spart und was das für deinen Posentest heißt. + lang: text + code: | + Once, and only once, the animation is convincing + and correctly timed with the least amount of + frames possible, I add interpolation frames + before or after the key frames. Never in-between. + points: + - Erst muss die Animation mit möglichst wenigen Bildern überzeugen und richtig getimt sein. + - Zwischenbilder kommen erst danach, und zwar vor oder nach den Keys, nicht genau zwischen sie. + - Änderungen an Keys und Timing sind billig, solange es keine Zwischenbilder gibt, die mitgeändert werden müssten. + - Für den Posentest heißt das, nur die Keys mit ihren Dauern abzuspielen und erst weiterzuzeichnen, wenn die Bewegung damit trägt. + explanation: | + Vasseur prüft erst, ob die Bewegung mit den wenigsten Bildern funktioniert. Das ist ein Posentest. Erst dann ergänzt er Bilder, und zwar vor oder nach den Keys, nicht in der Mitte zwischen ihnen. Man kann das so lesen, dass die Zusatzbilder sich an die Keys anlehnen und diese klar bleiben. Weil er später Timing-Änderungen bekommt, etwa um eine Waffe abzuschwächen, spart ihm die Reihenfolge Arbeit: Keys verschieben geht schnell, viele Zwischenbilder neu zeichnen nicht. Für deine Fassung 1 heißt das: erst `figur-v1-keys` zeigen und timen, dann ausbauen. + resources: + - title: Thomas Vasseur · Art Design Deep Dive, Dead Cells + url: https://www.gamedeveloper.com/production/art-design-deep-dive-using-a-3d-pipeline-for-2d-animation-in-i-dead-cells-i- + + - id: wahl-und-plan + type: practice + title: Figur, Bewegung, Absicht + prompt: | + Wähle eine Figur, die du schon gezeichnet hast, und eine Bewegung für sie, 4 bis 12 Bilder, eine Ansicht. Der Kurs schlägt nichts vor. Schreib den Absichtssatz, bevor du etwas zeichnest. Such oder film eine Referenz und notier, welche Bilder darin die Keys sind. Zeichne Thumbnails auf Papier und leg die Keys mit geplanten Dauern fest. + lang: prose + starter: | + Figur (Datei, Größe in px): + Bewegung in einem Satz: + Zyklus oder einmalige Aktion: + Ansicht: + Absichtssatz: + Referenz (Quelle, was sie zeigt): + Keys (Bild, Pose in Stichworten, geplante Dauer): + Geplante Bildzahl insgesamt: + checklist: + - Figur und Bewegung hast du selbst gewählt; die Figur hast du schon vorher gezeichnet. + - Die Bewegung passt in einen Satz, hat eine Ansicht und plant 4 bis 12 Bilder. + - Der Absichtssatz beschreibt, was ein Zuschauer lesen soll, und steht vor den Thumbnails. + - Die Referenz ist selbst gefilmt oder gemeinfrei und nicht generiert. + - Jeder Key hat eine geplante Dauer in Millisekunden oder Ticks. + explanation: | + Die Grenzen beim Umfang sind der Grund, warum du zwei Überarbeitungen schaffst. Der Absichtssatz vor den Thumbnails verhindert, dass du ihn nachträglich an deine Zeichnung anpasst. Die Referenz zeigt dir, was in der Bewegung wirklich passiert, statt was du erinnerst ([Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen)). + resources: + - title: Wikimedia Commons · Muybridge, Man in pelvis cloth walking (Plate 3) + url: https://commons.wikimedia.org/wiki/File:Man_in_pelvis_cloth_walking_(rbm-QP301M8-1887-003).jpg + + - id: fassung-eins + type: practice + title: Posentest und Fassung 1 + prompt: | + Leg die Keys im Editor an, gib ihnen ihre Dauern und speichere als `figur-v1-keys`. Spiel nur die Keys in Originalgröße ab und notier, was du siehst. Ergänze dann Breakdowns und Zwischenbilder und speichere als `figur-v1`. Geh die Prüfliste der Lektion von oben durch. Zeig Fassung 1 dann ohne Vorrede einem anderen Menschen, dreimal in Schleife, frag „Was passiert da?“ und schreib die Antwort wörtlich auf. + lang: prose + starter: | + Posentest figur-v1-keys (Bild, Dauer, was ich sehe): + + Fassung 1 figur-v1, Bildliste (Bild, Dauer, Key/Breakdown/Zwischenbild): + + Prüfliste 1–8, eigene Notizen: + + Beobachtungstest 1 (wer, wann, wörtlich): + Abweichung vom Absichtssatz: + checklist: + - "`figur-v1-keys` und `figur-v1` liegen als getrennte Dateien oder Commits vor." + - Im Posentest hast du nur Keys abgespielt, mit ihren Dauern. + - Die Bildliste von Fassung 1 kennzeichnet jedes Bild als Key, Breakdown oder Zwischenbild. + - Die Antwort im Beobachtungstest steht wörtlich da, ohne deine Deutung, oder die Selbstprüfung nach einer Nacht ist markiert. + - Die Abweichung vom Absichtssatz ist in einem Satz beschrieben, ohne schon eine Lösung zu nennen. + explanation: | + Der Posentest ist die billigste Stelle für große Änderungen. Was du dort siehst, notierst du, damit du später weißt, ob Fassung 1 die Keys gestärkt oder verwässert hat. Der Beobachtungstest liefert die Grundlage für Überarbeitung 1. Die Abweichung ohne Lösung zu beschreiben ist Absicht: Erst wenn du sie mit der Prüfliste ansiehst, entscheidest du, was du änderst. + resources: + - title: Mariel Cartwright · GDC 2014 (ab 3:55) + url: https://www.youtube.com/watch?v=Mw0h9WmBlsw&t=235s + + - id: ueberarbeitung-eins + type: practice + title: Überarbeitung 1 zu Fassung 2 + prompt: | + Mindestens eine Nacht nach Test 1. Leg die Antwort aus Test 1 neben deinen Absichtssatz und geh die Prüfliste von oben durch. Entscheide, was du änderst, speichere Fassung 1 unverändert und arbeite in `figur-v2`. Füll das Überarbeitungsprotokoll aus. Zeig Fassung 2 dann in Beobachtungstest 2 und trag das Ergebnis nach. + lang: prose + starter: | + Fassung: 2 + Datum: + Datei: figur-v2 (figur-v1 bleibt) + Absichtssatz (unverändert / geändert, warum): + Beobachtung (eigene; Test 1, wer, wörtlich): + Änderung 1 (Bild, vorher → nachher): + Grund 1: + Änderung 2 (Bild, vorher → nachher): + Grund 2: + Ergebnis (eigener Blick): + Beobachtungstest 2 (wer, wann, wörtlich): + checklist: + - Zwischen Test 1 und dieser Überarbeitung lag mindestens eine Nacht. + - Fassung 1 ist unverändert gespeichert, Fassung 2 als eigene Datei oder eigener Commit. + - Jede Änderung nennt Bild und Zahlen vorher und nachher. + - Jeder Grund nennt eine Beobachtung oder einen Teil des Absichtssatzes. + - Die Änderungen setzen bei dem obersten Punkt der Prüfliste an, an dem Fassung 1 hakt. + - Das Ergebnis von Test 2 steht wörtlich da, oder die Selbstprüfung ist markiert. + explanation: | + Die Nacht Abstand trennt Zeichnen und Prüfen. Die Prüfliste sorgt dafür, dass du beim größten Problem anfängst und nicht beim auffälligsten. Mit Bild, Zahlen und Grund kannst du jede Änderung später zeigen und zurücknehmen, falls sie nichts gebracht hat. Test 2 ist zugleich die Beobachtung, mit der Überarbeitung 2 beginnt. + resources: + - title: Krita Manual · Animation, Workflow + url: https://docs.krita.org/en/user_manual/animation.html#workflow + + - id: ueberarbeitung-zwei + type: practice + title: Überarbeitung 2, Reflexion, Übergabe + prompt: | + Überarbeite Fassung 2 auf Grundlage von Test 2 zu `figur-v3`, mit Protokolleintrag wie in Überarbeitung 1. Schreib danach eine kurze Reflexion: Leg Fassung 1 und 3 nebeneinander, nenne zwei Änderungen mit Bild, vorher, nachher und Grund, eine Änderung, die nichts gebracht hat oder die du zurückgenommen hast, und eine Stelle, die du bewusst gelassen hast. Notier zum Schluss, was du in [der Testszene](/animation/testszene) prüfen willst. + lang: prose + starter: | + Fassung: 3 + Datum: + Datei: figur-v3 (figur-v2 bleibt) + Absichtssatz: + Beobachtung (eigene; Test 2, wer, wörtlich): + Änderung (Bild, vorher → nachher): + Grund: + Ergebnis (eigener Blick): + + Reflexion + Änderung A (Bild, vorher, nachher, Grund): + Änderung B (Bild, vorher, nachher, Grund): + Ohne Wirkung oder zurückgenommen: + Bewusst gelassen, warum: + + Für die Testszene: + checklist: + - Fassung 1, 2 und 3 liegen getrennt vor; keine wurde überschrieben. + - Der Protokolleintrag für Fassung 3 hat alle sieben Felder. + - Die Reflexion nennt zwei Änderungen mit Bild, vorher, nachher und Grund. + - Die Reflexion nennt eine Änderung ohne Wirkung oder eine zurückgenommene und eine bewusst gelassene Stelle. + - Für die Testszene steht mindestens eine Frage, die sich dort messen oder beobachten lässt. + - Alle Bilder in allen Fassungen hast du selbst gezeichnet und getimt. + explanation: | + Zwei dokumentierte Überarbeitungen zeigen, dass du nicht nach Gefühl änderst, sondern nach Beobachtung. Die Änderung ohne Wirkung ist kein Makel; sie zeigt, dass du geprüft statt angenommen hast. Die bewusst gelassene Stelle schützt vor dem Reflex, alles zu glätten. Die Fragen für die Testszene sind der Übergang vom Editor ins Spiel, wo Timing, Übergänge und Lesbarkeit in Originalgröße neu zur Probe stehen. + resources: + - title: Jake Clark · Cuphead, GDC 2017 (ab 16:06) + url: https://www.youtube.com/watch?v=RmGb-jU3uVQ&t=966s diff --git a/content/animation/modules/werkstatt-studien.yaml b/content/animation/modules/werkstatt-studien.yaml new file mode 100644 index 0000000..0c67e05 --- /dev/null +++ b/content/animation/modules/werkstatt-studien.yaml @@ -0,0 +1,468 @@ +id: werkstatt-studien +title: "Werkstatt: neutrale Studien in Varianten" +level: 2 +minutes: 150 +summary: Drei neutrale Studien im Editor, Ball, Mehlsack und Pendel, je mit einer Basis und Varianten, die sich in genau einer Größe unterscheiden, dazu Timing-Varianten ohne neue Zeichnung, ein Beobachtungstest mit anderen Menschen und ein Protokoll, das festhält, welche Änderung was bewirkt hat. +place: pc +goals: + - Du legst für eine Studie einen Absichtssatz und eine Basis fest und speicherst jede Variante als eigene Datei. + - Du baust Varianten, die sich in genau einer Größe von der Basis unterscheiden, und erkennst Vergleiche, in denen sich zwei Größen geändert haben. + - Du änderst das Timing einer Studie über die Bilddauern, ohne eine Zeichnung anzufassen. + - Du führst einen Beobachtungstest mit zwei Varianten durch, ohne die Antwort vorzugeben, und notierst die Antworten wörtlich. + - Du hältst Änderung, Beobachtung und Ergebnis jeder Variante in einem Protokoll fest. +resources: + - title: Saint11 · A Basic Aseprite Animation + url: https://saint11.art/pixel_art_articles/article3/ + - title: Slynyrd · Pixelblog 56, Top Down Character Attack Animation + url: https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation + - title: Walt Disney Family Museum · Animating a Sack Drop + url: https://www.waltdisney.org/education/workshops/studio-series-animating-sack-drop-adult-session + - title: Wikipedia · Twelve basic principles of animation + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation +lesson: | + Du willst einen Ball schwerer wirken lassen und änderst drei Dinge auf einmal: Er staucht beim Aufprall stärker, bleibt länger am Boden und springt weniger hoch. Danach wirkt er anders. Aber welche der drei Änderungen hat das bewirkt? Und hat eine davon vielleicht gegen die anderen gearbeitet? Du weißt es nicht, weil du alles gleichzeitig geändert hast. + + Diese Werkstatt übt das Gegenteil. Du baust neutrale Studien und von jeder Varianten, in denen sich genau eine Größe unterscheidet. Ball, Mehlsack und Pendel haben kein Gesicht und keine Geschichte. Was ein Zuschauer in ihnen liest, kommt aus Timing, Spacing und Form. Die Regeln dazu kennst du aus den Unterwegs-Modulen; hier setzt du sie im Editor um und prüfst sie an anderen Menschen. Die Bedienung steht in [Einzelbilder im Editor](/animation/editor-zeitleiste). + + > [!NOTE] Zeit einplanen + > Plan zwei bis drei Sitzungen am PC ein. Jede Studie braucht eine Basis, zwei Varianten und einen Beobachtungstest. Den Test machst du auch unterwegs, wenn du die GIFs auf dem Handy hast. Die ersten neun Übungen gehen schnell, die letzten drei sind die Werkstatt selbst. + + ## Der Ablauf einer Studie + + 1. **Absichtssatz:** ein Satz, was ein Zuschauer lesen soll, etwa „Der Ball ist schwer und kommt nach dem Aufprall schnell zur Ruhe“. + 2. **Basis:** Keys, Timing, Zwischenbilder, gespeichert als eigene Datei, etwa `ball-basis.aseprite`. + 3. **Varianten:** eine Kopie der Basis, in der du genau eine Größe änderst, mit eigenem Namen, etwa `ball-halt.aseprite`. + 4. **Vergleich:** Basis und Variante nebeneinander abspielen und notieren, was du siehst. + 5. **Beobachtungstest:** beide Fassungen anderen zeigen, ohne Vorrede. + 6. **Protokoll:** was geändert ist, was beobachtet wurde, was daraus folgt. + + Die Basis ist der Bezugspunkt. Ohne sie vergleichst du zwei Varianten, die sich in Dingen unterscheiden, an die du dich nicht mehr erinnerst. Deshalb überschreibst du sie nie. Willst du die Basis selbst verbessern, entsteht `ball-basis-v2`, und die alte bleibt liegen. + + ## Eine Größe pro Variante + + Eine Variante ist ein kleines Experiment. Ändert sich nur eine Größe, kannst du jeden Unterschied in der Wirkung dieser Größe zuschreiben. Ändern sich zwei, kannst du es nicht mehr. Die Größen, die du in diesen Studien variierst: + + | Größe | Was du änderst | Neu zeichnen? | + | --- | --- | --- | + | Haltezeit | Dauer eines Keys | nein | + | Gesamttempo | alle Dauern im selben Verhältnis | nein | + | Spacing | Lage der Zwischenbilder zwischen gleichen Keys | nur Zwischenbilder | + | Höhe oder Weite | Lage eines Keys, Zwischenbilder nach derselben Regel | Key und Zwischenbilder | + | Stauchung | Form im Kontaktbild | ein Bild | + | Ausholen | Tiefe der Ausholpose | ein Key | + | Versatz | wie viele Bilder ein Teil nachzieht | die betroffenen Teile | + + Am billigsten sind Varianten, die nur Dauern ändern. Gleiche Zeichnungen, andere Zahlen: Das ist der reinste Vergleich, weil die Zeichnung als Ursache ausscheidet. In Aseprite und LibreSprite änderst du dafür die Millisekunden je Bild, in Pixelorama die Faktoren, in Krita die Zahl der Haltebilder. Die Wikipedia-Übersicht der zwölf Prinzipien beschreibt Timing auch als Frage des Gewichts: „a lightweight object will react faster than a heavy one“ ([Twelve basic principles: Timing](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing)). Ob dein Zuschauer das so liest, zeigt erst der Test. + + > [!PRAXIS] Ein Bild, verschiedene Dauern + > Raymond Schlitter (Slynyrd) beschreibt die Ausholpose in seinem Angriffsbeispiel so: „This model uses 1 frame, at various delay durations.“ Das Ausholen ist also ein einziges Bild, das je nach Waffe verschieden lange steht: 100 ms beim Schwert, 200 beim Speer, 250 beim Hammer. Dazu nennt er den Preis: Je länger das Ausholen, desto wuchtiger kann der Schlag wirken, desto größer ist aber die Verzögerung im Spiel ([Pixelblog 56](https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation)). Genau so baust du Timing-Varianten. + + Zum Vergleichen spielst du Basis und Variante nebeneinander. Am schnellsten geht es über den Export: Jede Fassung als GIF mit ganzem Faktor, etwa 400 %, und beide nebeneinander im Browser oder Bildbetrachter öffnen ([Einzelbilder im Editor](/animation/editor-zeitleiste)). Die GIFs brauchst du ohnehin für den Beobachtungstest. + + > [!TIP] Varianten in einer Datei + > Unterscheiden sich die Varianten nur in Zeichnungen, legst du sie auf eine breite Leinwand, jede Variante auf eine eigene Ebene, nebeneinander. Bei Timing-Varianten geht das so nicht, weil eine Bilddauer für alle Ebenen gilt. Dann gibst du jedem Bild denselben Grundtakt, etwa 50 ms, und baust Haltezeiten aus verknüpften Cels, die sich wiederholen ([Linked Cels](https://www.aseprite.org/docs/linked-cels/)): Ein Key, der 150 ms steht, belegt drei Bilder. Jede Ebene hat so ihr eigenes Timing. In Krita ist das die normale Arbeitsweise ([Animation Timeline Docker](https://docs.krita.org/en/reference_manual/dockers/animation_timeline.html#overview)). + + ## Studie 1: der Ball, Gummi oder Bowling + + Den hüpfenden Ball kennst du aus [Timing und Spacing](/animation/timing-spacing); wie Material und Gewicht beim Aufprall aussehen, steht in [Gewicht zeigen](/animation/gewicht-aufprall). Als Basis reicht ein kleiner Ball, etwa 8 bis 16 Pixel, der einmal fällt, aufprallt und zurückspringt. Pedro Medeiros zeigt in seinem Aseprite-Artikel einen Ball, der 4, 3, 2 und 1 Pixel steigt und oben ein Bild lang hält ([A Basic Aseprite Animation](https://saint11.art/pixel_art_articles/article3/#timing)). Das ist ein guter Start für das Spacing; dein Timing legst du selbst fest. + + Drei Varianten bieten sich an, jede mit genau einer Änderung: + + - **Haltezeit am Boden:** nur die Dauer des Kontaktbilds ändern. + - **Höhe des Rückpralls:** den Key nach dem Aufprall höher oder tiefer setzen, die Zwischenbilder nach derselben Regel wie in der Basis, also mit Abständen, die zum Scheitel hin kleiner werden. + - **Stauchung:** nur das Kontaktbild flacher und breiter zeichnen. Medeiros' Regel dafür: „When changing the width of an object, always change the height too.“ ([Squash](https://saint11.art/blog/pixel-art-tutorials/#Squash)). + + Ob ein Zuschauer in einer Variante Gummi oder Bowlingkugel sieht, sagt dir keine Regel im Voraus. Animatoren lassen schwere Körper oft niedriger zurückspringen und kürzer nachfedern. Das ist eine Konvention, die du prüfst, kein Gesetz. + + ## Studie 2: der Mehlsack springt oder landet + + Der Mehlsack ist eine alte Übung. Das Walt Disney Family Museum beschreibt sie so: „A popular animation exercise for animators features a sack of flour drawn in a variety of positions to show different movements.“ ([Animating a Sack Drop](https://www.waltdisney.org/education/workshops/studio-series-animating-sack-drop-adult-session)). Ein Sack hat kein Gesicht, keine Arme und keine Beine. Was er zeigt, zeigt er mit Haltung, Stauchung und Timing. + + Als Basis nimmst du einen Sack von etwa 16 Pixeln Höhe, der einen kleinen Sprung macht oder aus geringer Höhe landet. Schwerpunkt und Bodenkontakt kommen aus [Schwerpunkt, Gleichgewicht und Bodenkontakt](/animation/schwerpunkt-balance), Ausholen und Nachfedern aus [Antizipation, Aktion, Erholung](/animation/antizipation-erholung). Varianten: + + - **Tiefe der Hocke:** den Key vor dem Absprung flacher oder tiefer zeichnen, sonst nichts. + - **Haltezeit der Hocke:** dieselbe Zeichnung, andere Dauer. Das ist die Stellschraube aus dem Slynyrd-Beispiel. + - **Haltezeit nach der Landung:** wie lange der Sack gestaucht liegen bleibt, bevor er sich aufrichtet. + + Die zweite und dritte Variante brauchen keine neue Zeichnung. Mach sie zuerst; sie kosten Minuten. + + ## Studie 3: Pendel mit Schwanz + + Ein Pendel schwingt auf einem Bogen, an den Umkehrpunkten langsam, unten am schnellsten. An seinem Ende hängt ein weicher Teil, ein Schwanz oder ein Band. Er folgt der Bewegung mit Verzögerung. Wikipedia nennt das Prinzip „drag“, „where a character starts to move and parts of them take a few frames to catch up“ ([Follow through and overlapping action](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action)). Mehr dazu in [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung). + + Plane die Basis als Winkelliste, bevor du zeichnest. Vereinfacht zeigt die Schwanzspitze bei einem Versatz von einem Bild den Winkel, den das Pendel ein Bild vorher hatte: + + ```text + Pendel 8 Bilder, Versatz 1 Bild + + Bild Pendel Spitze + 1 -30° -20° + 2 -20° -30° + 3 0° -20° + 4 20° 0° + 5 30° 20° + 6 20° 30° + 7 0° 20° + 8 -20° 0° + ``` + + Das Pendel erreicht sein rechtes Extrem in Bild 5, die Spitze erst in Bild 6. Die Varianten ändern nur den Versatz, 0, 1 oder 2 Bilder, und lassen das Pendel selbst unverändert. Bei Versatz 0 bewegt sich der Schwanz wie ein starrer Stab. Welcher Versatz zu einem weichen Band passt und welcher zu einem schweren Seil, prüfst du am Bildschirm und am Zuschauer. + + ## Beobachtungstest und Protokoll für Varianten + + ### Der Beobachtungstest mit zwei Fassungen + + Den Beobachtungstest kennst du aus [Körpersprache und Zustandswechsel](/animation/koerpersprache): ohne Vorrede zeigen, dreimal in Schleife, vom Offenen zum Gezielten fragen, wörtlich notieren, nichts erklären. Mit zwei Varianten kommen drei Regeln dazu. + + - **Neutrale Namen.** Nenn die Fassungen X und Y, nicht „schwer“ und „leicht“. Notier für dich, welche Datei X ist. + - **Wechselnde Reihenfolge.** Zeig dem nächsten Zuschauer Y zuerst. Sonst misst du vielleicht nur, was als Zweites kam. + - **Eine Vergleichsfrage.** Nach „Was passiert da?“ zu jeder Fassung fragst du „Was ist bei den beiden anders?“. Stellst du am Ende eine gezielte Frage wie „Welcher ist schwerer?“, notier, dass du sie gestellt hast. + + Eine Antwort ist kein Beleg. Zwei oder drei Zuschauer zeigen eher, ob eine Variante von verschiedenen Menschen gleich gelesen wird. Ist niemand da, siehst du dir die Fassungen nach mindestens einer Nacht Abstand selbst an und markierst das im Protokoll. Wie man Testpersonen beobachtet, ohne sie zu lenken, steht ausführlich in [Testlesen und Playtest](/narrative/testlesen-playtest). + + > [!INTERVIEW] + > „Ein Lead sagt: Die Landung wirkt zu leicht. Wie gehst du vor?“ Gute Antwort: Ich frage zuerst, woran er das sieht, und schreibe mir einen Absichtssatz für die Landung. Dann baue ich zwei, drei Varianten, die jeweils nur eine Größe ändern, etwa die Haltezeit nach dem Aufprall, die Stauchung oder die Höhe des Nachfederns, und zeige sie ihm und einem zweiten Menschen nebeneinander, ohne zu sagen, was ich geändert habe. Was beide übereinstimmend lesen, übernehme ich, und ich behalte die Basis, falls keine Variante besser ankommt. + + ### Das Protokoll je Variante + + Zu jeder Variante gehört ein Eintrag. Er trennt, was du geändert hast, von dem, was beobachtet wurde, und beides von deinem Schluss: + + ```text + Studie Ball + Absichtssatz „…“ + Basis ball-basis, 6 Bilder, 500 ms + Variante ball-halt + Geändert Bild 4 (Kontakt) 50 → 150 ms + Sonst gleich Zeichnungen, übrige Dauern + Eigener Blick … + Test wer, wann, X = ball-halt, Y = Basis + Antworten X: „…“ Y: „…“ + Gezielte Frage ja/nein, welche + Ergebnis … + ``` + + Die Zeile „Sonst gleich“ ist die wichtigste. Steht dort etwas anderes als „alles“, hast du zwei Größen geändert. Überarbeitest du später die Basis selbst, führst du das Überarbeitungsprotokoll aus [Werkstatt: eine eigene Figur](/animation/werkstatt-figur). + + > [!WARNING] Keine KI im Bild + > Ball, Sack, Pendel und jede Variante zeichnest und timest du selbst. Keine generierten Bilder als Vorlage, keine erzeugten Zwischenbilder. Eine KI darf dir ein Skript schreiben, das alle Varianten als GIF exportiert und nebeneinander auf eine HTML-Seite legt. Welche Variante wirkt, sagt dir kein Programm, sondern dein Zuschauer. + + ## Häufige Fehler + + - **Zwei Größen auf einmal.** Längere Haltezeit und stärkere Stauchung in einer Variante. Trenn sie in zwei Varianten. + - **Basis überschrieben.** Die Variante wurde unter dem Namen der Basis gespeichert. Speichere jede Variante zuerst unter neuem Namen und ändere erst dann. + - **Gesamtdauer stillschweigend gleich gehalten.** Wer eine Haltezeit verlängert und dafür andere Bilder kürzt, ändert zwei Dinge. Willst du die Verteilung bei gleicher Länge testen, nenn genau das als Größe. + - **Die Antwort vorgegeben.** „Welcher ist schwerer?“ als erste Frage legt das Thema fest. Zuerst offen fragen. + - **Fassungen mit sprechenden Namen gezeigt.** Heißt eine Datei `ball-schwer.gif`, liest der Zuschauer mit. + - **Eine Antwort als Beweis.** Ein Mensch ist ein Hinweis. Frag mehrere oder wiederhol den Test. + + ## Zusammenfassung + + - Jede Studie hat einen Absichtssatz, eine Basis und Varianten, jede als eigene Datei. + - Eine Variante ändert genau eine Größe. Die Zeile „Sonst gleich“ im Protokoll zeigt, ob das stimmt. + - Timing-Varianten brauchen keine neue Zeichnung und sind der reinste Vergleich. + - Ball: Haltezeit, Rückprallhöhe, Stauchung. Mehlsack: Tiefe und Dauer der Hocke, Haltezeit nach der Landung. Pendel: Versatz des Schwanzes. + - Im Beobachtungstest heißen die Fassungen X und Y, die Reihenfolge wechselt, und die Fragen gehen vom Offenen zum Gezielten. + - Eine Antwort ist ein Hinweis, kein Beleg. Ohne Zuschauer prüfst du nach einer Nacht selbst und markierst das. +exercises: + - id: studie-ablauf + type: order + title: Von der Absicht zum Protokoll + prompt: | + Bring die Schritte einer Studie in die Reihenfolge, in der du sie machst. + lang: prose + lines: | + Einen Absichtssatz für die Studie schreiben. + Die Basis zeichnen, timen und als eigene Datei speichern. + Die Basis kopieren und in der Kopie genau eine Größe ändern. + Basis und Variante nebeneinander abspielen und notieren, was du siehst. + Beide Fassungen als X und Y zeigen und die Antworten wörtlich notieren. + Im Protokoll Änderung, Beobachtung und Ergebnis festhalten. + explanation: | + Der Absichtssatz kommt zuerst, damit du die Antworten später an etwas messen kannst. Die Basis muss gespeichert sein, bevor du sie kopierst, sonst überschreibst du sie. Den eigenen Blick notierst du vor dem Test, damit die Antworten anderer ihn nicht färben. Das Protokoll fasst am Ende zusammen, was die Variante geändert und was der Test gezeigt hat. + resources: + - title: Saint11 · A Basic Aseprite Animation + url: https://saint11.art/pixel_art_articles/article3/ + + - id: saubere-variante + type: choice + title: Ein sauberer Vergleich + prompt: | + Du willst prüfen, ob eine längere Haltezeit im Kontaktbild beeinflusst, wie schwer ein Zuschauer den Ball findet. Welche Variante ist ein sauberer Vergleich mit der Basis? + options: + - text: Eine Kopie der Basis, in der nur das Kontaktbild 150 statt 50 ms steht. + correct: true + why: Nur die Haltezeit unterscheidet sich. Jeder Unterschied in den Antworten lässt sich ihr zuschreiben. + - text: Eine Kopie, in der das Kontaktbild länger steht und der Ball dort stärker gestaucht ist. + correct: false + why: Hier ändern sich Haltezeit und Form. Liest der Zuschauer den Ball schwerer, weißt du nicht, welche Änderung es war. + - text: Eine Kopie, in der das Kontaktbild länger steht und dafür zwei Zwischenbilder kürzer, damit die Gesamtdauer gleich bleibt. + correct: false + why: Damit ändern sich die Haltezeit und das Tempo der Zwischenbilder. Das kann eine eigene Variante sein, dann ist ihre Größe die Verteilung bei gleicher Länge. + - text: Ein neu gezeichneter Ball mit längerem Kontaktbild. + correct: false + why: Neue Zeichnungen unterscheiden sich in vielen Pixeln von der Basis. Für eine Timing-Variante bleibt jede Zeichnung, wie sie ist. + explanation: | + Eine saubere Variante unterscheidet sich in genau einer Größe. Für Haltezeiten heißt das: dieselbe Datei kopieren, eine Dauer ändern, nichts zeichnen. Alles andere ist auch erlaubt, aber dann als eigene Variante mit eigener Größe im Protokoll. + resources: + - title: Wikipedia · Twelve basic principles, Timing + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Timing + + - id: erste-frage + type: choice + title: Die erste Frage + prompt: | + Du zeigst einem Freund die Varianten X und Y deines Balls, je dreimal in Schleife. Was fragst du zuerst? + options: + - text: „Was passiert da?“ + correct: true + why: Die Frage gibt kein Thema vor. Was der Zuschauer von sich aus nennt, ist das, was er liest. + - text: „Welcher Ball ist schwerer?“ + correct: false + why: Die Frage legt das Thema Gewicht fest und unterstellt, dass einer schwerer ist. Stell sie, wenn überhaupt, zuletzt und notier, dass du sie gestellt hast. + - text: „Siehst du, dass Y länger am Boden liegt?“ + correct: false + why: Damit erklärst du die Änderung, bevor er sie selbst bemerkt. Danach siehst du nur noch, ob er dir zustimmt. + - text: „Welcher gefällt dir besser?“ + correct: false + why: Das fragt nach Geschmack, nicht nach dem, was er sieht. Für deinen Absichtssatz brauchst du eine Beschreibung, kein Urteil. + explanation: | + Der Beobachtungstest misst, was ein Mensch ohne Hilfe liest. Jede Frage, die ein Thema, eine Antwort oder ein Urteil vorgibt, ersetzt seine Wahrnehmung durch deine Absicht. Deshalb geht die Reihenfolge vom Offenen („Was passiert da?“) über den Vergleich („Was ist anders?“) zum Gezielten. + resources: + - title: Wikipedia · Twelve basic principles of animation + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation + + - id: tempo-variante + type: output + title: Alles anderthalbmal so lang + prompt: | + Die Variante „Gesamttempo“ multipliziert jede Dauer der Basis mit 1,5. Wie viele Millisekunden dauert ein Durchlauf der Variante? Antworte mit der Zahl. + lang: text + code: | + Basis + Bild 1 2 3 4 5 6 + ms 100 50 50 50 100 150 + expected: | + 750 + accept: + - 750 ms + explanation: | + Die Basis dauert 500 ms, mal 1,5 sind es 750 ms. Bild für Bild werden aus 50 ms 75 ms. Das sind 4,5 Ticks, und ein solches Bild steht im Spiel abwechselnd 4 und 5 Ticks ([Timing und Spacing](/animation/timing-spacing)). Für den Vergleich im Editor stört das nicht; fürs Spiel wählst du später Dauern, die aufgehen. + resources: + - title: Aseprite Docs · Frame Duration + url: https://www.aseprite.org/docs/frame-duration/ + + - id: schwanz-extrem + type: output + title: Wann die Spitze umkehrt + prompt: | + Ein Pendel mit acht Bildern erreicht sein rechtes Extrem in Bild 5. In der Variante zieht die Schwanzspitze mit einem Versatz von zwei Bildern nach. In welchem Bild erreicht die Spitze ihr rechtes Extrem? Antworte mit der Zahl. + lang: text + code: | + Bild 1 2 3 4 5 6 7 8 + Pendel -30 -20 0 20 30 20 0 -20 + Versatz 2 Bilder + expected: | + 7 + accept: + - Bild 7 + explanation: | + Bei zwei Bildern Versatz zeigt die Spitze in jedem Bild den Winkel, den das Pendel zwei Bilder vorher hatte. Das Extrem von Bild 5 erscheint an der Spitze in Bild 7. Das Pendel ist dann schon auf dem Rückweg bei 0°. In dieser Gegenbewegung sieht man, dass der Teil weich ist; ob zwei Bilder zu viel sind, zeigt der Vergleich mit Versatz 1. + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + + - id: protokoll-luecken + type: gap + title: Das Protokoll aus zwei Bildlisten + prompt: | + Vergleiche Basis und Variante und füll die Lücken im Protokoll mit Zahlen. + lang: text + code: | + Basis Bild 1 2 3 4 5 6 + ms 100 50 50 50 100 150 + Variante Bild 1 2 3 4 5 6 + ms 100 50 50 150 100 150 + + Geändert Bild ⟦4⟧, ⟦50⟧ → ⟦150⟧ ms + Gesamtdauer ⟦500⟧ → ⟦600⟧ ms + Neu gezeichnet ⟦0⟧ Bilder + gaps: + - label: Welches Bild + hint: Vergleiche die beiden Zeilen ms Spalte für Spalte. + - label: Dauer vorher + hint: Der Wert in der Basis. + - label: Dauer nachher + hint: Der Wert in der Variante. + - label: Gesamtdauer Basis + hint: Summe aller Dauern der Basis. + - label: Gesamtdauer Variante + hint: Basis plus die Differenz. + - label: Neue Zeichnungen + hint: Eine Timing-Variante. + accept: ["keine"] + explanation: | + Nur Bild 4 unterscheidet sich: 50 ms in der Basis, 150 ms in der Variante. Dadurch wird der Durchlauf 100 ms länger, 600 statt 500 ms. Gezeichnet wurde nichts, die Zeile „Sonst gleich“ würde „alles“ heißen. Genau so sieht eine saubere Timing-Variante im Protokoll aus. + resources: + - title: Aseprite Docs · Frame Duration + url: https://www.aseprite.org/docs/frame-duration/ + + - id: zwei-groessen + type: bug + title: Ein Schluss, der nicht hält + prompt: | + Du willst aus diesem Protokoll schließen, dass die längere Haltezeit den Ball schwer wirken lässt. Finde die Zeile, die diesen Schluss unmöglich macht. + lang: text + code: | + Studie Ball + Basis ball-basis + Variante ball-schwer + Geändert Bild 4 (Kontakt) 50 → 150 ms + Geändert Bild 4 gestaucht, 2 px flacher + Test X = ball-schwer: „Der ist schwerer.“ + Schluss Die Haltezeit macht den Ball schwer. + lines: [5] + explanation: | + Die Variante ändert neben der Haltezeit auch die Form des Kontaktbilds. Die Antwort „Der ist schwerer“ kann von der Haltezeit kommen, von der Stauchung oder von beidem. Um den Schluss zu ziehen, brauchst du zwei Varianten: eine nur mit Haltezeit, eine nur mit Stauchung. Dazu kommt ein zweites Problem, das kein Fehler einer Zeile ist: Der Dateiname `ball-schwer` verrät dem Zuschauer die Absicht, falls er ihn sieht. + resources: + - title: Saint11 · Squash + url: https://saint11.art/blog/pixel-art-tutorials/#Squash + + - id: starrer-schwanz + type: bug + title: Ein Moment wie ein Stab + prompt: | + Die Schwanzspitze soll genau ein Bild hinter dem Pendel herlaufen: In jedem Bild zeigt sie den Winkel, den das Pendel im Bild davor hatte. Beim Abspielen wirkt der Schwanz am rechten Umkehrpunkt einen Moment lang wie ein starrer Stab. Finde die Zeile und korrigiere sie. + lang: text + code: | + Bild Pendel Spitze + 1 -30° -20° + 2 -20° -30° + 3 0° -20° + 4 20° 0° + 5 30° 30° + 6 20° 30° + 7 0° 20° + 8 -20° 0° + lines: [6] + fix: + - line: 6 + answers: + - " 5 30° 20°" + - 5 30° 20° + explanation: | + In Bild 5 zeigt die Spitze denselben Winkel wie das Pendel. Für diesen einen Moment hängt der Schwanz gerade in Verlängerung, ohne Verzögerung, also wie ein Stab. Nach der Regel muss er den Winkel aus Bild 4 zeigen, 20°. Dann erreicht er sein Extrem erst in Bild 6, ein Bild nach dem Pendel. + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action + + - id: slynyrd-dauern + type: explain + title: Ein Bild, verschiedene Dauern + prompt: | + Raymond Schlitter (Slynyrd) beschreibt die Ausholpose seines Angriffs so. Erkläre in wenigen Sätzen, warum diese Art zu variieren für eine Studie gut ist, was sie misst und was du zusätzlich prüfen musst, bevor du eine Dauer für dein Spiel wählst. + lang: text + code: | + Anticipation- This phase expresses the wind up of + the strike […] This model uses 1 frame, at various + delay durations. The longer and more dramatic the + wind up, the more impactful a strike can feel, but + results in more input delay in the context of + gameplay. + points: + - Dieselbe Zeichnung mit verschiedenen Dauern ändert genau eine Größe, die Haltezeit. + - Weil keine Zeichnung neu ist, scheidet die Zeichnung als Ursache für einen Unterschied aus. + - Die Varianten kosten Minuten statt Stunden, weil nur Zahlen geändert werden. + - Wie wuchtig eine Dauer wirkt, prüft der Beobachtungstest; wie viel Verzögerung sie bringt, misst du im Spiel in Ticks. + explanation: | + Schlitter gibt der einen Ausholpose je nach Waffe eine andere Dauer. Weil bei ihm auch die Waffen verschieden gezeichnet sind, ist das noch kein sauberer Vergleich. In deiner Studie behältst du die Zeichnung und änderst nur die Dauer; dann ist jeder Unterschied in der Wirkung eine Folge der Dauer, nicht der Zeichnung. Er nennt beide Seiten: mehr mögliche Wucht, mehr Verzögerung. Für eine Studie heißt das: Die Wucht prüfst du mit Zuschauern, die Verzögerung rechnest du in Ticks aus oder misst sie in [der Testszene](/animation/testszene). Was davon in dein Spiel passt, entscheidest du. + resources: + - title: Slynyrd · Pixelblog 56 + url: https://www.slynyrd.com/blog/2025/5/23/pixelblog-56-top-down-character-attack-animation + + - id: studie-ball + type: practice + title: "Studie 1: Ball in drei Fassungen" + prompt: | + Zeichne einen Ball, der fällt, aufprallt und zurückspringt, als Basis. Schreib vorher den Absichtssatz. Bau dann zwei Varianten, die sich jeweils in genau einer Größe von der Basis unterscheiden; eine davon ändert nur Dauern. Exportiere alle drei als GIF mit ganzem Faktor und zeig Basis und je eine Variante als X und Y mindestens einem Menschen. Füll für jede Variante das Protokoll aus. + lang: prose + starter: | + Absichtssatz: + Basis (Datei, Bilder, Dauern): + + Variante A (Datei, geänderte Größe, vorher → nachher, sonst gleich): + Variante B (Datei, geänderte Größe, vorher → nachher, sonst gleich): + + Eigener Blick (vor dem Test): + Test (wer, wann, X = …, Y = …, Reihenfolge): + Antworten wörtlich: + Gezielte Frage gestellt? Welche? + Ergebnis: + checklist: + - Der Absichtssatz steht da und ist älter als die Basis. + - Basis und beide Varianten liegen als eigene Dateien vor; die Basis ist unverändert. + - Jede Variante nennt genau eine geänderte Größe und unter „sonst gleich“ alles andere. + - Eine Variante ändert nur Dauern, keine Zeichnung. + - Die Antworten stehen wörtlich da, oder die Selbstprüfung nach einer Nacht ist als solche markiert. + - Du hast notiert, ob du eine gezielte Frage gestellt hast. + explanation: | + Die Studie übt das Vorgehen, nicht den perfekten Ball. Mit einer Basis und zwei sauberen Varianten kannst du jede Beobachtung einer Größe zuordnen. Die reine Timing-Variante zeigt dir, wie viel du ohne neue Zeichnung verändern kannst. Weicht eine Antwort von deinem Absichtssatz ab, ist das die wertvollste Zeile im Protokoll. + resources: + - title: Saint11 · A Basic Aseprite Animation, Timing + url: https://saint11.art/pixel_art_articles/article3/#timing + + - id: studie-mehlsack + type: practice + title: "Studie 2: Mehlsack mit Hocke" + prompt: | + Zeichne einen Mehlsack von etwa 16 Pixeln Höhe, der einen kleinen Sprung macht oder aus geringer Höhe landet. Absichtssatz zuerst, dann die Basis. Bau zwei Varianten: eine ändert nur die Tiefe der Hocke (ein neu gezeichneter Key), eine nur eine Haltezeit (keine neue Zeichnung). Vergleiche alle drei nebeneinander, zeig sie als X, Y und Z und füll das Protokoll aus. + lang: prose + starter: | + Absichtssatz: + Basis (Datei, Bilder, Dauern, Höhe in px): + + Variante Hocke (Datei, was am Key geändert, sonst gleich): + Variante Haltezeit (Datei, welches Bild, vorher → nachher ms): + + Eigener Blick: + Test (wer, wann, Zuordnung X/Y/Z, Reihenfolge): + Antworten wörtlich: + Ergebnis: + checklist: + - Der Sack hat kein Gesicht und keine Gliedmaßen; alles, was er zeigt, kommt aus Form und Timing. + - Die Variante Hocke ändert genau einen Key; alle anderen Bilder sind gleich. + - Die Variante Haltezeit ändert genau eine Dauer und keine Zeichnung. + - Die Fassungen wurden mit neutralen Namen gezeigt, und die Reihenfolge ist notiert. + - Die Antworten stehen wörtlich da, oder die Selbstprüfung ist markiert. + explanation: | + Hocke und Haltezeit sind zwei verschiedene Wege, Ausholen zu zeigen: Form und Dauer. Getrennt variiert, siehst du, welcher von beiden bei deinem Zuschauer mehr bewegt. Der Sack zwingt dich, ohne Gesicht auszukommen; was er an Gewicht oder Mühe zeigt, steckt in Stauchung und Timing. + resources: + - title: Walt Disney Family Museum · Animating a Sack Drop + url: https://www.waltdisney.org/education/workshops/studio-series-animating-sack-drop-adult-session + + - id: studie-pendel + type: practice + title: "Studie 3: Pendel mit Versatz" + prompt: | + Plane ein Pendel mit einem weichen Teil am Ende als Winkelliste, dann zeichne es. Die Basis hat einen Versatz von einem Bild. Bau zwei Varianten mit Versatz 0 und 2, ohne das Pendel selbst zu verändern. Spiel alle drei nebeneinander ab, prüf die Bögen mit Onion Skinning und zeig die Fassungen mindestens einem Menschen. + lang: prose + starter: | + Absichtssatz (was ist das weiche Teil, wie soll es wirken): + Winkelliste Pendel: + Winkelliste Spitze, Versatz 1: + Variante Versatz 0 (Datei): + Variante Versatz 2 (Datei): + Onion Skinning (Bogen der Spitze, Auffälligkeiten): + Test (wer, wann, Zuordnung, Reihenfolge): + Antworten wörtlich: + Ergebnis: + checklist: + - Die Winkelliste stand vor der ersten Zeichnung fest. + - Das Pendel ist in allen drei Fassungen Bild für Bild gleich; nur der Versatz unterscheidet sich. + - In jeder Fassung mit Versatz erreicht die Spitze ihr Extrem nach dem Pendel, um genau so viele Bilder wie der Versatz. + - Du hast den Bogen der Spitze mit Onion Skinning geprüft und notiert, ob ein Bild aus dem Bogen fällt. + - Die Antworten stehen wörtlich da, oder die Selbstprüfung ist markiert. + explanation: | + Der Versatz ist die Größe, die Überlappung steuert. Mit einem festen Pendel als Träger misst du nur ihn. Die Winkelliste vorab verhindert, dass du beim Zeichnen den Versatz in einzelnen Bildern verlierst, wie im Fehlerbeispiel. Onion Skinning zeigt dir, ob die Spitze auf einem Bogen läuft oder an einer Stelle springt ([Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung)). + resources: + - title: Wikipedia · Follow through and overlapping action + url: https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation#Follow_through_and_overlapping_action diff --git a/content/animation/projects.yaml b/content/animation/projects.yaml new file mode 100644 index 0000000..9f914d1 --- /dev/null +++ b/content/animation/projects.yaml @@ -0,0 +1,284 @@ +projects: + - id: bewegungstagebuch + title: Bewegungstagebuch für unterwegs + level: 1 + hours: 6 + summary: Zwei Wochen lang beobachtest du Bewegungen im Alltag und in Clips, zählst Bilder, findest Schlüsselposen und hältst je Eintrag einen Thumbnail-Streifen auf Papier fest – zum Schluss fasst du zusammen, welche Muster du gefunden hast. + brief: | + **Ausgangslage:** Wer Bewegung aus dem Gedächtnis zeichnet, zeichnet, was er zu wissen glaubt. Dieses Projekt baut dir ein Archiv aus echten Beobachtungen, das du später bei jeder eigenen Animation aufschlägst. Es geht ganz unterwegs: Handy, ein kleines Heft, ein Bleistift. + + **Anforderungen:** + + - Zehn Einträge über mindestens zwei Wochen verteilt. Mindestens fünf stammen aus eigenen Aufnahmen (Menschen, Tiere, Gegenstände), die übrigen aus Clips veröffentlichter Spiele oder aus gemeinfreien Bildreihen wie den Tafeln von Muybridge. + - Jeder Eintrag nennt Quelle, Bildrate und Länge, die Bildnummern der Schlüsselposen, die Dauer zwischen ihnen und eine Beobachtung zu Timing, Spacing, Gewicht oder Überlappung. + - Zu jedem Eintrag gehört ein Streifen mit drei bis sechs Thumbnails auf Papier. Ins Tagebuch kommen ein Foto davon und deine Notizen. + - Eine Zusammenfassung auf einer Seite: drei Muster, die in mehreren Einträgen auftauchen, mit Verweis auf die Einträge. + + **Rahmen:** Grundlage sind [Bewegung beobachten und in Schlüsselposen zerlegen](/animation/beobachten-schluesselposen), [Timing und Spacing](/animation/timing-spacing) und [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung). Fremde Aufnahmen verlinkst du nur, du lädst sie nicht neu hoch. Personen filmst du nur mit ihrem Einverständnis. + skills: [beobachten, referenz, schluesselposen, timing, thumbnails] + steps: + - id: heft-anlegen + title: Heft und Vorlage anlegen + detail: | + Leg eine Vorlage für Einträge an: Datum, Quelle, Bildrate, Länge, Keys mit Bildnummern, Dauer zwischen den Keys, Beobachtung, Foto des Thumbnail-Streifens. Halte sie so knapp, dass du sie im Bus ausfüllen kannst. + - id: erste-aufnahme + title: Erste eigene Aufnahme + detail: | + Film eine einfache Bewegung, etwa jemanden, der aufsteht oder eine Tasche hebt, mit Zeitlupe, wenn dein Handy sie hat. Geh die Aufnahme Bild für Bild durch und notiere die Keys. + - id: thumbnails + title: Thumbnails zum ersten Eintrag + detail: | + Zeichne drei bis sechs kleine Strichfiguren, eine pro Key, mit Handlungslinie. Keine Details, höchstens eine Minute pro Figur. + - id: zehn-eintraege + title: Zehn Einträge sammeln + detail: | + Verteil die Einträge über zwei Wochen. Wechsle bewusst zwischen schwer und leicht, schnell und langsam, Mensch, Tier und Gegenstand. + - id: clips-vergleichen + title: Zwei Clips aus Spielen vergleichen + detail: | + Wähle zwei Clips veröffentlichter Spiele mit einer ähnlichen Bewegung, etwa zwei Sprünge. Notiere bei beiden die Bildzahl bis zur ersten deutlichen Pose und die Haltezeiten. + - id: muster-finden + title: Muster finden und zusammenfassen + detail: | + Lies alle Einträge und such drei Beobachtungen, die mehrmals vorkommen. Schreib sie auf einer Seite auf, jeweils mit den Einträgen, die sie belegen. + acceptance: + - id: zehn-mit-quelle + text: Zehn Einträge, jeder mit Quelle, Bildrate, Länge und Bildnummern der Schlüsselposen. + - id: eigene-aufnahmen + text: Mindestens fünf Einträge beruhen auf eigenen Aufnahmen. + - id: thumbnails-zu-jedem + text: Zu jedem Eintrag gibt es ein Foto eines eigenen Thumbnail-Streifens mit drei bis sechs Posen. + - id: drei-muster + text: Die Zusammenfassung nennt drei Muster, jedes mit Verweis auf mindestens zwei Einträge. + stretch: + - Ein Eintrag mit einer Aufnahme bei 120 oder 240 Bildern pro Sekunde, in der du eine Bewegung findest, die du bei normaler Bildrate nicht gesehen hast. + - Ein Eintrag, der dieselbe Bewegung zweimal zeigt, einmal leicht und einmal mit Last. + portfolio: | + Ein Bewegungstagebuch zeigt, dass du von Beobachtung ausgehst, nicht von Formeln. In ein Portfolio gehören zwei, drei Seiten daraus neben der Animation, die aus ihnen entstanden ist. Im Gespräch fragen Animatoren oft, wie du Referenz sammelst und wie du sie nutzt, ohne abzupausen; das Tagebuch ist die Antwort. + + - id: studienreihe + title: Studienreihe Ball, Mehlsack und Pendel + level: 2 + hours: 10 + summary: Drei neutrale Studien im Editor, jede in mindestens zwei Varianten mit genau einer geänderten Größe, mit Bildlisten, Beobachtungstests und einem Studienblatt, das Absicht, Variante und Wahrnehmung nebeneinanderstellt. + brief: | + **Ausgangslage:** Bevor eine eigene Figur sich bewegt, lohnt sich das Handwerk an Gegenständen ohne Gesicht. Ein Ball zeigt Timing, Spacing und Material, ein Mehlsack Gewicht und Haltung, ein Pendel mit angehängtem Teil Überlappung. Weil sie neutral sind, siehst du an ihnen, was die Bewegung allein leistet. + + **Anforderungen:** + + - Drei Studien: ein Ball, der fällt und mehrmals abprallt, ein Mehlsack, der springt oder landet, und ein Pendel mit einem angehängten Teil, das nachschwingt. + - Jede Studie in mindestens zwei Varianten. Zwischen zwei Varianten änderst du genau eine Größe, etwa Haltezeit, Spacing, Größe der Antizipation oder Material. + - Zu jeder Variante eine Bildliste mit Dauern in Millisekunden und Ticks und ein Absichtssatz. + - Für jede Studie ein Beobachtungstest mit mindestens einer anderen Person: Antworten wörtlich, ohne Vorrede gezeigt. + - Ein Studienblatt (Markdown oder PDF), das je Studie Absicht, Varianten, geänderte Größe und Beobachtungen nebeneinanderstellt. + + **Rahmen:** Am PC mit Pixelorama, LibreSprite, Krita oder Aseprite ([Einzelbilder im Editor](/animation/editor-zeitleiste)). Grundlage sind [Neutrale Studien in Varianten](/animation/werkstatt-studien), [Gewicht zeigen](/animation/gewicht-aufprall) und [Bögen, Nachziehen und Überlappung](/animation/boegen-ueberlappung). Jede Zeichnung ist deine; eine KI darf höchstens Export-Befehle oder ein Skript für das Studienblatt beisteuern. + skills: [timing, spacing, gewicht, ueberlappung, varianten, beobachtungstest, editor] + steps: + - id: absichten + title: Absichtssätze schreiben + detail: | + Schreib für jede der drei Studien einen Absichtssatz, bevor du zeichnest. Halte darin fest, was ein Zuschauer lesen soll, nicht wie du es zeichnest. + - id: ball + title: Ball in zwei Materialien + detail: | + Animiere den Ball mit derselben Fallhöhe als zwei Materialien. Ändere dabei nur eine Größe zwischen den Varianten und notiere, welche. + - id: sack + title: Mehlsack mit Antizipation + detail: | + Animiere den Sack mit einer kleinen und einer großen Antizipation vor dem Sprung oder einem kurzen und einem langen Ausschwingen nach der Landung. + - id: pendel + title: Pendel mit Nachschwingen + detail: | + Animiere ein Pendel mit einem angehängten Teil, das ein bis zwei Bilder versetzt folgt. Prüf mit Onion Skinning, ob alle Teile auf Bögen laufen. + - id: bildlisten + title: Bildlisten und Ticks + detail: | + Schreib zu jeder Variante die Bildliste mit Dauern in ms und Ticks. Prüf, ob die Dauern auf ganzen Ticks aufgehen ([Timing und Spacing](/animation/timing-spacing)). + - id: beobachten + title: Beobachtungstests + detail: | + Zeig jeder Person die Varianten ohne Vorrede in Schleife und frag nur „Was passiert da?“. Notiere die Antworten wörtlich, bevor du etwas erklärst. + - id: studienblatt + title: Studienblatt zusammenstellen + detail: | + Stell je Studie Absicht, Varianten, geänderte Größe und Beobachtungen nebeneinander. Notiere, wo die Beobachtung deiner Absicht widerspricht. + acceptance: + - id: drei-studien + text: Drei Studien liegen vor, jede in mindestens zwei Varianten, als Quelldatei und als Export. + - id: eine-groesse + text: Zwischen zwei Varianten derselben Studie unterscheidet sich genau eine benannte Größe. + - id: bildlisten-ticks + text: Jede Variante hat eine Bildliste mit Dauern in ms und Ticks. + - id: beobachtung-woertlich + text: Für jede Studie gibt es mindestens einen Beobachtungstest mit wörtlich notierten Antworten. + - id: eigene-bilder + text: Alle Bilder hast du selbst gezeichnet; keines stammt aus einem Bildgenerator oder ist abgepaust. + stretch: + - Eine dritte Variante je Studie, die eine zweite Größe untersucht. + - Den Ball zusätzlich in der Draufsicht mit Schatten am Boden. + portfolio: | + Eine Studienreihe mit Varianten zeigt, dass du Wirkung gezielt erzeugst und prüfst. Zeig im Portfolio die Varianten nebeneinander als GIF in Originalgröße und ganzzahlig vergrößert, dazu das Studienblatt. In Art-Tests werden Ball und Mehlsack oft gefragt, weil sie ohne Zeichenstil zeigen, ob jemand Timing beherrscht. + + - id: zyklen-und-wechsel + title: Zyklen und Zustandswechsel mit der Gliederpuppe + level: 2 + hours: 12 + summary: Eine neutrale Gliederpuppe bekommt einen Ruhezyklus, einen Gehzyklus und einen Halt; im Prüfstand in Godot prüfst du Schleifen, Übergänge und Lesbarkeit in Originalgröße und dokumentierst eine Überarbeitung. + brief: | + **Ausgangslage:** Im Spiel stehen Animationen nie allein. Ein Zyklus läuft hundertmal, und jeder Wechsel kann aus jedem Bild kommen. Dieses Projekt übt das mit einer Figur, über die du nicht nachdenken musst: einer Gliederpuppe aus Kopf, Rumpf und Gliedern, 16 bis 32 Pixel hoch. + + **Anforderungen:** + + - Ein Ruhezyklus mit zwei bis sechs Bildern, ein Gehzyklus mit vier bis acht Bildern und ein Halt, der vom Gehen in die Ruhe führt. + - Alle drei in SpriteFrames in Godot 4.7, abgespielt im Prüfstand aus [In der Testszene prüfen](/animation/testszene). + - Ein Prüfprotokoll mit Lesbarkeit bei Zoom 1 vor drei Grautönen, allen Übergängen aus jedem Bild und den Zeiten aus dem Log. + - Eine dokumentierte Überarbeitung (Fassung 1 → Fassung 2) an der Stelle, die im Prüfstand am stärksten springt oder stolpert. + + **Rahmen:** Grundlage sind [Gehen und Laufen in wenigen Bildern](/animation/gehen-laufen), [Form und Proportionen halten](/animation/form-konstanz) und [Körpersprache und Zustandswechsel](/animation/koerpersprache). Import und SpriteFrames stehen in [Eigene Sprites importieren](/godot/sprites-importieren) und [Animationen zuordnen](/godot/animationen). Das Skript des Prüfstands ist technisches Gerüst und darf von einer KI stammen; die Bilder zeichnest du. + skills: [zyklen, uebergaenge, konstanz, godot, spriteframes, pruefprotokoll] + steps: + - id: puppe-modellblatt + title: Gliederpuppe und Modellblatt + detail: | + Leg die Puppe mit Hilfslinien für Kopf, Schultern, Hüfte und Füße an. Diese Höhen gelten in jedem Bild. + - id: ruhe + title: Ruhezyklus + detail: | + Zwei bis sechs Bilder mit kleiner Bewegung. Prüf in der Schleife, ob man den Übergang vom letzten zum ersten Bild sieht. + - id: gehen + title: Gehzyklus + detail: | + Vier bis acht Bilder mit Kontakt, Tiefpunkt, Passing und Hochpunkt, so viele du davon brauchst. Prüf Bögen und Konstanz mit Onion Skinning. + - id: halt + title: Halt vom Gehen in die Ruhe + detail: | + Zeichne einen Halt, der in die erste Ruhepose führt. Entscheide, aus welchem Bild des Zyklus er beginnt, und notiere es. + - id: in-godot + title: In Godot einrichten + detail: | + Exportiere, importiere und leg SpriteFrames mit den Dauern aus deinen Bildlisten an. Prüf die Umrechnung in FPS und Frame-Dauer. + - id: pruefen + title: Im Prüfstand prüfen + detail: | + Lesbarkeit bei Zoom 1, alle Übergänge aus jedem Bild, Zeiten aus dem Log. Füll das Prüfprotokoll aus. + - id: ueberarbeiten + title: Eine Überarbeitung + detail: | + Wähl den stärksten Befund, ändere genau eine Sache und speichere sie als Fassung 2. Prüf neu und halt das Ergebnis im Überarbeitungsprotokoll fest. + acceptance: + - id: drei-animationen + text: Ruhezyklus, Gehzyklus und Halt laufen im Prüfstand mit Godot 4.7 ohne Hinweis oder Fehler in der Ausgabe. + - id: modellblatt + text: Ein Modellblatt mit Hilfslinien liegt vor, und alle Bilder halten die Höhen ein oder weichen begründet ab. + - id: protokoll-uebergaenge + text: Das Prüfprotokoll nennt für jeden Übergang mindestens ein Ausgangsbild mit Befund und die Zeiten aus dem Log. + - id: fassung-zwei + text: Fassung 1 und Fassung 2 liegen getrennt vor; das Überarbeitungsprotokoll nennt Befund, Änderung, Grund und Ergebnis. + - id: eigene-zeichnungen + text: Alle Bilder hast du selbst gezeichnet; nur Skripte und Export-Befehle dürfen von einer KI stammen. + stretch: + - Ein Gehzyklus in zwei weiteren Blickrichtungen, mit Notiz, wo Spiegeln reicht. + - Ein Anlauf vom Stand ins Gehen. + portfolio: | + Zyklen und Übergänge sind der Alltag eines Spielanimators. Zeig im Portfolio ein Video aus dem Prüfstand mit sichtbarer Anzeige, dazu die Tabelle der Übergänge und das Vorher-Nachher der Überarbeitung. Im Gespräch zeigt das, dass du weißt, wo Schleifen im Spiel brechen. + + - id: abschluss-animationstest + title: "Abschlussprojekt: Animationstest für ein kleines Studio" + capstone: true + level: 3 + hours: 35 + summary: Ein kleines Studio schickt dir einen Animationstest. Du animierst eine eigene Figur mit einem kleinen Satz aus Ruhe, Fortbewegung, einer Aktion und einem Zustandswechsel, überarbeitest eine Animation zweimal dokumentiert, prüfst alles im Prüfstand in Godot und lieferst Quelldateien, Sprite-Sheet, Bildlisten und Protokolle. Jede Zeichnung und jede gestalterische Entscheidung ist deine. + brief: | + ## Auftrag + + Mira Hoffmann leitet ein Indie-Studio mit vier Leuten in Köln. Das Team baut ein Actionspiel in der Draufsicht mit Pixelart und Godot 4.7. Für die Stelle „Pixel Animator (m/w/d)“ schickt sie dir einen Animationstest. Ihre Lage: + + - Die bisherigen Animationen sehen als GIF gut aus, wirken im Spiel aber steif, und niemand kann sagen, ob es an den Zeichnungen, am Timing oder an der Einbindung liegt. + - Die Programmierer brauchen Sprite-Sheets und Dauern, die sie ohne Rückfrage einbinden können. + - Mira will sehen, wie du arbeitest, nicht nur ein Ergebnis: wie du planst, prüfst und überarbeitest. + + Welche Figur du animierst und welche Bewegungen sie bekommt, gibt dir niemand vor. Wenn du willst, ist sie eine Figur aus Project Delicate Flower; der Kurs schlägt dafür nichts vor. + + ## Was du lieferst + + 1. **Vier Animationen einer eigenen Figur** in einer Blickrichtung (weitere Richtungen sind Zusatz): ein Ruhezyklus, eine Fortbewegung als Zyklus, eine Aktion mit Antizipation und Erholung und ein Zustandswechsel deiner Wahl. + 2. **Quelldateien** deines Editors (`.aseprite`, `.pxo`, `.kra` oder `.ase`), jede Fassung als eigene Datei oder eigener Commit. + 3. **Export:** ein Sprite-Sheet in Originalgröße mit einer Zeile pro Animation und gleich großen Feldern, dazu GIFs bei Zoom 1 und bei ganzzahliger Vergrößerung. + 4. **`BILDLISTEN.md`:** je Animation die Bildliste mit Pose, Dauer in ms und Ticks, Loop ja oder nein, und die Umrechnung in FPS und Frame-Dauer für Godot. + 5. **`UEBERARBEITUNG.md`:** für eine der vier Animationen zwei dokumentierte Überarbeitungen (Fassung 1 → 2 → 3) mit Absichtssatz, Beobachtung, Änderung, Grund und Ergebnis. + 6. **`PRUEFUNG.md`:** das Prüfprotokoll aus dem Prüfstand mit Lesbarkeit, Übergängen, Zeiten aus dem Log und Ton-Bildern, dazu die Beobachtungstests. Korrekturen nach dem Prüfstand stehen hier unter Entscheidung und Ergebnis, nicht in `UEBERARBEITUNG.md`. + 7. **Ein Video** von höchstens 90 Sekunden aus dem Prüfstand mit sichtbarer Anzeige. + + ## Technischer Rahmen + + Godot 4.7 mit dem Prüfstand aus [In der Testszene prüfen](/animation/testszene), 60 Physik-Ticks pro Sekunde, scharfe Pixel und ganzzahlige Skalierung. Editor nach deiner Wahl: Pixelorama, LibreSprite, Krita oder Aseprite. Skripte, Export-Befehle und das technische Gerüst darf eine KI schreiben. Jede Zeichnung, Pose, Animation und jedes Asset ist deine Arbeit; generierte Bilder oder Animationen sind weder Vorlage noch Ersatz. + + Grundlage sind alle Module dieses Bereichs, besonders [Timing und Spacing](/animation/timing-spacing), [Antizipation, Aktion, Erholung](/animation/antizipation-erholung), [Gehen und Laufen](/animation/gehen-laufen), [Körpersprache und Zustandswechsel](/animation/koerpersprache), [Form und Proportionen halten](/animation/form-konstanz), [Animation im Spiel](/animation/animation-im-spiel), [Eine eigene Figur, zwei Überarbeitungen](/animation/werkstatt-figur) und [In der Testszene prüfen](/animation/testszene). + skills: [animation, timing, gewicht, zyklen, uebergaenge, godot, spriteframes, ueberarbeitung, beobachtungstest, dokumentation] + steps: + - id: figur-und-absicht + title: Figur wählen und Absichtssätze schreiben + detail: | + Wähle eine eigene Figur, die du schon gezeichnet hast, und leg ein Modellblatt mit Hilfslinien an. Schreib für jede der vier Animationen einen Absichtssatz, bevor du eine Pose zeichnest. + - id: referenz + title: Referenz sammeln + detail: | + Film oder such Referenz zu jeder Bewegung und notiere Keys und Dauern wie im [Bewegungstagebuch](/animation/projekte/bewegungstagebuch). Referenz ist Beobachtung, keine Vorlage zum Abpausen. + - id: thumbnails-keys + title: Thumbnails und Keys + detail: | + Plane jede Animation in Thumbnails auf Papier, dann zeichne nur die Keys im Editor und gib ihnen Dauern. Das ist der Posentest, gespeichert als `-v1-keys` wie in [Eine eigene Figur, zwei Überarbeitungen](/animation/werkstatt-figur). + - id: frueh-pruefen + title: Keys früh im Prüfstand + detail: | + Bring den Posentest in den Prüfstand. Prüf Lesbarkeit bei Zoom 1 und die Zeit bis zur Erkennungspose der Aktion, bevor du Zwischenbilder zeichnest. + - id: ausarbeiten + title: Breakdowns und Zwischenbilder + detail: | + Arbeite die Animationen mit Breakdowns und Zwischenbildern aus und speichere sie als Fassung 1. Prüf Bögen, Spacing und Konstanz mit Onion Skinning. + - id: beobachtung-eins + title: Erster Beobachtungstest + detail: | + Zeig die Animationen mindestens einer Person ohne Vorrede, im Prüfstand mit fremder Hand an der Tastatur. Notiere die Antworten wörtlich. + - id: ueberarbeitung-eins + title: Erste Überarbeitung + detail: | + Wähl eine Animation und den stärksten Befund. Ändere eine Sache, speichere Fassung 2 und protokolliere Grund und Ergebnis. + - id: ueberarbeitung-zwei + title: Zweite Überarbeitung + detail: | + Zweiter Beobachtungstest mit einer anderen Person, dann Fassung 3 derselben Animation, wieder mit Protokoll. + - id: uebergaenge + title: Alle Übergänge prüfen + detail: | + Löse jeden Wechsel aus jedem Bild aus, prüf Sprünge in Export, Ursprung und Zeichnung und halte die Befunde im Prüfprotokoll fest. + - id: einbindung + title: Für die Programmierer aufbereiten + detail: | + Sprite-Sheet, Bildlisten mit FPS und Frame-Dauer, markierte Ton-Bilder. Prüf, ob jemand anderes die Animationen allein mit diesen Dateien einbinden könnte. + - id: abgabe + title: Abgabe zusammenstellen + detail: | + Video, Dateien und ein README mit Editor, Godot-Version und Startanleitung des Prüfstands. Lies alles einmal als Mira Hoffmann. + acceptance: + - id: vier-animationen + text: Ruhe, Fortbewegung, eine Aktion und ein Zustandswechsel laufen im Prüfstand mit Godot 4.7 ohne Hinweis oder Fehler in der Ausgabe. + - id: sheet-originalgroesse + text: Das Sprite-Sheet ist in Originalgröße, alle Felder sind gleich groß, und die Figur springt beim Wechsel zwischen den Animationen nicht durch Export oder Ursprung. + - id: bildlisten-vollstaendig + text: "`BILDLISTEN.md` nennt für jede Animation Posen, Dauern in ms und Ticks, Loop und die Werte für SpriteFrames; die Werte im Projekt stimmen damit überein." + - id: zwei-ueberarbeitungen + text: "Für eine Animation liegen Fassung 1, 2 und 3 getrennt vor, und `UEBERARBEITUNG.md` nennt je Schritt Absichtssatz, Beobachtung, Änderung, Grund und Ergebnis." + - id: beobachtungstests + text: Mindestens zwei Beobachtungstests mit verschiedenen Personen sind wörtlich protokolliert und mit den Absichtssätzen verglichen. + - id: pruefprotokoll + text: "`PRUEFUNG.md` enthält Lesbarkeit bei Zoom 1 vor drei Grautönen, jeden Übergang mit Ausgangsbild und Befund und die Zeiten aus dem Log, gemessen mit Zeit 1,0." + - id: eigene-arbeit + text: Alle Zeichnungen, Posen und Animationen sind eigene Arbeit; Skripte und Export-Befehle, die von einer KI stammen, sind im README benannt. + stretch: + - Die Fortbewegung in vier oder acht Richtungen, mit Notiz, wo Spiegeln reicht und wo nicht. + - Eine zweite Aktion mit deutlich anderem Gewicht und ein Vergleich im Beobachtungstest. + - Ein Ton-Platzhalter auf den markierten Bildern, eingebunden nach [Audio zuordnen](/godot/audio). + portfolio: | + Das Projekt ist eine Fallstudie über Animation im Spiel: Absicht, Planung, Prüfung im Spieltakt, zwei Überarbeitungen mit Belegen. Zeig im Portfolio das Video aus dem Prüfstand, das Sprite-Sheet und Fassung 1 und 3 der überarbeiteten Animation nebeneinander, dazu die Beobachtungen, die zur Änderung geführt haben. Im Gespräch fragen Animatoren und Leads, welche Rückmeldung dich überrascht hat, wie du Lesbarkeit gegen Ausführlichkeit abwägst und wie du einem Programmierer eine Haltezeit erklärst.