Discussion :

[pyrofox]

Bonsoir,

Je développe un jeu en JavaScript où il y a notre personnage qui doit détruire des ennemis. Il peut y avoir une quinzaine d'ennemi dans un niveau, et chacun tir une balle environ toutes les 3 secondes. Chaque fois qu'une balle est tirée, plusieurs variables sont utilisé pour calculé la trajectoire de la balle et pour l'initialiser.

Le problème c'est qu'en regardant le gestionnaire de tâches, je me rend compte que Firefox pompe de plus en plus de mémoire et assez rapidement. La consommation devient vite excessive pouvant atteindre 1 500 000 même bien plus si on joue longtemps. Si je ferme l'onglet, ça ne diminue pas la consommation, il faut donc fermé Firefox pour libérer la mémoire.

J'ai essayer de faire un setTimeout qui rend au bout de 10 secondes toutes les variables égale à undefined, j'ai essayer aussi avec null mais ça n'a aucun effet.

Quelqu'un peut-il m'expliquer comment éviter toute cette consommation en réduisant la mémoire ? Merci

[Invité]

et les balles sont elle supprimé ou réutilisé ou a chaque fois tu recrée des balles sa expliquerait la consommation mémoire

[pyrofox]

Je ne programme pas en objet. Quand je créer mon ennemi, j'ai une fonction tirBalle qui utilise setInterval pour créer des balles (fonction tirer) à peu prêt toutes les 3 secondes.

Dans le fichier concernant les tirs, j'ai ma fonction tirer qui charge toutes les variables locales. Du coup je recréer des variables à chaque fois.

Par ailleurs, il peut y avoir plusieurs balles pour cet ennemi sur la map.

Y a-t'il une façon de supprimer totalement ces variables locales au bout de 10 secondes avec un setTimeout ?

[Invité]

affecte leurs la valeur null

[pyrofox]

J'ai essayer de faire un setTimeout qui rend au bout de 10 secondes toutes les variables égale à undefined, j'ai essayer aussi avec null mais ça n'a aucun effet.

J'ai testé ça :

Code :

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

setTimeout(function(){balle=null; destinationMax=null; idBalle=null;}, 10000);

J'ai essayé avec undefined aussi. Ca rend bien la variable égal à null mais elle prend toujours autant de place et le gestionnaire de tâches indique que la mémoire continuer d'être utilisé.

[Invité]

le problème vient peut être d' ailleurs

[SylvainPV]

Ca pourrait t'être utile :
http://www.developpez.com/actu/46465...-applications/

[pyrofox]

Merci, ça à l'air bien sympathique, j'essayerai d'installer ça et je vous dis ce que ça donne. J'ai une autre question en attendant, le jeu freeze toutes les 5 à 10 secondes quand il y a trop d'ennemis qui tires dans un niveau. J'ai tester sous firefox, ie, chrome, opéra et il n'y a que firefox qui freeze.
J'ai fais un test, en 1 seconde il y a maximum 14 tirs qui prennent en tout pas plus de 25ms réunis (sois environ 1 à 2ms par tir). Je pense pas qu'ils prennent beaucoup de temps, mais ils sont utilisés par JQuery avec animate. Pourquoi ai-je un freeze qui perturbe ma détection des collisions ?

[SylvainPV]

Impossible de te répondre sans une analyse approfondie, ça peut venir de tout et n'importe quoi. Pour info, jQuery.animate calcule et attribue les règles de style en inline à intervalles réguliers. C'est la méthode la plus largement supportée, mais elle est très lente comparée aux transitions/animations CSS ou à l'API canvas. Je crois qu'il existe une librairie qui permet de faire en sorte que jQuery.animate utilise les animations CSS lorsqu'elles sont supportées par le navigateur. Ça serait un moyen très simple de booster tes perfs, en complément d'une passe d'optimisation / chasse à la fuite mémoire.

[pyrofox]

D'accord, je vais essayer de me renseigner un peu sur tout ça, je te remercie pour tes réponses et te tiendrai au courant de l'avancement

[Watilin]

Peut-être une autre piste : les setInterval ne seraient pas stoppés, et donc s'accumuleraient indéfiniment.

Je te conseille de prendre l'habitude de toujours conserver le numéro d'interval/timeout, pour pouvoir le stopper dès qu'il ne sert plus.

Code :

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

1
2
3
4
5
6
7
8
9
var timerId = setInterval( ... );
// ou
var timerId = setTimeout( ... );
 
// plus tard
 
clearInterval(timerId);
// ou
clearTimeout(timerId);

[pyrofox]

Voilà comment je fonctionne pour les intervals :

J'ai ma fonction animate qui déplace la balle avec :

Code :

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

