Still messing around JS game things…
This time I tried to implement simple Z-sorting.
Try it here: http://media.dkpn.jp/js/multi-chara-01/
It should work OK on recent versions of Firefox, Chrome and Safari.
15 characters are randomly generated on each refresh. I tried to push a bit the numbers : it’s fine until 50 characters, but starts to be real slow after. 200 or more characters is just incredibly slow, and may even crash the browser…
I guess it’s because of my way of updating depth :
1 2 3 4 5 6 7 8 | function checkZsort (howMany) { for (i=0; i<howMany; i++) { var id = i+1; var pos_t = Math.round($(’#chara-’+id).position().top); $(’#chara-’+id).css(‘z-index’,pos_t); }; setTimeout(function(){ checkZsort (howMany); }, 500 ); } |
Maybe there is a less CPU intensive way to deal with this ? I didn’t manage to include it directly into the characters animation function…
My code is pretty messy, but if you’re curious it’s here.
4 Comments
Je ne comprend pas trop pourquoi tu passes par un timer qui boucle sur tous tes caractères pour positionner leur z-index. Tu peux directement affecter le z-index au moment où tu déplaces ton caractère. C’est commenté dans ton code, qu’est-ce qui n’allait pas ?
Après tu peux aussi utiliser setInterval plutôt que setTimeout, tu n’aurais pas besoin de le relancer à chaque coup.
En attendant c’est super cool, j’aime beaucoup la manière dont tes persos marchent :)
Au lieu de faire le sort sur tous les sprites a chaque refresh tu n as pas un moyen de gerer juste dans ton moveChars l intersection entre 1 sprite qui bouge et ceux qu il croise ?
Je dis ca mais j y connais rien.
Alain > Idéalement, j’aurais bien aime que la fonction animate() de Jquery marche aussi sur le z-index… Je ne connaissais pas setInterval :oops:
Merci pour le commentaire sinon ! J’ai la meme chose avec Twitter
David > La prochaine etape va etre de gerer les collisions, donc il va falloir que je m’y mette de toute facon… Mettre tout dans une grille, et faire des tests pour chaque personnage.
Une autre version, qui marche avec l’API de recherche Twitter (Firefox uniquement pour l’instant):
http://media.dkpn.jp/js/multi-chara-02/