Alléger ma map Hexagonale

[Kassak]

Yep yep !

Je suis en train de développer une map hexagonale pour mon jeu, celui ne contenant qu'une seule map, je passe du temps à la fignoller.

Je gère donc plusieurs couches d'images différentes, que je superpose les unes sur les autres, j'en suis déjà à 4 pour le terrain + joueur + bâtiment etc..

Bref, vu que je rajoutais les couches petit à petit, je me rendais pas compte de la lourdeur finale du truc, mon hébergement ovh venant de se terminer, je suis passé sous olympe, et là...c'est le drame o_o'
Un truc du style 5s pour afficher la map, et 10s entre chaque déplacement (le tout se fait en ajax).


Une solution pour alléger tout ça ? Vous pouvez aller voir le rendu ici :
CLIQUE
Login : Test
MDP : testtest


Déplacez vous devant et derrière un bâtiment, un arbre, le puit, dans l'eau pour voir l'effet que je recherchais

[Ruz]

hum...
ce que j'ai fait chez moi: puisque tu le fais en ajax... ne transfère que les données brutes!!!
Le navigateur peut très bien agencer tout ca à la place du serveur (en JS) ^^

EDIT: effectivement, c'est lourd! et on se déplace comment, au fait?
EDIT2: j'ai droit à des erreurs JS aussi...(document.getElementById('d').innerHTML = date_heure; / document.getElementById("d") is null)

[Kassak]

Pour l'erreur je sais, j'ai firebug aussi, je m'en occupe plus tard.

Pour se déplacer, il suffit de cliquer sur une case

L'idée pour alléger la carte, serait de charger une fois les images du terrain (sol + bâtiments) une fois a la connexion du joueur, et ensuite ne rafraichir que les joueurs, PNJ et autre.

Mais dans la pratique un peu plus dur à trouver le truc à faire.

Edit : j'ai supprimé pas mal de choses de la map, si c'est moche c'est normal^^

---

Bon après plusieurs test, c'est l'ajax qui fait ramer le déplacement. Même avec rien sur la map ça lag.

Vous savez comment optimiser un script ajax ?

Donc pour ma part, quand on clique sur une case, on lance la fonction move, qui récupère les coordonnées de la case, l'envoie sur la page deplacement.php qui fait sa petite requête, puis ensuite la div contenant la map se refresh...rien de bien lourd j'ia l'impression.

Voici le script ajax :

Code :

        <script language="javascript" type="text/javascript">
var xhr = null;

    // CREE UN ELEMENT XMLHttpRequest
function get_Xhr()
{
  if(window.XMLHttpRequest)
   {
    xhr = new XMLHttpRequest();
   }
  else if(window.ActiveXOject)
   {
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch(e)
     {
      try
       {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
       }
      catch(el)
       {
        xhr = null;
       }
     }
   }
  else
   {
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest\nVeuillez le mettre à jour");
   }
  return xhr;
}

    // Charge un fichier dans un div
function LoadDiv(div,file){
  get_Xhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      document.getElementById(div).innerHTML = xhr.responseText;
     }
   }
  xhr.open("POST",file,true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send("type="+div);
}

    // Deplacement d'un perso. sur la carte
function move(x,y)
{
  // Creation de l'objet XMLHttpRequest
  get_Xhr();
  xhr.onreadystatechange = function()
   {
       // Reponse du script
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
      {
     LoadDiv("carte","affichage_map.php");
     }
   }
  // Nous allons interroger deplacement.php pour effectuer le deplacement
  xhr.open("POST",'deplacement.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.send("x="+x+"&y="+y);
}
</script>

Si vous voyez le petit truc qui fait tout ramer, merci de me le dire.

[wild-D]

bon j'ai pas regardé grand chose... juste quand regardant la réponse ajax j'ai été choqué:
on a une grosse table html... je suppose que c'est la map complète ^^

Tu enverrais la page complète plutot que passer par de l'ajax ça le ferait tout aussi bien. Parce que là tu t'amuse à faire 2 requête ajax par déplacement (une pour envoyer les nouvelle coordonnées; une autre pour récupérer la map complète)

pourquoi ne pas envoyer que le stricte nécessaire; et laisser le client soccuper de faire la mise à jour sur son affichage.
le sol il va pas changer toutes les 5 min; alors à quoi ça sert d'envoyer cette info à chaque fois ? (ça t'enconomiserais de labande passante et surtout des requête sql si tu stockes tes infos en bdd)
si je me déplace sur la map et que ça ne change rien; à part ma position; tu valide juste ma nouvelle position; pas besoin de renvoyer la map complète.
si en me déplaçant ma vue souvre sur une nouvelle partie de map (une ligne/colonne/map complète -passage par un portail-) tu renvoie cette info là.
bref, là principale info qui devrait être envoyée c'est la position des objet mobile (PJ,PNJ).

---
edit:
t'es sûr que c'est l'ajax
parce que moi que j'affiche la map direct: (http://kaace.olympe-network.com/battle/a...ge_map.php) ou que je passe par la page du site en faisant un déplacement ajax; c'est kifkif
(enfin le déplacement ajax prend 2 fois plus de temps vu que y a 2 requête :/)

[Kassak]

Je pense oui que c'est l'ajax, j'ai testé avec une carte vide, c'est pareil, c'est pas le poids des images qui change quelque chose.

Ensuite, comment veux tu que je fasse sans les 2 requêtes ajax ? (En ajax, je suis un gros noob, je préviens :p )
Puis pour l'affichage ensuite, j'ai essayé diverses manières de ne réactualiser que les PJ, mais à chaque fois, vu que je renvoie pas le terrain derrière, il se barre, et donc c'est vide...

[jo_link_noir]

J'ai rapidement regarder mais si tu passais un peu par un fichier css tu pourrait déjà réduire pas mal la page.

Par exemple :
style="z-index: 1; position: absolute; left: 53.9115px; top: 458.123px;" border="0"
z-index, position et border, c'est la même chose pour chaque images, alors autant le mettre dans un fichier css.
Ensuite y left et top on un nombre flottant, supprime ce qui ce trouve après la virgule, floor, round ou ceil, je sais pas quel fonction faut utilisé.

Ensuite le
td class="case" onclick="javascript:move(1,2)">
Je pense que tu peux enlever class="case" et dans le fichier css faire un truc du genre :
#carte td{
//css d'une case
}

Voilà, c'est tout ce que j'avais à dire ^-^.

[Argorate]

Le rendu est sympa, meme si je trouve que les maps hexagonale enlevent des possibilités en jeu, notament sur le mouvement, mais ça c'est un choix auquel tu as du réfléchir

Tu comptes faire une sorte de Wesnoth?

[Kassak]

@J-12, tes modifs sont appréciables, ça allège pas mal le code source, mais ne résout pas le problème de lag du script en ajax, mais je viens d'enlever tout ce que je pouvais du code source, c'est plus clair comme ça

@Argorate, j'ai choisi une map hexagonale, déjà pour changer de d'habitude, et car je trouve ça plus joli. Je ne compte pas faire un wesnoth (juste me servir des ressources ), mais pour l'info, se sera un jeu axé PvP.... (et je pense que pour les map type arène ou champ de bataille, on va revenir sur une bonne vieille 2D !)

[Harparine]

Y a-t-il un compte test ?

[Kassak]

Lis le 1er post