In this tutorial we are going have some fun and look at creating some particles using the Kiwi.JS Particle Editor. The sections covered on this page are:

• Creation – Using the Particle Editor
• Textures – Download the Particle Textures
• Exporting – Exporting your Particle Effect
• Integration – Adding your Particle Effect to a KiwiJS game
• Example – Download a finished version of the effect

Creation

The very first step in the process of using particle effects in your game is to create them. Creating particle effects is the most fun stage of the process in my opinion, and I can easily spend hours tweaking, adjust, and playing around with the various options to get an effect just right. Or I can make new effects as fast as it takes to describe them! It’s productive and powerful.

To start creating your particle effects, navigate to the Particle Editor which can be found at tools.kiwijs.org/particle-editor.

The Editor

When using the editor, you should be aware of three main areas.

The Stage

The stage is where the simulation of your particle effects runs. This simulation uses KiwiJS, so how you view your effect on the stage is how you will see it in game.

Effects Manager

Using the editor you can only edit a single particle effect at a time. You can display multiple particle effects at once, and select between them as you like.

This management of particle effects is handled using the sidebar on the right.

Create a new particle by clicking the plus icon and delete the current particle by click the trash icon. You can also rearrange the depth order of the particles by pressing the top or bottom of the double arrow icon.

Configuration

The sidebar on the left is used to configure your currently selected particle effects. The one exception to this is the Settings tab which is used to edit visual elements on the Stage.

I am not going to cover every single option, as there are a bit too many for the scope of this tutorial, but you can hover over each option’s title to get description as to what it is used for.

Your Texture

In order to use your Particle Effect in game you have to have a copy of the textures you want to use.

The Particle Editor currently has four textures for you to choose from. You should have a shot at creating your own particle textures as once you export your Effect you can easily replace the texture used. Just replace the filename in the code you’ll export a little later.

You can download the textures used along with a PSD to help you create your own Texture here.

The template PSD maintains safe separation between texture cells. This is necessary because the graphics hardware will sample some distance outside the boundary of the circle when rotating particles. Only the area within the circle is guaranteed to appear on screen.

Exporting

Once you’re happy with your pretty particles, the next step is to export them to use in your game.

Exporting as a group

You can export all visible particle effects on the Stage by clicking the Export button on the top right of the editor.

A modal will then appear containing the JavaScript associated with your particle effect. This script is a custom Kiwi Plugin which creates a new Group with all of the particles on the Stage added as children.

You will then need to copy and paste this code into a new file and save it somewhere in the file structure for your game.

Exporting a single particle

You can also download the configuration settings for a single particle by clicking on the export icon to the far-right of a particle effect in the Effects Manager.

A modal will then appear containing your configuration settings for that effect.

Integration

Integrating your particles into a game is almost the exact same process as adding plugins into a game.

For these steps we are going to assume you have already have a game set-up and working. If you have not created a game in Kiwi before, then you can view a full tutorial explaining the process here.

You can download the game files I will be using here.

Save your particle effect

The first step is to download your particle effect. I will be using the main export option and downloading the particle effect as a custom plugin.

Click on the export button and copy/paste information into a new file. Save the new file into your file structure. Next to the main kiwi.js library is fine.

Add the scripts to your html

Now we need to add the new file into our webpage.

Add the new script underneath the links to both the main Kiwi library and the WebGL Particle plugin. If you have not linked in the WebGL Particle plugin yet then do so now.

Add the plugins to your Game

With the plugin included we now need to tell our game to use our custom particle plugin.

To do so you will need to edit options passed to a game when it is being created.

Load your Particle Texture

In order to use the particles we now need to load in the texture that they will use.

Go to your game state (or wherever you load in images) and in its preload method load the texture by using either the addImage, addSpriteSheet, or addTextureAtlas methods.

View the API Docs for more information on the addSpriteSheet methods.

Create a new Particle

With all the set-up now complete, the last step is to start using the particles in our game.

To create a new particle call the createParticle method. Make sure to pass it the State and the location you want the particle to appear.

Then using the addChild method, add the particle to the State and you can use the startEmitting to make it start emitting particles.

With that done, you should now see your particles in your game!

You can download the finished version of the files I linked at the start of this section here.

Example

Above you can find a spaceship traveling through space, off to fight some aliens. Or perhaps deliver cargo to another planet?

Whatever she is doing, the stars and flames effects have been created using the particle editor and then included into the game!

I have used different methods than the explained one above to include them into the game. So if you would like alternative methods to include particles into your game then you can download the spaceship here.

All Finished

We very much hope you have fun using the Particle Editor. We have had a lot of fun creating it and would like to see those lovely particles you create.