Animationsvielfalt ohne Aufwand

[real Troll]

Posen und kleine Spezialanimationen machen sich in so ziemlich jedem Spiel gut. Ein Schornstein, aus dem Rauch quillt, ist etwas anderes als sein blanker Kollege. Ein See mit bewegtem Uferrand wirkt besser als eine starre Wasserplatte. Ein NPC, der auch erschreckt guckt, wenn er sagt, er sei erschreckt, wirkt stimmiger als ein Charset ohne jegliche Regung. Und so weiter. Der Nutzen ist, denke ich, klar.
Der Aufwand ist hingegen hoch, wenn die ganze Welt aus solchen Kleinigkeiten bestehen soll. Nee, eben nicht. Es gibt nur zwei Voraussetzungen:
- man muss ein bisschen pixeln oder zumindest editieren können.
- man muss organisiert planen können.

Mit ein paar einfachen Tricks kann man seiner Spielwelt ohne allzu viel Arbeit bewegtes Leben einhauchen. Ich liste mal ein paar praktische Tipps auf und hoffe, es wird schon irgend jemandem etwas nützen. Und falls ich irgendwelche altbekannten Allerweltsweisheiten hier verbreite, möge man mir gnädig vergeben.

1. Archetypen bilden
Versucht von vornherein abzuschätzen, in welcher Umgebung sich eure Handlung am häufigsten bewegt (Wald, Wüste, Unterwasser, Dorf, Stadt, oder oder oder). Und dann macht eine für diese Umgebung maßgeschneiderte Animation. Der Vorteil: Ihr könnt sie auf jeder zweiten Map verwenden, haucht entsprechend vielen Karten damit Leben ein und habt (von Copy&Paste abgesehen) nur einmal Arbeit. Wichtig ist lediglich, dass es sehr alltägliche Animationen sind, so dass ihre ständige Wiederholung nicht nervt.
Beispiele:
- Im Wind wiegendes Laubwerk, dass sich als Event im Baumgeäst positionieren lässt, wenn man etwas im Wald macht.
- Staubfahnen oder Sandwirbel für Wüsten.
- Wasserreflektionen für Unterwasserlevel.

Ich erkläre mal das Laub da oben. Die Zwischenschritte seht ihr hier:


Es besteht aus einer 3er-Animation. Also brauchen wir eine entsprechende Blankovorlage wie bei "1".
Schritt "2" ist wohl der wichtigste. Ich habe hier nicht selbst gezeichnet, sondern mir eine Vorlage für einen Ast gesucht und dabei bedacht, dass ich ihn möglichst häufig einsetzen will. Von der Farbgebung wie vom Zeichenstil her sollte er also in euer jeweiliges Projekt passen. Ich habe einen Mac&Blue-Ast genommen. Das erspart mir langes Pixeln und er passt bei mir mit Sicherheit.
In Schritt "3" habe ich alles gelöscht, was meinen Ast an unnützem Kram umgibt und habe ihm einen Abschluss gepixelt. Ich muss hier nur darauf achten, den Farbverlauf des Astendes abzudunkeln. So kann ich ihn später flexibel auf verschiedenste Bäume aufsetzen, ohne dass sich das farblich beißt.
Schritt "4" ist das gleiche, wie Schritt "2", nur betrifft es hier eben die Blätter.
Zum Schluss folgt die eigentliche Animation (Schritt "5"). Per Copy&Paste werden die Blätter an den Ast gesetzt und ihre Blattspitzen pro Bild um je einen Pixel nach oben rechts geschoben. Das erzeugt den Eindruck sanften Hebens und Senkens im Wind. Ich mache das immer mit IDraw und nutze dabei die Animation-Funktion, bei der man sich in einem Extrafenster ansehen kann, wie das ganze in Bewegung wirkt. Mir hilft das.
Letzter Punkt: Falls ihr selbst einmal solche Tutorials macht, erstellt nur Dinge die ihr auch selber gebrauchen könnt. Den Ast kann jeder verwenden, der ihn mag. Hier ist das Charset:

(Originalgröße)

Spoiler Ende

Die meisten Spiele sind ja in irgendeiner Fantasywelt mit Burgen, stolzen Rittern und Königen angesiedelt. Fahnen machten sich auf den verschiedenen Turmspitzen gut. Bewegte Fahnen noch besser. Und maßgeschneiderte Fahnen für jede Stadt/jedes Reich wohl am besten. Das ist, falls man sich die Arbeit organisiert, nicht schwer. So geht's:


Erst mal benötigen wir einen Fahnenmast (1). Es soll schnell gehen, also nehmen wir uns einen fertigen, der uns gefällt. Achtung: Positioniert ihn von Anfang an so, dass er auf möglichst alle eure Burgtürme, Tore oder sonstewas passt. Die meisten Türme enden in einer 2 Pixel breiten Spitze, die in der Mitte der Kachel an den oberen Rand stößt. Da muss der Mast ansetzen.
An den Mast malen wir eine Fahne, hier rot (2). Macht sie groß, denn so könnt ihr später in euer Muster verschiedenste Wappen einfügen, ohne Formatprobleme zu bekommen.
Als nächstes kommt ein Wappen in die Fahne (3). Hier entsteht eine Fahne für ein Königreich. Die Krone habe ich mir aus dem Systemset "Royal" genommen. Der bisherige Pixelanteil liegt also nur knapp über dem Nullpunkt. Die Vorlage (rote Fahne, Krone) könnt ihr jetzt beliebig verändern, um möglichst ohne viel Arbeit eine breite Palette an unterschiedlichen Wappen zu produzieren, die euer Fantasyreich schmücken. Turniere sehen so z. Bsp. schon ganz anders aus.
Die Animation selbst (4) ist auch nicht unmäßig schwer, wenn man sich das Prinzip des Fahnenflatterns vor Augen hält. Die Fahne soll sich im Wind aufbauschen und wieder zusammenziehen. Dazu muss man nur den Teil, der aufgebauscht wird, einen Pixel nach unten ziehen (nach unten, da die Perspektive, in der die Makergrafiken existieren, auf den Blick von schräg oben geeicht ist). Und für jeden Pixel, den sich die Fahne aufbauscht (also nach unten gezogen wird) verkürzt sie sich auch einen Pixel. Es ist ja kein elastisches Gummituch, dass im Wind hängt. Nutzt euer Anfangsbild gleich als eine der Animationsstufen, dann braucht ihr nur noch zwei weitere. Das meiste geht per Copy&Paste, wie ihr auch am Beispiel seht.

Fertig. Und eine blaue Fahne mit Adler muss nicht komplett neu gemacht werden. Färbt das Ausgangsbild um, fügt den Adler ein und schiebt die neue Fahne in die gleiche Animationsstellung wie die alte. Die Technik ist wirklich simpel.

Für den, der will, hier noch das Charset:


Spoiler Ende

Kerzen sind eigentlich immer zu irgendetwas zu gebrauchen: Horrorspiel, königliches Festmahl, Burgkorridor, Opis Dachboden,... Das Flackern hübscht die Karten auf und die Kerzen sind trotzdem unauffällig in jeder dritten Ecke unterzubringen, ohne dass sie dem Spieler schnell auf den Geist gehen. Und so kann man sich sein individuelles Kerzenset zusammenschneidern; wie immer relativ aufwandslos:


Erst einmal suchen wir uns eine schöne Kerze. Die meisten sind leider nie animiert, aber genau das können wir getrost ignorieren. So, wir haben eine (1).
Diesmal baue ich eine 4er-Animation. Dadurch wird das Flammenflackern etwas weicher und ansehnlicher. Es soll schnell gehen, also pixel ich nicht, sondern nehme mir eine fertige Animation als Vorbild (2). Gleich hat Copy&Paste und wieder seinen großen Auftritt.
Farblich passt die Flamme der animierten Kerze nicht zu meinem Wunschbild. Das lässt sich aber leicht ändern. Ich wandle die Farben der animierten Flamme in die Farben der starren Flamme auf meiner Wunschkerze um (3). Bei IDraw heißt der Befehl "Colour Second create" und macht genau das, nämlich eine zweite Farbe (also eine Schwesterfarbe) zu erstellen. Noch nie probiert? Macht mal. Falls ihr später einmal Chipsets o.ä. verändern wollt, ist so etwas ungemein nützlich. Lange Rede, kurzer Sinn, wir haben also die Kerzenflamme grafisch angepasst. Wer einigermaßen überlegt mit Markier- und Füllwerkzeugen hantieren kann, wird so etwas in einer halben Minute hinter sich haben.
Wir sind fast fertig. Jetzt kommt nur noch ein hübsches Detail. Ich möchte, dass das Flammenspiel ein tanzendes Reflexionsmuster auf dem Kerzenwachs hinterlässt (4). Das geht wieder mit dem Befehl "Colour Second create" (ja, er ist wirklich toll). Ich klicke mit dieser Verfahrensweise einen der Farbpixel im Wachs an und sehe also in der Farbpalette, welchen Farbwert er hat. Jetzt helle ich das ganze um 10-15 Einheiten auf (Farbe doppelt anklicken, Helligkeitsschieber um entsprechenden Wert verschieben). Macht die Wachspixel bei der Animationsstufe mit der größten Flammenausdehnung besonders hell, also 20-30 Einheiten heller, die beiden jeweils angrenzenden Animationensstufen hellt ihr um die besagten 10-15 Einheiten auf. Die vierte Animationsstufe belasst ihr bei den Ausgangsfarbwerten. Fertig.
Hier ist wie immer das Charset:


