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
Plugin(s): Nein
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).
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).
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).
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).
Objekt anheben/ absenken
Das hintere Objekt bekommt eine deutlich dunklere Farbe als die Vorderseite (siehe Bild).
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).
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).
Auswählen und Gruppieren
Goldmünze 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).
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).
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).
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.
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).
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.
