FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Learn JavaScript with Phaser

Polish: Explosions using Particles

We are going to make our death more dramatic by using particles to make it look like our player explodes.

Check the Code: what we need to know and do

Adding an explsion uses the following knowledge which we covered in another chapter;

The code for a minimal example of the Explosions using Particles game polish element is shown here -  https://add-polish-explosions-using-particles.glitch.me/

Going over the code:

We make the explosion make it grey as a tribute to Nintendo's censoring of Mortal Kombat turning red blood into grey sweat to make the violence less graphic!.

To do this we import an image of a grey pixel block and name it sweat which is used by a new function which sets up a "particle emmitter". These little blocks will be the particle explode out of this emitter.

playState.setParticles = function() {
      sweat = game.add.emitter(0, 0, 20);
      sweat.setYSpeed(-150, 150);
      sweat.setXSpeed(-150, 150);
      sweat.gravity = 0;

This code creates a particle emitter, which is suitable as a base for our explosion. The values (0,0,20) mean that the explosion will start from the centre and and will have a maximum of 20 particle blocks in the explosion.

When the player is hit in the hitHazard function the following code starts the explosion. 

    sweat.x = player.x;
    sweat.y = player.y+10;
    sweat.start(true, 300, null, 20);

This sets up where the explosion will happen, which is a bit above where the player is, and starts the process.

start(true, lifespan=0, null, total) - true, here means the emitter is an explosion type, 300 is how long it will last, null is if it will repeat so here it won't it's a one off, and 20 is the number of particles that will make up the explosion. .

There is full information in the documentation below:



There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.