There will be a moment when sprites and other KiwiJS objects won’t satisfy your craving to create a better game. When you want to create effects such as fire, explosions, smoke, sparks, falling leaves, clouds, fog, snow, dust, and more, use our Particle Effects plugin! With this plugin you will be able to create and easily use custom particle effects in your Kiwi.JS game. To learn more about what particle effect are look at the What are Particle Effects page on the Kiwi.JS website.

To download the particle effect plugin go to our Github repository here.

Custom Particle Effects use a configuration object which the effect will use as a template to generate its particles. These configuration objects are simply a whole lot of properties stored in one Object Literal. This has a lot of properties; we are finalising a particle effect editor which will be a GUI for users to create and simply implement custom particle effects. If you want to make your own particle effects now, first acquaint yourself with the plugin’s parameters here.

For this tutorial we have prepared a file with our example configuration object. Download this file to follow along.

To expedite the process of game creation I will be using the pre-prepared template game.

The first thing we will do in this tutorial is set up the particle effects. All of the configurations for the particle effects will be kept in a configuration file. The best place to keep this file is inside the entities folder inside the src folder. I have named my file ‘particleEffects.js’.  If you do not have these folders you should create and add them to your root directory of your Kiwi game. Now that you have created the particle effect JavaScript file you will want to add the particle effects to it. This can be easily done by including the code below into the document.

First we need to link all of the files in our index file of our game. This is simply done by linking the location of all necessary files. I have stored these files in two separate folders. The plugin is kept inside the plugin folder and the configuration file I have put inside the entities folder.

Once this has been done we will be working inside of the play.js file which is located in the src/states/ folder. After adding your particle effects to your particleEffects.js file you can use them when creating you particle emitters. This will be done inside the create method of the Play State. Each separate particle effect needs its own particle emitter. These can be created like this:

This effect above will be a static particle effect and it will act as the stars in the background of the game. It is using the ‘stars’ configuration object. Now that you have created the particle emitter you will need to add it to the stage and start the particle emitter.

Once you have added the stars to the game your game should look something like this.

Obviously when we said that you could make explosions you didn’t come here to make star fields that slowly moves. Therefore for the next step we will be using the ‘flamethrower’ particle effect from the particleEffects.js file.

We will be creating a flamethrower effect for our characters weapon when we click the mouse. To do this we must first create the Particle Effect. This will be done in our create method.

 

You will see that we have created two particle effects. One of the particle effects facing left and the other is facing right. This allows one of the effects to fade away while the other startd to shoot in the opposite direction. Once you have created the particle effect you will then want to adjust its position to where you want it to start emitting from.  This can be done in the update loop. You will see that we are just moving it to a position relative to the position of the character.

Now you will want to start the particle effect when the mouse is down. This can easily be done by adding a callback method to the onDown property of the mouse. When the mouse is down you want the flamethrower particle effect to start. Seeing as we have two different particle effects we will look at the scaleX of the player to determine which fire effect to start. Therefore you will be using this code here:

In the create method you will need to add a callback method to the onDown of the input object:

Once this is done you will want to add the code to start the particle emitter in the mouseDown method that is called when the input object is down:

The startEmitting method has three parameters. These parameters control if whether or not the particle effect will loop, be removed on completion, and how many particles will be generated. The first parameter is the ‘loop’ parameter. We set this to true because we want the animation to loop. Then we set the ‘removeOnComplete’ parameter to false because we want to use the particle effect again and this means we will not have to generate another particle effect. The third parameter is the number of particles we want. For this example we are only using 50.

Stopping the particle effect can be done one of two ways, immediately or not. To stop it immediately means to stop particle system from emitting any more particles and removes and existing particles. This can appear unnatural and abrupt. We will not be removing the particles immediately because we want the fire to linger until it has finished its lifecycle. To do this we will just stop the particle effect from emitting any more particles. This can be done using a callback method to the onUp property of the mouse.

In the create method you will need to add a callback method to the onUp of the input object:

Once this is done you will want to add the code to start the particle emitter in the mouseUp method that is called when the input object is up:

In the example below I have added animations to make the game flow better. These are not necessary but if you want to do the same you can copy the code from the game here.