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.
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.
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.
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 ;)
Hey Antti,
Not sure how I overlooked that. I’ll try to get it in this weekend. Thanks for the suggestion.
Thank you, looking forward to it :)
Also, how about “Load” button for editing xml?
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.
That’s awesome, thanks!
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. :-)
Great work!! I love this!!
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. :)
[...] 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 [...]
Very cool. Thanks for sharing!
[...] out this in-browser particle editor for the Starling 2D Framework for Flash Player 11. Export your particle effect as a Starling [...]
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
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.
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.
thanks Devon,
I’ve just sended (to your onebyonedesign.com) e-mail with attachments about the issue.
Just got the email, but it may not be until the weekend that I have some time to look into the problems.
[...] Particle Editor for #Starling. Blog Post | Tool (cc @leebrimelow @thibault_imbert [...]
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
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
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.
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.
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.
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
Will do – thank you for the heads up…
[...] 该软件只有mac版并且免费版只能预览粒子效果，无法保存。完整办$7.99，不算贵。不过研究一下*.pex文件就大概知道这工具都做了什么事了，可以自己写一个工具来生成*.pex(就是一个xml文件)。像这位博主仿照这个编辑器用Flash做的编辑器。 [...]
RSS feed for comments on this post. / TrackBack URI