Développer un jeu avec Javascript et Canvas : The no tears way

[Xenos]

Sauf qu'un jeu classique est très souvent en plein écran, alors qu'un jeu web, mentalement, est plus joué en mode "multi-tache" (ou en "arrière-plan") qu'un jeu classique. Je me vois mal jouer à World In Conflict par intermittence, alors que les jeux webs sont plus propice à ce genre de comportement de jeu.

Et zut pour la facture, de toute façon, faire monter la facture d'électricité du PC fait baisser la facture de chauffage :p

[Seby63]

Marks, tu ma toujours pas dit ta solutions pour le canvas :p

[Maks]

Tu dessines tile par tile à chaque tour de boucle, il faut que tu mettes en cache tes calques

[Seby63]

Quand tu parle des calques, tu parle de la tile elle même ou de la carte complète?

[quentin01]

Il parle des calques Canvas. Quand on affiche beaucoup de choses il est commun de les regrouper dans plusieurs Canvas qu'on affiche tous sur le même au final.

[Xenos]

Je ne suis pas, mais alors pas du tout convaincu de l'optimisation apportée par l'utilisation de "calques" intermédiaires. S'agit-il bien de faire comme ceci:

• Créer un canvas assez grand (masqué)
  
• Dessiner dedans le terrain
  
• Dessiner un morceau de ce canvas "géant" dans le vrai canvas, celui qui est visible

?

Si c'est bien ce procédé, alors un petit test (autre version, 10x moins longue pour ceux qui ne sont pas sur leur PC fixe) me laisse sceptique. Dans le canvas de gauche, je dessine 126 (63*2=126) fois une image, en changeant sa position (je simule donc le dessin d'une carte isométrique). Je refais ce dessin 1000 fois, et je mesure le temps total. A droite, je ne fais que recopier, 1000 fois aussi, le canvas de gauche (comme si le canvas de gauche était mon "calque").

Résultat? Les deux ont les mêmes performances, avec peut-être un léger avantage à la méthode "non-optimisée" qui consiste à redessiner toutes les tuiles (2760 fps pour le cas "je refais toutes les tuiles", contre 2730 fps pour le cas de droite, donc la différence est négligeable).
Et encore, ça, c'est sous firefox ! Sous chrome, la fameuse "optimisation" détruit les performances du navigateur:
6100fps en mode "classique" (redessiner les tuiles)
3300fps en mode "redessiner le calque" !
Là, le facteur n'est plus négligeable...

Quid de cette fameuse "optimisation" alors? Ou ai-je fait une erreur quelque part?

[quentin01]

En même temps je voudrais pas dire mais ton code de test est faux. start est initialisé avant les deux dessins et tu ne le remet pas à la bonne date quand tu fais le deuxième test. Ce qui veut dire que le temps du test "optimisé" est le temps du test 1 et du test 2 réunit ... ( Or si la différence n'est que de peu de FPS c'est que le test2 est bel et bien optimisé ).

Code corrigé du test : ( La ligne rajouté est commenté )

function draw1(n)

{

	var canvas = document.getElementById('test-1');

	var img = document.getElementById('image');

	var w = canvas.width, h = canvas.height;

	var u = img.width, v = img.height;

	canvas.setAttribute('style', 'width:'+w+'px;height:'+h+'px;border:1px solid black;');

	var ctx = canvas.getContext('2d');

				

	var start = (new Date()).getTime();

	var k = 7, f = 0.9, Jmax=100;

	for (var j=0;j<Jmax;j++)

	{

		for (var i=0;i<n;i++)

		{

			ctx.drawImage(img, (i%k-1)*u*f, Math.floor(i/k-1)*v*f);

			ctx.drawImage(img, (i%k-0.5)*u*f, (Math.floor(i/k)-0.5)*v*f);

		}

	}

	var T = ( (new Date()).getTime() - start );

	document.getElementById('test-1-result').textContent = Math.floor(1000*Jmax/T) + ' Hz (' + Math.round(T/Jmax*1000) + ' µs)';

	

	var start = (new Date()).getTime(); // Cette fois on remet bien à zéro !

	var ctx2 = (document.getElementById('test-2')).getContext('2d');

	for (var j=0;j<Jmax;j++)

		ctx2.drawImage(canvas,0,0);

	var T = ( (new Date()).getTime() - start );

	document.getElementById('test-2-result').textContent = Math.floor(1000*Jmax/T) + ' Hz (' + Math.round(T/Jmax*1000) + ' µs)';

}

[Xenos]

A vouloir coder trop vite...

Exact. Bon, mon préjugé était donc infondé. Alors, il suffit de voir le test dans l'autre sens: comme une preuve effective que l'optimisation est bel et bien une réelle optimisation ^^

FPS x5, c'est non-négligeable en effet.

Merci de cette correction.

[Maks]

Créer un canvas assez grand (masqué)
Dessiner dedans le terrain
Dessiner un morceau de ce canvas "géant" dans le vrai canvas, celui qui est visible

?

C'est ça Utilise jsperf pour les benchmark c'est bien mieux ^^

La seule limite de cette optimisation, c'est si tu met en cache un grand canvas (jeu en plein écran par exemple), tu perds en performance lorsque tu redessines, sous chrome notamment, qui aime pas les trop grand canvas

[Xenos]

Eyuup, j'ai été bluffé par jsperf, mais je n'y ai pas pensé sur le coup... Et comme je l'ai fait à la volée, sur mes heures de travail, je me suis pas attardé à savoir comment faire pour poster sur jsperf :p

Tu as une information sur la "taille maximale" au delà de laquelle l'optimisation n'est plus efficace?