Das ist der aktuelle Stand der Karte mit Beispielobjekten. Im Unterschied zu Freelancer sind die Objekte wesentlich größer dargestellt und das Raster hat einen stärkeren visuellen Effekt - der für ein Browsergame für gute  Usability IMHO nötig ist.

Die neue Karte: Nouron Galaxy Map

Im letzten Blogeintrag zum Stand von Nouron erwähnte ich, dass ich an einer neuen Karte arbeite welche universell einsetzbar sein soll. Und weil es dich sicher brennend interessiert möchte ich dazu etwas mehr Hintergrundinfos veröffentlichen…😉

Nochmal kurz meine Beweggründe für dieses (Teil-)-Projekt:

  • Einsatz von mehr SVG
  • Training für meine (eher durchschnittlichen) Javascript/JQuery/Ajax-Skills
  • Wiederverwertbarkeit von Teilen meines Browsergames…
  • Einstiegshürde für Entwickler die mir evtl. helfen wollen verringern
  • … und eine Referenz mehr auf GitHub😉

Mittlerweile hat das Projekt einen brauchbaren Stand. Ich habe die Karte auch schon testweise in Nouron eingebaut und es funktioniert soweit. Es gibt noch fehlende Funktionalität für den wirklichen Gebrauch im Browsergame, aber dazu mehr weiter unten.

Wie ist die Karte konzeptionell aufgebaut?

Zunächst einmal handelt es sich um eine klassische 2D-Karte ohne viel Schnick-Schnack. Die Karte ist in 9 Felder aufgeteilt – bei einem Weltraumbrowsergame wie Nouron kann man sie als Systeme oder Sektoren bezeichnen. Die 9 Felder sind nach Himmelsrichtungen + Zentrum angeordnet. Jedes Feld ist eine SVG-Karte für sich, so dass das Nachladen von Inhalten beim Scrollen von oben/unten bzw. links/rechts sehr einfach möglich ist.

Ebenso war es mein Ziel bereits Teile des Nachbarfeldes/systems/sektors sehen zu können. Somit ist das Feld im Zentrum vollständig dargestellt – die Felder außen herum nur zum Teil. Je nach gewählter Skalierung kann man dass aber auch anders einstellen.
Die angezeigten Objekte selbst sind extra etwas größer dargestellt (momentan ca. 30px) um sie besser anklickbar zu machen. Das kann in Zukunft aber noch anders skaliert werden. Je nach Einsatzzweck für die Karte kann man die Skalierung wunschgemäß in der Konfiguration eintragen.
Außerdem werden mehrere Ebenen unterstützt. Für Nouron liegen z.B. auf der untersten Ebene die Objekte für großflächige Felder wie Asteroidenfelder und Trümmerhaufen. Darüber dann die Ebene mit Planeten und Monden. Und darüber dann die Ebene für Schiffe/Flotten.

Was habe ich bisher durch dieses Projekt gelernt?

  • ich konnte einige meiner eingestaubten SVG-Grundlagen auffrischen
  • ich habe gelernt wie man mit Javascript SVG erzeugt,
  • dass man aufgrund des in den meisten Browser umgesetzten Sicherheitskonzepts namens ‚Same Origin Policy‚ nicht mal eben eine JSON-Datei vom Dateisystem als Beispiel-Datenquelle nutzen kann,
  • dass man mit SVG keine Techniken ähnlich der CSS Sprites anwenden kann (!) und
  • wie man ein Projekt mit Bower.js – Support austattet

Bisher aufgetretene Probleme

Die erwähnte ‚Same Origin Policy‘-Problematik kann man durch Webserver-Einsatz umgehen. Entsprechenden Hinweis habe ich in der README hinzugefügt und damit ist das Problem vom Tisch. Die fehlende Möglichkeit jedoch mit SVG eine Technik ähnlich der CSS-Sprites einzusetzen hat mir schon einen gehörigen Strich durch die Rechnung gemacht. Um Requests zu sparen ist eine Sprite-Technik sehr wichtig. Leider ist das wie gesagt mit SVG nicht wie gewünscht möglich. Insofern sah ich mich gezwungen einen zweiten Modus einzubauen: den Hybrid-Modus. Dies ist wie der Name vermuten lässt eine Kombination aus HTML und SVG. Somit kann ich hier auf klassische CSS-Sprites setzen. SVG wird dabei momentan eigentlich nur noch für den Hintergrundraster verwendet.

So richtig glücklich bin ich damit nicht weil ich jetzt zwei Modi unterstützen muss und das natürlich zusätzliche Komplexität in den Quellcode des Projekts bringt. Ich bin schon stark am überlegen ob ich die SVG-Komponente doch wieder ganz entfernen werde. Wollen tue ich das aber eigentlich nicht – schließlich war es ursprünglich das Primärziel dieses Projekts.

Welche Funktionalität fehlt jetzt noch?

Es muss eine Möglichkeit geben Objekte anzuklicken und deren Informationen anzuzeigen. Dies soll so universell wie möglich geschehen. Es wird also auf einen Ajax-Request auf eine individuell einstellbare Url hinauslaufen, deren Response-Daten entweder in ein zuvor definiertes DOM-Element wie z.B. ein Popup geladen werden.

Wenn ich dann noch irgendwann Lust drauf habe, baue ich vielleicht noch einen Editor, mit dem man sich Karten aus gegebenen Sets zusammenklicken kann – aber das ist momentan noch eher Wunschdenken.

Wie gehts weiter?

Von Zeit zu Zeit werde ich weiter an der Karte basteln und sie so anpassen, dass ich sie für Nouron einsetzen kann – aber auch so dass sie für andere Browsergameprojekte einsetzbar wird. Für die oben angesprochenen SVG-Problematik muss ich noch eine Lösung finden… vielleicht ein Fork ohne SVG-Support?

Wie dem auch sei: ich hoffe ich konnte mal wieder einen kleinen Einblick gewähren und würde mich über Feedback sehr freuen!

Bis zum nächsten Mal,
tector🙂

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s