This is actually simpler than you think.. Heres a link to a baked version of the Jump-n-run example implementing this effect using a blur radius of 4.0 (the higher the radius, the more blur, and the slower it becomes):
http://www.sevrd.com/code/blur/
It runs very poorly in this example. The blur effect is being applied to the canvas after impact has rendered everything, so it's happening once every render cycle (expensive). To get it working, I simply override the draw method in my Game object, call this.parent() first (which renders everything), and then call the blurring function on impacts canvas (which is given the id 'canvas'). The function provided also requires that you give the top, left, width and height of the canvas area to be processed, so i simply supply 0 for left and top, and i use the system height and width multiplied by the scale you set when you called ig.main. Example:
draw: function() {
this.parent();
stackBlurCanvas('canvas', 0, 0, ig.system.width * ig.system.scale, ig.system.height * ig.system.scale, 4.0);
}
Another way you could implement this effect and target only background maps is to again override the draw method and use something like this:
draw: function() {
ig.system.clear( this.clearColor );
for ( var i = 0; i < this.backgroundMaps.length; i++ ) {
this.backgroundMaps[i].draw();
}
stackBlurCanvas('canvas', 0, 0, ig.system.width * ig.system.scale, ig.system.height * ig.system.scale, 4.0);
for ( var i = 0; i < this.entities.length; i++ ) {
this.entities[i].draw();
}
}
Here, we basically mimic exactly what is in the stock Game objects draw method, only we now have control over when the blur is applied. In our example, we're applying the effect after background maps are rendered (meaning they get blurred), but before entities (which will not be blurred). Hope this helps!
