Tutorial/Fahrzeuggrafiken - Versionsgeschichte

Iglheaz am 26. Dezember 2014 um 16:59 Uhr

2014-12-26T16:59:47Z

Iglheaz: Iglheaz verschob die Seite Tutorial/Fahzeuggrafiken nach Tutorial/Fahrzeuggrafiken

2014-12-25T10:01:35Z

Iglheaz verschob die Seite Tutorial/Fahzeuggrafiken nach Tutorial/Fahrzeuggrafiken

Iglheaz: Iglheaz verschob die Seite Tutorial/Fahzeugegrafiken nach Tutorial/Fahzeuggrafiken

2014-12-25T09:49:06Z

Iglheaz verschob die Seite Tutorial/Fahzeugegrafiken nach Tutorial/Fahzeuggrafiken

Iglheaz: Iglheaz verschob die Seite Tutorial zur Erstellung der SVG-Dateien nach Tutorial/Fahzeugegrafiken: Tutorials zusammenführen

2014-12-25T09:48:31Z

Iglheaz verschob die Seite Tutorial zur Erstellung der SVG-Dateien nach Tutorial/Fahzeugegrafiken: Tutorials zusammenführen

Westfale: /* Einbinden der Blaulichter mit Inkscape */ Formatierung

2014-12-24T15:05:06Z

‎Einbinden der Blaulichter mit Inkscape: Formatierung

