2D-Animationen in The Whispered World
comment
Feature

2D-Animationen in The Whispered World


Gunnar Bergmann, Franziska Reinhard und Fabian Pahl von Daedalic Entertainment erklären die Entstehung und Umsetzung von zweidimensionalen Grafik-Animationen ihres Fantasy-Adventures The Whispered World.

Making Games

@ Facebook

Making Games

@ Twitter

Ein Spiel, das komplett auf handgezeichnete 2D-Grafiken baut, stellt die Entwickler vor spezielle Herausforderungen. Das Fantasy-Adventure The Whispered World setzt auf Figur-Animationen in Trickfilm-Qualität und 2D-Hintergründe mit komplexem Parallax-Scrolling. Die enormen Texturmengen, die dabei im Grafikspeicher verwaltet werden müssen, stellen auch die Programmierung vor besondere Probleme. Einige der interessantesten Schritte, um Protagonist Sadwick flüssig durch die detaillierten Fantasy-Hintergründe zu bewegen, erläutert dieser Artikel.

Character Animation
Das erste Stadium beim »Erwecken« eines 2D-Charakters, in unserem Fall Sadwick, dem melancholischen Helden von The Whispered World, sind die Konzeptentwürfe der Figur. In groben Skizzen, den so genannten »Roughs«, werden zunächst der Look und die Eigenschaften sowie das Farbdesign der Figur festgelegt. Sadwick durchlief dabei zahlreiche Mutationen, vom kindlich-rundlichen Clown bis zum jugendlichen Gaukler in erdigen Farbtönen (Abbildung 1).

Abbildung 1: Der Held des Spiels durchlief mehrere Roh-Phasen (»Roughs«) bis zu seiner finalen Gestalt.


Steht das Character-Design, wird ein »Turnaround« des Charakters erstellt. Das bedeutet, der Charakter wird von allen fünf Ansichts-Positionen (vorne, diagonal vorne, seitlich, diagonal hinten und hinten) gezeichnet (Abbildung 2). Das gewährleistet eine gleich bleibende Proportionalität und einen einheitlichen Look. Der Turnaround dient den Animatoren als Basis für ihre spätere Arbeit. Sind alle Parameter des Charakters festgelegt, beginnen die Animatoren mit der Arbeit an den Bewegungen.
Dazu gehört allen voran ein so genannter »Walkcycle«, eine Schleife von Einzelbildern, die den Gang der Figur simuliert, ohne dass diese sich von der Stelle rührt (Abbildung 3). Wird nun der Bildhintergrund hinter der Figur horizontal verschoben, entsteht der Bewegungseindruck. Natürlich gibt es auch Animationen, in der die Figur sich vor einem feststehenden Hintergrund fortbewegt. In diesem Fall wird der Charakter tatsächlich innerhalb der dafür vorgesehenen Parameter von A nach B geschickt.

Abbildung 2: Im Turnaround wird der Charakter von allen fünf Ansichts-Positionen gezeichnet.


Bei The Whispered World entsteht jedes Einzelbild zunächst traditionell an einem Leuchttisch - in zeichnerischer Handarbeit, ohne vom Computer errechnete und eingefügte Zwischenschritte. Während beim Trickfilm normalerweise 24 Bilder pro Sekunde ablaufen, sind es in einem Spiel für gewöhnlich zwölf Bilder pro Sekunde. Das kann je nach Komplexität der Animation variieren, aber allgemein gilt bei Spiele-Animationen: so viele Bilder wie nötig, so wenig wie möglich. Immerhin bedeutet jedes zusätzliche Bild entsprechend mehr Speicheraufwand.

Abbildung 3: Der Walkcycle zeigt in einer Bilderschleife an, wie sich die Figur bewegen soll.


Zu den Laufanimationen kommen bei The Whispered World zahlreiche weitere Standardanimationen wie Greifen, Nehmen oder Pausieren sowie Sondermanöver, die nur in bestimmten Kulissen vorkommen -- Klettern, Springen und so weiter (Abbildung 4).

Abbildung 4: Neben Standardanimationen wie Aufheben oder Gehen beherrschen die Spielfiguren zahlreiche Sondermanöver.

Rough-Phase
An erster Stelle steht die Überlegung, wie sich die Figur in der zu animierenden Situation verhalten beziehungsweise bewegen soll. Der Animator übernimmt hier die Aufgabe eines Schauspielers, nur das er nicht mit seinem Körper und seiner Mimik agiert, sonder diese auf dem Papier und in die Figur übertragen muss. Dazu werden zunächst erste, schnelle Rough-Skizzen angefertigt. Diese Roughs sind design-unabhängig und legen allein den Bewegungsablauf fest. Mit diesen ersten Skizzen kann der Animator die gesamte Animation planen und alle nötigen Parameter bestimmen: Dazu werden die Rough-Skizzen eingescannt und in Photoshop als Dokument mit einer Ebene pro Zeichnung angelegt.
Nun lässt sich eine erste Testanimation erstellen. In aktuellen Versionen bietet Photoshop dafür eine Animationsleiste, bei Versionen unter CS2 bietet ImageReady nahezu identische Möglichkeiten. Sind die einzelnen Frames der Animation in der Leiste platziert, wird das Timing, also die Anzeigedauer jedes Frames, bestimmt. Anhand dieser ersten Testanimation kann nun korrigiert und verbessert werden, können Frames entfernt oder neue hinzugefügt werden, bis das gewünschte Ergebnis erzielt ist. Nachdem die finale Rough-Animation und somit die letztendliche Frame-Anzahl feststeht, wird noch das finale Timing festgelegt. Nachdem somit die Grundlage steht, kann die Ausarbeitung beginnen.

Abbildung 5: Gunnar Bergmann überarbeitet Sadwick am Grafiktablett.

Clean-Up-Phase
Bei kleineren Animationen bietet sich das Reinzeichnen direkt per Grafiktablett am Rechner an (Abbildung 5). Die meisten Grafiker bevorzugen jedoch die klassische Variante: Die ausgedruckten Roughs werden auf den Leuchttisch gelegt und dann auf Animationspapier mit Stift oder Feder sauber nachgezeichnet (Abbildung 6). Danach werden die Seiten eingescannt und als neues Ebenendokument in Photoshop angelegt. In beiden Fällen hat der Animator nun ein Dokument mit einer Ebene pro Clean-Up. Nachdem er letzte mögliche Unsauberkeiten oder Verzeichner korrigiert hat, erstellt er, genau wie bei den Rough-Tests, eine neue Testanimation. Bei der finalen Linie können immer noch kleinere Unstimmigkeiten sichtbar werden, die bei den Roughs aufgrund der Grobheit der Zeichnungen nicht aufgefallen sind. Sind diese, falls vorhanden, korrigiert worden, ist das Clean-Up abgeschlossen.

Abbildung 6: Die Animatorin Simone Kesterton zeichnet Roughs ins Reine.

Kolorierungs-Phase
Die Kolorierungs-Phase lässt sich grob in drei Schritte aufteilen: Farbe, Schatten und (falls vorgesehen) Effekte (Abbildung 7). Der Animator beginnt mit der Grundkolorierung der Figur. Um die Übersicht in der Ebenenpalette zu behalten, bietet es sich an, für jedes Einzelbild ein Ebenen-Set anzulegen, in das alle benötigten Ebenen samt der Clean-Up-Ebene gelegt werden. Dann wird zunächst die Clean-Up-Zeichnung freigestellt (ab jetzt »Outline« genannt), so dass der Rest der Ebene transparent angezeigt wird. Darunter wird eine Farbebene gelegt und die Grundfläche zunächst mit der Basisfarbe (also der Farbe, die laut Design vorherrscht) gefüllt. Dann werden die einzelnen Flächen der Figur mit den entsprechenden Farben versehen. Beachten Sie dabei, dass die Flächen in der Outline-Ebene immer klar getrennt sind, da sonst eine schnelle und saubere Auswahl per Zauberstab-Werkzeug nicht möglich ist. Abschließend werden mögliche »Blitzer«, kleine freie Stellen, die von der Auswahl nicht erfasst wurden, manuell mit dem Pinsel-Werkzeug korrigiert.


