[Release] Stardust particle engine extension and GUI for making particle effects

matyasf

I just released a new tool for making particle effects, its called Stardust particle editor.
You can read about it more on the wiki (http://wiki.starling-framework.org/extensions/stardust-engine), but in a nutshell its currently among the fastest particle effect systems (on par with FFParticleSystem), but is more flexible and comes with a GUI editor. Its fully open source on Github (https://github.com/matyasf/)

The editor is at https://s3-eu-west-1.amazonaws.com/s3.funkypandagame.com/startdust-particle-editor/stardust-editor.html

mrpinc

Terrific release. Not my particle engine of choice but I'm sure this will make a lot of people happy. Thanks so much!

Snap_n_Point

Cool stuff. However I find the editor a bit difficult to use. I was unable to make the particles change alpha over time. I added the Change alpha option and played around with the values, but nothing happened.

droppanda

This looks great, however I think it would be useful if you had a couple of presets (like explosion type particles, fire, rain, etc) so people can start off with something to tweak and get what they are after. I'll consider it for my next project.

matyasf

Yeah, Im planning to make some more example effects so people can learn it.
@Snap n Point to make it change alpha:

Add the "Change alpha" action
Set the initial transition time to > 0 (in steps), for example 30. This will make the particles fade in.
Or set the final transition time to > 0, for example to 50. This will make them fade out when they life is about to end.

Snap_n_Point

Oh now it works. I guess that I got confused by the check mark box to the left which seems to work opposite to what I would expect.

matyasf

Update: I have added a few examples. Just open the editor, on the right will be an "Examples" button Since I am not an artist some of them dont look so good :/

If anyone wants more examples I can add more (maybe smoke? or fire?)

Astraport

Cool! Is it optimized for mobiles?

booster

I noticed that animations are not based on time but on FPS - when I changed FPS the animations just works slower (at least in the editor it does). Is it supposed to work this way?

matyasf

@Astraport What do you mean? Its a generic library, it can be used anywhere. Its used now in 2 mobile projects and one web project.

@booster Good question, the answer that you can make FPS independent simulations, but the editor is FPS dependent. The main simulation object (Emitter.as) has a step(deltaTime:Number) function, the editor calls simply step(1) in an EnterFrame handler.
This is the most simple setup and (I guess) its perfect for most users, thus the editor works this way.

If you want FPS independent simulations you can do it the following way:

Make a simulation in the editor using some low FPS value (for example 20). This will be a baseline where the simulation step is 1.
if you step your game's time adjust the dt you pass to the simulation based on the elapsed time, for example if its running currently at 40 FPS call step(0.5).

Note that values > 1 passed to the step function will make the simulation look different, in this case you have 2 options:

Simply use the value or cap it at 1. In both cases the simulation will be a little off, but its not noticeable if your FPS just dips below 20 for a few frames rarely. If its constantly below 20, the difference will be noticeable, but I think in this case one should fix the low framerate issue.
Call step multiple times. Say your framerate is 10, then call step(1) twice. Obviously this will incur extra CPU cost which you might not want if your FPS is low already. But on the upside your simulation is perfectly framerate independent.

booster

And wouldn't it be easier for everybody to have FPS independent simulations in the editor? 🙂 Or at least an option to toggle it?

I really doubt it is perfect for most users - most users use delta time (that's how all animation frameworks work, that's how Starling's Tweens work and how Starling works internally).

matyasf

Yea, you're right I think ill implement it in the near future. It sounds like an easy change

JaimeDominguez

Editor looks powerful yet a bit hard to use.
I have been using the PDparticle editor for 2 years and I knew it lacked a few things, if you manage to make the best editor you will probably have quite some extra traffic to your site 🙂

Well done 🙂

matyasf

Thanks! Any advice on which parts are hard to use?

Jban

Hello, matyasf! Can You tell, how to stop emitter after a certain time, such as start(0.2) function in PDparticleSystem?

matyasf

It depends on how you want to stop it:

If you want to pause the simulation just dont call player.step() anymore. This will stop the simulation from moving, but existing particles will be still there.
If you want to stop the emitter from generating particles (but the ones on the display will finish their lifecycle) set all emitter's clocks rate to 0. Something like

for each (emitter : Emitter2D in project.emittersArr)
{
    SteadyClock(emitter.clock).ticksPerCall = 0;
}

Then later you can set this again to a > 0 value, and the emitter will emit particles again.

If you want to stop and remove particles in one frame remove the enterFrame listener and call SimPlayer.resetSimulation(). This removes all particles and resets all actions and initializers. The simulation is still usable afterwards.
If you are not using this simulation anymore remove the enterFrame listener and call ProjectValueObject.destroy(). This removes all particles, removes the simulation renderer from the display list and disposes the textures used by the simulation. After this the simulation cannot be used anymore.

EDIT: I think I'll move the reset() function to ProjectValueObject to make the API more clear.

Jban

Thanks for the reply. I have a few more questions.
Is there a property of the particles like "Amount", I saw it in other editors, it gives brightness to emitter?
In PDParticleSystem particles more brighter by default, and explosion emitters with same settings in PDParticleSystem looks more like an explosions than in Stardust.

How I can change color of particles overtime?

Hope explained clearly.

matyasf

Is there a property of the particles like "Amount", I saw it in other editors, it gives brightness to emitter?

hmm I dont really understand. Since there is no Gamma filter in Starling Stardust does not have it either. You can play with the blend modes to have them look different.

How I can change color of particles overtime?

There is no such action currently but its easy to code one, just make an Action that sets the colorR, colorB, colorG properties of the particles. For an example of a custom action check to follow mouse example on Github (I recommend this solution).
Or if you dont want to code a custom action use a sprite sheet as particle graphic where the graphic changes color in each frame.

Btw I am planning to make a "change color over time" in the near future. I just have not really ironed out how exactly you would be able to change to color. One way would be like how you define gradients in Photoshop: I display a horizontal bar where you can click and set colors. And a textfield where you can set how much time it will take to loop trough this color bar? Or add a setting where it loops trough it in a fixed time/loops trough it based on the total life of the particle?

Jban

Thanks a lot.

One way would be like how you define gradients in Photoshop: I display a horizontal bar where you can click and set colors.
It is conveniently. http://www.rigzsoft.co.uk/ uses a similar option. Contains many useful features.

You wrote above, that you can add some examples (such as smoke, fire). Add it please, if not more difficult.

matyasf

Yep, the only problem with is that this gradient edit bar is quite a fancy custom component thus it takes a while to implement.

> You wrote above, that you can add some examples (such as smoke, fire).
Yeah, I plan to add more. Have you found the "Examples" button on the top right side of the editor? It contains a few samples.