Discussion :

[dukej]

Ton besoin me fait surtout penser aux webworkers (https://developer.mozilla.org/En/Using_web_workers)
A mon avis c'est exactement ce dont tu aurais besoin

Ca te permet de lancer des actions en parallele sans pourrir le processus principal.

[Darkyl]

Bonjour à tous,

Merci de vos réponses et désolé si j'ai mis du temps à répondre.

Bon, alors, j'ai repris entièrement le code, j'ai tenu compte de toutes vos remarques.
Pour l'instant, j'ai mis en place une map simple, avec survol de la souris et changement de texture de la case survolé et remis à jour de la case survolé avant.
J'ai fait juste ça, j'ai essayé d'optimiser un max, j'ai notamment llu plein de cours sur les classes, limité les appels au dom, mis en variables un max et repensé la meilleurs archi possible,le résultat est là:

Attention, sur firefox, la page bug (alors qu'en local elle marche bien), je pense qu'il surcharge au moment de la création des n*m images, pourtant j'ai bien fait une fonctions de mise en caches des différentes images utilisés avant de construire la map.
Donc, ouvrez le lien dans une nouvel page, pas un nouvel onglet, sinon vous allez devoir tout fermé... ATTENTION
(pffff, je comprend pas pourquoi il bug en ligne et pas en local )

test

C'est le plus rapide comme actualisation du survol que j'ai pu faire.

Je suis obligé pour afficher une image, de créer un objet "<img>" ?
Je ne peux pas peindre l'image directement sur le div_parent ?

(ça augmenterai considérablement les performances pourtant )

Chrome marche trés bien, il est fluide quasi temps réel.

Qu'est ce que vous en pensez?
J'ai vraiment optimisé de partout mais je trouve que firefox (qu'en il surcharge pas ), est encore un peu lent à l'actu.

Question générique:

Quelle est la fréquence de déclenchement du mouseover au plus rapide?
Je veux dire que si l'utilisateur bouge sa souris trés trés vite, la fonction onmouseover de mon div_map, se déclenche à quelle fréquence maxi?

J'ai testé en mettant un setinterval qui gère le tout en me disant que cela sert à rien de déclenché le survol trop souvent (où à interval régulier trop proche en tout cas) et cela ne change rien, c'est même plus lent)

dukej - Champialex : merci beaucoup pour les liens, j'ai cherché partout des cours sur l'optimisation mais rien trouvé.
Même si c'est en anglais (merci chrome translate), ils me seront utils.
Merci encore.

Willpower - Je vais voir pour les delai entre calcul, laissé un peu le temps au navigateur de rafraîchir la page.

NoSmoking - Mon code est plus propre maintenant? A part les n*m objet img (que je suis obligé de créer pour afficher une image )

Avant de rajouté des couches de code, j'aimerais savoir ce que vous pensez de mon code, de sa vitesse d'exécution et de sa propreté...

Je trouve quand même cela un peu long (bon, d'accord j'ai mis 100*50images, pas de quoi faire ramer un proc )

[Willpower]

Je suis obligé pour afficher une image, de créer un objet "<img>" ?
Je ne peux pas peindre l'image directement sur le div_parent ?

(ça augmenterai considérablement les performances pourtant )

oui tu peux utiliser :
background-image: repeat

par contre tu devras trouver une astuce pour avoir la bonne forme final si tu veux que ta carte globale ressemble à un losange et non un rectangle.

[Darkyl]

Ma map est faite de n*m image.
Donc je remplacerai ces n*m objet image() par des area avec un backround=image.src ?

A mon avis ce n'est pas adapté pour mon cas.

Je voulais juste dire qu'en delphi, on peut créer un objet image sur le canvas ou directement "peindre" l'image au coord x,y sur le canvas.

html/javascript:
Apparemment, si je veux afficher une image, il faut créer l'object image().

De plus, je gère déjà les coord de la souris donc le bénéfice des area sur la zone clickage ou survol ne me sers à rien.

J'ai bien compris ce que tu voulais dire ?

Je précise que mes objets image() sont créer à la volée, avec position:absolute et coord left et top calculé lors de l'initialisation des object image...

[Willpower]

