Wichtig: Benutzerleitstellen bitte in dieser Liste eintragen! Beim Erstellen eines Leitstellenartikels bitte diese Hinweise beachten.

Tutorial/Fahrzeuggrafiken: Unterschied zwischen den Versionen

Aus LstSim-Wiki
Wechseln zu: Navigation, Suche
K (Einbinden der Blaulichter mit Inkscape: Formatierung)
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 34: Zeile 34:
 
[[Bild:SVG-Tut_Zuschnitt_gimp_3.png|center|mini|300px|Die beschnittene Grafik]]
 
[[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'''.  
 
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.
 
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.
 
* 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.
 
* 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.
 +
 +
== Einbinden des Fahrzeuges in die Sim ==
 +
 +
[[Bild:SVG-Tut_13.png|center|mini|500px|Auffinden der Funktion]]
 +
Die Funktion zum Einbinden der Fahrzeuge wurde in die obere graue Navigationsleiste neben dem Leitstelleneditor eingefügt.
 +
 +
Nach dem öffnen sieht man zunächst seine bereits eingesendeten Fahrzeuge (Zumindest wenn man bereits welche eingesendet hat). Die Tabelle zeigt neben dem Dateinamen auch die wichtigsten Informationen zum Fahrzeug, und vor allem den aktuellen Einsendungsstatus:
 +
 +
* '''Neu''': In diesem Status können noch beliebige Bearbeitungen an der Grafik vorgenommen oder auch unten auf der Bearbeitungsseite wieder gelöscht werden.
 +
* '''Warten auf Bearbeitung''': Nachdem man "Grafik zur Überprüfung einsenden" angehakt und das Formular abgesendet hat, kann die Fahrzeuggrafik nicht mehr bearbeitet werden und erscheint beim Team zur Überprüfung.
 +
* '''Angenommen''': Die Grafik wurde ins Spiel eingefügt.
 +
* '''Abgelehnt''': Die Grafik wurde abgelehnt. Es sollte eine Begründung des Teams dabeistehen.
 +
 +
Ein klick auf "Neue Grafik einsenden" startet den ersten Schritt des Einsendeeditors.
 +
 +
[[Bild:SVG-Tut_14.png|center|mini|500px|Schritt 1 des Einsendeformulars]]
 +
 +
In diesem Schritt werden zunächst die vorbereitete SVG Datei zum hochladen ausgewählt, und eine Fahrzeughöhe oder -länge angegeben. Idealerweise sollten beide Maße angegeben sein. Auch muss man versichern, alle Rechte an dem Bild zu haben, sowie lstsim.de erlauben diese Grafik zu verwenden.
 +
 +
⚠ ''Hinweis: Fundgruben für Fahrzeuglänge können [http://bos-fahrzeuge.info bos-fahrzeuge.info], die Webseiten der Fahrzeughersteller, oder die Websiten der Aufbauhersteller sein.''
 +
 +
Der Klick auf den Button "Absenden" führt zu Schritt 2
 +
 +
Das nun folgende Formular muss wahrheitsgemäß ausgefüllt werden. Daten, welche noch nicht vorgegeben sind (etwa ein noch nicht eingepflegtes Fahrzeugmodell) können weiter unten im Feld "Kommentar" ergänzt werden.
 +
 +
Im Leitstellenauswahlfeld sind spielbare offizielle und empfohlene Leitstellen auswählbar. Andere Leitstellen können im Feld für Zusatzinformationen angegeben werden.
 +
 +
Der letzte Punkt im Formular heißt "Grafik zur Überprüfung einsenden". Diesen vorerst noch nicht auswählen, da vorher noch die Animation erstellt werden muss. Diese werden unterhalb des Formulares eingestellt.
 +
 +
[[Bild:SVG-Tut_15.png|center|mini|500px|Frames generieren]]
 +
 +
Die Fahrzeugbilder bestehen aus verschiedenen Bildern (mit und ohne "Blaulichtblitze"), welche nacheinander gezeigt werden, sogenannten "Frames". Diese werden hier richtig eingestellt.
 +
 +
Die Reihenfolge und Auswahl der Blaulichter in den einzelnen Frames sollte dem allgemeinen LstSim-Stil folgen. Es sollte nur im Ausnahmefall, z. B. bei einer ungewöhnlichen Blaulichtanzahl und -position davon abgewichen werden. Bedenkt auch, dass eine größere Anzahl von Frames am Ende auch die Dateigröße der Grafik am Ende wachsen lässt. Hier ist eine Übersicht der verwendeten Stile bei LstSim:
 +
 +
Fahrzeuge mit zwei Blaulichtern auf dem Dach
 +
* 1. Frame: Keine Blaulichter sichtbar.
 +
* 2. Frame: Beide Blaulichter auf dem Dach sichtbar.
 +
* 3. Frame: Keine Blaulichter sichtbar.
 +
 +
Fahrzeuge mit zwei Blaulichtern auf dem Dach sowie Frontblitzern
 +
* 1. Frame: Keine Blaulichter sichtbar.
 +
* 2. Frame: Beide Blaulichter auf dem Dach sichtbar. Frontblitzer nicht sichtbar.
 +
* 3. Frame: Blaulichter auf dem Dach nicht sichtbar. Frontblitzer sichtbar.
 +
 +
Sonstige Blaulichtkonfigurationen sollten sich ungefähr an den beiden genannten Stilen orientieren.
 +
 +
[[Bild:SVG-Tut_16.png|center|mini|500px|Eingestellte Frames]]
 +
 +
*Das Fahrzeug soll in allen Animationsschritten zu sehen sein. Somit wird das Objekt "car" in allen Frames die wir benötigen aktiviert.
 +
*Frame 1 soll den Zustand des Fahrzeuges ohne Blaulichter zeigen, somit bleibt nur "car" aktiviert
 +
*Frame 2 soll beide Dachblaulichter zeigen, somit wird "BL_Front" und "BL_Heck" zusätzlich aktiviert
 +
*Frame 3 soll Frontblitzer zeigen, somit wird "BL_Frontblitzer" und "BL_Intersection" zusätzlich aktiviert
 +
 +
Um die Einstellungen testen zu können muss zunächst auf "Speichern" gedrückt werden. Die Seite läd nun neu mit den geänderten Frameseinstellungen.
 +
 +
⚠ ''Hinweis: Es kann passieren das nach dem Klick auf "Speichern" die neuen Einstellungen noch nicht im Bild sichtbar sind. Dann ist es notwendig den Browser z.B. mittels der Taste F5 neu zu laden.''
 +
 +
Sobald die Animation korrekt funktioniert, und das Formular vollständig ausgefüllt ist, kann im Formular das Häckchen bei "Grafik zur Überprüfung einsenden" gesetzt werden. Nach dem anschließendem Speichern ist es nicht mehr möglich Änderungen am Fahrzeug durchzuführen. Das Fahrzeugbild wird nun durch das Team überprüft, und später entweder freigegeben, oder eben nicht.
 +
 +
== Weitere Informationen ==
 +
*[[Fahrzeuggrafik einsenden]]
 +
*[[Fahrzeuggrafiken]]
  
 
[[Kategorie:Erklärung]]
 
[[Kategorie:Erklärung]]

Aktuelle Version vom 26. Dezember 2014, 17:59 Uhr

Um eine Fahrzeuggrafik in LstSim einbinden zu können, muss sie zuvor mitsamt den animierbaren Blaulichtern in eine SVG-Datei (Skalierbare VektorGrafik) 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. Paint.NET oder GIMP) und ein Vektorgrafikprogramm (z.B. Inkscape). Die genannten Programme sind kostenlos erhältlich.

Zuschnitt[Bearbeiten]

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[Bearbeiten]

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.

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.

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.

Die beschnittene Grafik

Vorgehen mit GIMP[Bearbeiten]

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.

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.

Die beschnittene Grafik

Anbringen der Blaulichtanimationen mit Inkscape[Bearbeiten]

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.

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.

Dialogfenster beim Import der PNG-Grafik
Inkscape mit der eingebetteten Grafik

Nun werden die animierbaren Blaulichter über das Fahrzeug gelegt. Dazu wird 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.

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.

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.

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.

... 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! Ist eine ID dieses Namens nicht vorhanden, wird das Einsendeformular eine Fehlermeldung ausgeben.

Kontextmenü
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.

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.

Zwei Klicks und die Größe ist eingestellt
Fertig!

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

Tipps[Bearbeiten]

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

Einbinden des Fahrzeuges in die Sim[Bearbeiten]

Auffinden der Funktion

Die Funktion zum Einbinden der Fahrzeuge wurde in die obere graue Navigationsleiste neben dem Leitstelleneditor eingefügt.

Nach dem öffnen sieht man zunächst seine bereits eingesendeten Fahrzeuge (Zumindest wenn man bereits welche eingesendet hat). Die Tabelle zeigt neben dem Dateinamen auch die wichtigsten Informationen zum Fahrzeug, und vor allem den aktuellen Einsendungsstatus:

  • Neu: In diesem Status können noch beliebige Bearbeitungen an der Grafik vorgenommen oder auch unten auf der Bearbeitungsseite wieder gelöscht werden.
  • Warten auf Bearbeitung: Nachdem man "Grafik zur Überprüfung einsenden" angehakt und das Formular abgesendet hat, kann die Fahrzeuggrafik nicht mehr bearbeitet werden und erscheint beim Team zur Überprüfung.
  • Angenommen: Die Grafik wurde ins Spiel eingefügt.
  • Abgelehnt: Die Grafik wurde abgelehnt. Es sollte eine Begründung des Teams dabeistehen.

Ein klick auf "Neue Grafik einsenden" startet den ersten Schritt des Einsendeeditors.

Schritt 1 des Einsendeformulars

In diesem Schritt werden zunächst die vorbereitete SVG Datei zum hochladen ausgewählt, und eine Fahrzeughöhe oder -länge angegeben. Idealerweise sollten beide Maße angegeben sein. Auch muss man versichern, alle Rechte an dem Bild zu haben, sowie lstsim.de erlauben diese Grafik zu verwenden.

Hinweis: Fundgruben für Fahrzeuglänge können bos-fahrzeuge.info, die Webseiten der Fahrzeughersteller, oder die Websiten der Aufbauhersteller sein.

Der Klick auf den Button "Absenden" führt zu Schritt 2

Das nun folgende Formular muss wahrheitsgemäß ausgefüllt werden. Daten, welche noch nicht vorgegeben sind (etwa ein noch nicht eingepflegtes Fahrzeugmodell) können weiter unten im Feld "Kommentar" ergänzt werden.

Im Leitstellenauswahlfeld sind spielbare offizielle und empfohlene Leitstellen auswählbar. Andere Leitstellen können im Feld für Zusatzinformationen angegeben werden.

Der letzte Punkt im Formular heißt "Grafik zur Überprüfung einsenden". Diesen vorerst noch nicht auswählen, da vorher noch die Animation erstellt werden muss. Diese werden unterhalb des Formulares eingestellt.

Frames generieren

Die Fahrzeugbilder bestehen aus verschiedenen Bildern (mit und ohne "Blaulichtblitze"), welche nacheinander gezeigt werden, sogenannten "Frames". Diese werden hier richtig eingestellt.

Die Reihenfolge und Auswahl der Blaulichter in den einzelnen Frames sollte dem allgemeinen LstSim-Stil folgen. Es sollte nur im Ausnahmefall, z. B. bei einer ungewöhnlichen Blaulichtanzahl und -position davon abgewichen werden. Bedenkt auch, dass eine größere Anzahl von Frames am Ende auch die Dateigröße der Grafik am Ende wachsen lässt. Hier ist eine Übersicht der verwendeten Stile bei LstSim:

Fahrzeuge mit zwei Blaulichtern auf dem Dach

  • 1. Frame: Keine Blaulichter sichtbar.
  • 2. Frame: Beide Blaulichter auf dem Dach sichtbar.
  • 3. Frame: Keine Blaulichter sichtbar.

Fahrzeuge mit zwei Blaulichtern auf dem Dach sowie Frontblitzern

  • 1. Frame: Keine Blaulichter sichtbar.
  • 2. Frame: Beide Blaulichter auf dem Dach sichtbar. Frontblitzer nicht sichtbar.
  • 3. Frame: Blaulichter auf dem Dach nicht sichtbar. Frontblitzer sichtbar.

Sonstige Blaulichtkonfigurationen sollten sich ungefähr an den beiden genannten Stilen orientieren.

Eingestellte Frames
  • Das Fahrzeug soll in allen Animationsschritten zu sehen sein. Somit wird das Objekt "car" in allen Frames die wir benötigen aktiviert.
  • Frame 1 soll den Zustand des Fahrzeuges ohne Blaulichter zeigen, somit bleibt nur "car" aktiviert
  • Frame 2 soll beide Dachblaulichter zeigen, somit wird "BL_Front" und "BL_Heck" zusätzlich aktiviert
  • Frame 3 soll Frontblitzer zeigen, somit wird "BL_Frontblitzer" und "BL_Intersection" zusätzlich aktiviert

Um die Einstellungen testen zu können muss zunächst auf "Speichern" gedrückt werden. Die Seite läd nun neu mit den geänderten Frameseinstellungen.

Hinweis: Es kann passieren das nach dem Klick auf "Speichern" die neuen Einstellungen noch nicht im Bild sichtbar sind. Dann ist es notwendig den Browser z.B. mittels der Taste F5 neu zu laden.

Sobald die Animation korrekt funktioniert, und das Formular vollständig ausgefüllt ist, kann im Formular das Häckchen bei "Grafik zur Überprüfung einsenden" gesetzt werden. Nach dem anschließendem Speichern ist es nicht mehr möglich Änderungen am Fahrzeug durchzuführen. Das Fahrzeugbild wird nun durch das Team überprüft, und später entweder freigegeben, oder eben nicht.

Weitere Informationen[Bearbeiten]