Freewar Map Designer - Canvas/Javascript - Bessere Steuerung und UI

[Montgomery Burns]

Wie ihr sicherlich wisst, gibt es ja ein von freewar selbst angebotenen Karteneditor.

Aus meiner Sicht ist dieser jedoch relativ unspektakulär und optisch, ohne beleidigend zu sein, eine absolute Schande. Zwar basiert der Style auf dem klassischen Freewar design. Jedoch ist es dennoch unübersichtlich und relativ komplex zu bedienen. Besonders bei großen Karten wird man schnell an einige Grenzen gelangen.

Daher habe ich mich mal hingesetzt und basierend auf dem Export-Resultat des vorhandenen Karteneditors einen neuen, eigenen Editor umgesetzt.



Dieser basiert auf Javascript und Canvas und unterstützt folgende Features:

- Hotkeys (N = Neues Feld, DEL = Ausgewähltes Feld löschen, 0 = Zoom zurücksetzen)
- Zoom via Scrollrädchen
- Soforteditierung der Felder ohne zwischenspeichern (Neuladen der Seite nicht nötig!)

Der Export erzeugt einen identischen JSON-Text basierend auf dem aktuellen Karteneditor, da ich vermute, dass Sotrax diese in dieser Form am besten nutzen kann.

Der Editor funktioniert komplett lokal und kann, wie ein normales Programm, eingesetzt werden, indem man die Index.html-Datei im Browser öffnet. Alternativ gibt es eine servervariante, welche PHP nutzt, um das iso-8859-1 charset zu erzwingen, falls es diesbezüglich Probleme gibt.

Ihr könnt das Paket hier runterladen und testen.

Das Projekt ist noch nicht fertig, da ich bezüglich existierender Kartenteile ein klein wenig Hilfe bräuchte. Der aktuelle Karteneditor bietet eine Liste bereits verfügbarer Kartenteile, welche ich gerne in das Tool mit einpflegen wollen würde. Jedoch würde ich aufgrund der Menge der Teile und der Sortierung selbiger wohl etwas durcheinanderkommen. Wer mir behilflich sein könnte, die Kartenteile zusammenzustellen und ggf. eine JSon-Datei anlegen könnte, welche Kartenteile in welche Kategorie gehören würden, wäre ich äußerst dankbar.

[Nyrea]

Also, dafür, dass der Karteneditor so furchtbar sein soll, benutzen ihn ziemlich viele Leute. ;)

Ich denke außerdem, dass es ziemlich unwahrscheinlich ist, dass in Zukunft jemals eine Karte eingebaut wird, die nicht mit dem Karteneditor von Freewar erstellt wurde. Liegt einfach daran, dass das Einbauen für die Admins dann quasi nur wenige Klicks sind.

Aber trotzdem gut, dass du dir die Mühe machst. Vielleicht nutzt es ja jemand und baut die Karte dann im Karteneditor von Freewar nach.

[bwoebi]

Was sind denn deine Beschwerden mit dem aktuellen Editor?

Eines der Ziele war halt, dass man die Karten serverseitig speichert, die Bilder dort hochgeladen sind usw.
U.a. komprimiert der Editor die Bilder, passt die Größe an wie nötig und speichert sie direkt auf dem Server, fertig fürs Einfügen (für uns).

Ich würde es ehrlich gesagt bevorzugen, wenn man den bestehenden Editor bedienbarer machen könnte (insofern er unbedienbar sein soll). Wenn du möchtest, kannst du mich dazu gerne per PN kontaktieren

[Sotrax]

Also ein eigenen Editor zu schreiben ist natürlich eine coole Idee vor allem, wenn man ihn in den vorhandenen importieren kann. Wenn du damit besser klarkommst und am Ende die karten in unseren Editor einfügst, hab ich damit kein Problem

Beim unserem Editor ist halt der riesige Vorteil, dass auch die Felder alle in im richtigen Format sind und ich die Karten direkt verwenden kann. Am Ende muss man sie also in jedem Fall in unserem Editor sein, damit ich sie verwenden kann.

(Ein anderer Vorteil ist natürlich, dass unserer Editor rein HTML basiert ist und daher nicht runtergeladen werden muss).

[Montgomery Burns]

Also ein eigenen Editor zu schreiben ist natürlich eine coole Idee vor allem, wenn man ihn in den vorhandenen importieren kann. Wenn du damit besser klarkommst und am Ende die karten in unseren Editor einfügst, hab ich damit kein Problem

