Lightweight Particle Generator?

[soupking 6 Likes (Newbie)]

Hi Everybody,

 

I'm trying to find a particle emitter/generator in HTML5 that's relatively easy to use. I found Pixi and Pixi Particles but the Pixi library that requires loading is heavy for advertising. Is there something similar out there available that's relatively easy to use?

 

I know Greensock doesn't really do particle engine builds or anything , but I thought this forum isn't a bad place to ask.

 

Im not looking for anything too fancy just something with count, speed/gravity, life, and image/array loading.

 

Does anybody use something that's easy to modify out there?

 

Thanks for any feedback.

[Carl 9,066 Likes (Superhero)]

Yes, we don't necessarily have a particle-engine tool but a lot of our tools can be glued together pretty easily for particle effects.

 

If you need basic gravity, velocity, friction etc our Physics2DPlugin can help: http://codepen.io/GreenSock/pen/emjgxw

 

Physics2D and PhyscsProps are available to Club GreenSock members: http://greensock.com/club/

 

But just using a loop to generate a few tweens can usually get you some pretty awesome results. Check out Diaco's fireflys: http://codepen.io/MAW/pen/wBGvgW

[OSUblake 9,990 Likes (Superhero)]

Creating a simple particle emitter isn't too hard. I helped somebody build one here.

http://greensock.com/forums/topic/13314-particle-animation-turning-the-emitter-on-and-off-kill-repeat/

 

If you need to move a bunch of stuff around, canvas is definitely the way to go. Pixi is even better because it uses WebGL. And Pixi Particles is even better as it does pretty much everything.

 

I don't make banners, so I'm not familiar with the restrictions you have to deal with. I know Pixi is a pretty big file, but that includes everything in the entire library. You can create your own custom build to trim it down. It's also on several CDNs.

 

Here's a couple of particle demos I made with Pixi. Even if you can't use Pixi, the concept is still the same, and you might be able to gain something from them.

 

Here's my take on GreenSock's

See the Pen hCElc by GreenSock (@GreenSock) on CodePen

. The stars in the explosion are generated dynamically.

See the Pen avbPON?editors=0010 by osublake (@osublake) on CodePen

 

My take on the bunny benchmark.

See the Pen vNwRdO by osublake (@osublake) on CodePen

 

This one's a little more complicated as it's pushing out a ton of particles, and doing some other stuff like making their eyes follow them. In this one, I'm using a sprite sheet for all the graphics. I didn't use a packer, so I had to manually separate the textures into frames. 

See the Pen grQXYm by osublake (@osublake) on CodePen