Inkscape 012 – Animation für Game erstellen 2/2

Als Beispiel dient eine einfache Goldmünzen-Animation, wie man sie von vielen Spielen kennt. Bestehend aus sechs Einzelbildern. Ich benötige allerdings nur drei Objekte. Alle weiteren Einzelbilder lassen sich über Kopieren, Einfügen und Spiegeln komplettieren.

Skills: Intermediate 3 out of 5 stars (3 / 5)
Plugin(s): Nein

 

Inkscape Animation

Preview

 

Dokument, Einstellung und Hilfslinien

Ich möchte eine Animation aus insgesamt 6 Einzelbildern erstellen. Ein Einzelbild soll eine Größe von 40 x 40 Pixeln haben. Das Maß für das Dokument ist daher: 6 Bildern mit 40 Pixel, macht eine Breite von 240 Pixel (siehe Bild unten).

Inkscape Animation

Dokument Einstellungen

Durch Drücken der Plus-Taste zoome ich in das Bild herein und ziehe mir fünf Hilfslinien, aus dem Lineal der linken Seite, die ich zunächst grob, von links nach rechts auf der Arbeitsfläche verteile (siehe Bild unten).

Inkscape Animation

Hilfslinien ziehen

 

Anschließend werden die Hilfslinien exakt ausgerichtet. Durch einen Doppelklick auf eine Hilfslinie erscheint ein Dialogfenster. Dort trage ich einen Wert ein für X ein und drücke OK (siehe Bild unten).

Inkscape Animation

Hilfslinien exakt ausrichten

Die Werte für die Hilfslinien sind:

1. Hilfslinie: 40 (Pixel)
2. Hilfslinie: 80 (Pixel)
3. Hilfslinie: 120 (Pixel)
4. Hilfslinie: 160 (Pixel)
5. Hilfslinie: 200 (Pixel)

 

Goldmünze

Für die Münzen ziehe ich zwei Kreise auf. Der erste Kreis hat einen Durchmesser von 37 Pixel. Der zweite Kreis hat einen Durchmesser von 25 Pixel. Beide Kreise bekommen einen Farbverlauf, von unten (dunkler) nach oben (heller). In der Mitte, als Symbol für ein Zahlungsmittel, setze ich einen Stern.

Bisher habe ich insgesamt drei Objekte. Die größere Kreisform, die kleinere Kreisform und den Stern. Die größere Kreisform Form kopiere ich mit STRG-C oder über Bearbeiten – Kopieren und füge die Kopie mit STRG-V oder Bearbeiten – Einfügen ein.

Ich stelle sicher, dass das die kleinere Kreisform in den Hintergrund abgesenkt wird (siehe Bild unten).

Inkscape Animation

Objekt anheben/ absenken

Das hintere Objekt bekommt eine deutlich dunklere Farbe als die Vorderseite (siehe Bild).

Inkscape Animation

Vorder- & Rückseite

Die Vorder- und Rückseite wird zweimal kopiert. Alle Kopien verteile auf die neben liegenden Felder. Bei Münze Eins kann ich die dunklere Rückseite löschen, denn Münze Eins ist die Frontansicht (siehe Bild).

Inkscape Animation

Münzen Anordnung

 

Objekte gruppieren

Durch Gruppierungen werden mehrere Objekte zusammengefasst, um sie z. B. gleichzeitig zu verschieben, skalieren usw. Bitte nicht alles komplett gruppieren, sondern Münze für Münze (siehe Bild unten).

Inkscape Animation

Auswählen und Gruppieren

 

Goldmünze skalieren

skalieren

Skalieren mit Shift

Bei der Drehung eines Objekts erscheint es zwischen Start- und Endbild schmaler. Die Formen werden daher, mit gedrückter SHIFT-Taste, horizontal schmaler skaliert. Shift bewirkt, dass sich der Taler von links und rechts, zum Mittelpunkt hin skaliert. Taler 2 wird ein wenig schmaler als Taler 1 (siehe Animation unten).

Das Gleiche wird mit Taler 3 wiederholt. Nicht zu viel, aber doch schmaler als Taler 2!

Anschließend werden die dunkleren, hinteren Ovale versetzt, damit es ausschaut als würden die Seitenteile durch die Drehung zum Vorschein kommen (siehe Bild unten).

Inkscape Animation

Münzen 1 – 3

 

Kopieren & Spiegeln

Bevor ich mich um Bild vier kümmere, mache ich Bild fünf und sechs fertig. Das ist ein Handgriff, denn Bild zwei und drei müssen nur kopiert, gespiegelt und versetzt werden (siehe Bild unten).

Inkscape Animation

Münze Zwei und Drei kopieren

Jede Münze, muss in seinem eigenen Bereich, exakt in der Mitte platziert werden.

 

Letzte Münze, Seitenansicht

Zuletzt kommt Münze vier hinzu, die nur von der Seite sichtbar ist. Um diese Ansicht darzustellen braucht es nur ein Rechteck. Der Durchmesser einer Münze war 37 Pixel. So hoch soll auch das Rechteck sein. Die Breite sollte zu den Proportionen der Münze passen.

Die Goldmünzen mit einem Zoom von 100 %, schauen aus wie im Bild unten (siehe Bild unten).

Inkscape Game Coins

Zoomfaktor 100%

Die Goldmünzen können natürlich noch um einiges optimiert werden. Für einen ersten Einsatz in einem Phaser-Game ist diese Animation aber bestens geeignet.

Inkscape Game Coins

Final Animation

 

PNG abspeichern

Wir müssen den Bildstreifen natürlich noch abspeichern. Die Münzen sollen später in einem Game eingesetzt werden, daher benötigen sie einen transparenten Hintergrund. Dazu eignet sich das PNG-Format hervorragend.

Über Datei – PNG-Bild exportieren öffne ich die Export-Palette. Dort werden die Einstellungen zum Export vorgenommen (siehe Bild unten).

Inkscape Game Coin

Export Dialog

Wichtig ist hier das Häkchen bei Alle außer Ausgewählte verstecken. Dadurch werden keine störenden Objekte, wie zum Beispiel ein testweise abgelegter Hintergrund, mit abgespeichert.

 

 

Das könnte Dich auch interessieren …

Translate »