Abbildung 7: In der Kolorierungs-Phase werden Farben und Effekte zu den Umrissen hinzugefügt.Die Schatten werden auf einer gesonderten Ebene aufgetragen. Auch hier gibt es mehrere Möglichkeiten, wir bleiben aber bei der einfachen und effizientesten: Wir wählen dabie die zu schattierende Fläche in der Outline-Ebene aus und bearbeiten sie in der Schatten-Ebene. Den Schatten lässt sich mit der gewünschten Schattenfarbe (in unserem Fall ein einfaches Schwarz, im Ebenenmenü auf 50% Transparenz gesetzt) bequem mit dem Pinselwerkzeug auftragen. Die Auswahl verhindert hierbei das Übermalen in andere Flächen. Den Standschatten unter der Figur legen wir einfach frei mit dem Pinsel an, ebenfalls in 50% Schwarz. Zum Schluss legen wir gegebenenfalls noch eine Effekt-Ebene an, auf die zum Beispiel Glanzpunkte für Augen oder reflektierende Flächen aufgetragen werden.
Zum Abschluss kontrollieren wir, ob alle Flächen sauber ausgefüllt sind oder ob die äußeren Ränder überschritten wurden. Durch eine Extra-Hintergrundebene in 100% Schwarz wird auch die kleinste Fehlstelle sichtbar. Wenn alles in Ordnung ist, fügen wir die Ebenen innerhalb des Ebenen-Sets zusammen. Diese Arbeitsschritte wiederholen wir für jedes Einzelbild beziehungsweise Ebenen-Set, so dass man am Ende wieder nur eine Ebene pro Bild hat. Jetzt muss noch der Arbeitsraum des Dokuments auf den kleinstmöglichen Nenner reduziert werden, um unnötigen Speicherplatz zu verhindern. Da jetzt alle Bilder mit transparentem Hintergrund übereinander liegen, ziehen wir einfach eine Auswahl um den sichtbaren Bereich und stellen diese frei.
Die Bilder werden nun noch einzeln als PNG-Dateien abgespeichert, da dieses Format die Transparenz bei der späteren Verarbeitung gewährleistet. Als Anhang erstellt der Animator noch ein kleines Textdokument mit der Timingliste, der Darstellungszeit jedes einzelnen Frames in Sekunden. Mit dieser Information übergibt der Animator seine Arbeit an den Scripter, der die Animation in das Spiel einbaut.


Backgrounds
Die Hintergrundkulissen von The Whispered World werden ebenfalls komplett per Hand gezeichnet und mit zahlreichen Detail-Animationen versehen, die die Spielwelt zum Leben erwecken sollen. Alle Bildelemente, die sich während des Spielverlaufs manipulieren oder ins Inventar aufnehmen lassen, müssen dazu auf separate Ebenen gezeichnet werden. Das gleiche gilt für Objekte, die animiert werden oder hinter denen die Spielfigur entlang gehen kann. Diese einzeln abgespeicherten Elemente werden in die Engine importiert und dort pixelgenau zu einer Kulisse zusammengesetzt. Jede Kulisse besteht mindestens aus einer Hauptebene, auf der sich der begehbare Bereich befindet, in dem sich Sadwick bewegen kann. Auf zusätzlichen Ebenen können Grafiken angeordnet werden, die vor oder hinter diesem Bereich liegen.

Scrolling
Überschreitet eine Kulisse die normale Bildschirmbreite, scrollt sie in The Whispered World nicht einfach weiter. Stattdessen benutzen wir eine Technik, die aus dem klassischen Animationsfilm stammt -- das Parallax-Scrolling. Dabei entsteht durch das Verschieben mehrerer zweidimensionaler Hintergrundebenen in unterschiedlichen Geschwindigkeiten ein Eindruck von räumlicher Tiefe. Eine Kulisse von The Whispered World setzt sich aus bis zu 20 unabhängigen Ebenen zusammen (Abbildung 8). Jede dieser Parallax-Ebenen besteht aus Einzelelementen, die großflächiger gezeichnet sind, als es zunächst den Anschein hat. Die Bildelemente überlagern sich gegenseitig, sodass nicht alles auf einen Blick zu sehen ist. Erst durch das Verschieben der Parallax-Ebenen werden verdeckte Elemente freigelegt.
Bei der Produktion einer Kulisse legen wir zunächst die Hauptebene an. Anschließend werden die Parallax-Ebenen erstellt, die in Z-Richtung vor und hinter ihr liegen. Für jede dieser Ebenen wird im Verhältnis zur Hauptebene eine individuelle Scroll-Geschwindigkeit bestimmt. Mit zunehmender Entfernung zur »Kamera« nimmt die Geschwindigkeit ab. Vordere Ebenen bewegen sich schneller als hintere und geben den Blick auf Bildelemente frei, die vorher nicht zu sehen waren. Beim Betrachter entsteht der Eindruck, als habe sich der Blickwinkel etwas verschoben. So kommt ein Gefühl für Tiefe auf, obwohl die Grafiken nur zweidimensional sind. Eine Kulisse wirkt durch diese fortlaufende Veränderung beim Scrollen weniger statisch. Bei The Whispered World setzen wir Parallax-Scrolling sowohl horizontal als auch vertikal und in jede andere beliebige Richtung ein.

Abbildung 8: Die Hintergründe in The Whispered World bestehen aus bis zu 20 Parallax-Ebenen, die die Illusion räumlicher Tiefe erzeugen.

