Hello!

We had a little interest in one of our recent posts about 2D reflections for our current game, Monster Outbreak. A good number of people asked us how it was done, so why not write something up in our (not so) fancy new blog?

It’s actually very simple! The water reflection is a flipped, slightly modified version of the player sprite (blue tint and water ripples added). Your mileage may vary on getting sprites to look right but here’s an example:

Once you have the reflection sprite, make sure that you put it on a different layer than the regular sprite, so that it is underneath the ground, but on-top of the water. In our case the reflection sprite has z-index of -2, the normal player sprite is 0, and the water is -3.

Alright! Now for a final touch we can add a shader to give the sprite just a little more personality (you could probably animate a similar effect, but this would be time consuming for every game sprite). Here is some code for a .shader file to put in your Godot project (credit: https://github.com/Technohacker/shaders/blob/master/godot/Waves.shader):

shader_type canvas_item;

uniform bool enable_shader = false;
uniform float WAVINESS = 60.0;
uniform float WAVE_SPEED = 10.0;
uniform float WAVE_DAMPING = 1100.0;

void fragment() {
    //COLOR = texture(TEXTURE, UV + vec2(sin(WAVINESS * UV.y + (WAVE_SPEED * TIME)) / WAVE_DAMPING, 0));
	if (enable_shader) {
		COLOR = texture(TEXTURE, UV + vec2(sin(WAVINESS * UV.y + (WAVE_SPEED * TIME)) / WAVE_DAMPING, 0));
	} else {
		COLOR = texture(TEXTURE, UV);
	}
}

And all that’s left is to put our shader in a material for our reflection sprite:

A very simple little reflection, with almost no code! Let us know if you appreciated this blog post, and maybe we will do more in the future on things we make in Godot and Unity. Hope it comes in handy to a few people at least!

Cheers 🙂