JeuWeb - Crée ton jeu par navigateur
Développer un jeu avec Javascript et Canvas : The no tears way - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Développer un jeu avec Javascript et Canvas : The no tears way (/showthread.php?tid=5893)

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Xenos - 24-05-2013

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


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Seby63 - 24-05-2013

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


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Maks - 24-05-2013

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


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Seby63 - 25-05-2013

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


RE: Développer un jeu avec Javascript et Canvas : The no tears way - quentin01 - 25-05-2013

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.


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Xenos - 31-05-2013

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?


RE: Développer un jeu avec Javascript et Canvas : The no tears way - quentin01 - 31-05-2013

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)';
}



RE: Développer un jeu avec Javascript et Canvas : The no tears way - Xenos - 31-05-2013

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.


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Maks - 31-05-2013

Citation : 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 Wink 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


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Xenos - 31-05-2013

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?