Westfale: Die Seite wurde neu angelegt: „Um eine Fahrzeuggrafik in LstSim einbinden zu können, muss sie zuvor mitsamt den animierbaren Blaulichtern in eine SVG-Datei ('''S'''kalierbare '''V'''ektor''…“

2014-12-24T14:55:51Z

Die Seite wurde neu angelegt: „Um eine Fahrzeuggrafik in LstSim einbinden zu können, muss sie zuvor mitsamt den animierbaren Blaulichtern in eine SVG-Datei ('''S'''kalierbare '''V'''ektor''…“

Neue Seite

Um eine Fahrzeuggrafik in LstSim einbinden zu können, muss sie zuvor mitsamt den animierbaren Blaulichtern in eine SVG-Datei ('''S'''kalierbare '''V'''ektor'''G'''rafik) eingebettet werden. Dieses Tutorial demonstriert die Vorgehensweise.

Pro Grafik nimmt diese Vorbereitung nur wenige Minuten Zeit in Anspruch. Nötig sind dazu ein Zeichenprogramm (z.B. [http://getpaint.net Paint.NET] oder [http://gimp.org GIMP]) und ein Vektorgrafikprogramm (z.B. [http://inkscape.org Inkscape]). Die genannten Programme sind kostenlos erhältlich.

== Zuschnitt ==
Wie im Artikel [[Fahrzeuggrafik einsenden]] zu lesen ist, muss die Grafik randlos sein. Falls sie das nicht ist, muss die Grafik vorher entsprechend beschnitten werden. Dies geht mit jedem gängigen Grafikprogramm, exemplarisch seinen hier Paint.NET und GIMP genannt.

=== Vorgehen mit Paint.NET ===
[[Bild:SVG-Tut_Zuschnitt_pdn_1.png|center|mini|300px|Die Ursprungsgrafik]]
Dies ist die Ausgangsgrafik, wie sie sich in Paint.NET darstellt. Wie man sieht, ist rund um das Fahrzeug noch Leerraum vorhanden. Dieser wird folgendermaßen entfernt:

Zauberstab auswählen ('''Shift+S''') und die Toleranz auf 0% einstellen. Danach in die transparente Fläche rund um das Fahrzeug klicken.

[[Bild:SVG-Tut_Zuschnitt_pdn_2.png|center|mini|300px|Transparente Umgebung ist markiert]]

Im Menü '''Bearbeiten -> Auswahl umkehren''' wählen oder '''Strg+I''' drücken. Jetzt ist nur das Fahrzeug, nicht aber die transparente Fläche rund um das Fahrzeug markiert.

[[Bild:SVG-Tut_Zuschnitt_pdn_3.png|center|mini|300px|Markierung invertiert]]

Die Funktion '''Bild -> Auf Markierung zuschneiden''' ('''Strg+Shift+X''') schneidet nun alles weg, was nach dem vorigen Schritt nicht markiert war. Damit ist die Grafik "randlos" und für das weitere Vorgehen vorbereitet. Abschließend muss das Bild natürlich noch gespeichert werden.

[[Bild:SVG-Tut_Zuschnitt_pdn_4.png|center|mini|300px|Die beschnittene Grafik]]

=== Vorgehen mit GIMP ===
[[Bild:SVG-Tut_Zuschnitt_gimp_1.png|center|mini|300px|Die Grafik im Ausgangszustand]]
Hier wieder die Grafik im Ausgangszustand.

Zauberstab-Werkzeug auswählen und im Werkzeugkasten den Schwellwert auf 0,0 setzen. Danach in die transparente Fläche rund um das Fahrzeug klicken.

[[Bild:SVG-Tut_Zuschnitt_gimp_2.png|center|mini|300px|Markierung]]

Die Funktion '''Auswahl -> Invertieren''' im Menü anklicken oder '''Strg+I''' drücken. Anschließend '''Bild -> Auf Auswahl zuschneiden''' wählen und das Ergebnis abspeichern.

[[Bild:SVG-Tut_Zuschnitt_gimp_3.png|center|mini|300px|Die beschnittene Grafik]]

== Einbinden der Blaulichter mit Inkscape ==

Zunächst wird Inkscape geöffnet. Standardmäßig ist in der Dokumentvorlage bereits eine Ebene vorhanden. Da sie bei der Animation nur hinderlich ist, wird sie zunächst entfernt. Dies geschieht mittels '''Ebene -> Aktuelle Ebene löschen'''.

[[Bild:SVG-Tut_01.png|center|mini|300px|Die überflüssige Ebene wird gelöscht]]

Als erstes wird die Fahrzeuggrafik in das Dokument geladen. Dazu im Menü '''Datei -> Importieren''' auswählen (oder '''Strg+I''' drücken) und die gewünschte Datei laden. Es erscheint das unten stehende Dialogfenster. In diesem muss die Option "einbetten" gewählt werden.

''Hinweis: Es ist auch möglich, die Grafik per Copy&Paste aus dem Zeichenprogramm zu importieren. Dies funktioniert jedoch nur, solange man in Inkscape selbst nichts in die Zwischenablage kopiert.''

[[Bild:SVG-Tut_02.png|center|mini|300px|Dialogfenster beim Import der PNG-Grafik]]

[[Bild:SVG-Tut_03.png|center|mini|300px|Inkscape mit der eingebetteten Grafik]]

Nun werden die animierbaren Blaulichter über das Fahrzeug gelegt. Dazu wird [https://lstsim.de/misc/Blaulicht.svg diese] Grafik verwendet. Diese wird wie schon die Fahrzeuggrafik importiert oder in Inkscape geladen und mittels Kopieren/Einfügen in die Datei geladen.

Das Blaulicht schiebt man nun über die Blaulichter des Fahrzeuges und zieht es mit den Eckmarkern auf eine passende Größe. Beim Vergrößern sollte man die '''Strg'''-Taste gedrückt halten, um das Seitenverhältnis beizubehalten.

[[Bild:SVG-Tut_04.png|center|mini|300px|Das erste Blaulicht]]

Damit das blinkende Blaulicht im Spiel überhaupt zu sehen ist, muss es recht groß sein. Bedenke: im Spiel wird die Grafik weniger als 100 Pixel breit sein! Um eine Vorstellung vom Aussehen im Spiel zu bekommen, empfiehlt es sich, entsprechend weit herauszuzoomen.

[[Bild:SVG-Tut_05.png|center|mini|300px|So siehts von weitem aus]]

Nachdem eine passende Größe gefunden ist, kann das Blaulicht mit '''Strg+D''' dupliziert werden und das Duplikat an die Stelle des Heckblaulichts geschoben werden.

[[Bild:SVG-Tut_06.png|center|mini|300px|Noch ein Blaulicht]]

Und auch die Frontblitzer werden in der gleichen Art und Weise erstellt, nur etwas verkleinert. Ebenso die bei diesem Fahrzeug vorhandenen Intersection Lights.

[[Bild:SVG-Tut_07.png|center|mini|300px|... und noch mehr Lampen]]

Damit die Grafik später im Spiel korrekt animiert wird, müssen den Einzelteilen (Fahrzeug und Blaulichter) IDs zugewiesen werden. Hierzu wählt man zunächst das Fahrzeug an, klickt dann mit der '''rechten''' Maustaste und wählt '''Objekteigenschaften''' (alternativ:'''Strg+Shift+O'''). Darauf erscheint ein kleines Fenster. In diesem trägt man unter '''ID-Kennung''' den Wert '''"car"''' für das Fahrzeug ein und klickt auf '''Setzen'''. _Der Name "car" ist wichtig, da anhand dieser ID später die Größe der Grafik bestimmt wird!_

[[Bild:SVG-Tut_08.png|center|mini|300px|Kontextmenü]]
[[Bild:SVG-Tut_09.png|center|mini|300px|ID "car"]]

Auch die Blaulicht-Objekte sollten eine sinnvolle ID haben, mit den vorgegebenen Namen kann man in der Regel nicht viel anfangen. Über diese IDs werden später die Blaulichter ausgewählt, die in den jeweiligen Animationsphasen leuchten sollen. Daher sollte man die IDs so wählen, dass man weiß, wovon die Rede ist. Im Beispiel sind die Blaulichter mit ''BL_'' und einem passenden Zusatz bezeichnet.

[[Bild:SVG-Tut_10.png|center|mini|300px|Objekte mit ihren IDs]]

Schließlich muss noch die Größe der SVG angepasst werden. Beim Start von Inkscape war auf der Zeichenfläche ein schwarzer Rahmen zu sehen. Dieser stellt den sichtbaren Bereich der Grafik dar. Um dieses Areal auf die korrekte Größe zu bringen, klickt man zunächst ins "Nichts", so dass kein Objekt markiert ist. Alternativ geht auch '''Strg+A''', um alle Objekte auszuwählen. Danach ruft man '''Datei -> Dokumenteneinstellungen''' auf oder drückt '''Strg+Shift+D'''. Daraufhin erscheint ein Dialogfenster. Im Tab "Seite" klickt man auf den Punkt '''"Ändern der Seitengröße auf Inhalt"'''. Danach können die Umrandungen eingestellt werden, diese belässt man allseitig bei 0,00 und klickt nur auf '''"Seite in Auswahl einpassen"'''. Anschließend kann das Fenster wieder geschlossen werden.

[[Bild:SVG-Tut_11.png|center|mini|300px|Zwei Klicks und die Größe ist eingestellt]]
[[Bild:SVG-Tut_12.png|center|mini|300px|Fertig!]]

Wenn das geschafft ist, ist die Grafik fertig und kann als SVG abgespeichert werden.

=== Tipps zum Schluss ===

* Es ist möglich, Blaulichter aus einer fertigen SVG in eine neue Grafik zu kopieren. Die IDs der Blaulichter werden dabei übernommen, lediglich die ID "car" für das Fahrzeug muss dann noch gesetzt werden.
* Um die korrekte Position des Blaulicht-Objektes zu finden, kann man selbiges mit der Taste '''[Ende]''' unter die Fahrzeuggrafik legen. Nachdem das Blaulicht positioniert ist, wird es mit '''[Pos1]''' wieder nach vorn geholt. Dies funktioniert natürlich nur, wenn das Blaulicht nicht gerade mitten auf der Seitenwand sitzt.

[[Kategorie:Erklärung]]

@@ Zeile 34: / Zeile 34: @@
 [[Bild:SVG-Tut_Zuschnitt_gimp_3.png|center|mini|300px|Die beschnittene Grafik]]
-== Einbinden der Blaulichter mit Inkscape ==
+== Anbringen der Blaulichtanimationen mit Inkscape ==
 Zunächst wird Inkscape geöffnet. Standardmäßig ist in der Dokumentvorlage bereits eine Ebene vorhanden. Da sie bei der Animation nur hinderlich ist, wird sie zunächst entfernt. Dies geschieht mittels '''Ebene -> Aktuelle Ebene löschen'''.
@@ Zeile 84: / Zeile 84: @@
 Wenn das geschafft ist, ist die Grafik fertig und kann als SVG abgespeichert werden.
-=== Tipps zum Schluss ===
+=== Tipps ===
 * Es ist möglich, Blaulichter aus einer fertigen SVG in eine neue Grafik zu kopieren. Die IDs der Blaulichter werden dabei übernommen, lediglich die ID "car" für das Fahrzeug muss dann noch gesetzt werden.
 * Um die korrekte Position des Blaulicht-Objektes zu finden, kann man selbiges mit der Taste '''&#91;Ende&#93;''' unter die Fahrzeuggrafik legen. Nachdem das Blaulicht positioniert ist, wird es mit '''&#91;Pos1&#93;''' wieder nach vorn geholt. Dies funktioniert natürlich nur, wenn das Blaulicht nicht gerade mitten auf der Seitenwand sitzt.
 [[Kategorie:Erklärung]]

← Nächstältere Version	Version vom 25. Dezember 2014, 10:01 Uhr
(kein Unterschied)

← Nächstältere Version	Version vom 25. Dezember 2014, 09:49 Uhr
(kein Unterschied)

← Nächstältere Version	Version vom 25. Dezember 2014, 09:48 Uhr
(kein Unterschied)

@@ Zeile 66: / Zeile 66: @@
 [[Bild:SVG-Tut_07.png|center|mini|300px|... und noch mehr Lampen]]
-Damit die Grafik später im Spiel korrekt animiert wird, müssen den Einzelteilen (Fahrzeug und Blaulichter) IDs zugewiesen werden. Hierzu wählt man zunächst das Fahrzeug an, klickt dann mit der '''rechten''' Maustaste und wählt '''Objekteigenschaften''' (alternativ:'''Strg+Shift+O'''). Darauf erscheint ein kleines Fenster. In diesem trägt man unter '''ID-Kennung''' den Wert '''"car"''' für das Fahrzeug ein und klickt auf '''Setzen'''. _Der Name "car" ist wichtig, da anhand dieser ID später die Größe der Grafik bestimmt wird!_
+Damit die Grafik später im Spiel korrekt animiert wird, müssen den Einzelteilen (Fahrzeug und Blaulichter) IDs zugewiesen werden. Hierzu wählt man zunächst das Fahrzeug an, klickt dann mit der '''rechten''' Maustaste und wählt '''Objekteigenschaften''' (alternativ:'''Strg+Shift+O'''). Darauf erscheint ein kleines Fenster. In diesem trägt man unter '''ID-Kennung''' den Wert '''"car"''' für das Fahrzeug ein und klickt auf '''Setzen'''.
 [[Bild:SVG-Tut_08.png|center|mini|300px|Kontextmenü]]