Phaser : Example of a texture change before killing an animation

Publié le .

Exemple Phaser 1.1


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

My need: change the animation of a sprite before killing it in a game made ​​with Phaser 1.1.6

For my One minute Shoot ’Em Up, I needed to make ’ flash’ the enemy ship before removing it from the screen.

A search of the solution

Not finding what I really wanted in the examples provided with Phaser 1.1.6, I decided to do some research ... I came by chance on an example in a blog article in the news of the Phaser official website. And then I remembered the example of texture change proposed in the examples provided by Photon with Phaser 1.1.6 ... Finally, understanding certain principles and learned some syntax, I began to explore the documentation seeking certain keywords ... I was not disappointed and reading the documentation, I found a way to do what I wanted. Everything was here ! It only remained for me to write the script !

My solution for a change before the kill animation in a game made ​​with 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.       '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.       'explode', 7, false, true);
  30.             }
  31.         </script>


My solution explained in detail

For animation, sprite sheets are used. Basically, it is a set of images combined into one that we will successively display.
Below 2 examples of Sprite Sheets. These are the ones used in my example.

First, we preload the sprite sheets with the preload function.
And, through the method spritesheet of load.

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

This line means that it preloads a sprite sheet. ’bomber’ is the name or key used to spot it. Attention, the name or key must be surrounded by ’. Here we load the image ’enemy-bomber-1.png’ sub directory ’pics’ of the ’assets’ directory. The part that is visible has a width of 60 pixels and a height of 40. This sprite sheet has up to 3 images. For your information, the image-enemy bomber-1.png is the first sprite sheet exemplified.

Then, in the update function, we will put a few lines of code to create the first 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.       'blink', 3, true);
  7.                 // To call the function explodeBomber() when clicking on the game area
  8.                 game.input.onDown.addOnce(explodeBomber, this);


At line 2, the sprite is added via the constructor sprite 220 pixels from the left and 230 pixels from the top. It uses the sprite sheet ’bomber’ previously loaded. This is referenced by the variable player.

At line 4, is added (add) to player, an animation that will be called ’blink’.

In line 6, we start the animation (play), the first parameter is the name reference animation to play. The parameter 3 is the framerate, wich is the number of images displayed in 1 second. The third parameter true means that the animation looped.

Line 8 calls the function explodeBomber when you click on the playground. I will not go into detail, it is not the subject of the example.

Now, in the explodeBomber function, we will change the animation before killing it...

  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.       'explode', 7, false, true);
  8.             }


In line 3, a sprite sheet (LoadTexture) is loaded and preloaded previously identified by the key ’bomberExplode’. We chose to display the first image from the second parameter as 0.

In line 5, an animation is added to the player as previously indicated.

In line 7, we start the animation for it is played once before killing it. To do this, some specific parameter are passed to the method play. The first parameter is the name of the animation. Then the framerate which is the number of images per second, then false to say not to loop the animation and finally true indicating the killing of the animation. It therefore disappear from the playing area. Note that in order to kill animation, the third (loop) parameter must be set to false and the fourth (killOnComplete) to true. If these two parameters are true, it does not work.

The last word

You will find my solution Compete to download on my github. You can the try it on this page. The picture of the vessel was originally created by Tsx. I slightly modified it to animate it ...

Hoping that it will help other developers ...

You liked it ? Share it !

Twitter Facebook Google Plus Tumblr Linkedin

For the time being, only two articles are in english on this blog. I'll write more english translations of my articles later on ...

Within a year, my website should be fully bilingual. Even thougth, I won't translate all my articles ... Only the mains ones ...