Particle FX Editor

May 2015 - June 2015
You can download the full PFX Editor for free including the editor, documentation, example effects (including some from AMPS!) and base code for implementing your own emitter with support for .pafx files made using the editor.
Edit:​ Now on itch.io!

The Reasoning

Particle effects are awesome. I knew we needed some for AMPS but the PhyreEngine particle systems were difficult since we weren't using the PhyreLevelEditor. Following a short break after deadlines I wanted to get back to work on AMPS but I also wanted a bit longer before diving into the full codebase, so I decided to spend 2-3 weeks making a standalone particle effects editor in SFML and an implementation of the effects in the PhyreEngine. This meant we'd have a really easy and quick way of designing pfx (including outside of uni) and getting them in the game, plus it was something I'd wanted to do for a while now.

I knew I was going to need a proper GUI for this, so I looked around to see if there were GUI libraries specifically made for SFML. It turns out there's a few and I elected for TGUI. TGUI was pretty straightforward to use but it's quite verbose code-wise, I think next time I'll try another library for comparison such as SFGUI.

The Demonstration

My editor was used by various members of the team to create all of the effects present in the final version of AMPS, as well as several that we didn't end up using.

The Editor

Somewhat unsurprisingly, I went a bit overboard. There's quite a lot you can do with the editor, as you can see. Here's the full list of emitter properties you can edit:

• Particles per second - The maximum number of particles to emit per second.
  
• Max particles - The maximum number of particles that can be alive at the same time. If the 'emit all at once' checkbox is ticked, this is how many particles will be emitted at a time.
  
• Number to emit - The emitter can be made to stop after a certain number of particles. Setting this to -1 means 'emit indefinitely'.
  
• Emit all at once - If this is ticked then the maximum number of particles will all be emitted at once. No more particles will be emitted until all of the particles have died, at which point they’ll all be emitted simultaneously again.
  
• Shrink over time - Should particles shrink to nothing?
• Emitter type - Particles can be emitted across different areas; a single point, along a line, across a rectangle or across a circle. Depending on your selection, you'll see controls for the Line length and Line rotation; Rectangle width, Rectangle height and Rectangle rotation; or Circle diameter.
• Single color - If this is checked then all particles will be emitted with the same color as given by the Red, Green, Blue and Alpha sliders. If this is unchecked it reveals a second set of color sliders and particles then have a randomized color between the two.
  
• Min and max Particle width and Particle height.
• Min and max Particle rotation - This is the fixed rotation at the point of emission.
  
• Min and max Particle speed.
  
• Min and max Lifetime in seconds.
  
• Emission angle - For directing the flow of particles.
  
• Particle acceleration - The x and y acceleration (gravity) applied to the particles.
  
• Min and max Rotation speed - The rate at which particles rotate after emission.
  
• Rotation direction - The direction that emitted particles will rotate in if they have a rotation speed (can be Clockwise, Counter-clockwise or Either).

As shown in the screenshots there are also some additional menus you can bring up. You can assign up to 3 textures to an effect (supports .png, .jpg and .bmp), with particles being randomly assigned one at point of emission. You can of course save and load the effects, which uses my proprietary .pafx file format (if you open it in a text editor you'll see it's actually very simple and intentionally human-readable). You can also change the color of the background behind the effect in the preview area and the color of the text rendered over the top. The texture, save and load screens all trigger brief notifications in the bottom-right corner of the screen. These notifications detail if the operation was successful or not and what the error was if unsuccessful. Success notifications are green and failure notifications are red.

Finally, there are some keyboard shortcuts. You can press F1 to toggle the help text about the keyboard shortcuts; the spacebar to pause/unpause an effect and the R key to restart an effect (particularly useful for one-shot explosions etc.). Last but certainly not least is the best button I've ever programmed: you can press F2 to randomize the effect. It's fun. A random effect is displayed at startup as well.

The Examples

I've included 8 example effects with the editor so you can see some of what's possible.

• rocket - A simple point emitter creating the trail of a rocket or jet engine.
• plus_minus - Shows how effects can have multiple textures assigned.
• smooth - Particles are always rectangles internally, but this example shows how you can use textures with transparency to create different particle shapes.

The other effects I've included are ones we shipped with AMPS:

• collectable - This effect combined with a gentle rhythmic bobbing gave the collectables some much-needed life.
• laser_beam was used to add some energy to the lasers, while laser_collision triggered at the point the beam was cutoff to show its impact.
• player_die is triggered at the point of death for the player and shows them disintegrating, while player_respawn reverses the effect and is played simultaneously at the player's last checkpoint. These effects combined really nicely, if I do say so myself.

The Code

I've included some code with the editor which should act as a pretty good basis for implementing your own ParticleEmitter capable of supporting the .pafx format. It already does the following:

• Create effects in code or load them from memory using the .pafx format.
  
• Support for all of the properties available in the editor.
  
• Handles the creation, emission and updating of particles including all memory allocation and deallocation. Includes pseudocode for implementing the rendering for whatever system you're using.

Since I don't know how you want to do your rendering, I've done some basic pseudocode in place of actual rendering. To get the emitter working in your codebase should be a fairly straightforward affair; simply implement the rendering and replace my dummy 2D vector class with whatever's present in your codebase.

The example code is adapted from my PhyreEngine implementation of the ParticleEmitter used in AMPS. As such it includes additional functionality not present in the simple editor:

• Add any number of attractors to an effect. Attractors act as gravity wells and will suck in particles based on their mass (bigger mass, bigger force). Attractors can also act as blackholes, killing particles that come within a certain radius.
  
• Assign a particle death function using a function pointer. You can assign a boolean function pointer that takes const references to a ParticleEmitter and a Particle. This function will be called with the relevant emitter and particle whenever a particle dies.

Unfortunately due to licensing I can't provide my actual PhyreEngine implementation for the full ParticleEmitter. I also don't have a full SFML implementation since the editor still uses the original emitter setup I created for it, not the greatly improved version iterated on during the development of AMPS and then de-Phyred as the basis for a general implementation. I might come back to this and do a proper SFML implementation that could be dropped directly into an existing SFML project, but for now that's up to you dear reader.

The Future

I'd like to come back to this quick project at some point and flesh it out a bit more, including:

• Add editable number representations to the sliders.
• Be able to change the color of particles over time.
• Weighted chances for textures, with any number of textures.
• Animated textures? Is that a thing anyone would ever need or even want?
• Be able to drop attractors into the editor to play around with how it looks.
• Checkbox for forcing color ratios to be the same e.g. if the red component is randomized to halfway between the min and max red values, the green, blue and alpha components would also be halfway between their respective limits. For example this could be used to force the use of grey-scale colors.
• Similar ratio forcing for dimensions of particles, for example forcing them all to be perfectly square. Can probably apply this idea elsewhere too.
• Ability to control particle count by density. This would mean you could design a particle effect using a rectangle emitter then scale that effect to any rectangle and it would look the same.
• Trail rendering. Man I wanna do trail rendering.

The Link