Programmiertechnische Anforderungen
Auf den ersten Blick muten 2D-Spiele in ihrer Programmierung trivialer an als ihre dreidimensionalen Genossen -- immerhin könnte man meinen, sie seien durch den Wegfall einer Dimension weniger komplex. Doch genau dieser Dimensionsbeschnitt wirft neue Probleme und Fragen auf: Wann liegen Gegenstände oder Spielfiguren vor- oder hintereinander? Wann müssen sie sich ausweichen und wo dürfen die Charaktere stehen? Die fehlenden Tiefeninformationen müssen also auf anderem Weg simuliert werden. Die Engine von The Whispered World bietet deshalb die Möglichkeit, Hintergründe und Figuren aus mehreren Ebenen zusammenzusetzen und mit entsprechenden Informationen zu versehen.
Ein weiteres großes Problemfeld bei 2D-Adventures ist die Verarbeitung des von den Künstlern mühsam erschaffenen Bildmaterials. Da die Grafiken im Spiel genauso aussehen müssen, wie die Zeichner sie entworfen haben, kommen einige Anforderungen und Beschränkungen auf die Entwickler zu. Zum einen die pixelgenaue Darstellung der Bilder: Beim Parallax-Scrolling kommt es darauf an, dass die Bildebenen exakt übereinander liegen, um falsches Überlappen von Bildbereichen zu verhindern. Zum anderen können Texturen auch nicht hoch-skaliert werden, falls der Benutzer in einer höheren Auflösung spielen möchte -- das würde entsprechend höher aufgelöstes Bildmaterial voraussetzen.

Texturverwaltung
Perspektivische Änderungen können in 3D-Spielen dynamisch zur Laufzeit mit Hilfe von Matrizen und Vektoren berechnet werden. Bei 2D-Spielen sieht das anders aus. Hier hat eine Änderung der Perspektive einen Wechsel der Textur zur Folge. Besonders interessant wird das bei Animationen, denn allein Sadwick hat bei acht Bewegungsrichtungen mit je zwölf Frames eine Summe von 96 Einzelbildern. Da heutige Grafikkarten weniger auf das schnelle Wechseln von Texturen optimiert sind, können solch scheinbar einfache Vorgänge sehr performance-lastig werden. Diese Pixelflut muss daher effizient verwaltet werden. Um das ständige, langsame Laden von Texturen in den Grafikkartenspeicher zu vermeiden, versuchen wir, die Anzahl der Texturen im Hauptspeicher möglichst gering zu halten. Deshalb erzeugt The Whispered World Texturen, die automatisch die maximale Größe annehmen, die von der Grafikkarte des Spielers unterstützt wird. Diese meist 2048x2048 Pixel großen Texturen dienen als Container für alle Grafiken, die in einer Szene im Spiel verwendet werden. Ist eine solche Container-Textur erst einmal in den Buffer der Grafikkarte geladen, kann die Hardware sehr performant auf einzelne Texturbereiche zugreifen, die jeweils kleine Grafiken repräsentieren. Um möglichst wenige speicherintensive Textur-Container zu erzeugen, ordnen wir das verwendete Bildmaterial möglichst effizient und platzsparend auf dem Container an. Dafür kommt eine speziell geschriebene Applikation zum Einsatz, die im Pre-Processing-Bereich die Texturen unter maximaler Ausnutzung einer Container-Textur anordnet.
Gunnar Bergmann, Franziska Reinhard, Fabian Pahl


zu den Autoren: Gunnar Bergmann ist Character-Animator bei Daedalic Entertainment.
Der Graphic Artist Gunnar Bergmann ist einer der Charakter-Animatoren bei The Whispered World. Der Diplom-Designer hat zuvor an Animationsfilmen wie »Das doppelte Lottchen« und »Derrick« sowie an TV-Serien und Comics mitgearbeitet.

Franziska Reinhard ist Game Designerin bei Daedalic Entertainment.
Franziska hat während ihres Diplom-Studiums an der Fachhochschule Lübeck ein komplettes 2D-Adventure entwickelt. Bei The Whispered World ist die Game Designerin jetzt für Rätseldesign und Rätselscripting zuständig.

Fabian Pahl ist Senior Programmer bei Daedalic Entertainment.
Wenn der Medieninformatiker Fabian Pahl nicht gerade im offensiven Mittelfeld beim MTV Laßrönne 1919 schaltet und waltet, entwickelt er als Senior Programmer bei Daedalic Tools und die Engine für The Whispered World.