• Register

Blockadillo is a arcade game for Android currently in development. It is a mixture between the classic break out and a platformer.

Post news Report RSS Devlog about lava and heat haze effect

In the third dev log of Blockadillo we show you new graphics, lava and a nice heat haze effect

Posted by on

About lava and heat haze


The development of Blockadillo continues, this is the third devlog. In the past weeks we added a couple of new graphics, new levels and a nice shader effect.

This is what one of the current levels looks like:


If you followed the development of Blockadillo you'll notice that the concept of lava is new. The basic idea is to have another visually interesting element in the game that the player is not allowed to touch. Up until now we just had the skulls, now the lava. Lava is rendered with a post processing effect shader called heat haze. It basically mimics the distortion of the view above heat radiating things. If the effect is turned off the lava becomes really static:


The heat haze effect really shines when in motion. See this gfycat:


Here is a short description on how to achieve this effect. Since we implemented the effect as a post processing effect we first have to render the whole scene into a texture. Then we render that texture with a quad that has the size of the screen. Now we have exactly the same result as before. But we don't stop here! Next we setup our heat haze shader and send some geometry to the GPU that should be drawn with the shader activated. In the shader we have access to the texture we rendered the scene into and to a second texture that contains distortion information. The distortion texture can look like this:


The red channel stores the distortion in x direction and the green channel stores the distortion in y direction. Now we do two texture lookups: first we have to look up in the distortion texture how big the distortion is for the current fragment. Afterwards we lookup the color of our fragment in the scene texture. In the second lookup we distort the uv coordinates by the values we looked up before. That's it!

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: