In‐Depth Guide
Learn how to create a particle effects by following this guide! This is the text version of the tutorial video on GDX Particle Editor: https://youtu.be/OlPg6C6O-Cg
It's very easy to go overboard with particles. Particles aren't too expensive on their own since they are automatically pooled and can benefit from using a TextureAtlas. However, if your explosion consists of a thousand particles and you're creating explosions all over the screen, you're going to see a slowdown. A successful particle effect can achieve its visual objective with a minimal amount of particles. Ask yourself the following questions:
Particle effects have the benefit of being randomly generated. No two runs of an effect are going to look exactly the same. For certain games that's ideal. If you can get away with just using a sprite or an animation, however, you'll save yourself a few draw calls. In fact, if you're hand drawing an animation frame by frame you can realize some impressive visuals impossible to replicate with particles.
Plus, some games just don't look good with particles. The artistic styles might not match.
Next, you must determine how this particle effect is going to describe an action happening on screen. This is the difference between "a fish flopping into the water" versus "the fish thrusting itself into the big drink with a ferocity unlike anything you've seen before".
Each effect tells a story. Avoid making particles just for "juice". Sure, your game might benefit from the added pop, but the player might just interpret this as distracting trash.
Now let's get into using the editor to create particle effects. When you start GDX Particle Editor, you are presented with options for Classic and Wizard modes.
Classic is reminiscent of the old particle editor's layout. You have three areas for Preview, Effect Emitters, and the Emitter Properties. The size of these panels can be adjusted by dragging the borders between them.
Wizard mode takes a different approach. The preview takes the main focus at the top while the rest of the panels can be paged through the carousel at the bottom. This is useful for maximizing the available space and presenting the workflow in a step by step fashion.
You can switch between these modes at any time by clicking the home button in the lower right.
Then select the mode you want to use. You will continue to edit the same particle effect that you've been working on. You can select "remember my choice" to automatically open to your preferred mode next time you open GDX Particle Editor. If you want to switch modes quickly while you are working, press the key-combination Ctrl+TAB.
For the remainder of this tutorial, we'll use the Classic mode of the editor.
The camera in the preview is fully controllable. Click and drag within the preview to pan the camera. Use the scroll wheel or click the zoom buttons to zoom in and out. Click the reset button to restore the zoom and reset the camera position.
Right click re-positions the effect. This is not the same as panning the camera. Notice the flame trail as you drag the right mouse button.
The default effect plays repeatedly because the "Continuous" option is selected. For emitters that are not continuous, you'll have to right click the preview to restart. You can also hold right click to repeat the effect as if it were continuous.
Click the settings button to open the preview settings.
There are many available options:
-
Pixels per meter
If your game does not use pixels for world units, change the PPM here to match the units in your world. This ensures that your particle isn't too large or small when you include it in your game. -
Delta multiplier
Change this to make the particle effect render faster or slower. This is a great way to see the finer details of your effect. -
Background color
Change this color to alter the preview background. This may be important to change so you can see what your particle effect looks like in different circumstances. -
Statistics
Enabling statistics shows text in the bottom left that details the editor FPS and the particle count. Max is a measure of the maximum particle count recorded in the last 5 seconds. The percentage indicates how much of the particle duration has been completed. You can change the color of the label if you have trouble seeing it in front of the background. -
Preview image
An effect might look good on this black background, but what will it look like in your game? Select a preview image by clicking the button, then select a screenshot or mockup of your game level. The preview is resizable. Check "Show resize interface" and drag the handles to size it appropriately. -
Render Grid
Enabling the render grid draws major and minor gridlines underneath the particle effect. You can change the spacing and color of the grid. This allows you to judge distances better. -
Axes
This enables lines to show the x and y axes. Again this is good for judging distances and orienting your perspective when you move the camera around. -
Shading
You can apply a shader as well, but specialized particle effects that are dependent on specific shaders to function are best tested in your own app.
Now to the actual work of making a particle effect. Effects are composed of emitters. You can think of these as layers like in a photo editing software. These are displayed one on top of the other. Each of these emitters is made up of properties which describe the behavior of the emitter and its particles.
GDX Particle Editor lists the emitters of the effect in the top left of the interface. In a new project, you should see the default flame. You can create a new emitter by clicking the "new" button. Rename it by clicking the entry in the list and typing a new name. You can also duplicate an existing emitter.
The order of the emitters is important. The emitters at the top of the list are drawn first and the rest get drawn on top of them. You can click the buttons to move the selected emitter up/down or use drag and drop to rearrange them. To delete one, select an emitter and click the delete button or simply drag it off of the list.
If you want to open a previously saved particle effect, you can open it with the "Open" button. All the emitters of the effect will be loaded. What if you want to combine emitters with your existing effect? Very simply use the "Merge" button to keep all of your existing emitters and load the new ones.
You may want to use a prebuilt template to start a new effect. Click the template button. Blank gives you a clean slate with no added options. That can actually be tedious to work with, so use another template that closely resembles the effect you want to make. Each one tries to highlight different techniques that can achieve some extraordinary results.
Clicking an emitter in the Effect Emitters list makes it the selected emitter. Its properties are shown on the right side. These describe the behavior and appearance of the emitter and the particles it creates. There is a selection of default emitters that are always visible.
You can add or remove optional emitters by clicking the properties button and check marking which ones to include. Note that unchecking a property doesn't just hide that option. It disables that feature entirely.
Before we get into the rest of the properties, we should go over the available options. Options are found at the end of the list.
-
Additive Additive blending is a technique to combine overlapping colors to approach white. For example, the default flame effect uses additive blending to make the fire look really hot in the middle where all the particles overlap. The unfortunate thing is that this technique requires the background to be dark. It does not look that good when it's on a light background. Activate this option where it's appropriate.
-
Attached
When you right click and drag on the preview with the default particle effect, you'll see a trail of flame particles left behind. That's because the particles stay where they spawn at and do not follow the particle effect's position. Although this is a neat effect, this is not good for a thruster that should closely follow a rocket. When you select attached, the emitter sticks to the rocket's position. -
Continuous
A continuous particle effect will loop endlessly until you stop it manually. Continuous is good for a fireplace flame. Continuous is not good for an explosion or firework that fizzles out quickly. Even if you are making a particle that is not continuous, it is common practice to enable continuous temporarily while you're editing the effect so you can see what it looks like without having to right click the preview. -
Aligned Particles can have movement and they also can be rotated. Sometimes you want them to be rotated based on their movement. You can accomplish this by selecting "Aligned". This will add the angle of movement to the rotation.
-
Behind
Behind is a property that is not actively used in libGDX. It has been carried over from old editor to GDX Particle Editor for posterity. You can possibly reference this value when you create the particle effect in code, but it does not do anything in the particle system directly. -
Pre-multiplied Alpha Pre-multiplied Alpha is an alternative blending mode that expects RGB values to be multiplied by their transparency. If your images use this feature, make sure to enable this option for all of your emitters. See this article for more details. Keep in mind that this does affect your preview, so use particle images that have pre-multiplied alpha as well.
One emitter property of note is the Images property. You are provided a basic, spherical image by default which will work fine for all of your basic effects.
The best effects are achieved with using unique images to give it a sort of texture. Check out the sample images provided with the project to get a better idea.
Download sample images: particle-images.zip
You can click "Add" and select one of these images to add it to the list. Because the sprite mode is set to single, only the first image in the list is used. You can reorder the list with the buttons or by dragging and dropping to make your chosen image the first one. You can also just delete the images you don't intend on using.
Changing the sprite mode to random means that every particle that is created will use a random image from this list. Animated will play these images one after the other over the lifespan of the particle. Using these modes will help create variety and achieve interesting visual effects.
If you want to go back to the default ball image, simply click the "Default" button. If you have enabled the pre-multiplied alpha option, click the Default PMA button.
You have the images. Now let's control how these particles are created.
Duration describes how long your emitter is going to emit particles. Life describes how long each one of those particles is going to live. Many of the proceeding options that change values over time are going to operate in the span of the emitter's duration or during the particle's life. The quick way to tell the difference is to look at the graphs for each and read the label.
These values are defined in milliseconds. So if you want an emitter to last 4 seconds, type 4000 as the duration. That would be 4 seconds every time you start the particle effect. What if you want some variety? Sometimes it'll be 2 seconds long? At other times 5 seconds? You can define a range by clicking the expand button. Enter the minimum and maximum values. A random value will be chosen between these two numbers every time you run the effect.
Perhaps you don't want the emitter to start right way. Set a Delay (available from the add property menu). Using this in conjunction with duration can help chain multiple emitters together to make it appear as if one emitter happens after another.
You can set a Life Offset to make the particles spawn with part of their life partially consumed already. So if you have a particle that starts pointing to the left and rotates to the right, you can set a life offset that causes it to start half way through the rotation. Why would you want to do that if you can just control the rotation directly? It makes more sense if you add some randomization. This way the starting point is random but it doesn't make the particle rotate at a slower or faster rate.
You also have the "Independent" option for the Life and Life Offset properties. Usually the randomization affects all the particles in the same way each time the emitter is run. Selecting "independent" calculates a random value for every particle spawned. That allows you to have more variation all throughout your run.
Emission sets how many particles are created per second. A higher number means more particles are generated over time. You can set a range here if you want. A range means that you'll have a different emission every time the particle effect is run.
But what's the meaning of this high and low? This is to change the emission value over time. For example, you may want your emitter to start slow and then go fast. Set the low to 10 and the high to 100. Nothing seems to have changed yet because we haven't adjusted the graph. Low is the bottom of the graph. High is the top. The x-axis is the duration of the emitter. The left is the very start of the effect. The right is when the emitter duration is complete and is done. We want to start low, then go high. Drag the starting node down to the bottom. Create a new node by clicking the graph. Drag it to the top right.
Imagine you want your emitter to start slow, go fast, then slow down again instead. Move the high point to the middle of the graph, then add a new node. Move that to the bottom right. It might easier to position nodes if you expand the graph. Click the plus button. You get percentage labels and more space to work with. If you accidentally created an extra node, you can right click or double click the node to delete it.
You've generated a lot of particles. 2000 active particles is a bit excessive. You can use Count property to restrict how many particles can exist at a time. Set the max to 200. Be careful with this setting though. An extreme difference between the natural count and the maximum count will result in your emission looking spotty over time.
Min count is a little peculiar. Normally this particle generates 1 particle per second. If you increase the min count to 10 it will create 10 particles instead of 1 at the start of the effect. It artificially increases the particle count until it's within the range. This actually might be useful if you need an effect to be full right away instead of building up to capacity.
So far, the particles have been emanating from the point where we right clicked the preview. You can offset that point by changing the X and Y Offset. That's helpful when you want to attach a particle affect to a character or object, but the particle origin is not the center of the image. Another trick is to randomize the offset which will create a rectangular area where the particles will generate.
A more advanced way to do that is to set the Spawn Shape. There are several shapes to choose from. Point is the normal spawning shape. Square is similar to the previous technique. However, you can change the shape over time. Line is similar, but it's just a line from the origin to the relative coordinates specified. Ellipse adds a couple more options. Edges makes the particles spawn on the outer edge of the shape only. Side determines if the top or bottom of the shape edges will be used.
Size controls the width and height of particles in world units. By default you can modify both the x and y scale at the same time. Click "Split X and Y" to edit them separately. One checkbox that we've been ignoring is the "Relative" checkbox. Say you have graph going from low to high. This basically says that it starts at 60 and ends at 60. Clicking the "Relative" checkbox instead means that the high is added to the low. Now it's going from 60 to 120. Why not just make the values 60 and 120 directly? This is important to implement when you're using randomization. Setting the low to a range from 0 to 60 means that each particle will start at a random value up to 60. With "Relative" activated, it will grow to a size 60 more than this initial value. With "Relative" unchecked, it will grow to exactly 60 no matter what value it started as.
Using relative values is an important technique to use with Rotation. This changes the rotation of the sprite throughout the life of the particle. Obviously you can't tell what direction a sprite is facing with the default ball image. Using an image with a clear direction illustrates how it works. In this example we're randomizing the image to point in any direction by setting the low value to the range 0-360. To make it turn, make the graph go from low to high and set the high value to 360. All the particles now end their life by pointing directly to the right no matter what they started at. That's a nice effect, but what if you intended the particle to do a full 360 degree turn? Check mark "Relative".
Do not confuse rotation with Angle. Angle determines what direction the particle moves. If we want the particle to move to the right, set the value to 0. Up is 90, left is 180, and 270 is down. When you want to change a number value in GDX Particle Editor, you can click the buttons to change it incrementally or hold the button to increase rapidly. You can also click inside the field to type a number. When you click in the field, you're given a slider that you can drag to change values dynamically. You can actually use the entire space of your monitor. This way you can focus on the preview. Once you set a satisfactory angle, you can modify the graph to make the particles turn over time. You can do similar tricks with relative as seen above.
Velocity controls how fast the particles move in the given angle. As the angle changes, so does the direction of movement. There is no inertia in this particle system. The velocity changes immediately.
Velocity is closely tied to angle, but what if you want the particles to fall down as if affected by gravity? You wouldn't be incorrect in choosing the Gravity property, but the term "gravity" is a slight misnomer. Gravity in the real world is typically defined as meters per second per second. In libGDX particles, gravity is defined only as units per second. It's missing the other per second. What does that mean? An object will fall 9.807 meters per second per second on Earth. It will go faster and faster over time as it falls. In the game world, it will just fall at 9.807 pixels per second forever.
Particle gravity is more like a vertical velocity that is not tied to the angle. You can still achieve an effect that looks like real gravity by setting a low and high value then modifying the graph. Look at that nice arc!
If gravity is vertical, then Wind is horizontal. Using it in combination with gravity will allow you to achieve motion in any direction.
Tint changes the color of the particle. As with all tinting in libGDX, it works best with a white image. Shades of gray and transparency are okay for variation and texture, but tinting does not work at all with black. You can click the node to bring up the color picker. Use a color swatch or mix your own color. You can save your own custom colors for use later by clicking the add button. Just keep in mind that you can only set the tint, not the alpha here. To change the color over the lifespan of the particle, you'll need to create more nodes. Click anywhere in the bar to create a new node. You can drag the node around to change the timing. Right click or double click to remove a node.
Transparency is very similar, though you'll use a graph to modify the timeline values. Moving the node to the top makes the particles opaque. Moving the node down makes it transparent. You typically need to make your particles start and end being either transparent or have a size of zero. It's usually not appealing to see particles appear and disappear abruptly.
To save the particle effect, click the "Save" button. You will be prompted to choose a file. By default, it will copy your image files to the directory and create a text file. You can open this file in GDX Particle Editor by clicking "Open". If your particle effect is ready to be implemented in your game, copy the file and the images into the assets folder of your libGDX project. You can also just click "Export" in the editor to save a copy of the particle effect without affecting the original file.
See the article on using 2D particle effects in libGDX. Although GDX Particle Editor exports the individual images, the responsible thing to do is to combine those images in a texture atlas. This is important to make sure your game runs smoothly. Please note that when you pack your texture atlas, you need to disable rotation and stripwhitespacex/stripwhitespacey for maximum compatibility.
Once you have a decent amount of experience making particle effects, try modifying the emitters during runtime. Some visual effects can only be believable if they react to what's going on in the screen.
The settings menu can be accessed from clicking the cog button in the lower right. These options affect the editor and not the preview display. Click the settings button in the preview to change those options.
-
Maximum Undos
To prevent the app from using too much memory, a limit must be set to the maximum number of undos that the app keeps in its history. -
Open to screen The default screen that the app opens to. If you checkmarked "Remember my choice" in the welcome screen, your choice is reflected here.
-
Check for updates The editor automatically checks GitHub to see if there is a new version of GDX Particle Editor available every time the app is opened when this option is selected. This enables a clickable link in the lower left that would take you to the downloads page.
-
Presume file extension is .p This app presumes that the extension for all particle effects is ".p". This is not exactly standardized within libGDX, so you are free to name your files with whatever extension you please. In that case, disable this option so that the file pickers will not enforce the extension.
-
Export images with saved file If you do not want to copy the particle's images to the directory where you save the particle file, uncheck this option. Just remember that if you are to open this particle in the future, you will have to use the provided dialog to locate the image files.
-
UI Scale This app was created with the default pixel density of a standard 1920x1080 screen in mind. If you are using a 4K or similar setup, you may want to change the UI scale so that it's large enough to see clearly. When you select a size, click apply. You'll have to click again to approve the new size, otherwise it will reset to the previous value.
-
Keyboard Shortcuts Keyboard shortcuts for undo/redo and the like are provided for convenience. Open the shortcuts menu, then click the field for the shortcut you want to modify. Press any key combination. All keyboard keys are viable along with the modifiers control, shift, alt, and command on mac computers. If there is a conflict, the affected shortcuts will turn red. Press escape while setting a key combination to clear the shortcut.
-
Open Preferences Directory This will open the directory that stores the preferences file for the app. This is the default path for all libGDX games and apps. Find the file "GDX Particle Editor". You may modify this file or delete it entirely if the app is not functioning correctly.
-
Open Log Directory This will open the default log directory (users/username/.gdxparticleeditor). GDX Particle Editor will save a log file whenever the app crashes or if it can't open/save a file. You can see the last saved log file in this directory.
-
Reset to Defaults This option will reset all options to their default values.
-
Open GitHub Page This will open the GitHub page for the app. You will find downloadable resources and wiki articles (including this one).