2D lightweight interactive water effects for mobile WIP thread

Hey everyone.

Today and tomorrow I plan on creating some interactive water using 2D assets for mobile devices. By interactive I mean having a character walk through it and having the water interact around the character, creating little splashes and more importantly the ‘wake’ that comes off when you move across the surface.

This is intended for mobile, so I won’t be using refraction, as that isn’t even supported yet (and if the new mobile shadows are anything to go by, it won’t be very optimized when support comes in the next engine release).

I will post my findings and the techniques I figure out here.

The Wii Zelda games actually have a faked ‘wake’ effect that I will try to emulate (even though they do use refraction) as shown below.

That’s it for now! Will post future updates soon!

So, the first thing I need to do is have the game figure out when the player character is in a water area. For swimming, there will be a water volume, but for actual footsteps and effects and running around in ankle deep water I am going to try and use a ‘physical material’. This can track what ‘type’ of surface the material is, and the player character can detect that and change things accordingly.

I am following this tutorial by MetalGameStudios. Thanks so much!

Here is my blueprint, located in the character BP. It is slightly modified from the tutorial, as I am not using this for footstep sounds, but for simply detecting if the player is in water. Basically it checks is the trace is colliding with anything, and if so, checks if the physical material is water. If both of those are true, set the ‘in water’ bool to true. If either of those are false, set it to false.

Now that I have the state, I can now start doing the fun stuff :slight_smile:

Here is my first WIP!

There is no art yet, but the ‘wake’ effect is pretty much integrated! It’s is pretty much 2 ribbon textures that get toggled depending on that ‘in water’ bool you see above. The speed of the character is also a factor on whether it is on or off, and also factors into the overall opacity of the material.

Second WIP below!

This time I made a system which tracks the direction the character is turning, and fading in and out each trail independently.

Till next time!