Donut : z-sorting

Posted the 15th Jun. 2010.
Filed under Blog.
The RSS feed for comments is here.

Still mess­ing around JS game things…
This time I tried to imple­ment sim­ple Z-sorting.

Try it here: http://media.dkpn.jp/js/multi-chara-01/
It should work OK on recent ver­sions of Fire­fox, Chrome and Safari.

15 char­ac­ters are ran­domly gen­er­ated on each refresh. I tried to push a bit the num­bers : it’s fine until 50 char­ac­ters, but starts to be real slow after. 200 or more char­ac­ters is just incred­i­bly slow, and may even crash the browser…

I guess it’s because of my way of updat­ing depth :

1
2
3
4
5
6
7
8
func­tion check­Z­sort (how­Many) {
    for (i=0; i<how­Many; i++) {
        var id = i+1;
        var pos_t = Math.round($(’#chara-’+id).posi­tion().top);
        $(’#chara-’+id).css(‘z-index’,pos_t);
    };
    set­Time­out(func­tion(){ check­Z­sort  (how­Many); }, 500 );
  }

Maybe there is a less CPU inten­sive way to deal with this ? I didn’t man­age to include it directly into the char­ac­ters ani­ma­tion func­tion…
My code is pretty messy, but if you’re curi­ous it’s here.

4 Comments

  1. sushi-codeur
    Posted June 17, 2010 at 5:25 am | Permalink

    Je ne com­prend pas trop pourquoi tu passes par un timer qui boucle sur tous tes car­ac­tères pour posi­tion­ner leur z-index. Tu peux directe­ment affecter le z-index au moment où tu déplaces ton car­ac­tère. C’est com­menté dans ton code, qu’est-ce qui n’allait pas ?

    Après tu peux aussi utiliser set­Inter­val plutôt que set­Time­out, tu n’aurais pas besoin de le relancer à chaque coup.

    En atten­dant c’est super cool, j’aime beau­coup la manière dont tes per­sos marchent :)

  2. David
    Posted June 17, 2010 at 10:55 am | Permalink

    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 inter­sec­tion entre 1 sprite qui bouge et ceux qu il croise ?
    Je dis ca mais j y con­nais rien.

  3. admin
    Posted June 18, 2010 at 3:49 pm | Permalink

    Alain > Idéale­ment, j’aurais bien aime que la fonc­tion ani­mate() de Jquery marche aussi sur le z-index… Je ne con­nais­sais pas set­Inter­val :oops:
    Merci pour le com­men­taire sinon ! J’ai la meme chose avec Twitter

    David > La prochaine etape va etre de gerer les col­li­sions, donc il va fal­loir que je m’y mette de toute facon… Met­tre tout dans une grille, et faire des tests pour chaque personnage.

  4. Jérôme
    Posted June 18, 2010 at 4:06 pm | Permalink

    Une autre ver­sion, qui marche avec l’API de recherche Twit­ter (Fire­fox unique­ment pour l’instant):
    http://media.dkpn.jp/js/multi-chara-02/

Post a Comment

Your email is never shared. Required fields are marked *

*
*