1
2
// stopAnimate supprime la balle du DOM
$(balle).animate({left:destinationMax[0], top:destinationMax[1]}, vitesse, "linear", function(){stopAnimate(this); clearInterval(interval );};

Et ma fonction interval qui est supprimer quand l'animation se termine :

Code :

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

var interval = setInterval(function(){calculCollision()}, 50); // En simplifié

Concernant le setTimeout, je ne m'en sert quasiment pas.


Pour ce qui est du lien concernant le Leak Finder, j'ai essayé toute la journée, mais c'est particulièrement dur à installer
Je vais essayer d'autres solutions, je vais également mettre toutes mes variables locals non utilisés à null.

J'essaye également de trouver une alternative à JQuery puisque l'ennemi qui pose problème ne tire que sur un axe.

Je continuerai mes tests jeudi, j'ai 3 jours chargés en début de semaine.

[le_chomeur]

si tu veux créer un jeux avec de nombreux éléments actif , je te conseillerais de t'orienter sur les workers en javascript

une petite recherche sur google te fournira assez de documentation

[pyrofox]

Ah
Merci, je pense que tu m'as donné une bonne piste ^^ Ca à l'air super, j'avais déjà chercher comment faire des calculs en parallèles sans succès. Je prendrai le temps de lire un tuto là-dessus. Mon jeu est quasiment terminé, il me manque quelques réglages.

[pyrofox]

Pour ce qui est du freeze par firefox, j'ai finalement repris toutes les lignes de code pour mettre un maximum de variables à null quand elles ne sont plus utilisées. Le problème est ainsi réglé.

Concernant la fuite de mémoire, j'ai finalement détecté le problème. Lorsqu'un ennemi tir, il y a un bruitage qui joué, si je désactive la ligne qui insert le son, je n'ai plus de problème. J'utilise buzz pour exécuter les bruitages.

Code :

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

1
2
3
sound = new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]});
sound.setVolume(50);
sound.play();

On dirait qu'une fois que le son est fini, il n'est pas libéré automatiquement de la mémoire. Je vous tiens au courant quand le problème est résolu.

[Watilin]

Étant donné que c'est le même son pour tous les tirs (du moins, je suppose), effectivement ça coûte trop d'espace d'instancier un nouveau buzz.sound à chaque fois. Pourquoi ne pas réutiliser le même ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var sound = new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]}); // variable globale
sound.setVolume(50);
 
...
 
function ...( ){
    ...
 
    sound.play();
 
    ...
}

[pyrofox]

J'ai passé toute la journée à essayer de régler le problème, c'est pourtant tout bête mais je n'ai rien trouvé. Je vais décrire mes tests pour ceux qui auraient une solution :

- J'ai essayer de réutiliser le même sound à chaque fois, résultat, il faut attendre qu'un son finisse pour qu'un autre puisse être joué. Donc au lieu qu'il y ai disons 4 tirs en une seconde, il y en a 1 toutes les 2 secondes. Impossible de faire 2 tirs parallèle.

- J'ai donc essayé de faire un tableau avec 10 instances à l'intérieur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
sonTab = [
new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]}),
new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]}),
new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]}),
etc..
};
 
increment = 0;
 
function .. (){
var sonAJouer = sonTab[increment];
increment = increment%9==0? 0 : increment +1;
}

Le but était d'avoir plusieurs instance à utiliser, et éviter de recréer indéfiniment l'objet. Mais ça ne fonctionne pas non plus :/


- Dernière tentative :

Code :

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

var time = setTimeout(function(){sound.stop(); sound = null}, 1000);

- Le but ici est d'essayer de détruire l'objet pour qu'il ne le garde pas en mémoire. J'ai donc essayer avec la fonction stop() de buzz, et également en rendant sound égal à null.




Il n'y a pas beaucoup de documentation sur buzz, j'ai lu le site en entier et ils n'en parle pas. Les forums sont également vides à ce sujet.. Quelqu'un à une idée ?

[Invité]

si la bibliotheque audio utilisé fonctionne avec l'api audio du html 5 pour redémarrer le son au debut

Code :

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

sonTab[i].currentTime=0

[pyrofox]

J'ai finalement adopté une solution au problème :

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
 
// Je créé 10 variables (je fais des variables plutôt qu'un tableau, parce qu'étrangement, je n'arrive pas à faire fonctionner mon code en faisant un tableau..
soundEnnemi1 = new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]}); 
soundEnnemi2 = new buzz.sound("musique/ennemi1", {formats:["ogg", "mp3"]}); 
// (etc.. jusqu'à 10)
 
// La variable qui s'incrémente me permet de savoir quel variable utiliser, comme ça j'utilise
// d'abord l'objet 1, puis l'objet 2, etc.. pour laisser le temps à la musique de se terminé
incrementSonEnnemi = 1; 
 
 
function ... (){
 
    if(type == "ennemi")
    {
        window["soundEnnemi"+incrementSonEnnemi].play(); // Ici j'appelle la variable soundEnnemi1, puis soundEnnemi2, ça dépend de la valeur de incrementSonEnnemi
        incrementSonEnnemi = incrementSonEnnemi%10==0? 1 : incrementSonEnnemi+1; // La variable revient à 1 quand elle est au max
    }
}

Je fais un peu le même principe pour chaque bruitage, suivant mes besoins. Par exemple pour le bruitage qui fait exploser mes bulles (mon personnage tir des bulles comme dans un jeu de bubble), je n'ai besoin que d'un seul objet, je joue donc toujours le son du même objet.


Maintenant j'utilise donc toujours les même objets et j'évite donc les fuites de mémoire. J'ai également dû raccourcir le bruit des tirs de 3secondes à 0.8seconde (le reste n'était pas utilisé).




Récapitulatif du post :

- J'ai corrigé les freezes qui faisait que sous firefox, toutes les 10 secondes tout se figeait 1 seconde, pour ça j'ai mis un maximum de variable à null quand elles étaient plus utilisés.

- J'ai réutilisé les mêmes objets pour gérer le son.

- J'ai commencé l'apprentissage des workers pour le traitement en parallèle


Une fois que j'aurai réduit un peu les latences je pourrai enfin mettre mon jeu en ligne.

Merci pour l'aide