SVG? Wieso nutzt es keiner?

  • EDIT: Wegen Animationen gibt es erstmal ein Problem das zu lösen gilt. SVG werden entweder als Bild angefügt oder als Code (im Spiel). Vorerst mal Part zu Animationen gestrichen.


    Hallo beisammen,


    oftmals kommt die Frage im Forum 'kannst du mir die Grafik 10% kleiner machen' o.a.
    Nachdem ich mitbekommen hab das hier 90% mit Gimp oder Paint.net arbeitet - frag ich mich wieso nicht ein Vektorgrafik Programm wie Inkscape oder Illustrator (gibt sicher noch weitere)?


    Vorteile Vektorgraphik:
    - Keine Bildpunkte sondern Bildlinien
    - aus einem 1cm Bild könnte man eine 10m Leinwand drucken
    - flexible Vergrößerung oder Verkleinerung ohne Verluste
    - gestochen scharfe Bilder
    - 'Paintings' leicht änderbar, ebenso ohne Verlust
    - Kann man als Rohmaterial verkaufen


    Ich rede mal mit Sebastian, möglich ist es auch SVG hochzuladen, mittlerweile mag das jeder Browser :)


    Eigentlich möchte ich euch dazu motivieren, langsam auf SVG umzusteigen - ich werde mal ein ganzes Grafikset als Vektor machen.


    Was würde es euch bringen:
    - Einmal die Arbeit für alle verschiedene Größen
    - so oft wie möglich das Painting ändern ohne eine Blanko haben zu müssen
    - egal wie Groß das Quellbild ist, kann man das Ergebnis vergrößern
    - Programme wie Illustrator können Bilder 'scannen' & größten Teils der Kanten bereits als Pfade umwandeln (weniger aufwand)
    - egal in welchem Winkel das Quellbild fotografiert worden ist - im Ergebnis man kann das sehr leicht beheben (jedes Bild hätte dann den selben Winkel)
    - man kann Fahrzeuge nach Fahrgestell bauen & die Aufbauten ändern, da man einfach Teile sehr schnell & leicht wieder entfernen & hinzufügen kann
    - man kann immer noch in PNG oder sowas exportieren
    - ihr könnt ein Watermark einfügen, das nur entfernt wird wenn diese Grafik in LSS genutzt wird (& ja, alles ist mit gewissen Knowhow zu entfernen, aber viele hält es ab)


    Nachteile:
    - wohl nur die Umstellung auf ein neues Programm, bei dem ich aber auch gerne helfen werde
    - Leute mit alten Browsern können das nicht nutzen, ist aber mit .apng das selbe


    Bezüglich der verschiedenen Größen & noch etwas feines:
    - ich würde ein Script/die Funktion schreiben das dem User erlaubt, je nach Lust & Laune die Grafiken seiner Fahrzeuge (oder auch Gebäude/Icons) die Größe einzustellen
    - Animationen ohne APNG & verschiedene Animationsfolgen die der User ebenso nach Lust & Laune auswählen kann *
    - Reifen könnten animiert werden *
    - wer's verspielt möchtet, dem könnte man auch noch Abgaseffekte einbauen *
    - es gibt noch so viel weiteres, man könnte es noch extrem ausweiten wie z.B. (wenn FZ Status 1, dann füge ein weiteres SVG Element ein oder was auch immer, nur als Möglichkeit - was besseres fällt mir gerade nicht ein) *


    * bzgl der Animationen, die einzige Arbeit die auf euch zu kommt, bei zB. Blaulicht oder Reifen animation ist - das diese Beiden Elemente eine ID benötigen um sie klar zu identifizieren zu können.
    Jede SVG Grafik kann man im TextEditor öffnen, weil es GANZ GROB gesagt nichts anderes als HTML ist.


    Bevor jetzt jemand denkt, toll wieder ein Script das ich installieren muss & dann lädt es noch lange - NOPE dem ist nicht so, es würde dann auch ins Spiel übernommen werden.


    Jedoch müsstet ihr
    1. auch mal mit Vektor spielen, anfangen umzusteigen
    2. müsstet ihr eine Kleinigkeit an dem SVG ändern, zu dem ich noch eine Anleitung machen werde (muss auch mal mit Inkscape wieder arbeiten & weitere Vektor Programme testen)


    Beispiel von SVG:
    http://feuerwehr.lost.design


    Eines meiner aktuellen Projekte (logischerweise noch nicht fertig - ebenso der Grund warum ich gerade nicht am LSS Manager arbeiten kann)
    - man kann die Fahrzeuge vergrößern (indem man auf das Fahrzeug klickt)
    - die Rollo können geöffnet (bei klick auf Rollo auch wenn das Fahrzeug nicht vergrößert ist) geschlossen werden (Tore sind aktuell PNG & nur Fahrzeuge sind SVG - wird geändert)
    - es gibt Animationen!


    Ich werde noch die Blaulicht Animation umsetzen, das ihr das auch gleich sehen könnt und weiteres einbauen. Eventuell auch schon mit Auswahl der verschiedenen Animationen. Let's see.



    Das war's erstmal. Würde mich echt über Feedback freuen, ob die positiven Seiten überzeugen können.
    Wäre cool wenn wir das gemeinsam starten könnten - denke das es für jeden was bringt & wer seine Blanko sauber gezeichnet hat, kann sie in einem klick umwandeln (solange Programme außer Illustrator diese Funktion auch haben, wenn nicht erkläre ich mich bereit es mit paar Grafiken zu testen)



    Liste verschiedener Vectorgrafikprogramme:
    https://en.wikipedia.org/wiki/…f_vector_graphics_editors

  • Grundsätzlich a gute Sach...
    Hab bereits vor einiger Zeit angefangen mich in Illustrator einzuarbeiten.


    Ich find den Aufwand für uns "Laien" allerdings zu gross.
    Es wäre sinvoll, dass die User sich anhand eines "Baukastens" die Fahrzeuge zusammenbasteln können.


    Wenn ich ein Foto nehme und es mit einem Programm in eine Grafik umwandle, hat das für mich nichtsmehr mit zeichnen zu tun!
    Wir machen das alles nur nebenbei und aus Spass...finde nicht, das wir da a Wissentschaft draus machen müssen.

  • Ich kann ein Illustrator Layout machen & aller Anfang ist schwer. Inkscape ist z.B. kostenlos & leicht zu bedienen.
    Das mit dem Umwandeln meinte ich nur für die 'faulen' oder diejenigen die meinen 'ne ich zeichne nicht nochmal alles neu, um halt den umstieg zu erleichtern'.


    Die Grafiker die viele Grafiken hier schon gemacht haben, werden damit klar kommen - für alle anderen mache ich Tutorials.
    Das mit dem Baukasten ist dann sehr leicht machbar - habe euch alle eh schon angeschrieben (vor Paar Wochen wegen dem Grafikset Thema).


    Wenn wir dann noch svg nutzen würden, könnten wir einen Fahrzeug Generator schreiben, bzw ich schreibe - ihr zeichnet :)

  • Wow.
    Wenn ich das jetzt richtig verstanden habe kann ich also ein Bild von einem Auto machen und dann entsteht eine Grafik draus. Korrekt?!
    Dann speichern als PNG und später über den bekannten Weg animieren.
    Wenn das so laufen würde wäre das natürlich eine feine Sache. Ich könnte endlich selber die Autos umsetzen die ich noch haben will.
    Allerdings will ich keine Fotos am Ende auf der Karte fahren haben sondern eben "Zeichnungen".

  • Wow.
    Wenn ich das jetzt richtig verstanden habe kann ich also ein Bild von einem Auto machen und dann entsteht eine Grafik draus. Korrekt?!
    Dann speichern als PNG und später über den bekannten Weg animieren.
    Wenn das so laufen würde wäre das natürlich eine feine Sache. Ich könnte endlich selber die Autos umsetzen die ich noch haben will.
    Allerdings will ich keine Fotos am Ende auf der Karte fahren haben sondern eben "Zeichnungen".

    Gut, du musst natürlich in dem Fall ein Bild haben mit genug Kontrast & im schlimmsten Fall noch einiges nachbearbeiten. Ich kann gerne mal paar tests machen, wie gut es geht.
    Ganz ohne Arbeit geht es natürlich nicht ^^


    Gut wäre es von PNG gesamt weg zu kommen. Klar jedem das seine, aber PNG würde überflüssig werden.

  • Finde es wie gesagt übertrieben für die Verwendung hier im Spiel.

  • Kann man svg denn genau so easy für jedermann animieren?!
    Mir würde ein Programm weiterhelfen welches die groben Linien für ein Fahrzeug erstellen kann. Vielleicht auch die ein oder andere Feinheit. "Lackieren" kann ich denke selber. Für mich macht nur die Fahrzeugform Probleme.
    Außerdem animiere ich auch selbst mit animizer.net.

  • Finde es wie gesagt übertrieben für die Verwendung hier im Spiel.

    Kann ich nicht ganz nachvollziehen - es sind die gleichen Schritte, man erhält ein qualitativ besseres Bild & es würde sehr viel neues mit sich bringen.
    Aber ich kann ja keinen Zwingen.



    Kann man svg denn genau so easy für jedermann animieren?!
    Mir würde ein Programm weiterhelfen welches die groben Linien für ein Fahrzeug erstellen kann. Vielleicht auch die ein oder andere Feinheit. "Lackieren" kann ich denke selber. Für mich macht nur die Fahrzeugform Probleme.
    Außerdem animiere ich auch selbst mit animizer.net.

    Für LSS würde es dann die Animationen geben zum auswählen - würde auch nur in LSS animiert sein. Wenn man das selbst für eine Website nutzen möchte, stelle ich es gerne zur Verfügung.
    Ansonsten muss man in dem Fall auf apng greifen.


    Illustrator erkennt Kanten sehr gut, kann daraus Pfade machen - eben die Kanten die du benötigst. Einen Vorteil hab ich total vergessen - Performance! Es geht 100x schneller weil es viel kleinere Grafiken sind (in der Datei-Größe)

  • Also dann wäre es für mich ein interessantes Programm um erstmal ein Bild zu erstellen.
    Danach würde ich es aber als APNG speichern zwecks Animation. Daher mein Fazit:


    Programm als solches zum erstellen werde ich mir mal anschauen. Vielleicht kann ich dann meine Grafiken wenn es mich zufrieden stellt selbst erstellen. Hab Probleme Formen zu zeichnen. Wenn es dabei hilft dann top.


    SVG Erweiterung ist für die die es gerne hätten sicher bei LSS sehr interessant und wenn es kein Aufwand macht und evtl zusätzlich angeboten wird bestimmt eine super Sache. Aber für mich ganz klar kein Muss.

  • Illustrator CS2 hab ich hier, und Corel Draw auch


    mit Corel arbeite ich lieber, siehe auch:


    [Blockierte Grafik: http://up.picr.de/21479645lu.jpg]


    das mit dem Wasserzeichen wäre nützlich,
    allerdings graut es mir auch irgendwo davor hunderte Autos in SVG zu machen,
    ist halt die Frage, ob es sich lohnt (da ich ja auch nur eine Größe anbiete)

  • Yay wenigstens einer der mich versteht :D & ich hab mir bereits gedacht, das es ein riesen Problem gibt wegen der aktuellen Fahrzeuge.
    Der User könnte ja deine Grafiken dann später (über einen Slider) in der Größe selbst bestimmen.

  • @DarkPrince ist das ne Tatra??

    Nein, das sind 2 Tatra ;)


    einmal oben in einem modernisierten Zustand (noch nicht die letzte Version, da müsste z.B. noch ein Einholmstromabnehmer drauf) und unten die Version der 80er Jahre. Sind aber beide auf dem Bild noch lange nicht fertig (Inneneinrichtung, Fahrgestelle etc)

  • Deswegen rede ich dieses Thema an, weil es mehr Vor als Nachteile bringt.Ich werde jedenfalls ein ganzes SVG Set zeichnen.

    Und Sebastian müsste/würde dann ne Einstellung (z.B. in der Leitstelle) einfügen, wo man die Endgröße selber festlegt?
    Sprich der läd das Set und skaliert gleichzeitig?

  • Und Sebastian müsste/würde dann ne Einstellung (z.B. in der Leitstelle) einfügen, wo man die Endgröße selber festlegt?Sprich der läd das Set und skaliert gleichzeitig?

    Ich hab ihn drum gebeten SVG zum testen zu aktivieren. Ich habe ihm auch angeboten die Funktionen, um die Größe der Bilder sowie die ganzen verschiedenen Animationen die man dann wählen kann, zu schreiben. Aber ja es wäre dann irgendwo zum einstellen.


    Mein Gedanke war beim Hochladen einer einzelnen FZ Grafik:
    - eine Datei statt 2
    - Auswahlmöglichkeit von bspw. 3 Animationen der Blaulichter (was halt fancy ist mit math.random kann man zufällig bestimmen, wie das Licht blinken würde & hätte immer eine andere Animation oder man wählt halt eine gleich ablaufende - bei 3-5 verschiedenen kann man schon Abwechslung ins Spiel bringen - weil man ja bei jedem FZ eine andere wählen könnte - bzgl Rundlicht bin ich mir noch nicht sicher wie ich es umsetze, aber es wird ne Lösung geben)


    Bei Grafiksets, entweder Global für das Grafikset das man wählt, einstellbar oder eben pro Fahrzeug.


    Ich komme ja den Usern eh schon sehr viel entgegen, ich kann auch gerne die ID's für die Blaulichter in der SVG setzen - aber es ist keine schwierigkeit, bei Illustrator ist der Ebenen Name die ID des Elements in SVG - bei den anderen Programmen muss ich testen!

  • Nein, das sind 2 Tatra ;)
    einmal oben in einem modernisierten Zustand (noch nicht die letzte Version, da müsste z.B. noch ein Einholmstromabnehmer drauf) und unten die Version der 80er Jahre. Sind aber beide auf dem Bild noch lange nicht fertig (Inneneinrichtung, Fahrgestelle etc)

    sieht auf alle Fälle jetzt schon mega geil aus. Die Straßenbahn aus meinen Kindertagen. ;)
    Komme ja aus Dresden da sind die massenhaft gefahren.

  • das klingt richtig gut ehrlich gesagt. Natürlich müsste jedes Fahrzeug unter Fahrzeug Bearbeiten einzeln Einstellbar sein. Das wäre echt grandios.
    Das einzige was ich hier als Problem sehe sind die verschiedenen Größen der Grafiken. Manche lassen 5 Pixel transparenten Bereich über den Fahrzeugen manche 10 oder mehr. Wie will man da eine einheitliche Größe einstellen ?! Ist ja jetzt schon schwierig. Ich habe die meisten Bilder der RTW glaube auf eine Höhe von 35 Pixel skaliert. (Kann evtl auch ein anderer Wert sein) je nach Zeichner ist nun der RTW auf der Karte Größer oder kleiner, obwohl ich alle auf ein einheitsmass skaliert habe. Verstehst du was ich meine?!

  • Wegen umwandeln:


    Das ist das Ergebnis durch umwandeln wenn das Bild eine Hohe Qualität (12mp) & fast perfekt vorbereitet worden ist. Um daraus etwas gutes zu machen Bedarf es mindestens eine Stunde. Der einzige Vorteil vom umwandeln liegt darin, das es gut auf Blankos gehen würde.


    Hier müsste ich immernoch zeichnen. Zumindest würde es Leuten helfen, die sich schwertun die Kanten richtig nachzuziehen.
    Man kann vieles was stört säubern, aber man muss wissen was man macht + es geht meiner Erfahrung nach nur mit Illustrator.


    Dieses Programm kostet nunmal etwas, außer man weiß sich anders zu helfen :whistling:


    [Blockierte Grafik: https://i.imgur.com/VDSVdtt.png]
    [Blockierte Grafik: https://i.imgur.com/t80NUWg.png]
    [Blockierte Grafik: https://i.imgur.com/YJf6Edo.png]
    [Blockierte Grafik: https://i.imgur.com/8gVHXtv.png]
    [Blockierte Grafik: https://i.imgur.com/EMLvYGb.png]


    War mal so frei ein Blanko zu nehmen, das ich auf die schnelle gefunden hab. Beachtet aber das die Größe & Qualität dieses Blankos für den Arsch war ^^Also kam auch kein gutes Ergebnis raus - weil ich auch nur 200px x 200px hatte
    Fahrzeuggrafiken JonBen1704


    Man muss selbst da wahrscheinlich weil es keine gute Vorlage war, noch etwas machen. Sieht man ja, das die ganzen Kanten unsauber sind -


    [Blockierte Grafik: https://i.imgur.com/iyBvblN.png]
    [Blockierte Grafik: https://i.imgur.com/Yp5oNxm.png]


    Diese Kanten kann man beheben, wenn man die Blauen Punkte entfernt, die Kurven auslösen :D
    [Blockierte Grafik: https://i.imgur.com/0ftbkXv.png]


    DAS IST NUR DAS NACHZEICHNE ERGEBNIS, WENN MAN UMWANDELT MIT SCHLECHTER VORLAGE ^^


    Das sind SVG, die komplett von mir gezeichnet worden sind - ohne Umwandeln:
    [Blockierte Grafik: https://i.imgur.com/0pqo15C.png][Blockierte Grafik: https://i.imgur.com/limFysW.png]Die Ursprüngliche Größe ist 20px breit - 52kb (unkomprimiert). Das oben als einzel Fahrzeug ist von 20px auf 1600px vergrößert. Das spiel könnte ich jetzt auf 40.000px anwenden.