JavaScript Browsergame Spielfeld mit Kacheln

[J4CK50N]

Hallo zusammen,

ich programmiere gerade ein Webbasierendes Browserspiel, läuft auch ganz gut.
Aber ich habe im Moment ein feste Spielfeldgröße. Das möchte ich ändern.
Ich möchte ein unendlich großes Spielfeld mit Scrollen am Rand usw.


Am liebsten würde ich immer soviel vom Spielfeld per AJAX runterladen wie ich brauche.
Das müsste doch gehen?!

Hab im Internet schon gesucht aber nix Anständiges gefunden. Habt ihr mir einen Tip?

 

[N-rG]

Welche internetverbindung hast du denn? Probiers mal mit einem Speedtest im Netz, dann musst du die spielfeldgröße halt auf deine bandbreite anpassen

 

[Lawnmower]

naja idealerweise nur der Teil laden denn man auf dem Bildschirm sieht - so wie bei Google Maps und Co - dann bleibt die Ladezeit wohl auch im ertragbaren Rahmen.
Dazu müsstest Du wohl ein wenig mit Koordinaten (Spielfeld), Bildschirm-Auflösung (wieviel Spielfeld, evtl in Kacheln aufgeteilt, sieht der Spieler gerade aufgrund seiner Bildschirmgrösse/Fenstergrösse und "Scrollposition"), etc rumrechnen. Bedeutet aber dass dein Spielfeld sich idealerweise auch "kacheln" lassen müsste.

 

[J4CK50N]

naja idealerweise nur der Teil laden denn man auf dem Bildschirm sieht - so wie bei Google Maps und Co

Genauso möchte ich es auch machen, eventuell sogar ein bisschen mehr als man sieht aussenrum. Damit der Spieler nicht merkt, dass das Spielfeld "On Demand" geholt wird.

Aber ich bräuchte ein wenig Beispielcode

 

[N-rG]

Ach Junge

http://www.igfd.org/?q=DSL+Speedtest

 

[J4CK50N]

@Junge

Bist im falschen Thread oder was genau willst du?
Mir geht es hier hier um AJAX, Javascript und Game Conceptional Design.

Warum müllst du meinen Thread mit deinem Speed TEST zu.

 

[T0a5tbr0t]

Besteht das Spielfeld nur aus Bilddateien? Dann hätte ich eine Idee die sogar ohne Ajax auskommt:
Du baust das Feld aus vielen img Tags zusammen. Diesen gibst du dann per Javascript das passende src Attribut. Der Trick dabei ist, dass die Bilder erst dann automatisch vom Browser geladen werden und nicht vorher.
Alternativ kann man auch viele div's oder eine Tabelle nutzen, wo man dann Hintergrundbilder zuweist.
Um festzustellen welche Bilder angezeigt werden müssen: einfach die Größe des Rahmens, des Spielfeldes und der Kacheln auslesen und mit etwas Mathe einen "Schwellenwert" ausrechnen. Dann kann man bei jeden mousemove Event gucken ob eine Kachel diesen wert über bzw. unterschreitet.

Wenn das zu schwer wird kann man vielleicht auch die Google-Maps API oder so etwas nutzen. Ist nur die Frage, wie leicht man da eigene Karten einbinden kann.

 

[ice-breaker]

http://leafletjs.com/

Du musst nur noch selbst die Map-Tiles generieren.

 

[Kanibal]

Ich füttere dich jetzt einfach mal mit Links aus meinen Vorlesungen, such dir raus, was du brauchst ;-)
http://www.gamedev.net/page/resourc...gramming/tile-based-games-faq-version-12-r728
http://gamvas.com/
http://craftyjs.com/

 

[J4CK50N]

Danke für die Links. So etwas in der Art habe ich gesucht.
Ich habe inzwischen eine eingene kleine Tile-Engine selbst geschrieben.

Ich habe einen Ordner mit X-Unterordnern in denen Bilder drin sind.

Diese Bilder werden kleinen Divs (60px * 60px) als Background-Image zugewiesen (Die Tiles).

Nur muss ich jetzt noch das asynchrone Laden der Tiles lösen. Alle Tiles sind 60MB groß.