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 3 out of 5 stars (3 / 5)
Plugin: Nein

 

Inkscape Game Blast Animation

Animation 220×220 Pixel

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

Inkscape Game Blast Animation

80×80 Px

 

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).

Inkscape Game Blast Animation

80 x 800 Pixel, Hilfslinien

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).

Inkscape Game Blast Animation

Farbtabelle

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).

Inkscape Game Blast Animation

Ebene 1 (Hintergrundebene)

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).

Inkscape Game Blast Animation

Sicht auf Ebenenpalette

 

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).

Inkscape Game Blast Animation

Bild 1

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).

Inkscape Game Blast Animation

Bild 1, Phase 2, Korrektur

 

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).

Inkscape Game Blast Animation

Bild 2, Phase 1

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

Inkscape Game Blast Animation

Bild 2, Phase 2

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.

Inkscape Game Blast Animation

Bild 3, Phase 1

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).

Inkscape Game Blast Animation

Bild 3, Phase 2

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).

Inkscape Game Blast Animation

Bild 3, Phase 3

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

Inkscape Game Blast Animation

Bild 3, Phase 4

 

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).

Inkscape Game Blast Animation

Bild 4, Phase 1

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

Inkscape Game Blast Animation

Bild 4, Phase 2

 

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.

Inkscape Game Blast Animation

Bild 9 aus Bild 10

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

Inkscape Game Blast Animation

Bild 9, Phase 2

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

 

Inkscape Game Blast Animation

Bild 9, Phase 3

 

Ü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).

Inkscape Game Blast Animation

Vier Bilder fehlen noch

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

Inkscape Game Blast Animation

Ansicht für Phaser

 

Bild 5

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

Inkscape Game Blast Animation

Bild 5

 

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).

Inkscape Game Blast Animation

Bild 6

 

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).

Inkscape Game Blast Animation

Bild 7

 

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.

Inkscape Game Blast Animation

Animation-Sheet für Phaser

Inkscape Game Blast Animation

80×80 Px

Inkscape Game Blast Animation

Animation in 220×220 Pixel

 

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.

Inkscape Phaser Game Blast

Phaser, 80×800 Px, transparent

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.

Das könnte Dich auch interessieren …

Translate »