Create water movement effect in sprite game

Hello guys,
i’m trying to create a sprite game where the water in the bottom should feel like it’s moving constantly. The scene and the camera are fixed but I don’t know where to start to create this effect. I was trying to render png images in sequence but I couldn’t. Would anyone have a better idea or advice?

Thanks in advance

Adding @PatrickRyan in case he has an idea ?

@XvaneD, there are several ways to do it, but it would be great to hear a little more about the look you are trying to achieve. I am guessing from your description of “sprite game” that you are doing a fixed camera experience, but is it straight on 2D from the side or is it overhead? In the former, you will see more of a profile of the water as though it is in a fish tank where the latter will show you the surface of the water.

In both cases, animating UVs of a static texture (or multiple textures) will likely be the way to go, but you could also build the water completely in the shader. And depending on how much of the screen is taken up by the water, you may want to introduce other elements like particles for air bubbles or mesh that contorts UV space to give the feeling of water running down a river and around objects.

If you can give me a little more to go on, I can certainly give you some suggestions.


I am trying to do something similar to the example above mainly to study the framework (I did a similar thing in unity). In my case, the view is the same but I want to implement the constant movement of the water. Next I will implement the splash effect when an object falls into the water.
I found this:
https://playground.babylonjs.com/#1AVEYO#13
But in my case I think it’s not implementable.
So searching on the internet, I found a series of .pngs that I could render in sequence, but I don’t like the effect, it’s not very fluid and realistic. So, I would like to know if there was a way to create something more realistic, like this:
https://playground.babylonjs.com/#1SLLOJ#20 (In my case in 2D)

@XvaneD, how I would approach that is to stack quads. One colored for the surface of the water behind another for the side of the water. The back quad just needs a simple unlit gradient. The one in front needs a slightly more complex shader which will handle the color of the water, the line at intersection between the side and top, and the wave animation. It will look like this:

This is just the preview window from NME, but you can see the shader in action here.

There are several exposed controls so you can dial everything in.

You can control wave speed, wave frequency, wave amplitude, water height, edge thickness, and edge transition (the anti-alias on the edge stroke) to dial it all in to look right in your scene.

There is one thing to note. I have a OneMinusBlock right after splitting the mesh.uv on the Y component. This is because the preview models in NME are glTF models which use an OpenGL format for UV space. Babylon uses DirectX format for UV space by default so if you create your planes with Babylon.js primitives, you will want to remove the OneMinusBlock here.

For the little crests of the waves on top, I would use a particle system with an emitter the size of your water that emits particles parallel with the emitter surface in one direction. The particle texture should be just the small caret shape, though you could make a simple sprite sheet of several if you want some variation. Then scale the wave up and down again vertically, maybe ramping opacity as well and you should get the sense of these wave peaks rolling on the water.

Hope this helps get you going in a direction, but please feel free to ping me if you have more questions.

Thanks for your help. It works fine.
I didn’t know the node material editor because I’m a beginner in videogame development. I really appreciated it.
So I looked for videos on the babylon channel that also explain the use of the PBR material node for managing reflections and I have a question.
I found this on the forum:

https://www.babylonjs-playground.com/#KA93U#359

I think it will work fine in my case. So, I would like to know if there was a point from which I could start to implement a constant “vertical” movement of the waves with the reflection on it as it is applied in this video in the first few seconds:

(If it’s spam feel free to delete it).

Is it a good starting point to use the PBR material node to manage reflections on the water?
For example, in my case, the reflection would be generated by the two constructions on the water (as can be seen in the previous image).
I have not understood perfectly how the motion on the water is generated, because I don’t know all the nodes implemented, so I couldn’t correctly create the “vertical” wave motion.

Thanks in advance to everyone.

@XvaneD, this is why it is good to clearly define the concept you are going for before you start rolling with your art assets because adding something in later may completely change the approach. In this case, adding reflections to the water requires a completely different approach because we need to account for a mirror texture like in the example you linked.

The reason for this is that you want the water surface normal to point toward what it will reflect and in my example the surface normal of the water could point at the camera since the camera perspective would make it look right. Now you need to make your water a cube so that you have a normal facing up for reflection and a normal facing toward the camera. This is because if you want a mirror reflection, you will want distortions in the refection due to the waves, but you will also need to match those distortions with the waves that are rendered in the intersection between the top and side.

Notice in your example above, the water you see is only the surface and not the side. This is because it’s far more expensive to show the side as well. The surface can be a simple plane with an animated normal texture that is bending the surface normals for the mirror texture to distort. If we need to show the change from the side of the water as well, you need vertex displacement in the shader. However, you will need a very dense mesh or your waves will not be smooth. So heavier mesh, calculations per vertex for position, and then mirror texture pumped into the shader.

The original concept you shader was very stylized, but adding reflections takes the stylization more toward realism. Unless you really need to show what is beneath the water, I would suggest going with a direction more like what the last video you shared shows in just using a plane with no animated vertices and just mapping a mirror texture with some animations in the uvs.

There are some examples of the different ways you can approach it in our examples and YouTube content. You could start with: