Phaser : Exemple changement de texture d’une animation avant de la tuer

Publié le .

Exemple Phaser 1.1

English

Phaser : Exemple changement de texture d'une animation (...)

Mon besoin : changer une animation avant de la tuer dans un jeu réalisé avec Phaser 1.1.6

Pour mon One minute Shoot’ Em Up, j’avais besoin de faire ’flasher’ les vaisseau ennemis avant de les supprimer de l’écran.

A la recherche de la solution

Ne trouvant pas ce que je voulais réellement dans les exemples fournis avec Phaser 1.1.6, je décidais de faire des recherches... Je suis tombé un peu par hasard sur un exemple dans un article d’un blog dans les news du site officiel de Phaser. Et puis, je me suis souvenu de l’exemple de changement de texture proposé dans les exemples fournis par Photon avec Phaser 1.1.6... Enfin, ayant compris certains principes et appris une certaine syntaxe, je me suis mis à parcourir la documentation en cherchant certains mots clés... Je ne fus pas déçu et en lisant bien la documentation, je trouvais le moyen de faire ce que je voulais. Tout était prévu ! Il ne me restait plus qu’à coder !

Ma solution pour changer une animation avant de la tuer dans un jeu réalisé avec Phaser 1.1.6

  1.                 <script type="text/javascript">
  2.             var game = new Phaser.Game(500, 500, Phaser.AUTO, '', {preload: preload, create: create, update: update});
  3.             function preload() {
  4.                 /**************************************/
  5.                 /* Preloading the Sprite Sheets */
  6.                 // Preloading a Sprite Sheet ('key', 'urlBase', width (px), height (px), frames )
  7.                 game.load.spritesheet('bomber', 'assets/pics/enemy-bomber-1.png', 60, 40, 3);
  8.                 game.load.spritesheet('bomberExplode', 'assets/pics/enemy-bomber-1-explode.png', 60, 40, 4);
  9.             }
  10.             function create() {
  11.                 // Creating the sprite using the Sprite Sheet bomber ( x, y, key (name of the Sprite Sheet) )
  12.                 player = game.add.sprite(220, 230, 'bomber');
  13.                 // Adding an animation ( 'key' )
  14.                 player.animations.add('blink');
  15.                 // Playing an animation ( 'key', frameRate, loop )
  16.                 player.animations.play('blink', 3, true);
  17.                 // To call the function explodeBomber() when clicking on the game area
  18.                 game.input.onDown.addOnce(explodeBomber, this);
  19.             }
  20.             function update() {
  21.                 // Necessary to make it work !
  22.             }
  23.             function explodeBomber() {
  24.                 // To load the new texture (('key', frame))
  25.                 player.loadTexture('bomberExplode', 0);
  26.                 // Adding an animation ( 'key' )
  27.                 player.animations.add('explode');
  28.                 // To play the animation with the new texture ( 'key', frameRate, loop, killOnComplete)
  29.                 player.animations.play('explode', 7, false, true);
  30.             }
  31.         </script>

Télécharger

Ma solution expliquée en détail

Pour les animation, on utilise des sprite sheets. En gros, c’est un ensemble d’images réunies en une seule que l’on va afficher sucessivement.
Ci-dessous, des exemple de Sprite Sheets. Ce sont ceux utilisés dans mon exemple.

Tout d’abord, on précharge les sprite sheets dans la fonction preload.
Et ce, par l’intermédiaire de la méthode spritesheet de load.

  1. game.load.spritesheet('bomber', 'assets/pics/enemy-bomber-1.png', 60, 40, 3);

Cette ligne veut dire que l’on précharge un sprite sheet. ’bomber’ est le nom ou la clé qui servira à le repérer. Attention, on doit l’entourer de ’. Ici, on charge l’image ’enemy-bomber-1.png’ du sous répertoire ’pics’ du répertoire ’assets’. La partie qui sera visible a une largeur de 60 pixels et une hauteur de 40. Le sprit sheet a 3 images maximum. Pour votre information, l’image enemy-bomber-1.png est le premier sprite sheet donné en exemple.

Ensuite, dans la fonction update, on va mettre quelques lignes de code pour créer la première animation.

  1.                 // Creating the sprite using the Sprite Sheet bomber ( x, y, key (name of the Sprite Sheet) )
  2.                 player = game.add.sprite(220, 230, 'bomber');
  3.                 // Adding an animation ( 'key' )
  4.                 player.animations.add('blink');
  5.                 // Playing an animation ( 'key', frameRate, loop )
  6.                 player.animations.play('blink', 3, true);
  7.                 // To call the function explodeBomber() when clicking on the game area
  8.                 game.input.onDown.addOnce(explodeBomber, this);

Télécharger

A la ligne 2, on ajoute le sprite via le constructeur sprite à 220 pixels du bord gauche et à 230 pixels du haut. Il utilise pour image le sprite sheet ’bomber’ chargé précédemment. Tout cela est référencer dans la variable player.

A la ligne 4, on ajoute ( add ) à player, une animation qui aura pour nom ’blink’.

A la ligne 6, on lance l’animation ( play ), le premier paramètre est le nom de référence de l’animation à jouer. Le paramètre 3 est le framerate, c’est à dire le nombre d’images affichées en 1 seconde. Le troisième paramètre true signifie que l’on joue l’animation en boucle.

La ligne 8 appelle la fonction explodeBomber lorsque l’on clique sur l’aire de jeu. Je ne rentre pas dans le détail, ce n’est pas la sujet de l’exemple.

Maintenant, dans la fonction explodeBomber, on va changer l’animation avant de la tuer...

  1.             function explodeBomber() {
  2.                 // To load the new texture (('key', frame))
  3.                 player.loadTexture('bomberExplode', 0);
  4.                 // Adding an animation ( 'key' )
  5.                 player.animations.add('explode');
  6.                 // To play the animation with the new texture ( 'key', frameRate, loop, killOnComplete)
  7.                 player.animations.play('explode', 7, false, true);
  8.             }

Télécharger

A la ligne 3, on charge un sprite sheet ( loadTexture ) préchargé auparavant et repéré par la clé ’bomberExplode’. On choisi d’afficher la premier image en passant comme deuxième paramétre 0.

A la ligne 5, on ajoute une animation au player comme indiqué auparavant.

A la ligne 7, on lance l’animation pour qu’elle ne se joue qu’une fois avant de la tuer. Pour ce faire, on passe quelques paramétre bien précis à la méthode play. Le premier parametre est le nom de l’animation. Ensuite, le framerate qui est le nombre d’image par seconde, puis false pour dire que ne boucle pas l’animation et pour finir true qui indique que l’on tue l’animation. Elle disparaitra donc de l’aire de jeu... Notez que pour pour pouvoir tuer une animation, le troisième paramètre ( loop ) doit être à false et le quatrième ( killOnComplete ) à true. Si ces deux paramètres sont true, cela ne marche pas.

Le mot de la fin

Vous trouverez ma solution compète à télécharger sur mon github. Vous pouvez l’essayer sur cette page. L’image du vaisseau a été initialement créé par Tsx. Je l’ai légèrement modifié pour pouvoir l’animer...

En espérant que cela aidera d’autres développeurs...

Vous avez aimé ? Partager !

Twitter Facebook Google Plus Tumblr Linkedin

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