Beim unserem Editor ist halt der riesige Vorteil, dass auch die Felder alle in im richtigen Format sind und ich die Karten direkt verwenden kann. Am Ende muss man sie also in jedem Fall in unserem Editor sein, damit ich sie verwenden kann.

(Ein anderer Vorteil ist natürlich, dass unserer Editor rein HTML basiert ist und daher nicht runtergeladen werden muss).

*verneig* Sotrax hat geantwortet.

Der Plan war ja, dass der aktuelle Editor von meinem Editor eventuell ersetzt wird. Eben wegen der einfacheren Steuerung. Der Editor basiert auf HTML + Javascript. Ist somit eigentlich nichts anderes als das, was du ... äääh ... sie o_o derzeit da anbieten.

Via PHP wird wahrscheinlich eine Session gespeichert, welche die aktuellen Kartendaten beinhalten. Eine Umsetzung in dieser Form in meinem Editor ist garnicht so schwer umzusetzen, da ich mit PHP und Co. auch gut klarkomme. Via Ajax würde das ständige Neuladen der seite dann auch wegfallen.

Der von mir erstellte Editor ist bereits in der Lage, die JSON-Daten so auszugeben, wie es der aktuelle Editor ebenso tut. Konvertierung/Skalierung/Beschneidung der Teile würde ohne Weiteres ebenfalls Serverseitig eingerichtet werden können und via Ajax angebunden werden können.

Mein Plan war wie gesagt, den aktuellen Editor komplett ersetzen zu können. Da ich jedoch nicht ins PHP hineinschauen kann, konnte ich erstmal nur das Frontend nachbilden Ich kann gerne eine direkte PHP-Variante mit Upload-Funktion, Konvertierung, Skalierung und ggf. sogar "Zerschneide großes Bild zu kleinen Feldern"-Funktion umsetzen, wenn gewünscht. (Jedoch frage ich mich dann aber, warum die hochgeladenen Grafiken im aktuellen Editor im JSON als Base64 gespeichert werden und nicht auf basis des Keys, welcher dafür im JSON genutzt wird, auf dem Server abgelegt werden? Oo)

[bwoebi]

In der Session (gibt nicht mal ein session cookie) wird gar nichts gespeichert, der Editor ist komplett stateless Greift rein auf die Datenbank zu.

Ja, denke bringt nix, wenn du den PHP-Teil neuschreibst, existiert ja bereits alles (das Konvertieren passiert übrigens auch beim Import des JSONs).

Das JSON ist dazu gedacht, dass man die Map tatsächlich exportieren und importieren kann, ohne vom Mapeditor abhängig zu sein. D.h. dir sollte es möglich sein direkt alles in deinen Editor zu laden ohne Weiteres. (Und auch ist es eben möglich damit die Map eines anderen zu exportieren und selber zu importieren, um daran zu arbeiten.)
Intern wird kein JSON gespeichert, sondern in relationaler Form in der Datenbank.

Der Import legt allerdings derzeit jeweils eine neue Map an; es ist nicht möglich eine existierende Map zu überschreiben. Generell wäre es mir aber lieber, wenn man dann jeweils einen AJAX Request zum Server macht bei jedem kleinen Update statt immer das ganze JSON abzuschicken (was ja auch u.a. unsinnig ist, da ja da immer die ganzen base64-Bilder drin sind, was bei manchen maps aber schon einige hundert KB sein können). Und es garantiert halt, dass alle Updates auch auf den Server übertragen werden.

[Avalon]

Leider viel Mühe an der falschen Stelle. bessere Bedienbarkeit ist eben nicht alles. Da wäre es wirklich besser gewesen deine Verbesserungsideen/scripte für Überfläche an bwoebi zu schicken oder im Thread zum Karteneditor aufzuführen, als dir die Arbeit für ein komplett neues Projekt zu machen. Egal was du noch an Funktionen einfügst, es geht bei dem Editor eben nicht nur darum eine Karte zusammenklicken zu können, sondern erleichtert eben den gesamten Arbeitsprozess bis zum Einbau, ist ja schön, wenn man ein paar Hotkeys hat, bringt nur nichts, wenn die Karte dann unterm Radar verschwindet und nie eingebaut wird. Ein externer Editor wird auch nicht so schnell auf Veränderung reagieren können, wie es der Mapeditor tut, und es ist ja nicht so, dass er aktuell vernachlässigt wird. Nur wenn keine Verbessungsvorschläge von den Benutzern kommen, heißt das ja erstmal, dass sie damit klarkommen. Du hast dich nicht einmal in dem Thread (viewtopic.php?f=8&t=56753) dazu geäußert, was sehr schade ist. Wenn dein Ziel ein besserer Mapeditor ist, solltest du ihm die Chance geben, sich zu verbessern. Das ist wie das Rad neu erfinden, weil das alte die falsche Farbe hat.

