Discussion :

[baddark]

Bonjour,

Ayant un projet de programmation d'un jeu par navigateur, un coéquipier ma fais une map, le problème c'est que la map est très grande et surtout très lourde (3mo a peu près), j'ai réussi à régler le problème de la grandeur en faisant un cadre avec la map qui peut être déplacer par drag&drop mais le problème du poids est toujours présent.
Il charge toute la map puis le déplacement est possible.

Je voudrais savoir si c'était possible de faire une sorte de chargement en streaming de la map, un bout de map visible dans le cadre et une vingtaine de pixel autour sera chargé, le reste se chargera au déplacement de la map.

J'espère avoir été assez explicite.

J'attends votre réponse avec impatience.
Cordialement.

[marcha]

Salut,

oui c'est possible (un peu comme le fait googlemap), mais pour cela il te faut
découper ta map en régions de taille similaires (soit tu découpe ça préalablement,
soit tu découpe ça à la demande coté serveur)

Pour l'affichage, le plus simple à mon avis c'est de faire un cadre avec un
div de taille fixe, (par ex: <div id='cadre'>) et tu fixe le overflow sur hidden
et en position relative.

A l'intérieur de ce div tu en crée un autre de la taille originale de la map. tu
le met en position: absolute (par ex: <div id='map'>)

ensuite tu peux, par exemple, créer tous les div qui correspondent aux découpes,
tous de taille fixe et tous en float: left; tu leur fixe un id qui correspond à la
région qu'ils représentent (par ex: <div id='zone_12_3'>)

Pour charger une région tu applique le background-image depuis javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function loadZone(x, y) {
  var id = 'zone_' + x + '_' + y; // détermine l'id de la région
  var url = 'zones/' + id + '.png'; // calcul l'url de l'image de cette région
  document.getElementById(id).style.backgroundImage = "url(" + url + ")";
}

Reste à appeler loadZone au bon moment suivant la position de la carte.
Quand tu glisse la carte tu modifie les style left et top du div #map.