Home»Développement»JavaScript»Un emetteur de particules pour jCanvaScript – A port of parcycle (mrspeaker particle emitter) to jCanvaScript

Un emetteur de particules pour jCanvaScript – A port of parcycle (mrspeaker particle emitter) to jCanvaScript

0
Shares
Pinterest Google+

(English description is bellow)

Je faisais des recherches dernièrement sur les librairies et Frameworks Javascript pour manipuler facilement les canvas d’HTML5 pour développer un moteur de jeux style isometrique.

après avoir testé plusieurs scripts, j’ai fini par adopter jCanvaScript ; non seulement cette librairie permet de manipuler facilement les canvas HTML mais offre plusieurs fonctionnalités originale comme la gestion des zIndex à la manière d’HTML DOM, ceci étant un besoin primordial pour mon moteur, mon choix était fait.

de plus, la librairie offre une documentation qui de loins est la meilleur que j’ai trouvé comparée aux autres scripts du genre, chaque méthode est documentée et illustrée par un ou plusieurs exemples de code.

à coté de ca, j’avais également besoins d’un système d’émission de particules performant pour simuler des effets visuels de feu ou de fumée par exemple pour mon moteur de jeu.

Le meilleur que j’ai trouvé est celui là : http://www.mrspeaker.net/2009/12/03/particle-system-with-html5-canvas/
seulement voilà, ce dernier est développé avec les fonctionnalités natives des canvas, et quand je l’utilise sur le même canvas jCanvaScript les performances en prennent un coup !

 

La seule solution que j’avais était d’adapter cet émetteur de particules à jCanvaScript et voici le résultat
version originale : http://www.mrspeaker.net/dev/iparcycle/
mon adaptation jCanvaScript : http://emaroc.info/files/jcparcycle/parcycle.html

comme vous pouvez le constater, les performances sont quasi égales, et seul jCanvaScript est utilisé.

Le script est téléchargeable en fin d’article (sous la version Anglaise)

 

English description

I was recently looking for libraries and resources to write an HTML5 isometric game Engine, I tested many javascript canvas wrappers and Frameworks and the best one I found was jCanvaScript.

jCanvaScript is not a high level game Engine nor a very low level engine the just wraps Canvas Calls, it’s in the middle of both aproach and have some unique features like handling a zIndex in almost the same way as HTML DOM ! this feature was decisive for me.

jCanvaScript also jave by far the best documentation out there, each function is illustrated with code examples and results.
for my game engine, I was also looking for a particles emitter that can be used to draw fire or fog effects.
the best one I found was this one : http://www.mrspeaker.net/2009/12/03/particle-system-with-html5-canvas/

the problem was that mrspeaker particles emitter uses native canvas calls and when I used it as is with a canvas controlled by jCanvaScript the performances of both gows down drastically.

here come my code adaptation of Mr Speaker Particles Emitter to jCanvaScript library :
you can see the original script running here : http://www.mrspeaker.net/dev/iparcycle/
and my jCanvaScript adaptation here : http://emaroc.info/files/jcparcycle/parcycle.html
you can see that performances are almost the same 🙂

 

Télécharger jcParcycle / Download jcParcycle