Zunächst etwas zu meiner Karte und deren Darstellung:
Meine Karte hat 60 x 60 Felder. Sie wird mit Hilfe einer Tabelle dargestellt. Weil jedes Feld ca. 30 x 30 Pixel groß ist, passt diese Karte an an einem Stück natürlich nicht auf den Bildschirm, vom Browserfenster ganz zu schweigen.
Von der Karte sind deshalb immer nur 15 x 15 Felder zu sehen. Rechts von der Karte gibt es eine Kartenübersicht, die die ganze Karte zeigt.
Klickt man auf der Kartenübersicht auf ein Feld, wird dieser Teil der Karte dargestellt, wobei das angeklickte Feld in der Mitte ist.
Nun das Problem: Meine Kartenübersicht besteht aus einer Tabelle mit 60 x 60 = 3600 Zellen. Diese muss natürlich bei jedem neuen Seitenaufruf der Karte dargestellt werden. Nun, und das ist auch schon das Problem: das dauert zu lange. Auch wenn die Karte nicht von PHP generiert wird und als Template vorliegt dauert der Seitenaufbau zu lange.
Also meine Frage an euch:
Wie kann ich die Kartenübersicht möglichst effizient darstellen? Ich habe schon daran gedacht ein Javaapplet zu schreiben, möchte aber gern vorher eure Meinung zur Lösung des Problems hören.
Ich hoffe, ich hab mich klar genug ausgedrückt und ihr versteht was ich meine.
Danke schon mal für möglichst hilfreiche Antworten
Effiziente Darstellung einer Kartenübersicht.
gepostet vor 18 Jahre, 5 Monate von Progralixx
gepostet vor 18 Jahre, 5 Monate von knalli
Google Maps hat eine gute Methode dafür entwickelt.
1. Zunächst lädt man alle unmittelbar sichtbaren Kartenausschnitte.
2. Wenn alles fertig geladen ist, lädt man die angrenzenden Ausschnitte, wie viele.. nun ja, das hängt dann von dir ab.
3. Scrollt ein User nun nach links oder rechts, dann werden die Ausschnitte einfach nur verschoben; und das Spielchen geht wieder von vorne los.
Es empfiehlt sich dann natürlich, bereits im Schritt 1 nicht eine Ausgabe zu machen, sondern bereits dort das Laden "dynamisch" zu machen.
Welche Technik dazu verwenden ist? Asynchrones Nachladen von Informationen, also kurz: Ajax. Damit entfällt auch dein Templategenerator für die Kartendaten; die Daten werden dann (wahlweise XML oder JSON) im Client zu einer Karte "geparst".
1. Zunächst lädt man alle unmittelbar sichtbaren Kartenausschnitte.
2. Wenn alles fertig geladen ist, lädt man die angrenzenden Ausschnitte, wie viele.. nun ja, das hängt dann von dir ab.
3. Scrollt ein User nun nach links oder rechts, dann werden die Ausschnitte einfach nur verschoben; und das Spielchen geht wieder von vorne los.
Es empfiehlt sich dann natürlich, bereits im Schritt 1 nicht eine Ausgabe zu machen, sondern bereits dort das Laden "dynamisch" zu machen.
Welche Technik dazu verwenden ist? Asynchrones Nachladen von Informationen, also kurz: Ajax. Damit entfällt auch dein Templategenerator für die Kartendaten; die Daten werden dann (wahlweise XML oder JSON) im Client zu einer Karte "geparst".
gepostet vor 18 Jahre, 5 Monate von Störti
Vereinfache die Übersicht so stark wie möglich. Also stelle nicht jedes einzelne Feld dar sondern nur wichtige Dinge. Ich weiss jetzt nicht, worum es in deinem Spiel geht, aber suche dir ein paar Objekte raus, die für die Navigation auf der gesamten Karte wichtig sind. Diese platzierst du auf der Übersichtskarte (vllt. mit "position: absolute") und legst darüber einen transparenten Bild-Button. Wenn der angeklickt wird, werden dem Zielscript die Koordinaten übergeben, die auf der Karte angeklickt wurden. Dann kannst du so die Position der Detailkarte bestimmen und diese erstellen.
Dann kannst du die Übersichtskarte als einfaches GIF-Bild darstellen, welches statisch ist und die Navigationspunkte werden darüber gelegt (sollten nicht mehr als 10-20 sein).
Bei 3600 Zellen will ich auch mal den Browser sehen, da kackt so ziemlich jeder PC bei ab...
Dann kannst du die Übersichtskarte als einfaches GIF-Bild darstellen, welches statisch ist und die Navigationspunkte werden darüber gelegt (sollten nicht mehr als 10-20 sein).
Bei 3600 Zellen will ich auch mal den Browser sehen, da kackt so ziemlich jeder PC bei ab...
gepostet vor 18 Jahre, 5 Monate von Progralixx
Stimmt eigentlich. Ajax ist wahrscheinlich die eleganteste Lösung dafür. Warum fällt mir das nicht von selbst ein?
Danke jedenfalls für die schnelle Antwort.
Zu der Darstellung noch mal: Ich könnte die Übersicht in 9 oder 16 Einzelsektoren oder ähnliches unterteilen, darunter würde die Genauigkeit der Navigation natürlich leiden. Ich möchte es aber so genau wie möglich machen...
Naja wenn ich jetzt Ajax einsetze, wird dir Übersicht wenigstens nicht bei jedem Seitenaufruf geladen.
Aber da fällt mir noch was ein: Kann JS nicht ermitteln, welcher Pixel eines angeklickten Bildes getroffen wurde? So könnte ich die Karte ja als 60 x 60 Pixel großes Bild darstellen. Damit könnte man andererseits nicht mehr die Stützpunkte anderer Spieler auf der Übersicht zeigen, es sei denn, man generiert das Übersichtsbild bei jeder Registration neu...
Nagut, ich mach mir erstmal ein paar Gedanken.
Danke jedenfalls für die schnelle Antwort.
Zu der Darstellung noch mal: Ich könnte die Übersicht in 9 oder 16 Einzelsektoren oder ähnliches unterteilen, darunter würde die Genauigkeit der Navigation natürlich leiden. Ich möchte es aber so genau wie möglich machen...
Naja wenn ich jetzt Ajax einsetze, wird dir Übersicht wenigstens nicht bei jedem Seitenaufruf geladen.
Aber da fällt mir noch was ein: Kann JS nicht ermitteln, welcher Pixel eines angeklickten Bildes getroffen wurde? So könnte ich die Karte ja als 60 x 60 Pixel großes Bild darstellen. Damit könnte man andererseits nicht mehr die Stützpunkte anderer Spieler auf der Übersicht zeigen, es sei denn, man generiert das Übersichtsbild bei jeder Registration neu...
Nagut, ich mach mir erstmal ein paar Gedanken.
gepostet vor 18 Jahre, 5 Monate von pl-online
Wenn du es so machen willst, dann würde ich das Übersichtsbild auch direkt von einem Script laden lassen. Die php Bildfunktionen eignen sich wunderbar für solche Dinge. So am Rande, ich arbeite selbst schon beinahe einen Monat an einer Map die via Ajax nachgeladen wird. Inzwischen ist es auch schon die 3. Version.
gepostet vor 18 Jahre, 5 Monate von Störti
Einmal bitte einen Blick hier drauf werfen:
de.selfhtml.org/javascript/objekte/event.htm
Damit kannst du ziemlich viele verschiedene Koordinaten eines Ereignises ermitteln. Bestimmt ist da was passendes bei (was auch von allen Browsern gemocht wird)...
de.selfhtml.org/javascript/objekte/event.htm
Damit kannst du ziemlich viele verschiedene Koordinaten eines Ereignises ermitteln. Bestimmt ist da was passendes bei (was auch von allen Browsern gemocht wird)...
gepostet vor 18 Jahre, 5 Monate von Haase
Mit dem Attribut "ismap" im img-Tag liefert dir der Client bei einem Klick auf die Karte die x- und y-Koordinaten des angeklickten Punktes des Bildes per Get.
Eine andere Möglichkeit wäre eine Map über das Bild zu legen aber wenn du das nicht per javascript in ein paar Zeilen erzeugen kannst, hast du wieder einen riesen Code und längere Ladezeiten.
de.selfhtml.org/html/grafiken/verweis_sensitive.htm
Eine andere Möglichkeit wäre eine Map über das Bild zu legen aber wenn du das nicht per javascript in ein paar Zeilen erzeugen kannst, hast du wieder einen riesen Code und längere Ladezeiten.
de.selfhtml.org/html/grafiken/verweis_sensitive.htm
gepostet vor 18 Jahre, 5 Monate von Progralixx
Danke, ich habs jetzt gut hingekriegt. Auf selfhtml waren zwar immer nur Beispiele, die entweder auf dem FireFox oder dem IE liefen, mein Skript ist jetzt aber zu beiden Browsern kompatibel.
Da die Karte ja 60 x 60 Felder hat habe ich eine Minimap mit 240 x 240 Pixeln erzeugt. Klickt man nun auf das Bild, erhält man eine X- und eine Y-Koordinate. Diese nehme ich *4 (Da die Minimap 4 x größer ist) und lasse den betreffenden Bereich der Karte "per Ajax" laden.
Da die Karte ja 60 x 60 Felder hat habe ich eine Minimap mit 240 x 240 Pixeln erzeugt. Klickt man nun auf das Bild, erhält man eine X- und eine Y-Koordinate. Diese nehme ich *4 (Da die Minimap 4 x größer ist) und lasse den betreffenden Bereich der Karte "per Ajax" laden.