Hello,
Explosions, fire, snow, blood, dust, shining stars, bonuses… particles are a handy tool to add nice effects to your games.
Every game object that is loosely related to the game logic (– eye candy –) should be handled as particle, since it allows to have very light weight objects, and it allows the game engine to focus on its real tasks.
The fireworks demo, running smoothly with 1800 particles.
JSparkle is a Particle engine that is quite simple to use : define what is a particle -it is a standard Javascript class – what are its properties, how does it update, draw, and spawn – and then you’ll have access to some handy functions to spawn / autoSpawn / emit particles, and also to test and monitor your engine.
JSparkle is fast, since the update phase does take very little time, and there’s nothing we can do to get the draw phase to run faster on an html5 canvas. It does not create garbage, since it uses a fixed loop buffer that allocates all particle on engine creation. Another few tricks here and there made the update time fell below 5% of the draw time on my computer.
I won’t go into a full review here of the engine and its features -it was quite an effort allready to have it work fast, commented, with a few (hopefully) clear examples… dig into the code (maybe only to read the methods comments) if you wish to know more.
The gitHub with the library and a few demos is here :
https://github.com/gamealchemist/JSparkle
You’ll find some help if you want to create your own engine in the readme.txt, but maybe the fastest way to understand is to look at an example -bubbles being the most simple-. Feel free to play with the engine, and tell me what you think.
I’d be happy to include your examples, i’m sure some of you have cool graphical ideas that would just rock with JSparkle.
I post here a few screenshots and links to the demo. Obviously, the screenshots are … well… quite still 🙂 so watch the demos to know hat it’s like 🙂 .
Latest example is Fire. move your mouse ! :
http://gamealchemist.co.nf/Particles/Fire/FireDemo.html
Bubbles is a very-simple-on-purpose example where balls just bounce on the borders on the screen. It spawns once all particles on engine start.
http://gamealchemist.co.nf/Particles/Bubbles/BubblesDemo.html
Quite some bubbles.
StarField is what we would expect :
http://gamealchemist.co.nf/Particles/StarField/StarFieldDemo.html
Starfield with 500 particles.
Here’s another starfield : http://gamealchemist.co.nf/Particles/StarField2/StarField2Demo.html?800
mouse your mouse around to change the stars direction.
Fireworks is the most amazing to date, be sure to click here and there to make your
own fireworks !!
Fireworks uses an auto-spawn, and spawn also on a mouse click.
http://gamealchemist.co.nf/Particles/Fireworks/FireworksDemo.html
(in this last screenshot we see the debug panel, that show the time and the current buffer use).
gamealchemist 
This is amazing! How would I affect the canvas after it’s started? I want to increase / decrease the Star demo’s speed. Give like a warp affect. This is great!
Thanks for your kind comments !
To be able to modify star’s speed, i suggest you add a ‘speedFactor’ to the Star prototype. That would be a number initialized to 1, by which you multiply the distance travelled.
(1 meaning no change ; 0.5 half speed ; 2 double speed ; … )
Then in the Star update method, replace :
this.x += this.dt*this.speed;by
this.x += this.speedFactor*this.dt*this.speed;Then just modify the speedFactor to change speed.
Better done in a function :
function setStarSpeed(newSpeed) {ga.particles.Star.prototype.speedFactor = newSpeed;
}
Best regards.
I got it working. This is a really cool system. Thanks for the reply! You can see this code running at http://www.StarCommanderOnline.com (currently building out the website to link to the game).
Excelent job! Very nice engine, and nice code! 🙂 Works perfect (y)
Thanks, i’m glad you appreciate it. In fact i’m not sure a particle engine could be faster than that (except you use the yet non-standard asm.js).
This engine does almost nothing -which is good-.
To quote an old idea, it could be accelerated by using a single Float32 typed array to store all particles’s data, and then you play with indexes to retrieve x, y, vx,, … in this array for each particle… most probably faster but it seems a bit hard-core coding to me…
Again, Happy coding !