This post shows the Particle System and its editor me and Raver wrote for the LRRH project.

Here's some demo-steam: I have since deleted my YouTube channel. This system was implemented while in SKN Shader for this game project, you should check it out, it's pretty cool. You can download the game and this editor here. The ParticleSystem is implemented in C++, using bits of SFML. The editor uses SFML and wxWidgets and this is how it looks:

0

The UI is pretty simple, but that's all we really need. We have two main areas in the editor:

  • Canvas and animation buttons where we can see our work slowly getting done.
  • SidePanel showing all the parameters describing a ParticleSystem.

The buttons underneath the Canvas control ParticleSystem's animation, we can start, stop and reset it. The tiny "Autogen" checkbox allows the editor to update our new Particle System whenever we edit its parameters.

The SidePanel has three main areas: Emitter area, Affector area and Parameters area.

It's worthy to mention something about the design of our ParticleSystem aswell as some of the technical details concerning its implementation... LRRH project being a simple, 2D game required equally simple but extensive particle system, so we've decided to decouple two main aspects of a particle system - particle emitting and particle physics:

class ParticleSystem : public Renderable {
    std::vector<ParticleEmitter *> emitters;
    std::vector<ParticleAffector *> affectors;
    std::vector<Particle> particles;

    //...
};

Our ParticleSystem class contains a vector of ParticleEmitters, which generate new Particles according to their inner rules. In fact, ParticleEmitter is just a common interface, so whenever there is a need for some unusual way to spawn particles we can easily implement it. Next, there's a vector of ParticleAffectors, which control particle physics, this too is an abstract class, so we easily can extend our ParticleSystem implementation. Lastly, we have a vector of currently active Particles:

struct Particle {
    pos2 position;
    vec2 velocity;
    f32 rotation;
    f32 age;
    f32 scale;
    Texture *texture;
    sf::Color color;

    Particle(pos2 pos=pos2(0,0),
             vec2 vel=vec2(0,0),
             Texture *tex = NULL);
};

...which are really simple.

A single step of this ParticleSystem consists of allowing ParticleEmitters to spawn new particles, updating all the particles with ParticleAffectors and removing already dead particles (if there are any).

In the editor, we can add an arbitrary number of ParticleEmitters and ParticleAffectors choosing from:

1

2

Each of these has different properties, but they are rather self-explanatory. ConeEmitter creates a cone of particles, ColorAffector changes particles color, etc. Now that's KISS. Combining these simple ideas yields some interesting results (excuse the quality, conversions took most of it):

A little camp fire. Yeah, the no-YouTube-account thing...

Autumn leaves. (This one got a little corrupted, good job recordMyDesktop!)

Drunk and cartoony, anyone?

This one was following Little Red Riding Hood in-game for a moment but the rest of the team did not approve for some reason.

Let's now create a particle system!

We'll try to create a toxic looking cloud effect. Let's start from scratch:

3

First we need to choose an emitter, we want it to be cloudy, so ConeEmitter is our choice:

4

Setting the angle to 360 makes it spawn particles in every direction. We edit ConeEmitters properties selecting it from the Emitters list and editing fields in the Parameters list:

5

Don't forget to add a texture. I'll use some simple, white dot:

6

Now we need a ConstAffector - it simply updates each particles position according to its velocity:

7

It's a simple affector, so we only get to set its stop time making it stop updating particles after 3 seconds:

8

This is what we have so far, not quite toxic enough:

9

Let's add a ColorAffector:

10

Pushing the button next to the color value will open up this color selection window (excuse my locale):

11

We'll use it to choose starting and ending colors. Don't forget the alfa, clouds are usually half-transparent (don't ask me, that's just how the Universe works):

12

(Note that the ParticleSystem changed right away.) Now we need a ScaleAffector, which will grow us some yummy particles:

13

This is the effect so far, it's rather thin if you ask me:

14

Let's adjust the spawn time of our ConeEmitter:

15

(I tweaked the ScaleAffectors starting scale aswell.) That's more like it:

16

Here's the vid of this ParticleSystem in action: Still no YouTube account.

Pretty decent effect for so little time spent on tweaking it, isn't it? Don't forget to save your work!

2016-02-18: Adjusted some links & tags.