Discussion :

[Darkyl]

Bonjour,

Je travail actuellement sur un projet de jeu video en full javascript.

La question que je me pose aprés avoir bien avancé le projet est:

Le jeu est un city_builder qui gére de gros tableaux avec des gros object.
Je viens de faire un timer benefice_batiment qui met à jour tous les bâtiments construits, en recalculant leur production en cours, leur attribution de main d-œuvre, l'attribution de locataire pour les bâtiments d'habitation...

- Pour l'instant, je n'ai pas du tout optimiser la programmation ou la mise en cache des images, il y a beaucoup de rappel à des fonctions au lieu de variable....

Mais, j'ai remarqué depuis l'introduction d'un timer benefice_batiment, que le jeu ramait beaucoups. Je n'ai pas d'analyseur d'environnement javascript, n'ai pas accés au fuite mémoires, au inspection de variables et tout le tra lala mais avant d'optimiser le code:

- Javascript est-il (ainsi que l'environnement dans lequel il est employé, c'est à dire un navigateur internet) assez puissant pour gérer un jeu de ce type?
Avec timer toute les sc qui calcul sur des gros objets...
Ou est-ce simplement mon code qui est a optimiser....?

[NoSmoking]

Bonjour,

- Pour l'instant, je n'ai pas du tout optimiser la programmation ou la mise en cache des images, il y a beaucoup de rappel à des fonctions au lieu de variable....

Ou est-ce simplement mon code qui est a optimiser....?

pour commencer tu t'ai fourni la réponse.

[Darkyl]

Je m'attendais à cet réponse ...

Je demande , avant de revoir entièrement mon code, l'expèrience des créateurs d'apllication javascript orienté objet. A savoir, est-on limité par la mémoire (outre la config des paramètres du navigateur) en Javascript sur un navigateur?

Si c'était le cas et cela s'avérait impossible de développer un caezar (city builder) même avec un code optimisé, alors je m'orienterai vers un autre choix de langage...

Telle était ma question.

[Willpower]

javascript est je pense assez puissant pour gérer des gros jeu avec beaucoup d'actions par secondes, après il faut optimiser c'est sûr et encore plus le rafraîchissement du DOM qui fait rapidement lagger une interface.

Edit:
Niveau rafraîchissement, je pense qu'un interval de 20 millisecondes peut déjà gérer des millions de lignes de code alors qu'un raffraichissement des données d'un jeu (hors animations) ou d'un chat peut se faire (en général, ça dépend du jeu bien sûr) toutes les 2-3 secondes sans que le joueur ne soit gêné par une "attente".

[Willpower]

Il existe pas mal de jeux du genre en javascript, voici le dernier en date : uprisingempires.com


Donc la réponse à ta question : oui javascript peut suivre, maintenant il faut avoir le niveau pour coder un jeu de cette ampleur, et en général ce n'est pas une personne seule qui va coder un truc pareil.

[Darkyl]

merci de ta réponse.

Là, sans optimisation, j'arrive à peine à parcourir deux objets avec 20 propriétés par sc sans que cela se voit.

Ce qui a de bizar est que sans toucher au jeu, si on le laisse tourné, il va ramer de plus en plus.

Je dois avoir des fuites mémoires ou des duplicata de variables ou je sais pas quoi.

Firebug permet-il de voir les variables à l'éxécution et leur mémoire?

si jamais:
jeu

[Darkyl]

merci pour le lien, je connaissais pas.je vais aller voir mais si c'est comme tous ceux que j'ai déjà essayer, aucun ne permet de gérer la map sous forme de case comme dans caezar... C'est juste des emplacements clickables, rien de plus.

A voir donc, mais merci

[Willpower]

aucun ne permet de gérer la map sous forme de case comme dans caezar... C'est juste des emplacements clickables, rien de plus.

Qu'entends-tu par "sous forme de case" ?

[Willpower]

arg oui, je viens de voir, désolé si je puis me permettre, mais ... c'est affreux (niveau code) ! faire 100 images au lieu d'1 !

faire 100 event "onmouseover" au lieu d'1 seul -> horreur et source de lags pas croyable !

tu dois faire un seul event sur toute la carte "onmousemove" et soit regarder dans quel élément tu te trouves via des variables js et la position de la souris récupéré dans l'event, soit à l'aide de qqes images (gissements de fer, centre ville) qui laisseront passé l'event de la carte en dessous mais seront la "target" déclencheur de l'event (event.target) et donc tu pourras gérer l'évenement en fonction.

[Willpower]

Tiens un code que j'avais fait y'a longtemp : http://www.hommk.net/KAMELOOT/

Un seul event onmouseover et un seul event click. ;-)

[Willpower]

Si tu veux un site qui fonctionne pas "case" tu as mightandmagicheroeskingdoms.ubi.com


