LogoLogo
  • Home
  • Projects
  • About
  • Contact

Particle Editor for Starling Framework

Devon O. · October 01, 2011 · Flash · 65 comments
7

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).

  Facebook   Pinterest   Twitter   Google+
stage3dstarling
  • enabled v. mouseEnabled & Other Stuff
    August 20, 2008 · 0 comments
    1974
    2
    Read more
  • Filters in Starling
    September 08, 2012 · 15 comments
    6442
    9
    Read more
  • JG Ballard in Augmented Reality
    April 21, 2009 · 1 comments
    2140
    3
    Read more
65 Comments:
  1. Hey L33,

    It’s Devon, actually (James was another commenter here).

    Adding direct input has been on my todo list since making this thing. As you can see, I haven’t got very far with it, yet. You can get the entire source on Github though: https://github.com/devon-o/Starling-Particle-Editor . You’re welcome to fork it and make some changes. If you do, let me know and I might add the changes back here.

    d.

    Devon O. · April 13, 2013
  2. Dude, why don’t you have a air version?
    ty

    lmsardon · May 21, 2013
  3. Pure laziness, really. Besides, it’s not very often I’m doing work on something and don’t have an internet connection. That said, you’re welcome to pull the source off Github and knock yourself out. If you (or anyone else) do make an air version, post it here. I’ll download it myself and link to it.

    -d.

    Devon O. · May 26, 2013
  4. Hi Devon,
    I wrote a small AS3 utility that takes your XML (*.pex) and converts it to PLIST format. I can then bring the file into a Cocos2D project and it works like magic! I don’t want to paste the code here because it’s quite long, so if you’re interesting please email me. I think it’d be great to have an export to PLIST feature in your fantastic tool!

    Jack

    Jack · September 10, 2013
  5. Hey Jack,

    While it’s something I, myself, would (hopefully) never need, it would be a great addition. Expect an email this weekend.

    d.

    Devon O. · September 10, 2013
  6. A Randomize button that fuzzies up all the slider values would be the bomb!

    InvisibleWonder · January 03, 2014
  7. Hey InvisibleWonder,
    It seems like a good idea but I’m not sure it would be as cool as you think. There’s so many settings that 99 times out of a 100 you’ll just end up with a mess by randomizing them. That said, the feature is now in there. Give it a go and let me know what you think.

    Devon O. · January 04, 2014
  8. I think a better option would be the possibily to randomize only a selected few of the properties. Randomize only the ones the user chooses. This would give a lot better control over the end result.

    A good addition would be a way to set exact values for the various properties. For instance, if you decide to change Emmiter Angle and go all the way to 0, you won’t be able to set it back to 270 again. The reason is that the step is 5.4 units. And it’s not the only one. All sliders have the same problem.

    P.S. The first time I tried to change the Max Particles property, the Flash crashed (before that I was testing the Random button several times). But it was fine after reloading the page. Dunno where’s the problem.

    evgenidb · January 13, 2014
  9. Yes, completely randomizing requires winning a lottery to get something meaningful, let alone good looking. By “fuzzies up”, I meant randomly nudge a parameter between plus or minus 10 percent. So if you start with an effect, it’ll gradually distort away from it.

    You might touch 3 or 4 params at a time, which would be fine. But really cool would be to touch one param at a time, but push it onto a stack. Then add an undo button that rewinds the last change. That would let you go through plenty watching adjustments happen, but giving you enough control to trace back to one you really liked.

    Btw, you’re awesome.

    InvisibleWonder · January 30, 2014
  10. Hey there, great little particle designer you’ve made. :)

    I have a few suggestions if you’re ever looking to develop this further:
    – It’d be nice to specify numbers rather than always having to use the sliders, especially when I want to set something to ‘0’.
    – The colour sliders could be replaced with colour pickers
    – You spelled SimpleGUI wrong in the top-right
    – Randomize should use Gaussian distribution for most of the parameters, that’ll give you much better results
    – Check out http://www.bfxr.net/ , it provides “locks” for each parameter, which prevent them from being randomised or mutated.
    – You can use html local storage to store particles, and like InvisibleWonder says, a simple Undo/Redo stack would also be great.

    eigenbom · January 30, 2014
  11. maybe i’m so lazy, but i want to ask. is there way the particle use color of the source png? i had try to change the color in editor, hope i can use the original color from the source, but i didn’t find it.

    thank you.
    sorry, i can’t speak english well.

    Rin · February 18, 2014
  12. oh, i’m so embarassed >,<
    i had found it now
    i' so sorry :(

    Rin · February 18, 2014
  13. Hello,

    Great free tool ;)

    But The last version of Particle System is not compatible.

    This property is missed:

    minRadiusVariance

    https://github.com/Gamua/Starling-Extension-Particle-System/issues/26

    Benoit · July 28, 2014
  14. Hey Benoit,

    Thank you for the heads up. It may not be until this weekend, but I will get that updated as soon as I can.

    d.

    Devon O. · July 28, 2014
  15. It’s amazing. Thank you for sharing

    math games · July 31, 2019
« Previous 1 2

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang