Phaser : getFirstExists pour recycler des sprites !

Publié le .

Phaser 2 Exemple
Phaser : getFirstExists pour recycler des sprites (...)

L’insoutenable légèreté d’une expérimentation

Voici un lien vers une expérimentation qui montre l’importance du recyclage dans un jeu réalisé avec Phaser : http://blog.robomatix.net/phaser-test/phaser2/phaser-getFirstExists-for-recycling/. Vous pourrez constater la différence au bout de milles itérations. Utiliser F5 pour revenir au menu et passer d’un exemple à l’autre...

Cette expérimentation a largement été inspiré par celle de Jeremy Dowell dont il est question dans cette partie d’un tutoriel sur Phaser.

Explications

Si on ne recycle pas les sprite, la mémoire se remplit de choses devenues inutiles ce qui fini par la saturée si on pousse l’expérimentation à l’extrême... Par contre, en recyclant les sprites, on ne remplit la mémoire qu’avec ce dont on a besoin. Elle reste ainsi sollicitée seulement par ce qui est nécessaire. On peut laisser tourner à l’infini l’expérimentation avec le recyclage, la mémoire ne sera que peu sollicitée et l’animation restera fluide...

Un peu de code...

  1.         /* add a group
  2.          ******************************************************/
  3.         this.squaresGroup = game.add.group();
  4.         this.squaresGroup.enableBody = true;

Télécharger

  1. generateSquares: function () {
  2.         for (var i = 0; i < 50; i++) {
  3.  
  4.             // Some variables
  5.             var x = i * 10;
  6.             var velocityY = this.game.rnd.integerInRange(600, 800);
  7.  
  8.             // Generates a square or recycles one
  9.             var square;
  10.             square = this.squaresGroup.getFirstExists(false);
  11.             if (!square) {
  12.  
  13.                 // Generate a new square
  14.                 square = game.add.sprite(x, 0, 'blackSquare');
  15.                 this.squaresGroup.add(square);
  16.  
  17.                 // Init the square
  18.                 square.anchor.setTo(0, 0.5);
  19.                 // Add physic body
  20.                 game.physics.arcade.enableBody(square);
  21.                 square.enableBody = true;
  22.  
  23.  
  24.                 this.squaresGenerated++;
  25.  
  26.             }
  27.  
  28.             // Init the square
  29.             square.anchor.setTo(0, 0.5);
  30.             square.reset(x, 0);
  31.             square.body.velocity.y = velocityY;
  32.             // Kill the square when out of the world
  33.             square.checkWorldBounds = true;
  34.             square.outOfBoundsKill = true;
  35.  
  36.         }
  37.  
  38.         this.iteration++;
  39.  
  40.         this.iterationLabel.setText('Iterations : ' + this.iteration.toString());
  41.         this.squaresGeneratedLabel.setText('Squares generated : ' + this.squaresGenerated.toString());
  42.     }

Télécharger

Tout d’abord, on doit ajouter un groupe pour contenir nos sprites. C’est ce qui est fait dans le premier cadre de code.

La magie du recyclage se fait dans le second cadre. Il s’agit d’une fonction appelé par un timer à interval régulier... Dans ce qui suit, je vais mettre en avant ce qui permet de recycler.

Voici le premier élément :

  1.  // Generates a square or recycles one
  2.             var square;
  3.             square = this.squaresGroup.getFirstExists(false);
  4.             if (!square) {
  5.                               // Generate a square
  6.                             }

Télécharger

Ce code vérifie si un sprite square inutilisé existe dans le groupe this.squaresGroup , sinon, il en créait un...

  1. // Init the square
  2.             square.anchor.setTo(0, 0.5);
  3.             square.reset(x, 0);
  4.             square.body.velocity.y = velocityY;
  5.             // Kill the square when out of the world
  6.             square.checkWorldBounds = true;
  7.             square.outOfBoundsKill = true;

Télécharger

Cette partie initialise ou ré-initialise un sprite square selon le cas.

Il deux chose importante pour le recyclage dans cette partie du code. square.reset(x, 0); permet de réinitialisé le sprite. Noter que ’x,0’ changera selon les cas, mais il est important d’utiliser la méthode reset.

Une autre chose qui est absolument nécessaire est cette partie :

  1.             // Kill the square when out of the world
  2.             square.checkWorldBounds = true;
  3.             square.outOfBoundsKill = true;

Télécharger

Ce code permet de ’tuer’ le sprite lorsqu’il sort de l’aire du jeu en lui-même. Une fois tué, il pourra être recyclé !

square.checkWorldBounds = true; dit que l’on va vérifier si un élément est dans les limites du jeu.

square.outOfBoundsKill = true; dit que l’on ’tue’ un sprite lorsqu’il sort des limites du jeu... Il sera ainsi disponible pour être recyclé !

Quelques liens

Tout d’abord, pour voir mon expérimentation en ligne : http://blog.robomatix.net/phaser-test/phaser2/phaser-getFirstExists-for-recycling/

Le dépôt de cette expérimentation : https://github.com/robomatix/phaser-getFirstExists-for-recycling.

L’exemple officiel : http://examples.phaser.io/_site/view_full.html?d=groups&f=recycling.js&t=recycling

La documentation officielle, toujours bonne à lire

http://docs.phaser.io/Phaser.Group.html#getFirstExists
http://docs.phaser.io/Phaser.Sprite.html#reset
http://docs.phaser.io/Phaser.Sprite.html#checkWorldBounds
http://docs.phaser.io/Phaser.Sprite.html#outOfBoundsKill

Vous avez aimé ? Partager !

Twitter Facebook Google Plus Tumblr Linkedin
Cet article à 1 article connexe :

Répondre à cet article

Tous les champs sont obligatoires

Qui êtes-vous ?
Ajoutez votre commentaire ici

  • Pour créer des paragraphes, laissez simplement des lignes vides. Par ailleurs, les raccourcis SPIP [nom du lien->lien] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins> sont acceptés.

Suivre les commentaires : RSS 2.0 | Atom