Particle Editor for Starling Framework

So I finally had time to sit down and have a bit of a play with the Starling 2D framework for Flash’s GPU accelerated Stage3D the other day (as well as read through the extensive and thorough documentation). It looks to me quite promising and certainly fun to play with  (although this tweet from Iain Lobb suggests it may have some texture caching issues, I’m hoping those will be hammered out as work on the framework progresses). One of the things I was really excited to play around with was particles. Everyone loves particle effects. At this last Flash on the Beach, Lee Brimelow gave a cool sneak peak at using this very slick looking UI to create some particle effects, export them as a .pex file, then use that .pex file in a separate project (I mentioned that briefly in my last post). Little did I know at the time, but Lee was using the Starling framework and the slick looking particle editor he was demoing was Particle Designer from SeventyOne Squared. Needless to say, I was quite disappointed to discover that Particle Designer was (a) for Mac’s only, and (b) a commercial piece of software (though it only costs a measly 8 bucks – kudos to 71 * 71 for offering quality software at that price).

Not to leave us Windows users high and dry, I decided to make my own editor which you are welcome to run freely from the browser here.

My version makes extensive use of Keith Peters’ MinimalComps and Justin Windle’s Simple Flash GUI Tool, so I find myself once again thanking those two for their generous contributions to the community.

TO USE THE PARTICLE EDITOR:

If you’re on a Mac, don’t. Use Particle Designer mentioned above instead, it’s much better and they deserve the support. If you’re not on a Mac, or you’d prefer a free web version, click on the screen shot below (of course you will need Flash Player 11 installed).

You’ll see the default particle you’re presented with is a little candle flame type of particle. By clicking and dragging in this black area to the left you can re-position the particle effect. Play around with the settings in the ‘Particles’ column to see what nifty effects you can come up with. The ‘Particle Behavior’ column has additional settings which are specific to the emitter type selected in the ‘Particles’ column. The last two columns adjust the color, color variance, and blend function of the particle.

To adjust the particle texture, click on the ‘Edit Texture’ button in the ‘General’ column. At the moment, the editor’s a bit lame, but it allows you to select from 3 presets (circle, blob, or star) or upload your own texture (textures are kept to a max of 64×64. If you upload anything larger it will be resized to that. It is best to create a texture with a width and height set to a power of 2 (i.e. 2, 4, 16, 32, or 64)). Incidentally, the ‘Custom’ texture in the drop down box will be empty until you upload your own. The new texture will not go into effect until you click on the ‘Done’ button.

If you plan on using your particle effect on a color other than black, click on the ‘Edit Background’ button to set the color of the area behind your particle. This color won’t be saved at all, but is useful for a preview.

And, speaking of saving, to save your particle effect, click on the ‘Export Particle’ button. This will allow you to download a .zip file called ‘particle.zip’. Inside that .zip file you’ll find a ‘particle.pex’ file and a ‘texture.png’ file. To use these in your own projects, simply embed the two files into a Starling project as you usually would. Download the Starling Particle extension (you’ll need this for any particle effects in Starling anyway) for some quick and easy examples. I also highly recommend reading the lengthy Starling manual available on the ByteArray blog. The last few pages go over how to use particle effects.

TODO LIST

Some things I would like to add this when I get some time: as mentioned earlier, the texture editor’s a bit lame. I wouldn’t mind a more fully functional editor that would allow you to paint your own textures in the application rather than upload one.

I would also really like to create a library of particle presets to browse through and edit as well as the ability to save your creations to that library to share with others. I suppose that depends on whether or not this thing actually gets used by anyone other than myself. In the meantime, if you do create something that you’d like to share, email me the created .zip file at webmaster [at] onebyonedesign [dot] com. If I get a good 5 or 10, I’ll create a library manually. If I get a whole freakin slew of the things, I’ll take the time to create a library that you can save to yourself.

Also, post some comments if you find any bugs or have any suggestions.

UPDATE 11OCT11

Thanks to a comment below, the editor now includes X and Y Emitter position variance controls for ‘Gravity’ type emitters.

UPDATE 15OCT11

It’s now possible to load .pex files. Keep in mind this won’t change the particle texture. At the moment that will still have to be changed separately, if you want to do so. There also isn’t a whole lot going on in the way of error checking, so you may or may not get some unexpected results or errors if the pex file isn’t what the app expected. If that happens, let me know and I’ll see what I can do to fix it.

I also utilized swffit for those with smaller screen sizes.

UPDATE 31OCT11

Added Tangential Acceleration (“Tan Acc”) to the Gravity Emitter behavior settings (I was also going to add Tangential Acceleration Variance, but some experimentation seemed to suggest that it didn’t actually do anything. I may be wrong and add it later).

Also happened to notice that there is a video tutorial over at gotoAndLearn.com showing how to use this Particle Editor then actually use the generated particles in a Starling Project. A huge thanks to Lee Brimelow for that.

UPDATE 05FEB12

Finally fixed user uploaded texture transparency bug.

UPDATE 06APR12

Updated to the most recent versions of Starling (1.0) and Starling Particle Extension from Github.

UPDATE 03JUN12

Included controls for particle rotation (start, start variance, end and end variance).

UPDATE 10JUN12

Added Tangential Acceleration Variance for gravity emitters. And for Radial emitters, allowed degrees per second to be a negative number (to spin in opposite direction). Radial Acceleration and Radial Acceleration Variance still seem to do nothing in Starling, yet.

UPDATE 31AUG12

Updated to Starling 1.2. Added Radial Acceleration and Radial Acceleration Variance (finally).

UPDATE 19JAN13

Updated to Starling 1.3. Open sourced entire project. Download it or branch it on GitHub.

UPDATE 21SEP13

Updated to Starling 1.4RC2. Published to Flash Player 11.5 using Air 3.8 (ASC2). Thanks to Jack Ront of All Play, No Work, .plist files can now be optionally included in output .zip (just tick the box next to the export button). For anyone  forking the github repo, I’ve done a major refactor – removing the Starling Master and Particle Extension libraries from my own repo (those will now have to be downloaded or forked separately) and adding the project classes to a onebyonedesign package.

UPDATE 04JAN14

Added a ‘Randomize’ button to spark some inspiration. The randomize button won’t change the emitter type or the blend functions, but all slider values will be set to a random position.

UPDATE 02AUG14

Updated to latest versions of Starling and Starling Particle Extension. Published .swf to Flash Player 14. Added support Minimum Radius Variance. Performed a major refactor on source (available on Github).