Spoiler Ende

Türen benötigt man ständig. Und wer seinen ganz eigenen Türentyp hat, hat ein klitzekleines Quentchen Unverwechselbarkeit in seinem Spiel untergebracht - zumindest, bis ein anderer kommt und die Grafik auch gebrauchen kann. Ich erkläre mal eine Holztür, die passt wohl am besten in die Fantasyumgebung der meisten Spiele.

Erst einmal suchen wir uns eine schöne Tür (Schritt 1). Die gängigen Chipsets sind reichlich damit bestückt und dass diese Türen nicht animiert sind, muss uns nicht weiter stören, dafür sorgen wir schließlich selbst. Tür gefunden? Prima. Halt, Moment: Sie sollte am besten die Abmessungen 24x32 Pixel haben, um überall problemlos zu passen.
Um die Tür aufschwingen zu lassen, nutzen wir 4 Animationsstufen. Die erste und letzte machen sich von allein. Erst ist die Tür zu, zum Schluss offen. Für Stufe eins haben wir bereits unser Bild und Stufe 4 erfordert nur ein Loch. Ob der Türrahmen schwarz oder anderweitig ausgefüllt werden soll, ist Geschmackssache. Hier mache ich ihn transparent, das bedeutet für Animationsstufe 4: leer. Bleiben die beiden Mittelstufen. Um eine nicht zu hakelige Öffnungssequenz zu erstellen, wenden wir ein wenig Geometrie und Perspektiventechnik an.
Eine Tür muss um 90° schwingen, um geöffnet zu werden. Diese 90° verteile ich nun auf die beiden mittleren Animationsstufen. Ich könnte die Tür um jeweils 30° weiterrucken lassen (ergibt in der Summe dann genau 90) oder ich reiße sie gleich zur Hälfte auf (=45°) und überbrücke mit Animationsstufe 3 dann den Rest. Ich habe mich für genau diese Möglichkeit entschieden, da das schwungvoller wirkt - wir schicken schließlich echte Helden in den Kampf.
Markiert jetzt jeden senkrechten Pixelstreifen der Ausgangstür und schiebt ihn jeweils um eine Pixelhöhe nach oben. Die Tür ist nun diagonal verzerrt. Löscht dann alles, was über den imaginären Türrahmen hinausragt. Gut. In der Höhe ist die Tür verschoben, nun fehlt die Breite. Da die Tür vom Betrachter wegschwingt, muss sie noch verkürzt werden. Schiebt also die Tür ein wenig zusammen - am besten um fast den Betrag, um den ihr sie auch nach oben verschoben habt. Ich gucke mir das Ergebnis immer in der Animationsoption von IDraw an, um eventuelle Störungen ausfindig zu machen. Einzelheiten wie Türklinken können dann noch per Hand nachjustiert werden.
Schritt drei ist das selbe in grün. Hier achte ich lediglich darauf, dass bei dieser Sequenz die Tür genau in der Mitte der Positionen von Schritt 2 und Schritt 4 ist, damit die fertige Animation auch flüssig wirkt.
Geometrie ersetzt hier sehr gut Intuition. Man muss nur Pixelkästchen auszählen, Winkel aufeinander beziehen und Grafiken verschieben können. Es ist eigentlich recht leicht.
Und wie immer: Das Charset (mit und ohne ausgefüllten Türrahmen). Und wie ihr seht, beherzige ich meine eigenen Tipps und habe es gleich gespiegelt, so dass ich 2 Typen Türen habe.

Spoiler Ende

Bodenklappen sind für alle Gelegenheiten, bei denen man für Überraschung sorgen möchte, eine praktische Einrichtung. Helden können so von plötzlich erscheinenden Wachen umzingelt werden oder ein magisches Schwert wird empor gefahren oder eine Falle öffnet sich oder... na und so weiter. Und sie sind ganz einfach umzusetzen. Pixelkenntnisse werden nicht benötigt, reines Verschieben reicht vollkommen aus.

Zunächst benötigen wir wieder einmal eine Ausgangsgrafik, diesmal eine Bodenklappe (Schritt 1). Im Idealfall hat sie die Abmessung von 16x16 Pixeln, da sie sich so problemlos in die Bodentexturen jeder Map integrieren lässt. Viele ChipSets bieten bereits vorgekachelte Böden an, da könnte man sich beispielsweise einfach ein Stück herauskopieren.
Nun öffnen wir die Klappe (Schritt 2). Hier seht ihr die einfache Methode: Die Klappe schiebt sich auf (Wer sie aufklappen lassen möchte, kann das mit derselben Technik handhaben, die im Türenbeispiel beschrieben ist). Das reine Aufschieben hat den Vorteil des minimalen Aufwandes, denn hier muss die Ausgangsgrafik nur um jeweils ein paar Pixelbreiten verschoben werden. Das aber möglichst gleichmäßig, damit die spätere Animation weder ruckt noch hakt. Hier bietet sich eine Animation in 4 Schritten an. Die Klappenhälften müssen, um geöffnet zu werden, in diesem Beispiel einen Weg von jeweils 8 Pixeln zurücklegen. Der erste Animationsschritt stellt lediglich die geschlossene Klappe dar, der vierte die offene - prinzipiell reicht dafür ein schwarzes Loch. Es fehlen nur die mittleren Bewegungen 2 und 3. Das sind zusammen drei Bewegungen: Klappe ein bisschen auf, Klappe weit auf, Klappe komplett auf. Ein häufiges Problem ist es, dass sich der Gesamtweg der Animation (8 Pixel) oft nicht glatt durch die Zwischenschritte teilen lässt. 8 durch 3 ergibt 2 und ein bisschen. Dieses Bisschen schlagen wir einfach einem der drei Zwischenschritte zu, aber nicht dem Mittleren, denn dann gäbe es in der Animation einen kleinen sichtbaren Ruck, weil sie in ihrem Mittelteil langsamer abliefe. Lange Rede, kurzer Sinn: Erst bewegt sich die Klappe zwei Pixel, dann noch einmal zwei und zum Schluss drei, um sich zu öffnen.
Im dritten Schritt schieben wir unser Objekt durch die Klappe nach oben. Auch hier empfehlen sich 4 Animationsschritte, denn der Troll misst stolze 30 Pixel und bei nur 3 Animationsschritten würde er jedesmal gleich um 10 Pixel nach oben wuppen. Das sieht im Ergebnis zu abrupt und zu wenig geschmeidig aus. Die Technik ist identisch mit Schritt zwei: Grafik in möglichst gleichgroße Teile zerlegen, die dann den Animationsschritten zugeordnet werden.
Wir sind fast fertig. Nun müssen die ausgeschnittenen Teile nur noch Stück für Stück aus dem Klappenloch ragen (Schritt 4). Erst 1, dann 2, dann 3, dann 4, dann steht der Troll vor der Tür. Da wir mit Schritt 3 und Schritt 4 auf insgesamt 8 Animationsstufen kommen, der Maker mit seinem Drehbefehl für Charsets (Face down, right, up, left) aber nur maximal 4 Schritte berücksichtigt, müssen wir hier auf jeden Fall daran denken, einen "change graphic"-Befehl oder einen Schalter einzubauen, um die Schritte zu verbinden.
Fertig. Die Technik verlangt keinerlei zeichnerisches Geschick und liefert trotzdem recht sehenswerte Ergebnisse ab. Hier ist wie immer das Charset zum angucken, editieren, sonstewas.

Spoiler Ende

2. Copy & Paste
Wenn ihr eine Animation erstellt habt, dreht ihre Bewegungsrichtung um, indem ihr das Ganze noch mal spiegelbildlich erstellt. Blattwerk kann so in verschiedenen Rhythmen wackeln, Wellen brechen sich nicht nur gleichförmig am Ufer und Rauch kann für variierende Windrichtungen eingesetzt werden.