Non, mais déjà ne créé pas d'objet image (je n'ai pas lu le passage de ton code en question) mais en javscript ça sert juste à préloader une image que tu afficheras plus tard, donc déjà si tu fais plusieurs objets images pour la même image, c'est mal. et comme tu l'affiches directement ta map, tu ne dois pas "préloader". donc tu crées directement tes objets du DOM.

Ensuite, effectivement, je ne connais pas trop les map/area mais ça n'a pas l'air d'être la solution, au temps pour moi.

Tu fais un grand div avec un image repeat (du devras adapter ton images pour que ce soit des carrées juxtaposables (les mettres les uns à cotés des autres) OU ALORS tu crées une image en javascript avec CANVAS + getContext(2d).

[Darkyl]

ok merci, je vais voir du côté de canvas et getcontext.

Le hic, c'est qu'il ne me faut pas 1 grande image de fond de map, je veux vraiment avoir mes n*m image car je change des images des fois dans le jeu (par exemple la texture de la case_a_b).
Donc si je fais avec ta methode (sans créer les n*m images), je rafraichi le background du div en reconstruisant la nouvel grande image alors que là, il me suffit sur l'objet image() concerné, de changer sa source...

Mais tu as peut-être raison, si c'est plus rapide, je testeré...
En fait, mon jeu ne rafraichi jamais tout le div, seulement quelques object image().
On verra ce qui est le plus rapide.

Je vais me renseigné sur canvas...

[Darkyl]

Encore merci :
j'ai trouvé cela (entre autre) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.src = 'backdrop.png';
    img.onload = function(){
      ctx.drawImage(img, 0, 0);
      ctx.beginPath();
      ctx.moveTo(30, 96);
      ctx.lineTo(70, 66);
      ctx.lineTo(103, 76);
      ctx.lineTo(170, 15);
      ctx.stroke();
    }
  }

je vais essayer...

[Darkyl]

ok, c'était top beau, canvas est pas compatible IE... et les méthodes de contournements consistent à faire ce que je fais déjà, c'est-a-dire des image()...

[Willpower]

Le hic, c'est qu'il ne me faut pas 1 grande image de fond de map, je veux vraiment avoir mes n*m image car je change des images des fois dans le jeu (par exemple la texture de la case_a_b).

tu superposes une image au dessus. ;-)

Par contre, ne pas avoir de grande images t'économises du chargement d'une grosse image lors du premier chargement de la page. ;-)

[Willpower]

ok, c'était top beau, canvas est pas compatible IE... et les méthodes de contournements consistent à faire ce que je fais déjà, c'est-a-dire des image()...

IE9 et 10 si !

Mais bon, moi j'avoue ne plus me soucier des vieux IE, si je vois que mon site donne trop mal sur ces navigateur, je fous un GROS screen "MON SITE N'EST PAS COMPATIBLE AVEC TON NAVIGATEUR, MET-LE A JOUR OU TELECHARGE CHROME^^".

[Darkyl]

MON SITE N'EST PAS COMPATIBLE AVEC TON NAVIGATEUR, MET-LE A JOUR OU TELECHARGE CHROME

, même si en développement pro, ça craint un peu...

Faut juste que je vois si la création n*m objet image() prend et utilise (aprés coup) beaucoup de ressources par rapport à un seul canvas et n*m image 'drawer' dessus et actualisation régulièrement...

A mon avis, l'utilisation des image() est quand même mieux, mais c'est mon flair qui dit ça, et on est dimanche alors...

D'ailleurs, merci d'être derrière ton clavier... Je vois qu'entre passionnément, on va pas à la messe .

D'ailleurs, sais-tu pourquoi Firefox rame autant avec javascript (par rapport à chrome)?

(concernant le résolu, je le mettrai quand je serais au même stade de développement que au début du post, c'est-a-dire bientôt, pour voir si l'optimisation abien marché).

[Willpower]

Voila, comment générer ta map au mieux (niveau images) :

http://www.hommk.net/test.htm

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
                #map{
                        position:absolute;
                        top:0;
                        left:-10px;
                        width:1500px;
                        height:1000px;
                        background: url(img.png) 50% 50% repeat;
                }
                #wrap-left{
                        position:absolute;
                        top:0;
                        left:0;
                        width:500px;
                        height:1000px;
                        border-left: solid white 500px;
                        border-top: solid transparent 1000px;
                }
                
                #wrap-right{
                        position:absolute;
                        top:-1000px;
                        left:490px;
                        width:500px;
                        height:1000px;
                        border-right: solid white 500px;
                        border-bottom: solid transparent 1000px;
                }
        </style>