[Montgomery Burns]

Also eine asynchrone, serverseitige Map-Editierung über Ajax wäre für mich sehr einfach umzusetzen.

Ich weiß nicht, ob es denn möglich wäre, dass mir ggf. ein Struktur-Dump einer Karter (Datenbank) zur Verfügung gestellt werden könnte, worauf ich es aufbauen könnte? Dann könnte ich das gesamte System nach den von dir vorgeschlagenen Wünschen und Anforderungen anpassen.

Also ist die JSON-Ausgabe schlicht ein DUMP-Abbild der Datenbank-Daten der jeweiligen Karte? Vielleicht wäre eine Import-Funktion in euren Editor auch eine Option. Dann könnte man entweder direkt euren Editor nutzen ODER den von mir erstellten Editor nutzen und die JSON-Daten dann einfach in euren Editor übertragen.

Eine Import-Funktion für die JSON-Daten war bereits meinerseits geplant.

Die Konvertierung von den Grafiken (z. b. PNG zu JPEG) ist glaube mit Javascript-Mitteln möglich. Müsste ich mich mal schlaulesen. Alternativ würde dies dann über eine Ajax-PHP-Abfrage erledigt werden.

Bezüglich der Struktur der Datenbank könnte man ja per PN kontakt aufnehmen. (Sind ja Serverinterne Sachen. Muss ja nicht jeder mitlesen XD)

Es würde mich halt freuen, wenn meine kleine Arbeit ggf. auch einen Nutzen auf freewar selbst findet. Würde diesbezüglich gerne mit euch zusammenarbeiten. Gerade die Tatsache, dass jede Map in einem neuen Datensatz gespeichert wird, treibt mir tränen in die Augen. Ich habe z. b. mein Script so umgesetzt, dass keine Daten doppelt gesetzt werden würden. Als Beispiel wird in dem Canvas, welches die Karte anzeigt, ausschließlich der bereich gezeichnet, welcher auch tatsächlich zu sehen ist. Es wird stets alles 2 mal gecheckt.

Nebenbei: wenn die Datenbank-Daten als JSON exportiert werden, dürfte es doch kein Problem sein, diesen Vorgang auch umgedreht umzusetzen, oder?

Und @Avalon
Es ist ein Vorschlag für eine neue Umsetzung des aktuellen Editors. Da dieser auf vollständige PHP-Umsetzung gesetzt wurde, wäre ein "Umbau" in Canvas und Co. schlicht ein Baustellenprojekt geworden. Es wäre wohl eher mehr kaputt gemacht worden, als verbessert. Daher habe ich mich, auch um meine Fähigkeiten zu erweitern, drangesetzt, das ganze ding neu umzusetzen nach Vorlage von dem, was ich sehen und bereits nutzen kann. Die PHP-Funktionen selbst kann ich ja nicht einsehen.

Und auf ein Holzrad bringt es nichts, ne Felge anzubringen und aufblasbares Gummi drauf zu ziehen. (Soll kein negativer vergleich sein. Aber ich denke, dass die Idee hinter diesem Vergleich verständlich sein würde)

Wie gesagt. Den von mir erstellten Editor kann ich gern, insofern ich entsprechende Infos erhalte, auf das aktuelle interne system angepasst werden. Außerdem ist es kein "drittprogramm", sondern bereits eine HTML-Seite, welche anstelle PHP schlicht Javascript und Canvas nutzt, um das ständige Neuladen zu umgehen. Serverseitige Anbindung wäre garnicht so schwer ebenso mit Javascript/Ajax umzusetzen, was ja im grunde kernpunkt dieser Diskussion ist.

[bwoebi]

Ja, Konvertierbibliotheken gibt es auch für Javascript.

Es wird nicht "jede map als neuer Datensatz gespeichert", es ist einfach nur die Importfunktion, die keine Möglichkeit zum überschreiben bietet bisher. Bilder werden genausowenig doppelt gespeichert. (da ist eine Duplikatüberprüfung drin)

