The <- image(click to see larger view) showcase my experiment with shader in Cocos2d (v2.0). A modified box blurring algorithm was used in the fragment shader and this is only applied to sprites (each individual building is a separate sprite) that are above or below the two hardcoded threshold (y-position). The blurring algorithm was modified in such a way that the amount of blur applied to the sprite is dependent on how far above or below either y thresholds the sprite is.
I had decided to apply the shader to individual sprites rather than on the entire screen because I want the entire of a building that is not beyond the threshold to remain “in focus”. Otherwise, if applied to the entire scene, the blurring applies to individual pixels and there may be buildings having only half (top or bottom) of itself being blurred while the other half in focus which was not my desired effect. The decision was also made to allow me better control over what objects on screen gets affected by the shader.

Sadly, my shader algorithm is not optimal, and applying the shader to per-sprite rather than the entire scene causes large number of extra/unnecessary calculations on pixels that were supposed to be hidden behind another sprite. But as with my last experiment, “Test proven that with shader, it is possible to achieve the Tilt Shift Effect on a group of 2D objects on screen”.

Back to developing TRG.

-ed