</head>
<body>
	<div id="main">
		<div id="map"></div>
		<div id="wrap-left"></div>
		<div id="wrap-right"></div>
	</div>
</body>
</html>

[Darkyl]

Merci d'avoir testé ta méthode.

J'ai pas encore essayé moi mais le cas où la texture d'une case peuvent changé étant trés rare, cela peut-être une bonne technique de générer l'image de fond à chaque fois qu'une textures changent. Les batîments étant des rajouts par dessus, pas besoin d'actualiser la map.

Mais la génération de l'image de fond sera une lecture du tableau_map[x][y]
qui 'drawera' les images des textures des cases dans le canvas (.map) à leurs bonnes coords, et non un simple background repeat, car mes images sont positionnés fidèlement et ne sont pas toutes les mêmes.

Donc, ta technique de draw sur canvas peut_être trés intéressante pour le temps d'exécution de la création de la map, puis pour les ressources non consommé par les n*m image() (non crées) en temps réel aprés .

Merci Merci

[NoSmoking]

tu peux sensiblement accélérer la création de tes images en utilisant la méthode cloneNode d'une part et d'autre part en travaillant dans un DocumentFragments.

[Darkyl]

Bon, j'ai testé deux méthodes pour créer les n*m object image() de la map.

La première :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
		for (var x=1;x<(map_du_jeu.length);x++)
		{
			for (var y=1;y<(map_du_jeu[x].length);y++)
			{
 
			var case_en_cours=map_du_jeu[x][y];
 
 
			var sentence_html_case_en_cours=retourne_sentence_html_image(case_en_cours.nom,'absolute','block',((x-1)*hauteur_case+Math.round((y-1)*(hauteur_case-1)/2)),((y-1)*hauteur_case),case_en_cours.zindex,largeur_case,hauteur_case,case_en_cours.texture.image_texture.image_loader.src);
//petite fonction qui retourne le html d'un objet image()
 
			$('#'+div_parent_map.nom).append(sentence_html_case_en_cours);
 
case_en_cours.objet_image=nouvel_object_image;			
			}		
 
		}

deuxième méthode :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var map_fragment = document.getElementById(div_parent_map.nom);
 
 
		for (var x=1;x<(map_du_jeu.length);x++)
		{
			for (var y=1;y<(map_du_jeu[x].length);y++)
			{
 
			var case_en_cours=map_du_jeu[x][y];
 
			var nouvel_object_image = document.createElement("img");
 
					var left=((x-1)*hauteur_case+Math.round((y-1)*(hauteur_case-1)/2));
					var top=((y-1)*hauteur_case);
 
					nouvel_object_image.setAttribute("id", case_en_cours.nom);
					nouvel_object_image.setAttribute("name", case_en_cours.nom);
					nouvel_object_image.setAttribute("src", case_en_cours.texture.image_texture.image_loader.src);
					nouvel_object_image.setAttribute("style", "position:absolute; display:block; z-index:"+case_en_cours.zindex+"; left:"+left+"px;top:"+top+"px;");
					nouvel_object_image.setAttribute("src", case_en_cours.texture.image_texture.image_loader.src);
					nouvel_object_image.setAttribute("width", largeur_case);
					nouvel_object_image.setAttribute("height", hauteur_case);
 
 
 
 
				map_fragment.appendChild(nouvel_object_image);
 
 
				case_en_cours.objet_image=nouvel_object_image;			
			}		
		}

La première méthode prend environ 1sc984 (firefox) , 1sc 540 (chrome).
La deuxième environ 1sc200 sous firefox, 300ms sous chrome.

+1 pour la deuxième méthode (merci NoSmoking)

[Willpower]

je maintiens que ce n'est pas la bonne solution de surcharger ton DOM avec n*m balises img.

pourquoi ne pas utiliser ma solution css : http://www.hommk.net/test.htm
et de rajouter les éléments "différents" par dessus ?

[Darkyl]

