particle city

Before coming to libgdx, I had been working on my own similar project, Skorpios. One of the unique things I had was a particle editor that allowed for particle effects to be easily designed. I’ve ported it to libgdx, and you can check it out via JWS by clicking this image:

Particle Editor

Real quick, a particle effect consists of some images that are moved around. The images usually use additive blending and some pretty stunning results can be produced with only a few images. Particle effects are good for fire, explosions, smoke, etc. Each particle has many properties that control how it behaves: life, velocity, rotation, scale, etc. The particle editor allows you to manipulate these properties and observe the result in real time. You can also create effects programmatically, but it is much more difficult and time consuming to create great effects.

The first step to creating an effect is to choose an image. The default image is just a simple round gradient. Experiment with different images to create a wide variety of effects. Images will often combine for some surprising and sometimes very cool looking results.

When you are configuring properties, you are actually configuring the particle emitter that will create and manage the particles. In code, the emitter is represented by the ParticleEmitter class. A particle effect is made up of one or more emitters, which is managed in the lower right of the particle editor. In code, the effect is represented by the ParticleEffect class, which has a list of ParticleEmitters. Most of emitter properties are self explanatory, but I will run through them quickly.

Delay: When an effect starts, this emitter will do nothing for this many milliseconds. This can be used to synchronize multiple emitters.

Note the delay property has an “Active” button. Some properties can be turned off, which can minimize some of the work that needs to be done at runtime.

Duration: How long the emitter will emit particles. Note this is not the same as how long particles will live.

Count: Controls the minimum number of particles that must always exist, and the maximum number of particles that can possibly exist. The minimum is nice for making sure particles are always visible, and the maximum lets the emitter know how much memory to allocate.

Emission: How many particles will be emitted per second.

Emission is the first property with a little chart, but all properties with a chart work the same way. Click on the chart to add nodes, click and drag to move nodes, and double click to delete nodes. The chart allows you to vary the value of the property over time. Note that the chart says “Duration” in the center. This means the x-axis represents the duration of the emitter (which of course is set with the duration property). Other charts may say “Life”, which means the x-axis represents the life of a single particle. The top of the y-axis represents the value specified for “High” and the bottom of the y-axis represents the value specified for “Low”. The chart can be expanded with the “+” button for a larger view.

The “High” and “Low” values each have a button marked “>”. When clicked, this will expand to show a second text box. A random number (float) is chosen between the text box on the left and the one on the right. The number is chosen when the effect starts for a “Duration” chart, and when a particle is spawned for a “Life” chart.

Finally, the last piece of functionality for charts is the “Relative” checkbox. When unchecked, the value at any one point in time for the property will be what the chart shows. When checked, the value shown on the chart is added to the initial value of the property. Why? Imagine you have rotation set to start at 0 and go to 360 degrees over the life of a particle. This is nice, but all the particles start at the same zero rotation, so you change the “Low” value to start between 0 and 360. Now your particles will start between 0 and 360, and rotate to exactly 360 degrees. If a particle spawns at 330 degrees, it will only rotate 30 degrees. Now, if you check “Relative”, a particle that spawns at 330 degrees will rotate to 330 + 360 degrees, which is probably what you want in this case.

Life: How long a single particle will live.

Life Offset: How much life is used up when a particle spawns. The particle is still moved/rotated/etc for the portion of its life that is used up. This allows particles to spawn, eg, halfway through their life.

X Offset and Y Offset: The amount in pixels to offset where particles spawn.

Spawn: The shape used to spawn particles: point, line, square, or ellipse. Ellipse has additional settings.

Spawn Width and Spawn Height: Controls the size of the spawn shape.

Size: The size of the particle.

Velocity: The speed of the particle.

Angle: The direction the particle travels. Not very useful if velocity is not active.

Rotation: The rotation of the particle.

Wind and Gravity: The x-axis or y-axis force to apply to particles, in pixels per second.

Tint: The particle color. Click the little triangle and then use the sliders to change the color. Click in the bar above the triangle to add more triangles. This allows you to make particles change to any number of colors over their lifetime. Click and drag to move a triangle (if it isn’t at the start or end), double click to delete.

Transparency: Controls the alpha of the particle.

Options, Additive: For additive blending.
Options, Attached: Means existing particles will move when the emitter moves.
Options, Continuous: Means the emitter restarts as soon as its duration expires. Note that this means an effect will never end, so other emitters in the effect that are not continuous will never restart.
Options, Aligned: The angle of a particle is added to the rotation. This allows you to align the particle image to the direction of travel.

In the upper left of the particle editor, “Count” shows how many particles exist for the currently selected emitter. “Max” shows how many particles exist for all emitters over the past few seconds. Below that is a percentage that represents the duration percent of the currently selected emitter.

