A particle system is a great way to simulate complex effects such as fire, smoke, explosions, and so on. Basically, a particle system consists of a number of images that are rendered using either a normal (alpha masked) mode, or an additive blending mode to create interesting results.

Take a look at the following screenshot to see the difference between normal and additive blending modes:

LibGDX provides a sophisticated particle system through its ParticleEffect class. It's merely a container that allows you to easily work with your final effects on a high level, such as setting the position or triggering or cancelling the designed particle effect.

The following is a brief description of the most important methods of ParticleEffect:

Using an instance of ParticleEffect alone will not yield anything visible on the screen yet. This is because particles are represented as images and this class does not have such a reference to an image. Instead, an instance of the ParticleEmitter class is required, which among other attributes can take a reference to an image for the particles to be rendered. An emitter manages particles that use the same image. The particles of an emitter also share the same specific behavior, which is usually given in ranged values. These ranged values define the range to generate random values for each spawned particle, which will make the resulting effect look much more natural. If needed, several emitters can be added to a single effect in order to create more complex particle effects that use multiple images and collective behavior.

The following code is an example of how to create a particle effect with one emitter:

ParticleEffect effect = new ParticleEffect();
ParticleEmitter emitter = new ParticleEmitter();
effect.getEmitters().add(emitter);
emitter.setAdditive(true);
emitter.getDelay().setActive(true);
emitter.getDelay().setLow(0.5f);
// ... more code for emitter initialization ...

While there is absolutely nothing wrong with this approach in general, it is not recommended to initialize particle emitters in code. Emitters contain roughly 20 attributes that can be played with, so it is quite obvious at this point that this approach will lead very quickly to a lot of code snippets that are hard to understand and maintain. A much cleaner and fun solution is to use LibGDX's graphical particle editor in order to create new particle effects or modify the existing ones. The editor features a live preview of the current settings of the particle effect, which simplifies the design phase a lot. The preview gives direct feedback on the final result of the particle effect as well as how changed attributes alter the effect.

You can download and run the latest editor by entering http://wiki.libgdx.googlecode.com/git/jws/particle-editor.jnlp in your browser.

To know more about running the editor, check out this wiki article at https://github.com/libgdx/libgdx/wiki/2D-Particle-Editor.

The following screenshot shows the Particle Editor window right after it was started:

The live preview is located in the top-left corner and shows the current particle effect as well as some runtime information as follows:

The particle effect in the live preview can be moved around by clicking-and-dragging it with the mouse. This is a pretty neat feature not only because it allows adjustments to the effect's starting position, but also because it can be used to quickly check out how the effect behaves under non-stationary circumstances.

The bottom-left corner holds the already mentioned list of particle emitters. Emitters can be given a name, but this is completely optional. The checkmark next to an emitter's name toggles its visibility. However, take note that this is just an editor-only setting to make the editing of complex effects with many emitters a bit easier. The state of the visibility checkmark is also not going to be saved to the particle effect file. The order of emitters can be changed using the Up and Down buttons to the right of the emitters list. The rendering of the emitters list runs from the top to the bottom. This means that the last emitter in the list is also going to be the last, and therefore the most rendered emitter. New emitters can be added by clicking on the New button. Similarly, a click on the Delete button will remove the currently selected emitter from the emitters list.

The right-hand side of the particle editor is split into two framed parts that contain two types of properties. The upper one is labeled Editor Properties, which controls how the live preview is rendered. The Pixels per meter setting defines the dimensions just like we did for our game screen camera. The Zoom level setting is used to scale things either up or down depending on what can be seen in the live preview.

The last and biggest portion of the particle editor is contained in the frame labeled Emitter Properties. It controls everything about how the particles of an emitter look and how they will behave over a period of time.

Here is a list of all the available properties and their meanings:

Some of the emitter's properties contain charts. The x axis in a chart always represents the lifetime of a particle, while the y axis represents the percentage of each emitter property's actual value. A click on the chart adds a new node. Double-clicking on a node removes it again. Clicking-and-dragging a node moves it inside the chart.

The following screenshot shows a portion of the emitter properties:

A chart can be expanded by clicking on the small + button next to it. The chart has a High and Low value, which defines the absolute values of 100 percent and 0 percent on the y axis in the chart. Most value fields have a > button next to them. Clicking on this button shows a second value field, which changes the single value to a ranged value. A ranged value has a minimum and a maximum value from which a random value is picked for each particle.