#3 How to create beatiful water for a mobile game?

I’ve always kept saying that game developers are one of the best liers. You think you see water, fire or something else… If only you knew what is inside for real, it would definetely make you laugh. Several days ago I spoke with Matthew Bell – technical artist from Ubisoft. He told us that he was developing water for Assassin Creed. It pushed me to share my experience of developing water for our game. Bearing in mind that our game is mobile first of all, and that everything is happening in a Fantasy world, we set the goal to develop water, simple enough to be drawn fast, but also looking good. I need to warn you that this article is not technical. It’s for those who want to know a little more about how miracles happen in the game dev industry.

1) At the beginning you have a flat surface, where you want to draw water. Then you need to add waves. Let’s start with simple ones. We take a picture which simulates our waves, this one for example:

normal

The picture above will simulate roughness of our water surface and change illumination in each point. In the game it looks like this:

Water_1

I’ve also added the blue color to the water surface, otherwise the picture would be black and white.

2) Now we need to make our waves to move. To do that we just need to move our first picture with the time in any direction.

It’s not enough to have only one picture of waves, so lets add the second layer of waves. Its twice smaller and it moves perpendicular to the first layer. As a result we take the sum of both layers and get this:

Water_2

3) We are much closer to what we need. I believe the screenshot doesn’t look like water, but the animation looks much better. Please be patient, I will show you the video of all steps at the end.

Our water doens’t have shininess! Lets fix this. We need to pick up any noise texture for that, so lets take this one for example:

Noise

You can use any color from that texture, as for me, I used the red color. We are going to use the same animation for the noise texture, as we used for our waves. Long story short, we have two noise textures which move perpendicular to each other, and we sum them up. Hotspots will apear only when the sum exeeds a required value. Using that value we can change the amount of hotspots and their sizes.

As a result we get this picture:

Water_3

4) Now need to add cloud reflections. There are no clounds in this scene, but our player doesn’t know about that. We need to take any picture which will emulate the clouds, for example this one:

NoiseClouds64

If we add the reflection to the water, we can get this result:

Water_4

5) The last trick is to add transparency to the water which at the same time helps us to remove sharp edges:

Water_5

There are a lot of variables and pictures in my example, which you need to pick up to get an appropriate result. Anyway, we have the basis, and now we just need to polish it.

As I promised before, here is the video of all 5 steps :

Stay tuned!

1 Comment
  1. Very nice result in the end 😀

Leave a Reply

UnnyWorld
Latest Posts
Unnyhog’s Twitter

Sorry! No FAQ Shortcode Found.