Und wie gesagt, eine Importfunktion gibt es bereits, man müsste sie nur erweitern, dass sie auch bestehende Maps überschreiben kann.

[Avalon]

Ich verstehe, dass du verliebt in deinen Editor bist. Und für ein Lernprojekt kannst du das ja machen. Aber wenn ich das richtig einschätze, solltest du dich davon verabschieden alle Daten von einem FW-Server, die dein Editor bräuchte, exportieren zu wollen, damit man dann auf einem anderen Server im Idealfall das gleiche machen kann und es dann wieder importieren zu müssen. Das ist doch der pure Irrsinn. Was ist, wenn du keine Lust mehr hast, deinen Server zu betreiben? Eine vollständige PHP-Umsetzung verkraftet der Map-Editor locker, aber schließt ja das Benutzen von HTML5 nicht aus, was dich stört ist also auch nur eine Geschmackssache, und interessiert auf der Benutzerseite niemanden. Ich hab Respekt vor deinem Arbeitsaufwand, aber du tust dir da keinen Gefallen. Und du kannst bwoebi auch durchaus zutrauen die notwendigen Änderungen, die es für eine bessere Bedienbarkeit bräuchte, auch selbst auf irgendeine Art und Weise umsetzen zu können, der bisherige Editor ist doch nicht in Stein gemeißelt.

[Montgomery Burns]

Hm. Dann sollte man auf basis des Namens + User-ID ein Hash erstellen, welcher dann mit den jeweiligen Map-Daten verknüpft ist, wo dann jeweils die Map überschrieben wird. Natürlich sollte man noch einen Iterator einbauen, um, falls vom Nutzer gewünscht, eine "neue Version" gespeichert werden könnte, welche natürlich den Hash umändert und somit die Map wieder unique macht.

Wäre im grunde nicht schwer. Eine kurze Abfrage, ob die vorhandene Karte überschrieben werden soll, würde diese "neue Version"-Abfrage bereits ausreichend anbieten. Man könnte den Iterator auch einfach "Version" nennen und stets um +1 erweitern, wenn bei der Abfrage "Nein" gewählt wird

Karten-Listen-Übersicht (Also Benutzermenü usw.) würd ich auch gern integrieren. Aber da sind wir wieder bei den Datenbankdaten bzw. strukturen XD

Und auch, wenns heißt, ich würde das Rad neu erfinden: Na und? Baustellen-Systeme sind nun mal nicht schön XD Würd ich den aktuellen Editor auf Canvas umschreiben müssen, würde ich schlicht genauso von 0 anfangen anstelle alles zu zerstückeln und neu zusammenzusetzen XD - Dann lieber den von mir erstellten editor auf den aktuellen stand bringen und ins vorhandene system einpassen.

Man kanns wie gesagt ggf. parallel zum vorhandenen editor anbieten ^^

-----

Er war im grunde nicht als "Lernprojekt" geplant. Ich wollte schlicht den aktuellen Editor mit Canvas umsetzen.

Und wie gesagt. Das Problem wäre halt, dass der aktuelle Editor auf einem anderen system basiert. Man müsste so oder so alle Abläufe des Editors zerstückeln und für Ajax aufteilen, um diesen für eine entsprechende Ajax-Anbindung zu optimieren, was am Ende in einem auseinandergerissenen Editor resultiert und dann ein Baustellen-Script darstellt.

Ich arbeite wie gesagt gerne mit dem Team zusammen, um alles entsprechend anzupassen und ggf. einen zweiten Editor parallel anbieten zu können.

Außerdem sind noch nicht alle Funktionen integriert. Das ist quasi immernoch die Beta, seit ich gestern angefangen habe damit. Es war halt ne Idee, die ich aus eigenem Antrieb umgesetzt habe und nun dem Team vorstellen wollte. Eben weil das Team von Freewar wohl mehr ahnung von hat, wie was genutzt werden würde. Ich konnte halt nicht sehen, dass die Daten bereits in einer Datenbank gespeichert werden, da ich nur den JSON-Export als Resultat sehen konnte.

Ich verstehe deine Bedenken. Jedoch verstehe ich nicht ganz, was du mit "Exportieren" und "Importieren" sagen willst. Möchte hier doch eventuell erreichen, dass das von mir erstellte frontend auch eine schnittstelle vom freewar-seitigem backend erhält, um halt die selbe nützlichkeit zu erreiche, wie der aktuelle editor bietet. Jedoch halt mit den Features meines karteneditors.

