[Résolu] Saccade, optimisation et fluidité (carte de jeu multijoueur)

Bonjour tout le monde,

je viens vous voir avec un problème d'optimisation me semble-t-il sur lequel je plante complètement depuis des mois...

Pour y voir plus clair, j'ai fait une page test (sur laquelle j'ai désactivé toutes les fonctions sauf le déplacement) :

-http://yui-aventure.jeux-lothi.com/test1.php

Mon problème est en 2 parties, l'une "urgente" dans le sens où c'est la plus problématique et de loin, l'autre est un effet auquel j'aimerais arriver, mais dont je ne suis pas certaine que ça soit possible en js/php/html/css.

La partie "urgente" :
A l'heure actuelle, sous firefox et sur opera, le déplacement est "fluide", dans le sens où la seule saccade est celle du rechargement de la div de carte.
Mais sous chrome autant que sous IE (que ça soit le 9, le 10 ou le 11), le site saccade complètement, comme s'il chargeait à chaque fois toute la structure; et ce malgré un cache existant assez complet.

Comment est-ce que je pourrais échapper à ce soucis ? Une autre fonction que .reload(), pour recharger la carte ?
Notez que la carte est bien sûr généré en PHP et que je doute que charger juste la div puisse marcher sans que je doive faire un changement global.




La seconde question est plus "sensible" à mon goût. J'aimerais en effet pouvoir rendre le déplacement vraiment fluide, à la manière des jeux flash / téléchargeable.
Je sais qu'il existe la fonction animate en jquery, qui me permettrait de déplacer de manière fluide mon bg et les monstres...
Yuimen-rpg est un jeu en multi-joueur. Et donc lors du déplacement, je dois vérifier si les monstres, les autres PJs et les drops sont toujours là et si de nouveaux sont pas apparus entre temps.

Hors, là je bloque totalement. Comment le faire pour que ça soit optimisé et fluide ?
Et est-ce que JQuery est vraiment capable de gérer de manière fluide dix, quinze voire même 20 ou 30 objets différents en même temps ? Sachant que je vais devoir utiliser du animate(), des changement de source, de background, de la suppression de noeuds dans le dom et de l'ajout de noeud. Le tout avec une transmission ajax et JQuery (que je trouve déjà lourd à l'heure actuelle avec 2 transactions ajax coup sur coup).

Peut-être une autre bibliothèque de fonction que JQuery me permettrait de le faire plus aisément...

Et si ce n'est pas faisable; est-ce qu'il y a moyen d'utiliser un module flash (qui ne gèrerait que la carte) dans un code php/js/html/css/mysql ? Est-ce qu'il y a moyen de communiquer entre le mysql/flash ? Bref, est-ce que ça serait possible de faire juste cette partie-là du jeu en flash en laissant le reste dans mes langages habituels ?
Sinon, est-ce qu'il y aurait un autre langage qui pourrait gérer cette partie du jeu et qui soit compatible avec mes langages classiques ?
(je ne cherche pas à être jouable sur smartphone et j'y connais rien à actionscript, mais apprendre un langage me fait pas peur ^^)


Voilà donc le soucis, si vous avez des pistes, que ça soit pour la première ou la seconde question, n'hésitez pas...

Merci d'avance ^^
Modifié par Lothindil (22 May 2014 - 10:56)

Bonjour Lothindil,

J'ai essayé trois méthodes de rechargement :

<button onclick="window.location.reload(false);">Reload False</button>
<button onclick="window.location.reload(true);">Reload True</button>
<button onclick="window.location.href = document.URL;">window.location.href = document.URL;</button>

Sur papier, la première technique devrait fonctionner, mais ce n'est pas le cas dans Internet Explorer et Chrome.

documentation Mozilla a écrit :
reload(forceget) Recharge le document depuis l'URL actuelle. forceget est une valeur booléenne, qui lorsqu'elle vaut true force la page à être rechargée depuis le serveur. Si elle vaut false ou n'est pas précisée, le navigateur peut recharger la page depuis son cache

https://developer.mozilla.org/fr/docs/Web/API/window.location

La troisième méthode fonctionne correctement partout selon des tests rapides que j'ai effectué. Comme c'est un point très sensible pour ton jeu, je t'invite évidemment à faire des recherches et des tests plus approfondies avant de mettre ça en production.

Il existe d'autres méthodes pour recharger une carte et évidemment, si tu veux mettre en place le déplacement fluide, il faudra revoir complètement la partie du rechargement.
Modifié par Tony Monast (22 May 2014 - 16:13)

C'est la première solution qui est en place, justement en suivant l'indication de mozilla que tu as cité, parce que j'avais le même problème sous firefox il y a quelques mois. Mais manifestement, que ça soit false ou true ne change rien pour chrome ou IE, ce qui est problématique.


Et j'avoue que j'avais déjà fait des recherches (ça fait depuis mars que je cherche à vrai dire), j'étais tombée sur la solution du .href que j'avais abandonné, parce qu'elle me semblait tordue (elle revient à appuyer sur un bouton redirigeant vers carte.php finalement).


Et oui, je me doute bien qu'il faudrait revoir tout le rechargement si je passe à des déplacements fluides... Mais je vois pas du tout par où m'y prendre, comment débuter,... En fait, c'est carrément au niveau de la logique voire de l'algorythmique que je coince. Je vois assez bien comment je pourrais le faire en jeu mono-joueur où la carte ne dépendrait que du joueur (et où donc aucun élément, excepté la position du joueur, change durant un déplacement).

Mais là, c'est pas le cas, on est sur un multi-joueur...

Lothindil a écrit :

Et j'avoue que j'avais déjà fait des recherches (ça fait depuis mars que je cherche à vrai dire), j'étais tombée sur la solution du .href que j'avais abandonné, parce qu'elle me semblait tordue (elle revient à appuyer sur un bouton redirigeant vers carte.php finalement).

Mais concrètement, est-ce que cela donnait le résultat désiré sans bug, avec une carte toujours à jour à chaque action tout en utilisant la cache du navigateur pour les CSS/JS/Images?

Pour la seconde question, est-ce que tu cherches à avoir du vrai temps réel? Quand le joueur B bouge que le joueur A le voit tout de suite bouger sur la carte?

Je l'avais pas testé à vrai dire, faudra que j'essaye ça.


Et non, je veux pas du temps réel. Mais finalement après réflexion, j'ai adopté la solution de passer le jeu en semi-solo (interaction limitée via les mps, les échanges et le marché, mais on est seul sur la carte), ca ne gène pas non plus outre mesure par rapport à mon choix de gameplay (j'y gagne même quelques avantages et en pratique, à part l'affichage, on est déjà dans du semi-solo).
Et je fixe la taille de la carte à la taille de ma fenêtre (là non plus ça ne me gène pas, et ça m'évitera de continuer à produire des cartes de 1,5Mo voire plus, tout en apportant une structure plus claire que celle actuelle par rapport aux tranches de niveaux).

Ce qui me permet coup sur coup : de diminuer le poids des images (carte plus petite = moins lourde), de diminuer la quantité de requêtes (les PJs), de n'avoir qu'à animer le PJ (animate sur la position css) et éventuellement le repop des monstres (via show ou fadeIn comme ils ne bougent plus de place), ainsi que de fixer certains soucis gameplay que j'avais, et de supprimer cette histoire de reload de carte en cadeau.


Je reviendrais quand même dire si la solution .href marche mieux que le .reload(), ça pourrait en intéresser d'autres.
Modifié par Lothindil (22 May 2014 - 19:49)

Bon, après test, non, ça ne marche absolument pas.

tout simplement, parce que mon cache est assez bon... pour que ça ne charge plus rien, à part sur opera (presto, sous opera webkit, ça marche pas non plus).

A se demander si mon cache n'est pas justement trop fort, là d'un coup