eux font tout à la position uniquement (contrairement à mon exemple à moi qui se repère pas rapport à l'objet html) eux regarde la position de la souris, et calcul par rapport à la taille d'une case :

exemple
une case fait 20x20 (pxl)

la position de la souris est : 154px,36px

154/20 => la souris se trouve sur la 7eme colone
36/20 => la souris se trouve sur la 2ème rangé

après il suffit de regarder dans l'objet javascript l'objet rangé[2]colone[7] s'il existe on traite sinon on fait rien.

[Darkyl]

Merci de te pencher sur mon cas.

Concernant les cases, je fais déjà ta deuxième méthode, celle du calcul de i, j de la case en fonction des coord souris, puis renvoie de map[i][j] qui est une case avec ces propriétés.

Par contre, ce que tu me dis sur les images, ca m'intéresse vivement. Aussi,je vais supprimer la propriété image image() de mes cases car elle me sert à rien en faite.

Concernant les appels des fonctions mouseover. Je l'avais mis que sur le div de fond de la map et pas sur chaque case, mais j'avais constaté un temps de latence lors du surol des cases et pensais que l'évnement mouseover des cases ne déclenchais pas celui du div du fond de la map; alors j'ai mis la fonction aussi sur les cases mais il me semble que j'ai fait un stopPropagation donc normalement, cela ne devrait rien consommé en mémoire .

quand tu dis :

faire 100 event "onmouseover" au lieu d'1 seul -> horreur et source de lags pas croyable !

, je comprend pas trop puisque un seul est déclenché.


Mais je vais revoir cela.

Sinon, j'ai une qust:
Dans une fonction, les variables locales sont-elles libérées à la fin de l'exécution de la fonction, ou faut-il faire :

Code :

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

nom_variable=null;

pour chaque variable local...


Puis, je suis en train de bosser des cours sur les classes. Je pense que si une classe javascript est comme un type pascal/Delphi, alors je vais plutot créer une classe batiment_construit (par ex) au lieu d'un object, et lors de la construction d'un batiment, je me sers de la classe pour construire mon nouvel objet (avec des fonctions integrés telle que supprimer_batiment...) et non cloner mon objet générique et le remplir des bons trucs.

Classe javascript = type turbo pascal ?

[NoSmoking]

Je m'attendais à cet réponse ...

la première chose à faire, outre bien penser son plan "d'action", est de minimiser les accès/appels au DOM et les appels aux fonctions quand on peut mettre en "cache", les performances sans ressentent très rapidement bien que pas de la même façon sur tous les navigateurs.

[Darkyl]

salut,

qu'est-ce que tu veux dire par " les appels à fonctions quand on peut mettre en
cache"?


On peut mettre une fonction en cache, elle ne s'y met pas automatiquement lors de sa déclaration?

J'ai cherché partout des cours sur l'optimisation en javascript (mémoire, taille code mais surtout utilisation des ressources), et je n'ai rien trouvé.

[NoSmoking]

mettre en "cache" est entre guillemet, le terme est légèrement impropre

Code :

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

1
2
3
for( var i=0; i < tableau.length; i++){
  // faire quelque chose
}

Code :

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

1
2
3
4
var i, nb = tableau.length;  // mise en "cache" de tableau.length
for(  i=0; i < nb; i++){
  // faire quelque chose
}

ceci dit, prenons l'exemple d'un déplacement d'un objet sur la page,
il peut être intéressant de tenir à jour une variable de position, pour cet objet, plutôt que de faire appel sans arrêt à une fonction getPosition.

[Darkyl]

ok, je comprend mieux maintenant.

J'utilisais beaucoup cette technique.

Plus cela va, plus j'ai peur; car mon code, au regard de vos réponse n'est pas si mal optimisé...

Deux qust:

Dans une fonction, les variables locales sont-elles libérées à la fin de l'exécution de la fonction, ou faut-il faire :

Code :

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

nom_variable=null;

pour chaque variable local...?

Puis, imaginons, j'ai un objet où je veux avoir accés à des propriétés de son parent, vaut-il mieux faire, lors de sa déclaration :

Code :

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

objet_1.parent=objet_parent;

ou

Code :

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

1
2
3
objet_1.parent_id=objet_parent.id;
 
Puis parent=retourne_objet(objet_1.parent_id); à chaque fois que j'ai besoin d'accéder au propriété du parent ?

[Willpower]

Les variables locales sont gérées par chaque navigateur, donc difficile d'affirmer qu'ils les vident tous correctement.

Maintenant, pour le "libéré", oui et non, ça dépend si elles sont encore liées de par leurs encapsulation :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function a(){
  var tmp={};
  return 2;
}
 
function b(){
  var tmp={};
  return function(){
    alert(tmp.msg);
  };
}

dans le 2ème cas la variable tmp ne pourra être détruite tant qu'on aura qqe part un pointer contenant la fonction anonyme utilisant tmp. ça devient plus complexe si on commence à avoir plusieurs fonctions anonymes etc..

Maintenant, pour la mise en cache comme le dit noSmoking, ça peut être pour des tas d'élément, par exemple des :

Code :

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

1
2
3
4
5
6
var globalElem = {};
function getById(id){
    if(!globalElem[id]) 
        globalElem[id]=document.getElementById(id);
    return globalElem[id];
}

Dans ce cas, si tu possèdes déjà l'élément dans ton objet javascript, il ne délenchera pas "getElementById" (bien que cette dernière méthode est suffisament optimisée dans les derniers navigateurs je pense).

Tu peux aussi avoir des objets lié à tes tableaux :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var tab = [obj,obj,obj,obj];
var tabObjName = {};
function tabIndexOf(name){
    if(!tabObjName[name]){
        for(var i=0;i<tab.length;i++){
             if(tab[i].name!=name){
                 tabObjName[name]=tab[i];
                 return tab[i];
             }
        }
    }
    return tabObjName[name];
}

Vu qu'un indexOf ne fonctionne pas sur des éléments "objets", tu dois parcourir ton tableau à chaque fois pour trouver ton objet avec le bon name, si tu stock un pointeur vers les objets déjà trouvé/recherché, tu économise du temps. (après à toi de voir, si tu construis un objet complet à coté avec toutes les références à tous les objets, t'y gagneras en tant d’exécution mais tu y perdras en temps d'initialement et un peu en mémoire.)

[Willpower]

enfin, pour les 100 images et les 100 gestionnaire d'évent, je te parle de ça :
http://img840.imageshack.us/img840/4486/mapspx.jpg

TYu ne devrais avoir qu'une seule image de background.
Pour les éléments "spéciaux", tu peux créer une image pour chaque mais je te conseille de ne pas leurs attribuer d’évènement, de laisser la propagation sur le background qui lui va gérer TOUS tes évènements en un seul.

comme sur mon lien :

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
var lastsHover = [];
$map.mousemove(function(e){
	var $lastHover, $target = $(e.target);
	// annuler les précédent hover
	while(lastsHover.length){
		$lastHover= lastHover.pop();
		// si différent de l'objet en cours
		if($lastHover!= $target)
			// ON DETRUIT L'EFFET DU HOVER
	}
	// si l'objet en cours ne possède pas de gestion du hover associée
	if(!$target.attr('associed') || !map.local[$target.attr('associed')].hover){
		return;
	}
	// gérer le nouvel hover
	// ON DECLENCHE L'EFFET DU HOVER
 
	// on rajoute l'objet dans la liste des dernièrs hover
	lastsHover.push($target);
});

j'avais travaillé avec un attribut "inventé" : "associed", que j'initialisais en javascript au chargement de la page, mais c'est peut-être plus propre de travailler avec l'id de l'objet et y inclure la position : ex ID="mamaison_1542" (où 1542 correspondra à une position sur la carte)

[Champialex]

Salut!

Bon ca n'as pas grand chose a voir avec les reponses precedentes, mais voila un petit article qui pourrait t'aider : http://www.html5rocks.com/en/tutorials/speed/html5/

Il explique notamment comment utiliser le javascript/dom profiling sous chrome, qui peut etre tres utile pour identifier tes problemes de performances.

[Willpower]

Salut!

Bon ca n'as pas grand chose a voir avec les reponses precedentes, mais voila un petit article qui pourrait t'aider : http://www.html5rocks.com/en/tutorials/speed/html5/

Il explique notamment comment utiliser le javascript/dom profiling sous chrome, qui peut etre tres utile pour identifier tes problemes de performances.

Bon article ça !

Ca parle :
-d'animations CSS (je ne connaissais pas)
-d'optimisation du cache pour limiter les appels au DOM comme l'a suggeré noSmoking sauf que dans leurs exemple ils font :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Before:
function getElements() {
  return $('.my-class');
}
//After:
var cachedElements;
function getElements() {
  if (cachedElements) {
    return cachedElements;
  }
  cachedElements = $('.my-class');
  return cachedElements;
}

Ce qui laisse suggérer qu'ils utilisent jQuery, or je pense que jQuery a déjà fait ces optimisations.

Enfin le dernier point sur le setTimeout pour faire respirer le navigateur lors de modification du DOM est intéressant à connaitre : en gros, si tu fais des centaines de modif du DOM via javascript, ces tentatives de modifications étant trop proche (en temps) les une des autres, ton navigateur risque fort d'attendre la fin des instructions de modification avant de raffraichir effectivement ta mise en page, il faut donc impérativement éviter les animations infinies sans delai entre les instructions. (ils parlent d' 1/30 de seconde dans l'article, je ne connaissais pas la valeur, c'est bon à savoir.)