Darüber hinaus möchte ich noch sagen: Dann habe ich das rad halt neu erfunden, weils nicht rot war. Na und? Da hab ich gleichzeitig die Unwucht ausgeglichen XD

[Montgomery Burns]

Bezüglich der Konvertierung der Grafik via Javascript würde .toDataURL("image/jpeg") des Canvas 2DContextElements bereits mehr als genug bieten. Firefox soll das laut Google können. (Werds natürlich testen)

Das heißt, dass sämtliche Arbeiten mit den Grafiken (Konvertierung, Beschneiden und so weiter) ohne Weiteres vollständig über Javascript umgesetzt werden könnten. Dies hätte schlicht auch den Vorteil, dass die gesamte Map-Editor-Arbeit auf dem Clienten liegt und nicht den Server belastet. Das sind zwar nur Peanuts. Aber wie sagt man so schön: Auch klein Vieh macht Mist

Bezüglich Ajax-Anbindung: Letztendlich könnte ich es so umsetzen, dass bei 2 Sekündiger "inaktivität" (keine Mausbewegung oder dergleichen) ein Ajax-request losgeschickt wird, welcher die Map-Daten zwischenspeichert bzw. direkt abspeichert. Somit würde bei der Editierung nicht ständig ein Update auf dem Server erfolgen und man könnte dennoch stets den aktuellen Stand speichern. Ein kleiner Indikator des aktuellen Speicherstatus und eine manuelle "Speichern"-funktion sind dann natürlich das mindeste.

[Rober]

Also, ich find Avalon hat das schon ziemlich gut auf den Punkt gebracht. Auf den ersten Blickt wirkte es halt wie ein Lern-/Trainingsprojekt ^^ Aber du versuchst tatsächlich dem Rad, das existiert und wohl rund läuft, deinen eigenen Anstrich zu verpassen. Bzw, mehr als Anstrich halt^^


Btw.. Auch wenn Endgeräte immer stärker werden.. Was wenn ich auf dem Touchscreen meines IoT-fähigen Kühlschranks während er Eiswürfel ausspuckt eine Map basteln will?! Da will ich aber nicht viel JS laufen haben - am Ende nimmt die Kühlleistung ab Legacy SUpport usw spielt grad bei JS-Bild-Bearbeitung auch ne Rolle. Was ich sagen will: Man sollte immer überlegen, welche Dinge Serverseitig und welche Clientseitig laufen. Einen DoS Angriff durch Server-Konvertierungsaufwand wird wohl niemand durchführen

[Soralink]

Also ich als Kartenbauer kann nur sagen, dass der vorhandene Mapeditor wunderbar läuft und alles kann, was er muss bzw. alles, was ich von ihm erwarte.
Von daher sehe ich da auch absolut keinen Anlass, den in irgendeiner Weise zu ersetzen oder zu überarbeiten. Dann müsste ich mich ja an eine neue Benutzeroberfläche usw. gewöhnen. Und ich weiß ja nicht, wie viele Leute den Editor sonst so benutzen, aber so unglaublich viele sind das bestimmt nicht. Und ich bezweifle, dass durch den Einbau eines neuen Mapeditors plötzlich alles und jeder damit anfängt, Karten zu bauen. Ich sehe da irgendwie einfach den Bedarf nicht.

Ich habe mir den neuen Editor hier allerdings noch nicht angeschaut. Deswegen will ich dazu noch nichts Voreiliges sagen. Ich lasse mich da auch gerne überzeugen, so ist das nicht.

Aber hätte man mich jetzt gefragt, ob ich einen neuen Editor bräuchte, wäre meine Antwort einfach ganz klar "Nö." gewesen.

[Montgomery Burns]

Eure Bedenken sind verständlich.

Ich spoilere mal ein klein wenig: Der alte Editor bleibt und ich arbeite an der Integration des von mir neu entwickelten Editor/Designer, dass dieser parallel genutzt werden kann.

Hier mal ein aktueller, frischer screenshot.



Wer mir eine passende Farbe für den gesamthintergrund in R, G, B (Oder Hex oder sonstwie) vorschlagen kann, würde mir gewaltig helfen. Ich weiß, dass die farbe derziet noch etwas schlimm aussieht. Es darf nicht ganz weiß sein