One of the main graphical features in our game Library of Madness is a wave effect that is applied to the screen as the main character spends their sanity to gain access to powerups.

Here's an example after the player has lost 5 sanity.

This is accomplished using a fairly simple vertex shader. (omitting colors, texture coords, etc.)

glsl void main() { vec3 newPos = vec3( aVertexPosition.x + waveData.y * sin(waveData.x + aVertexPosition.x + aVertexPosition.y), aVertexPosition.y + waveData.y * cos(waveData.x + aVertexPosition.x + aVertexPosition.y), aVertexPosition.z ); gl_Position = uPMatrix * vec4(newPos, 1.0); }

waveData here is a uniform vec2 where x represents the current time, and y the amplitude of the wave. In our game, this amplitude is a function of the amount of sanity the player has lost equal to 0.5 * pow(insanity, 1.5).

This technique was copied from the water effect in this video, which used to have a tutorial to go with it.

It looks very different in our game because we apply the effect to the screen (i.e. an FBO that the game is initially rendered to) rather than the individual tiles. This results in one continuous twist, without multiples waves visible.

As a final detail to prevent uncovered area, the screen FBO is drawn eight extra times, flipped around the central screen. This isn't typically very noticeable, but could technically result in the player being visible twice on screen, if insanity was high enough and they were close enough to the edge of the map.

That's it! I hope you learned something or found this technique interesting.