Effect settings saved with the particle editor are written to a text file, which can be loaded into a ParticleEffect instance in your game. The ParticleEffect can load images from a directory, or a SpriteSheet. Of course, a SpriteSheet is recommended and can easily be made with the SpriteSheetPacker.

Most effects can be simplified to use just a few images. My most complex effects that use 4 or more emitters typically only need 15 or so total particles alive at once. My crappy Droid can render 250 32×32 blended particles at 46 fos, 500 particles at 36 fps, and 1000 particles at 26 fps (see ParticleEmitterTest in gdx-tests). However, the performance varies greatly with the particle image size.

-Nate

  • Pingback: Tweets that mention particle city – Badlogic Games -- Topsy.com

  • http://plusonelabs.com Moritz Post

    That is a pretty cool tool i must say. From playing around with it i already got some cool effects. Nice interface of the ui also. Maybe you could also add some help texts directly in the ui as to see what each setting is supposed to do.

  • http://plusonelabs.com Moritz Post

    Small UI bug: when selecting to move an emitter up or down which is active the active checkbox gets unchecked.

  • nate

    Thanks. :) Re the bug, yea if you click the table cell containing the checkbox, it will check or uncheck the checkbox. I’ll see if I can coax Swing into not being retarded. In the meantime, be sure to click the emitter name (but not twice, unless you want to rename it).

  • Christoph

    Maybe we can share some cool effects in the forum :-)

  • http://dustypixels.com Adam

    Looks cool but doesn’t launch on Mac, get the error:

    Unable to load resource: http://libgdx.googlecode.com/svn/jws/natives-mac.jar

  • http://badlogicgames.com Mario

    Yeah, cause there’s no official Mac support yet :)

  • http://www.briandilley.com brian

    I get the following error when i try to launch it via JWS (this is Linux):

    java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
    at java.lang.reflect.Method.invoke(Method.java:597)
    at com.sun.javaws.Launcher.executeApplication(Launcher.java:1302)
    at com.sun.javaws.Launcher.executeMainClass(Launcher.java:1248)
    at com.sun.javaws.Launcher.doLaunchApp(Launcher.java:1066)
    at com.sun.javaws.Launcher.run(Launcher.java:116)
    at java.lang.Thread.run(Thread.java:619)
    Caused by: java.lang.UnsatisfiedLinkError: /home/brian/.java/deployment/cache/6.0/15/22e7f7cf-5f52fb6b-n/libgdx.so: libmpg123.so.0: cannot open shared object file: No such file or directory
    at java.lang.ClassLoader$NativeLibrary.load(Native Method)
    at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1778)
    at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1687)
    at java.lang.Runtime.loadLibrary0(Runtime.java:823)
    at java.lang.System.loadLibrary(System.java:1030)
    at com.badlogic.gdx.Version.loadLibrary(Unknown Source)
    at com.badlogic.gdx.backends.lwjgl.LwjglNativesLoader.load(Unknown Source)
    at com.badlogic.gdx.backends.lwjgl.LwjglCanvas.(Unknown Source)
    at com.badlogic.gdx.graphics.particles.ParticleEditor.(Unknown Source)
    at com.badlogic.gdx.graphics.particles.ParticleEditor.main(Unknown Source)
    … 9 more

  • http://badlogicgames.com Mario

    Quick fix: apt-get install libmpg123

    Long term fix: we removed the reference to libmpg123 and will update the jws asap so this won’t happen on systems that don’t have the libmp123 lib installed. Thanks to the LGPL license of libmpg123 we can’t statically link to it :/

  • lib

    Im getting the same problem as brian.
    Windows 7, 64bit.
    Loading it the first time + start -> works.
    Try starting it any other time it fails.

    Exceptions: http://pastebin.com/cE4cm0ne
    Images: http://dl.dropbox.com/u/6559846/particles_1.PNG | http://dl.dropbox.com/u/6559846/particles_2.PNG

  • andy

    How to fit the effect with a camera?

    I create a effect by this editor. But when i draw this effect on a spritebatch which has been set a camera projection it show in a very different way from which show in the editor.

  • Lat233

    Hi
    I download http://libgdx.googlecode.com/svn/jws/particle-editor.jnlp and try to run it. However after downloading particle-editor.jar sucessfully, it displays the message “Cannot launch the application” with exception “Caused by: java.lang.UnsatisfiedLinkError: no gdx-64 in java.library.path”

    Can you help me fix that? I’m using Windows 7 64 bits and jdk1.6. Libgdx is extracted from the latest nightly build, however i place the lib only in application s folder in Eclipse. Do I have to place libgdx libraries in Java_path of the system? And how can I do this?

    Thanks

  • Lat233

    Hi
    I download http://libgdx.googlecode.com/svn/jws/particle-editor.jnlp and try to run it. However after downloading particle-editor.jar sucessfully, it displays the message “Cannot launch the application” with exception “Caused by: java.lang.UnsatisfiedLinkError: no gdx-64 in java.library.path”
    Can you help me fix that? I’m using Windows 7 64 bits and jdk1.6. Libgdx is extracted from the latest nightly build, however i place the lib only in application s folder in Eclipse. Do I have to place libgdx libraries in Java_path of the system? And how can I do this?
    Thanks

  • http://www.siroccosoftware.com/awesome Ash McConnell

    Hi Guys,

    Have been playing with the great particle editor, thanks for your hard work. I was just wondering if it’s possible to add wind dynamically when updating the particles? I am doing a snow effect live wallpaper, i’d like a simple “flutter” when swiping :)

    Thanks!
    Ash

  • Dror

    Hi there,

    I’m trying to run the PARTICLE EDITOR on ubuntu 11.11. Open with “Iced Tea java 6 Web Start” and I’m getting this error:

    net.sourceforge.jnlp.LaunchException: Fatal: Launch Error: Could not launch JNLP file.
    at net.sourceforge.jnlp.Launcher.launchApplication(Launcher.java:596)
    at net.sourceforge.jnlp.Launcher$TgThread.run(Launcher.java:887)
    Caused by: java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:616)
    at net.sourceforge.jnlp.Launcher.launchApplication(Launcher.java:590)
    … 1 more
    Caused by: java.lang.UnsatisfiedLinkError: /tmp/netx-native-30208/libgdx-64.so: libmpg123.so.0: cannot open shared object file: No such file or directory
    at java.lang.ClassLoader$NativeLibrary.load(Native Method)
    at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1750)
    at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1659)
    at java.lang.Runtime.loadLibrary0(Runtime.java:840)
    at java.lang.System.loadLibrary(System.java:1047)
    at com.badlogic.gdx.Version.loadLibrary(Unknown Source)
    at com.badlogic.gdx.backends.lwjgl.LwjglNativesLoader.load(Unknown Source)
    at com.badlogic.gdx.backends.lwjgl.LwjglCanvas.(Unknown Source)
    at com.badlogic.gdx.graphics.particles.ParticleEditor.(Unknown Source)
    at com.badlogic.gdx.graphics.particles.ParticleEditor.main(Unknown Source)
    … 6 more
    Caused by:
    java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:616)
    at net.sourceforge.jnlp.Launcher.launchApplication(Launcher.java:590)
    at net.sourceforge.jnlp.Launcher$TgThread.run(Launcher.java:887)
    Caused by: java.lang.UnsatisfiedLinkError: /tmp/netx-native-30208/libgdx-64.so: libmpg123.so.0: cannot open shared object file: No such file or directory
    at java.lang.ClassLoader$NativeLibrary.load(Native Method)
    at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1750)
    at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1659)

    Any idea?
    Thanks a lot,
    Dror

  • cheskapac

    Doesn’t work on MacOSX 10.6.8.

  • cheskapac

    com.sun.deploy.net.FailedDownloadException: Unable to load resource: http://libgdx.googlecode.com/svn/jws/natives-mac.jar

  • Martin

    Any idea if there will be Mac Support? Alternatives?

  • http://badlogicgames.com Mario

    Just run it from SVN for now.

  • Arthur

    Hi All,

    Doesn’t work on windows 7 64 bit.

    java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.sun.javaws.Launcher.executeApplication(Unknown Source)
    at com.sun.javaws.Launcher.executeMainClass(Unknown Source)
    at com.sun.javaws.Launcher.doLaunchApp(Unknown Source)
    at com.sun.javaws.Launcher.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)
    Caused by: java.lang.UnsatisfiedLinkError: no gdx-64 in java.library.path
    at java.lang.ClassLoader.loadLibrary(Unknown Source)
    at java.lang.Runtime.loadLibrary0(Unknown Source)
    at java.lang.System.loadLibrary(Unknown Source)
    at com.badlogic.gdx.Version.loadLibrary(Unknown Source)
    at com.badlogic.gdx.backends.lwjgl.LwjglNativesLoader.load(Unknown Source)
    at com.badlogic.gdx.backends.lwjgl.LwjglCanvas.(Unknown Source)
    at com.badlogic.gdx.graphics.particles.ParticleEditor.(Unknown Source)
    at com.badlogic.gdx.graphics.particles.ParticleEditor.main(Unknown Source)
    … 9 more

    Can anyone help?

    Thanks,
    Arthur

  • Arthur

    Problem solved. Lat233 just put lib64.dll in system32 and rename it to lib-64.dll.

    Thanks,
    Arthur

  • Anik

    Hi,
    It is not launching on my windows 7, 64 bit machine and in 32 bit windows 7 it launches but no UI element to work with. Any suggestion?

  • ABCD

    @Everyone who is having a problem with the Editor,

    try this http://badlogicgames.com/forum/viewtopic.php?f=11&t=7795&start=11