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

64 Comments »

  1. Phil says:

    Great stuff, was looking for just this since I am on Windows. Any chance source could be made available so we could run it as an AIR app and not on the Web.

    Either way thanks a ton.

  2. Devon O. says:

    Thank you for the comments Phil. Not sure about releasing the source. I had to a bit of ‘hacking’ on both some Starling classes and Justin Windle’s Simple GUI to get everything to work the way I wanted. And aside from that it’s just a big mess. I may do an .air release of my own later though – that’s a good idea.

  3. Antti says:

    Hello,

    Very nice actually, thank you.

    One request:
    Could you please add controls for sourcePositionVariance x and y?

    Would be good for controlling rain and snow flakes ;)

  4. Devon O. says:

    Hey Antti,

    Not sure how I overlooked that. I’ll try to get it in this weekend. Thanks for the suggestion.

  5. Antti says:

    Thank you, looking forward to it :)

    Also, how about “Load” button for editing xml?

  6. Devon O. says:

    The X and Y variance is now added.. The load button was meant to be included in my TODO list. The trouble there is deciding whether or not I want to be fancy and allow loading custom particles, or take the easy way out and only allow loading the pex files. I suppose the latter would at least be a start.

  7. Antti says:

    That’s awesome, thanks!

  8. polyGeek says:

    Awesome work. If you’re like me then every time I create something like this the testing takes forever because I end up playing and becoming mesmerized by the visual patterns. 10 minutes later I remember I have code to write. :-)

  9. JIAZI says:

    Great work!! I love this!!

  10. Devon O. says:

    Hey polyGeek,

    I know what you mean. Aside from building and playing with this thing, I haven’t actually touched Starling. About time I actually sit down and make something. :)

  11. [...] One thing Devon mentions is that if you are on a Mac please consider using Particle Designer as it has more features and deserves the support (something I completely agree with – I use Particle Designer myself). You can also read up on Devon’s particle editor on his blog OneByOneDesign.com [...]

  12. Scottae says:

    Very cool. Thanks for sharing!

  13. [...] out this in-browser particle editor for the Starling 2D Framework for Flash Player 11. Export your particle effect as a Starling [...]

  14. airnan says:

    hi, great work!
    I opened the .pex file on Particle Designer and it seems the “Emitter Angle” has a 180 degree offset.
    I would allow to edit values by hand on the textfields, because with scrollbars some values are impossible to achieve

  15. Thanks for the browser version of your particle editor extension.

    When I uploaded a custom texture PNG (24-bit with alpha channel) it does not recognize texture alpha.

    Any ideas?

    BTW, an input area for the slider tools, would be a good idea for fine tune.

  16. Devon O. says:

    hey Özgür, sorry about the problems. Would it be possible to send over the png in question (or another one saved the same way) so I can do some tests. I agree some input tools might help out and may look at it later. I’ve actually been doing fine tuning by editing the output xml file, but I guess that kind of defeats the purpose.

  17. thanks Devon,

    I’ve just sended (to your onebyonedesign.com) e-mail with attachments about the issue.

  18. Devon O. says:

    Just got the email, but it may not be until the weekend that I have some time to look into the problems.

  19. [...] Particle Editor for #Starling. Blog Post | Tool (cc @leebrimelow @thibault_imbert [...]

  20. Nel says:

    Hi Devon,

    Thanks your editor is marvelous! I really like it. Can you possibly add a heart shape texture in the list to choose? I like to make some special effect for my love ones..;)

    I tried upload a texture myself but it seems always changes the texture background even I use no color as background.

    For example if I export the star particle.zip and then just upload the texture.png back to your screen, it then changes its background, is it a bug?

    thanks

    Nel

  21. Greg says:

    Hi Devon,

    Awesome, thank you.

    I’m also having the same issue with loading my own textures as it doesn’t recognise the alpha value, they are just pngs done if PS.

    As Nel said, if you export the star texture for example and reload it it doesn’t recognise the alpha anymore.

    Thanks,
    Greg

  22. Devon O. says:

    Hey Nel and Greg.

    I’ve had others complain about the transparency problems as well but being the lazy (oops – I mean busy) bastard that I am, I never got around to fixing it. It has finally been fixed now though. And in the spirit of Valentine’s Day, I’ve also added a heart as a default particle.

    Thanks to everyone who brought the bug to my attention – sorry it took so long for me to fix it.

    d.

  23. fideldonson says:

    Fantastic work – very useful. However i cant seem to create even the most basic explosion like effect – i’ve been tweaking everything but nothing resembling an explosion – starting in one point and expanding outwards. Any pointers would be greatly appreciated.

  24. Devon O. says:

    Hey fideldonson,

    Try using a gravity emitter, maybe bring down the max particles to around 200 or so, give it a short lifespan (maybe .5 or so), adjust the lifespan variance to taste (around 1.5), set the angle variance to 360, play around with the speed and speed variance and bump up the y gravity to around 150 or so, then play around with everything else. Of course the trick is getting the emitter to fire only once. I’m not sure if Starling has a built in one-shot particle effect (haven’t played with it for awhile), but I’m sure you can fake it fairly easily by starting the particle effect then, nearly immediately, stopping it. Hope that helps out some.

    d.

  25. Hi Devon,
    I just wanted to tell you that I’ve found (and fixed) the problem that caused the particles in Starling to look different from the output of the 71squared Particle Designer sometimes. Since the output has thus changed, it would be great if you could update the PS code used in your preview.

    Thanks for the great work on that editor! =)
    Daniel

  26. Devon O. says:

    Will do – thank you for the heads up…

  27. [...] 该软件只有mac版并且免费版只能预览粒子效果,无法保存。完整办$7.99,不算贵。不过研究一下*.pex文件就大概知道这工具都做了什么事了,可以自己写一个工具来生成*.pex(就是一个xml文件)。像这位博主仿照这个编辑器用Flash做的编辑器。 [...]

  28. This is a very cool tool. Thanks a lot for making this and putting it up!

    Any plans to include particle rotation in an upcomming build?

  29. Devon O. says:

    Hey Colin,

    I didn’t even realize Starling currently supports particle rotation. Just updated. Thank you for the heads up.

  30. Pat says:

    Awesome tool, I’ve used it several times!

    Any plans to add Tangential Acceleration Variance, Radial Acceleration, and Radial Acceleration Variance? From what I can tell, those are the only particle behavior parameters that your tool lacks compared to Particle Designer.

    Thanks for your hard work!

  31. Oh great! The update makes it even better!

  32. Devon O. says:

    Thanks Colin.

    @Pat – you can see at one of my update entries I tried adding some of those things, but they didn’t do anything at the time. Starling’s been updated several times since though, so, yes, I’ll check it out this weekend – and if they’ve been implemented by Starling, I’ll add those last few modifiers.. Glad this thing proved to be useful..

  33. Thanks for the latest updated, Colin!
    In theory, Starling should make use of tangantial and radial acceleration variance! http://goo.gl/0Bsrg — it was (accidentally) ignored in older versions, though.

  34. Tyler says:

    Incredible work! If there were any suggestions, it’d be:

    – option to manually type in values. Sometimes the sliders are a little finicky and I can’t get back to certain values, so it’d make it easier just to click the value field and type it in.
    – AIR version so that I can have the option of running it locally. I’m worried that I’ll start using this too much and one day it’ll disappear.

    Either way, thanks a lot for this tool. I’ve been mucking around with it and made some pretty decent looking effects that I might send you at some point.

  35. Aaron says:

    Just another shout-out that someone else out there loves and uses this tool. Great work. Thank you again!

  36. Is it possible to turn the Texture Smoothing off? (using nearest neighbor or something like that?)

    I would like to create particles with rougher edges to fit an 8-bit visual style. It looks like the texture is blurred too, but I assume that’s just because of the texture stretches, but I could be wrong!

    If you know of a quick work-around this problem I would appreciate your help! Thanks

    (Note: Not sure if my email subscribes to your replies, but if you can directly send me a reply to my email address that would be great.)

  37. Devon O. says:

    Hey Pierre, Straight AGAL does allow for ‘nearest sampling’ with the tex operator (e.g. tex oc, v0, fs0 )

    Now how that can be reached through Starling, I’m not entirely sure. I do know that it was just recently announced that Starling will support custom filters, so what may be a possibility is to write a filter / shader that creates that 8-bit style (should be fairly simple process, and look, there’s one here: http://wonderfl.net/c/l43h ) and apply it to the entire project. So, that’s an idea, anyway..

  38. Ollie says:

    Hi

    Exporting from the app doesn’t work for me in Chrome 22.01 works fine in FireFox 14. Anyone else getting this?

  39. Devon O. says:

    Hey Ollie. Sorry for the difficulties.. I’m currently using Chrome 23.0.1251.2 dev-m and it works fine for me. I know that doesn’t help you much, but it may just be the Chrome release..

  40. Shawn says:

    Any chance you could open source this?? I’d love to build a more full featured AIR version of this, with support for multiple projects and a list of existing effects, but before starting I’ love to get that whole right-hand of GUI :D

  41. ricardo mello says:

    I´d like to know if it is open source… can I help to develop it?

  42. Devon O. says:

    For all those asking about open sourcing this – I will eventually. Just need to clean it up a bit then I’ll throw it up on github and you can take it from there. Just give me a week or so.. :)

  43. Neto says:

    Just a little bug report, sry, i didnt find your mail.
    If i change ‘Lifespan’ then EmissionRate is not updated.
    It’s only updated by changing ‘Max Particles’.

  44. Max says:

    So I have no doubt I am doing something wrong, but I was trying to create a particle that was essentially the texture that is uploaded with no blending or alpha on a white background? I can’t seem to figure out what I need to do. Every time I set the blendmode options the closest I can get renders the texture with a black box around it.

  45. Devon O. says:

    Hey Max,

    It’s usually hit or miss for me as well and I just play until I get what I want. Have you tried SOURCE_ALPHA, and ONE_MINUS_SOURCE_ALPHA though? In theory that should keep the particle’s alpha but leave everything else the same. In theory…

  46. Max says:

    It seems that no matter how I set the blending it seems to either invert the transparency or just makes everything black. LOL. No worries though I have quite a few very nice particles I have created with this exceptional tool. A fantastic job with all of this. Worst case Ontario I will just make my backgrounds a bit darker if I have to. =)

  47. James says:

    Hi Devin O,

    Not sure if this happens for everyone, but I think I found a bug. After hitting Export Particle and saving out a .zip file, extracting the .pex file and loading it back in, the following fields are not being imported. Tan. Acc. Var, Rad. Acc, and Rad Acc. Var.

    Also would be great if it automatically saved out a .zip. As in Chrome it saves out a file with no extension unless you manually add the .zip.

    Thanks for the great tool. Keep up the great work.

  48. Devon O. says:

    Hey James,

    Thank you for that info. I’ll check into that this weekend.

    d.

  49. Devon O. says:

    Hey James,

    Those 3 variables have been fixed. I can’t reproduce the ‘.zip’ extension bug (even in Chrome). Thanks again for the info and the kind words.

    d.

  50. =L33= says:

    Hey James,

    Thank you very much for the great tool.

    Is it possible to add a text box where I can input the parameters directly?

    I know it’s too much for a free user to ask for this, but thank you if you can make it happen :)

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

