Isometrische Karte - AJAX-Framework

Um eine kleine Idee, die ich schon vor längerer Zeit zu Papier gebracht habe, mal langsam aber sicher in die Tat umzusetzen, habe ich in den letzten Beiden Tagen ein kleines experimentelles Framework für eine AJAX-basierende Isometrische Karte gebastelt.
Wer mag, kann sich das ganze mal hier ansehen: www.cem0r.net/store/easyiso/mapping/client.html
Das ganze funktioniert zur Zeit nur sicher im Firefox-Browser und mit JavaScript. Hier und da sind noch ein paar Fehler. Generell wollte ich aber mal eure Meinung hören. Besonders interessiert mich die Aufbaugeschwindigkeit.

Hier ist die Aufbaugeschwindigkeit mit einem Netscape 7.1 gut. Das Navigieren ist aber etwas schwerfällig. Vielleicht solltest Du etwas mehr Felder vom Server laden, als Du darstellst und dann nach dem Bewegen weiter nachladen.

wenn man ein Objekt(also so ein Klotz) anwendet (also entfernt) ist die ImageMap immernoch da. Also ich hab das mal mitn field_blank versucht und einmal mitn diktator Die ImageMap vom großen Klotz ist immernoch da gewesen. Trotzdem nette Umsetzung. Wie willste das aber machen, wenn jemand auf ein Feld, hinter so nem Klotz klicken will? ist ja derzeit nicht möglich

Original von KoMtuR
wenn man ein Objekt(also so ein Klotz) anwendet (also entfernt) ist die ImageMap immernoch da. Also ich hab das mal mitn filed_blank versucht und einmal mitn diktator Die ImageMap vom großen Klotz ist immernoch da gewesen. Trotzdem nette Umsetzung. Wie willste das aber machen, wenn jemand auf ein Feld, hinter so nem Klotz klicken will? ist ja derzeit nicht möglich

Ja, dass die Clickzone nicht sofort neu gerendert wird, ist eines der erwähnten kleinen Fehlerchen. Damit die korrekte Clickzone gerendert wird, muss man einmal scrollen (damit wird die komplette Karte neu gezeichnet - inkl. Clickzones).
Um auch "hinter" größere Klötzchen klicken zu können will ich noch eine Funktion zum drehen der Karte einbauen.
Übrigens: Die Clickzones für die einzelnen Objekte werden dynamisch berechnet. D.h. Man hat nicht nur den Grundriss auf den man klicken kann, sondern quasi das gesamte Objekt. Das hat mich auch am meisten Zeit gekostet
Das scrollen ist auch eines der Dinge, die mir noch ein Dorn im Auge sind. Mehr Felder einlesen ist auch leider keine wirkliche Lösung, weil trotzdem jedes Einzelne Feld neu erstellt bzw. befüllt werden muss. Zur Zeit ist die Scrollweite auch nur auf einem Feld. Im Code kann man sehen, dass sich das Problemlos erhöhen lässt.

Kannst dir ja mal im Gegenzug (ja, ich muss sie einfach nochmal vorzeigen *ganz stolz*) mein versuch einer solchen Karte angucken, bisher ist noch keine Aktion möglich
Link
Ich lade zuerst alle Felder die man sieht und an jeder Seite nochmal die scrollweite, wenn man nun auf Rechts klickt, bewegt man sich nach rechts und gleichzeitig lädt er die neuen Daten nach, dadurch erscheint es viel weniger "stockig"
Greetz,
xXx

Das Problem ist, dass deine Karte nicht isometrisch dargestellt wird (und somit auch nicht entsprechend eingelesen werden muss). Das ist eine recht große Hürde. Aber hey, ich arbeite schon am Problem.
Übringens sieht das sehr schick aus mit dem Flüssigen scrollen.

Naja, ist das mit dem isometrisch nicht eine Sache der Grafiken anstatt des Codes?
Wenn ich da nun andere Grafiken nehme, schauts zumindest schonmal isometrisch aus...^^
Ich weiß nicht ganz ob du damit was anfanegn kannst, aber vllt solltest du dir mal die Yahoo! UI anschauen, die ist mit der Animations Klasse dafür "optimiert", ich glaub ich arbeite auch damit, wenn ich dann Schiffe dadrauf bewegen lasse...
Greetz,
xXx

Das Problem ist, dass du die Karte aus der Datenbank ganz anders ausliest. Aber wie gesagt, ich arbeite da schon an einer Lösung

Generell:
Problem bei isometrischen Karten ist einfach die Anklickbarkeit. Man kann Grafiken nicht immer in Klotzbauweise erstellen sondern eine "gute" Karte braucht richtige Karten. Und solange es nicht Pixelgenaue onclick-Funktionen mit Transparenz-Ignoriemodus gibt wird das leider nichts.
Deine Karte:
Also für eine AJAX-Karte finde ich sie zu langsam und zu hackelig. In der Variante könnte sie auch nen normales GD-Bild sein welches nachgeladen wird.
Und auch wenn ich dir nur ungern den Spass verderbe, doch wie willst du solch eine Karte effektiv einsetzen?

Original von Mudder
Generell:
Problem bei isometrischen Karten ist einfach die Anklickbarkeit. Man kann Grafiken nicht immer in Klotzbauweise erstellen sondern eine "gute" Karte braucht richtige Karten. Und solange es nicht Pixelgenaue onclick-Funktionen mit Transparenz-Ignoriemodus gibt wird das leider nichts.

Schau dir mal die Clickzones der einzelnen Objekte an. Der dicke große Block, der lustige Pappaufsteller und das leere Feld. Unterschiedlich und Pixelgenau.

Original von Mudder

Deine Karte:
Also für eine AJAX-Karte finde ich sie zu langsam und zu hackelig. In der Variante könnte sie auch nen normales GD-Bild sein welches nachgeladen wird.
Und auch wenn ich dir nur ungern den Spass verderbe, doch wie willst du solch eine Karte effektiv einsetzen?
Diese? Gar nicht. Das war mehr oder weniger ein Experiment, was übehaupt erstmal geht. Das nervige Nachladen stört mich auch, allerdings arbeite ich wie gesagt daran, das zu umgehen.
Und keine Angst, du verdirbst mir doch nicht den Spaß

Zum Thema Scrolling habe ich eine Demo meiner Seekarte im Moment verfügbar:
kolonialkampf.de/template_seemap4.php
Ok, das Teil ist Buggy und im Moment benutze ich das nur unter dem Firefox. Ein Bekannter meinte, das würde sowohl auf dem IE 7 als auch auf Opera 9 sauber laufen.
Der IE6 wird von mir gar nicht erst beachtet. Don't ask why

Ich weiss nicht recht, so eine Drag-Map verbraucht mit zu viel CPU-Last. Mein 2.53 GHz Pentium 4 ist zwar nicht mehr der schnellste, aber mein FF hat schon ordentlich zu kämpfen, um das halbwegs ruckelfrei zu bewegen.
Die Idee ist ncht schlecht, aber ein BG sollte meiner Meinung nach selbst auf einem schwachen P4 (2GHz) noch gut laufen, dafür ist es ja ein Browsergame und kein aufwändiges 3D-Actiongame mit 5 Millionen Polygonen.
Darum würde ich noch mindestens 1-2 Jahr warten, bis ich sowas standardmässig einsetze (aber als Zusatzfeature kann man das durchaus testen).

Schon klar. Das ganze ist ein Technical Example.
Rechts sieht man noch schön die alternativen Navigationselemente, welche dann zum Einsatz kommen werden.
Das Problem der CPU-Last liegt zum großen Teil am Browser. Opera 9/IE 7/FireFox 2 sind da flinker.
Da ich noch eine ganze Weile brauchen werde, bis mein Spiel einen für mich zufriedenstellenden Stand erreicht hat, kann ich mich hier ruhig drauf verlassen das die User bis dahin diese Browser haben.

Die CPU Auslastung geht bei Drag&Drop immer in die Höhe, egal bei was für einen PC. Ich habe eine komplexere Karte als diese auf nem 500er getestet und scrollen war erträglich. Der Aufbau der ganzen Karte war da schlimmer...

Ich arbeite ja selbst mit einer solchen Karte und kann nur empfehlen (aus eigenen Tests) die effektive Karte getrennt von den Objekten zu laden und für die Karte auch grössere Bildauflösungen zu verwenden. Ergo habe ich weniger Bilder die einzeln nachgeladen werden, wodurch Stockungen stark reduziert werden können. Ich lade die Map ja Vollbild, dabei gehen viele PCs in die Knie, allerdings werde ich zukünftig den Anzeigebereich wählbar machen, wodurch weniger Bilder pro bewegung nachgeladen werden müssen.

Von dem Anzeigebereich 7x7 werden effektiv 9x9 Felder geladen. In dem Moment wo du die Karte verschiebst, werden dynamisch die nächsten Randfelder per xmlhttprequest angefordert.
Im Moment ärgert mich der Firefox mit einer exception die er ab und an wirft.
Dadurch klappt das Nachladen nicht immer. Hab ja bald Urlaub und dann seh ich mir das ganze in Ruhe an.

Ich würd auch versuchen, so wenig Requests wie möglich zu machen. Als ich bei Marcos Karte gescrollt hab, hat Firebug mir pro Sekunde 5-10 Requests ausgespuckt, das ist deutlich zu viel. Ich würde die Daten grossflächiger anfordern und so auch mal Daten laden, die evtl. gar nicht benötigt werden, weil da noch 4 Felder Abstand sind. Wenn doch dort hingescrollt wird, gehts dafür schneller und die Serverlast ist auch geringer, denn jeder Request hat ja nunmal Overhead...
Wenn die Browser effizienter werden, kann das alles anders aussehen, IE7 und FF2.0 hab ich mir noch nicht angeschaut, war bisher zu faul dazu...
Ich glaub, ich muss mir auch mal so ein AJAX-Teil bauen, mal sehen, was ich daraus gebacken krieg...

5-10? Uh... DAS könnte der Grund der Exception sein. Ich ahne einen Programmierfehler... Danke für den Hinweis!

Du meinst aber nicht mein Experiment?
Hier die Karte mit weichem Scrollen:
www.the-west.org/west2/jsp/ajaxmap.jsp

tolle karte. Darf ich frage wie das 3d gelößt wurde so dass Objekte von weitervorne stehenden Objekten teilweise verdeckt werden? Ist da einfach die richtige Reihenfolge der Bilder oder wie wird das realisiert?

Das lässt sich mit dem z-index steuern. Außerdem liegen Bilder, die später im Quelltext stehen vorne.

ok danke