Inkscape 175 – Game Blast Animation

Spiele bestehen aus vielen verschiedenen Einzelteilen. Nicht nur das Scripten vieler Codezeilen macht Mühe, sondern auch alle grafischen Komponenten, wenn man sie möglichst liebevoll gestalten möchte. In diesem Tutorial baue ich eine Game Blast-Animation.

Skills: Intermediate
Plugin: Nein

 

Das gleiche Beispiel noch einmal in einer Größe von 80 x 80 Pixeln.

 

Vorbereitungen

Die Vorbereitungen hängen vom Verwendungszweck ab. Möchte man eine Sprite-Animation für Phaser erstellen, sollte man in jedem Fall eine Bilderfolge am Stück (im Streifen) anfertigen. Das bedeutet bei 10 Bildern, jedes davon 80×80 Pixel, ein Dokument mit der Größe 80×800 Pixel (siehe Bild unten).

Möchte man eine Animation in Gimp aus den Einzelbildern erstellen, dann reicht eine Vorlage von 80×80 Pixeln, wobei jedes Bild (Zwischenschritt) einzeln als transparente PNG abgespeichert wird.

Nachdem ich mir eine Vorlage mit den Hilfslinien erstellt habe, lege ich eine Farbtabelle an. Mit fünf Farbtönen komme ich hier aus (siehe Bild unten).

Damit ich die Farben besser beurteilen kann, ziehe ich mir 2 Farbfelder auf, eins für die Farbtabelle, eins als Hintergrundfarbe. Später wird der Hintergrund ausgeblendet und das Bild, egal ob für Phaser oder Gimp, mit transparentem Hintergrund exportiert (siehe Bild unten).

Für die gesamte Arbeit reichen zwei Ebenen aus. Farbtabelle und Background auf der Ebenen BG (verriegelt) meine Explosion wird auf der Ebene Blast aufgebaut (siehe Bild unten).

 

Let’s go

Bild 1 ist die eigentliche Explosion. Das ist ein kurzer Blitz, der zu einem Feuerball wird und sich anschließend schnell verändert, bis die Explosion verpufft (siehe Bilder unten).

Ich habe mehrere Kreise verschiedener Durchmesser vereinigt, die Form dupliziert, abgesenkt, gelb eingefärbt und leicht skaliert bzw. in der Form verändert (siehe Bilder unten).

 

Bild 2

Bild 2 ist die gleiche Form wie Bild 1, nur dupliziert und im ersten Schritt in der Form leicht verändert und skaliert (siehe Bild unten).

Für den Innenraum lege ich mir eine weitere, zweite Form an. Das Aufblitzen erreicht seinen Höhepunkt (siehe Bild unten)

Beide Innen-Formen (die weißen) vereinige ich noch nicht.

 

Bild 3

Bild 3 ist wiederum eine Kopie von Bild 2. Ich drehe die Form leicht in eine Richtung.

Von der innersten Form lege ich mir über STRG – D ein Duplikat an und schiebe es leicht zur Seite. Anschließend schneide ich Form 1 und 2 über Pfad – Differenz voneinander aus (siehe Bild unten).

Das beiseite gelegte Duplikat ziehe ich nun wieder zurück auf mein Objekt. Erstelle einen neuen Mittelteil und schneide das wieder über Pfad – Differenz aus (siehe Bild unten).

Ins Innere lege ich mir eine neue Form (siehe Bild unten).

 

Bild 4

Bisher habe ich nur die Farben Weiß und Gelb verwendet. Die Explosion kühlt nun weiter ab. Ab jetzt werden Orange und Gelb die primären Farben sein, mit einem abnehmenden Weiß-Anteil (siehe Bilder unten).

Bild 4 ist eine Kopie von Bild 3 und wurde wieder leicht gedreht (siehe Bild unten).

Der Weiß-Anteil nimmt deutlich ab (siehe Bild unten).

 

Bild 10

Ich mache nun einen Sprung zum letzten und vorletzten Bild, um weitere Tweens beurteilen zu können.

Bild 10 ist das Ende der Animation und hat nur noch dunkle Grau-Anteile. Außerdem verpufft die Explosion in diesem Stadium komplett (siehe Bild unten).

Bild 9

Bild 9 ist ein Duplikat von Bild 10, wird aber in der Form und Dichte abgeändert.

Aus den Ovalen mache ich Kreise, skaliere einzelne Teile größer und erhöhe die Anzahl (siehe Bild unten).

Es kommt noch zu leichtem Glühen in dunklem Orange (siehe Bild unten).

 

 

Überblick

Habe ich keine Skizzen zu meinen Bildabläufen gezeichnet, sondern arbeite spontan in Inkscape, fällt es mir so persönlich leichter weitere Zwischenschritte (Bild 5 bis Bild 8) besser zu beurteilen (siehe Bild unten).

Das Bild unten zeigt eine verkleinerte Abbildung, ohne Hilfslinien für Phaser (siehe Bild unten).

 

Bild 5

Bild 5 ist wiederum ein Duplikat von Bild 4, ganz ohne Weiß-Anteil (siehe Bild unten).

 

Bild 6

Bild 6 ist ein weiteres Duplikat. Die Farben verändern sich nun schnell in etwas dunklere Farben, entsprechend der Abkühlung. Das Orange außen wird durch ein dunkleres Orange ersetzt, das Gelb durch Orange und die Gelbanteile nehmen ab (siehe Bild unten).

 

Bild 7

In Bild 7 kommt dunkler Rauch und Partikel hinzu und ersetzt das äußere dunkle Orange. Die helle Orange-Farbe innen wird durch das dunklere ersetzt (siehe Bild unten).

 

Bild 8

In Bild 8 löst sich die Explosion langsam auf. Die Farben werden kühler. Der Grau-Anteil steigt. Helles Orange nimmt deutlich ab (siehe Bild unten).

 

Sprite Animation

Im Bild unten sind alle Einzelbilder als Phaser-Version zu sehen (Hintergrund muss transparent). Das schaut schon ganz ordentlich aus.

 

Speichern für Phaser

Um das Bild für PHASER abzuspeichern, muss das Format berücksichtigt werden. Ich habe 10 Einzelbilder von 80×80 Pixeln. Das bedeutet, da alle Bilder nebeneinander liegen sollten, das Endformat ist 80×800 Pixel.

Der Hintergrund wird nicht mit abgespeichert, sondern soll transparent sein, das macht das Bild beliebig einsetzbar, für unterschiedliche Games.

 

Speichern für Gimp-Animation

Möchte man eine GIMP-Animation daraus machen, müssen die Bilder in Inkscape einzeln, nacheinander auf der Arbeitsfläche (80×80 Pixel) platziert und einzeln abgespeichert werden.

In Gimp werden die Bilder dann über Datei  – Als Ebenen öffnen importiert.