Devon O. Wolfgang

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development”

Contributing Author of “Flash AS3 for Interactive Agencies”

Senior Software Engineer at Meez

Starling Particle Editor

vignette

Some Photographic Shaders


A couple weeks ago I was contacted and asked to develop some filters for Starling that could be used in a mobile camera app[...]

boids

Animated Particles, Books, and Code – It’s a New Year


It’s a new year[...]

bug

Logical Or Assignment Bug in ASC2


So, here’s something to keep an eye on if switching to AIR 3.8[...]

Starling Filter Collection

Starling Filter Collection


Building up a collection of filters for the Starling framework[...]

Starling Warp

Warp Filter for Starling


Another filter for the Starling framework[...]

promise

Promises Promises


What it boils down to is handling asynchronous tasks [...] in a clean, intelligent fashion [...]

GodRays

Starling ‘God Ray’ Filter


While cruising the internet today looking for interesting things to try out I ran across this fun little GPU Gem[...]

Alpha in Starling Filters and Basic Branching in AGAL


In plain English to create a circular mask we would want to do something like this[...]

Starling, Nape Physics, and PhysicsEditor


A look at using the PhysicsEditor tool for Nape and Starling [...]

Playing With a Couple Game Ideas


Just a couple game fragments, really[...]

One More Filter For Starling


Another filter for the Starling framework[...]

Filters in Starling


Using and writing filters in the Starling framework[...]

Towards a Better Scratch


Perhaps it was too much Meat Beat Manifesto in the late 80’s [...]

Learning AGAL with AGALMacroAssembler and OpenGL Examples

So the other day I sat down and thought to myself: self, it’s high time you learn you some of this new fancy pants AGAL[...]

UV Scrolling in Starling


Obviously this could come in pretty darned handy for space games, side scrollers, etc, etc[...]

Drawing on Stuff in Away3D 4.0

So, Easter Day, I thought I’d sit down and make a little ‘Paint on an Egg and Send it to Your Friend’ app.