As the web tech is evolving, the flash player for web browsers is getting more and more obsolete. For example the biggest advertising platform - Google's DoubleClick dropped support for flash ads. I'm not speaking against the flash technology, which is still viable for game development (it can be easily compiled for mobile or wrapped into Steam). However in web there are new heroes and one of them is the HTML Canvas. I've already shared some lightweight JavaScript libraries used in #js13kgames and today I'm sharing another class - Lens Flare effect!
The Lens Flare effect component relies on the Greensock TweenLite library for it's animation but is independent of external graphical resources. All assets are generated on the fly with pure Javascript using the HTML5 Canvas element. Current Filesize is 6 kilobytes, compiled it's 1.6KB (gzipped). The component is compressed using: Google's Closure-compiler which is a really useful tool for packing Javascript classes.
Have a look at the demonstration in JSFiddle
Check the code on Github
Usage:
var lensCanvas = LensFlare.init(bgrImage, width, height, customLensArray, lensGenerated);
// Returns a canvas element with integrated play() method.
function lensGenerated(e){
lensCanvas.play(startX, startY, destinationX, destinationY, duration, central);
}
// Returns a canvas element with integrated play() method.
function lensGenerated(e){
lensCanvas.play(startX, startY, destinationX, destinationY, duration, central);
}
The script is already tested in production and is working like a charm across all major browsers.