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.)