3. Schnell/langsam
Nutzt auch die "Movement Speed"-Funktion, um gleichen Animationen unterschiedliche Geschwindigkeiten zu verleihen. Die Grasbüschel auf einer Wiese wackeln auch nicht alle im Gleichtakt.

4. Battleanimations statt Events
Wiederkehrende Animationen, die sich über Personen oder Objekten ereignen sollen, die ständig ihren Platz wechseln, lassen sich am besten per BattleAnimation bewerkstelligen. Events sind hier oft umständlicher und rauben nur die Zeit für wesentlicheres.
Beispiele:
- Emotionsblasen über den Köpfen.
- Gesichtsausdrücke. Falls ihr Figuren nur eines Grafikstils benutzt (Mac&Blue, Theodore, RTP) liegen die Gesichter fast immer auf einer Höhe. Erstellt zwei weit aufgerissene Augen in der jeweiligen Standardhöhe und spielt sie in passenden Szenen per BattleAnimation auf die jeweiligen Personen. So könnt ihr jedem NPC zu Posen und ähnlichem verhelfen und habt nur ein einziges Mal Arbeit (oder zweimal, oder dreimal, je nachdem, wie viele Stile ihr mischt). Und ihr müsst nicht für jeden NPC eine extra Pose anfertigen. Eine einzige BA reicht aus.

Folgende Situation: Banditen überfallen ein Dorf und die Dörfis sollen sich jetzt erschrecken. Das sieht natürlich gut aus, wenn jeder die Augen aufreißt. Es macht aber Arbeit, jedem eine extra Pose mit aufgerissenen Augen zu malen. Wie gesagt gibt es die Alternative mit den BA. Wichtig dabei ist nur die einheitliche Position der Gesichter bei den Charas.

Hier sind ein paar Standard-RTP-Leute, die schon oft überfallene Dörfis spielen mussten. Jetzt verbinden wir sie mit dieser BattleAnimation:

Das sind nur zwei weit aufgerissene Augen. Und die spielen wir jetzt per Befehl ("Show Battle Animation") auf die NPCs. So sieht das dann aus:

Die braven Leute erschrecken sich fürchterlich. Einmal Arbeit, beliebig wiederholbarer Effekt. Aber Achtung: Es klappt so nur bei Figuren desselben Stils. Der kleine Junge am Ende tanzt aus der Reihe, da seine Augen unterhalb der Höhe der BA liegen. Für Sonderfälle muss man also Sonderposen anfertigen oder eine extra BA auf Kinderhöhe erstellen.

Spoiler Ende

5. Animationsstufe einflechten
Die meisten Animationen sind Dreierpacks, die mittels "Fix direction" oder "Common/with stepping" zum Bewegen gebracht werden. Durch die so entstehenden drei Animationsstufen wirkt das Ganze oft ein wenig hakelig. Eine vierte Stufe machte das schon weicher und schöner (Insbesondere bei drehenden Rädern, Ventilatoren, Feuern zu beobachten). Gerade bei flackernden Feuern kann man meist ungestraft eine vierte Animationsstufe einfügen (dann per "4 Anim./Turn right" bewegen), ohne dass es zu auffälligen Rucklern kommt. Vorteil: Nur ein zusätzliches Bildchen erstellen und aus einer gegebenen Naja-geht-so-Grafik eine individuelle, weich animierte machen.

6. Minimalanimation
Man kann aber auch eine Drehanimation ohne viel Aufwand erstellen, indem man aus der Ursprungsgrafik (z.B. ein Rad) eine weitere baut, die um 45° gekippt ist. Das Ganze wird dann in der Reihenfolge Original - Kopie(45°) – Original zusammengestellt und fertig ist ein drehendes Rad. So lassen sich viele schöne Vorlagen in Chipsets mit ein paar Pixelstrichen als bewegte Schmuckstücke verwenden.

7. Täuschen
Falls ihr einmal selbst eine Animation erstellt habt und ihr euch eingestehen müsst, dass sie nicht so richtig hübsch geworden ist (also kackhässlich), dann werft sie nicht gleich weg. Erstens sind vielleicht nicht alle potentiellen Spieler so anspruchsvoll wie ihr und zweitens lassen sich unsauber erstellte Animationsstufen auch kaschieren, indem man die Bewegung einfach einen ordentlichen Zacken schneller ablaufen lässt - vorausgesetzt, das passt zum Inhalt des Dargestellten.


Das war’s erst mal. Wenn das hier auf Interesse stößt, kann ich ja bei Bedarf später noch mehr hineineditieren.