Lakes, ponds, puddles, oceans or rivers, all these resolve around one element: water. Water is one of those iconic yet daunting materials. With its wavy surface and complex patterns, vibrant palettes, and infinite variations, it can seem untamable.
We’re going to break it down together here, with a focus on 2D games. By the end of the series, you will have a few more tools on your shader programming toolbelt.
The goal is to show you how you can split a complex shader into smaller tasks, tackle each problem separately, and bring everything together later.
You will learn and review techniques such as:
A few years ago, I collaborated with Bastiaan Olij, an engine contributor, on a video series dedicated to shaders. We covered 2D and 3D water shaders. You can find the series in the Godot 3.2 documentation.
This chapter covers new and improved 2D water shaders, addressing some of the original one’s issues and limitations. You will create a 2D water shader for side-scrolling 2D games, with features such as 2D reflections, procedural waves, and depth.
We will look at how to use normal maps to give the water a lot of details, and I will provide you with tips to achieve different stylish looks.
We will start by focusing on 2D reflections, which you can use for all sorts of reflective surfaces, like ice or mirrors. We will then move on to the water’s surface, putting it into motion and deforming it with a texture.
With the basics in place, we will move onto more advanced techniques to make the water look like it’s 3D.
Finally, we will soften the top edge of the water plane to make it nicely transition with the game world.
Let’s get started with 2D reflections.