Ben, des éléments différents, je vais en avoir un sacré paquets (pas les batiments ou autres objets par dessus, mais des textures de fond de cases. Rien que l'eau, je fais une mer et un ruisseau.

Donc si au final, je me retrouve avec autant (même si ca me ferait mal) d'éléments de textures rajoutés que d'images du backgoround repeat, alors autant les créer direct et plus au fur et à mesure (les object image()). non?

Mais je testerai quand même. Merci de ta solution.

Ce que je retiens en tout cas :
- firefox est bien plus lent à exécuter du javascript que chrome.
- L'ajout de html est plus lent que la creation direct d'objet.

Par hazard, tu connais pas une fonction (bibliothèque) qui prend une texture carrée et renvoie une image déformée selon les coord des 4 points de l'image? heu, je sais pas si je suis clair là)

[Darkyl]

Je réfléchis même à ne pas surcharger le document du div portant la map. A créer que les images() visibles + 2 rangées invisibiles de chaques côtés.
Puis si on déplace la map, le scroll se déplace un peu, création de 2 rangés supp du côtés où on va, suppressions des deux rangés du côtés opposé etc...

Aprés, l'affichage d'une images (celle d'un batiment ou d'une textures, ou d'un perso ...) ne se fera que s'il est visible ou non.

Cela fera beaucoup de calcul en direct (et en setinterval proche) mais enlèvera un poid considérable sur le html (dom) de mon div map...

Le bénéfice ne se fera sentir que si la carte est trés grande.

pas comme cela qu'il faudrait faire?

(bien sûr, je peux y insérer ta méthode pour l'affichage du fond)

[NoSmoking]

ce n'est pas exactement comme cela que je voyais la chose, la ribambelle de setAttribute plombe également les performance, il est recommandé de passer par des class CSS, et pourquoi à tout prix des IMG et non pas des DIV avec un background-image.

J'arrive pour
- Chrome à 120ms
- FF v3.6 à 580ms
- IE v7 à 260ms

j'arrive même à descendre pour
- Chrome à 110ms
- FF v3.6 à 210ms
- IE v7 à 450ms, le passage au display:block est visiblement très gourmand
en travaillant sur une DIV en display:none;.

le fichier de test

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Test Clonage Darkyl]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
#map_du_jeu{
  width: 1230px;
  height: 750px;
  overflow: hidden;
  background-color: white;
  border: 2px solid red;
  position: absolute;
  display: none;/**/
/*  display: block;/**/
  left: 20px;
  top: 20px;
  z-index: 10;
}
.imagefond{
  height:28px;
  width:44px;
  position:absolute;
  display:block;
  z-index:1;
  background : url(http://s408852608.onlinehome.fr/ressources_graphiques/textures%20map/herbe2.png);
}
</style>
</head>
<body>
<div id="debug" style="position:absolute;top:0;left:100px;"></div>
<div id="map_du_jeu"></div>
<script type="text/javascript">
var iDeb = new Date().getTime();
var LARG = 30, HAUT = 28, PENTE = 14;
var lig, nbLig = 50,
    col, nbCol = 100,
    posX, posY, offsetX =0;
// zone de jeu
var oClone,
    oDest = document.getElementById('map_du_jeu');
var bFlag = !oDest.clientHeight;
// creation de l'element a cloner
var oFond = document.createElement('DIV');
oFond.className = 'imagefond';
// boucle de création
for( col = 0; col < nbCol; col++){
  posY = 0;
  posX = offsetX;
  for( lig = 0; lig < nbLig; lig++){
    oClone = oFond.cloneNode( true);
    oClone.style.left = posX +'px';
    oClone.style.top  = posY +'px';
    oClone.id ='case_' +lig +'_' +col;
    oDest.appendChild( oClone);
    posY += HAUT;
    posX += PENTE;
  }
  offsetX += LARG;
}
if( bFlag) oDest.style.display = 'block';
document.getElementById( 'debug').innerHTML = new Date().getTime() -iDeb;
</script>
</body>
</html>

[Willpower]

Perso, je viens de faire ceci (aussi avec des background-image) :

http://www.hommk.net/JEU/

Le code est extrêmement court et simple et les images sont aux case par case, le tout en 4 DIV seulement :

map

hover

lac (généré en js)

maison (généré en js)


Les cases ont un hover et le clique te dis ce qu'est l'objet en fonction de la position sur la carte. (ça bug avec le scroll, je dois le rajouter).