AuthorTopic: Understanding water flow in top down perspective  (Read 1161 times)

Offline Beetleking22

  • 0010
  • *
  • Posts: 250
  • Karma: +0/-0
    • View Profile

Understanding water flow in top down perspective

on: March 13, 2019, 10:04:37 am
I really want make realistic and dynamic looking water in my game without using any Program Script or shades. I have only seen two piece of art with very impressive water flow.. One is from  Cocefi and second is from Decroded. I really want achieve same dynamic feeling in my water. Im still noob when it comes to water flow.. So I really want understand them better.

So here is bunch of question I want ask.   

So If  I understand right.. If the water is deep.. This darker shade is supposed to be reflection of the cliff? If the cliff is much higher.. Does it  means the shadow need to be higher too?



2. Does water flow fast only if there is waterfall nearby? Does normal wind make it flow as fast or just slower?  I tried to capture simple wind/waterfall movement.. Not sure If im doing it right.. This has just only 1 tile..



3.  How does the water shadow reflection animation works? I have watched some of Studio ghibli water shadow movement and real life. They seems to very Whobbly and wavey. I really have struggled to make the water flow like that in past.. So im trying still achieve the same flow.





« Last Edit: March 17, 2019, 08:13:31 pm by Beetleking22 »

Offline Beetleking22

  • 0010
  • *
  • Posts: 250
  • Karma: +0/-0
    • View Profile

Re: Understanding water flow in top down perspective

Reply #1 on: March 14, 2019, 07:15:29 pm
I made the corner wavey.. I need add more tiles.. so the water does not look repetitive.






With more tiles

« Last Edit: March 17, 2019, 07:52:17 pm by Beetleking22 »

Offline Doppleganger

  • 0010
  • *
  • Posts: 284
  • Karma: +2/-0
  • Fall!
    • View Profile

Re: Understanding water flow in top down perspective

Reply #2 on: March 16, 2019, 02:59:06 pm
I think you have the right ideas. Usually the sine-wave type movement of water happens on more axis than just one. In your latest example you've captured that movement on one plane of an axis, but there are two more axes to consider. By applying that same math to the other axes you can better recreate the undulating motions of water. In general all things animate along arcs in a cyclical fashion, so understanding that principal will illuminate its uses as a tool in many different scenarios of animation.

I think it's very smart to research what you're trying to understand, and your attitude and approach are great! Looking forward to more progress, I think there could be a wealth of information for people to reference if you keep this thread active. Good luck!

Offline Beetleking22

  • 0010
  • *
  • Posts: 250
  • Karma: +0/-0
    • View Profile

Re: Understanding water flow in top down perspective

Reply #3 on: March 17, 2019, 07:44:57 pm
I think you have the right ideas. Usually the sine-wave type movement of water happens on more axis than just one. In your latest example you've captured that movement on one plane of an axis, but there are two more axes to consider. By applying that same math to the other axes you can better recreate the undulating motions of water. In general all things animate along arcs in a cyclical fashion, so understanding that principal will illuminate its uses as a tool in many different scenarios of animation.



Nice to hear! I consider just  copypast the same tiles of left axis and add it to right side + change the right side  direction to down . So the loop flow looks natural... My issue right now is when I make new tile and combine it with another.. The flow does not match it 99% percent. So each tile needs a lot of adjustment... for example each tile has 8 frames and they need all match with another 8 frame tile. Its little bit hard to explain but I hope you understand.



I think it's very smart to research what you're trying to understand, and your attitude and approach are great! Looking forward to more progress, I think there could be a wealth of information for people to reference if you keep this thread active. Good luck!

Thank you. I will try to finish this. Its nice if this will help other people to learn..  I think solid  environments animations can improve the graphics a lot even if graphics arent best looking.
« Last Edit: March 17, 2019, 08:06:39 pm by Beetleking22 »

Offline Beetleking22

  • 0010
  • *
  • Posts: 250
  • Karma: +0/-0
    • View Profile

Re: Understanding water flow in top down perspective

Reply #4 on: March 19, 2019, 08:57:06 pm
Added better textures.. Now Im going to work on top and left waves.

Offline Doppleganger

  • 0010
  • *
  • Posts: 284
  • Karma: +2/-0
  • Fall!
    • View Profile

Re: Understanding water flow in top down perspective

Reply #5 on: March 20, 2019, 11:02:48 pm
This is good progress, the water has some more personality now.

I get what you're saying in reference to matching tiles to each other's 8 frame animation sequence. My advice with that is try and work in sub-divisions that can equally divide into the main tile. Eg; if you're scrolling something on a 16x16 tile, and the anim is 8 frames, then it'd make sense to scroll it in 2 pixel increments. That is the most basic way to think about it, but the logic can be applied in various ways to make life easier and the animations more controlled.

Of course a big part of animating tiles is going to be finessing the work: it's one thing to get a standalone anim to look good, but to get an animation to cooperate with other animations in varying scenarios is going to require some amount of work for each possible scenario. You can break the tasks down into smaller goals if that makes things feel more manageable.

Offline falz

  • 0001
  • *
  • Posts: 39
  • Karma: +0/-0
    • View Profile

Re: Understanding water flow in top down perspective

Reply #6 on: March 21, 2019, 07:13:39 pm
It is a departure from what you have now, but in your examples I see that there are discrete globules of shadow separating periodically from the larger shadow/reflection. I wonder if you could integrate that element

Offline Vinik

  • 0010
  • *
  • Posts: 192
  • Karma: +0/-0
    • View Profile

Re: Understanding water flow in top down perspective

Reply #7 on: March 24, 2019, 02:52:29 pm
One relevant question is the ratio of your tiles, are they 1:1 or is there any foreshortening on the y axis due to the view (4:3, 2:1)? If so, I think you latter version is better because the side waves are shorter than width of the top waves. Even if the tiles are 1:1 the vertical shortening would be a good stylistic choice I think.

Also, are you going to put any classic watery texture on the surface, or going for plain color blue like Zelda with ocasional breaks? I wonder how a jrpg watery texture would interact with animated wavy borders like yours.

Excellent object of study, and good choice of starting simple, narrowing it down to the essential.

Offline Beetleking22

  • 0010
  • *
  • Posts: 250
  • Karma: +0/-0
    • View Profile

Re: Understanding water flow in top down perspective

Reply #8 on: March 25, 2019, 12:55:38 am
This is good progress, the water has some more personality now.

I get what you're saying in reference to matching tiles to each other's 8 frame animation sequence. My advice with that is try and work in sub-divisions that can equally divide into the main tile. Eg; if you're scrolling something on a 16x16 tile, and the anim is 8 frames, then it'd make sense to scroll it in 2 pixel increments. That is the most basic way to think about it, but the logic can be applied in various ways to make life easier and the animations more controlled.

Of course a big part of animating tiles is going to be finessing the work: it's one thing to get a standalone anim to look good, but to get an animation to cooperate with other animations in varying scenarios is going to require some amount of work for each possible scenario. You can break the tasks down into smaller goals if that makes things feel more manageable.

Ty! I do the  2 pixel increments.. but what makes this harder is that my 8 frame itself have own movement animation.  If you combine those frames with 2 pixel increments.. Its very time consuming to fit together. .. The other problem is that when you make one side to match with another tile..  You need match both sides.. When you do that the tiles has basically new animation with slightly changes...Its like you have one tile with 16 frames and you need match them with another 16 frames for both side...Maybe its better if i dont animate each tiles.. or maybe I can mix them both like in my  previous edit?. . but my fear is that the water movement might look death... I will try to experimenting and find better method to make water animation look smooth without shit tons of work.




One relevant question is the ratio of your tiles, are they 1:1 or is there any foreshortening on the y axis due to the view (4:3, 2:1)? If so, I think you latter version is better because the side waves are shorter than width of the top waves. Even if the tiles are 1:1 the vertical shortening would be a good stylistic choice I think.

Also, are you going to put any classic watery texture on the surface, or going for plain color blue like Zelda with ocasional breaks? I wonder how a jrpg watery texture would interact with animated wavy borders like yours.


Thank you!

I made basic typical 16 bit water tile settings......I made very fast for  experimenting.. So I did not think about ratio.  I think the current  left side of shadow are way too wide.. I think it would look better with thinner size. Maybe that current wider shadow would fit if my intention was to make Zelda style perspective. The older version have less animation and its very wavey looking.. The new version might have too much bubble rounds.. So I might reduce it.

Yeah the water will look very simple like in Zelda. Its not going to have textures etc. I will put small light particle that will spam randomly in the water and maybe some water plants... I have never tried animating Typical Jrpg water.... So I dont know how it might work with the shadows..




It is a departure from what you have now, but in your examples I see that there are discrete globules of shadow separating periodically from the larger shadow/reflection. I wonder if you could integrate that element

Thank you.

Each tile has different animation movement.. So It might give that kinda of look... I did understand your point correctly?
« Last Edit: March 25, 2019, 01:11:38 am by Beetleking22 »

Offline eishiya

  • 0100
  • ***
  • Posts: 1131
  • Karma: +2/-0
    • DerpTree
    • http://pixeljoint.com/p/28889.htm
    • eishiya
    • View Profile
    • Webcomic: Black Dram

Re: Understanding water flow in top down perspective

Reply #9 on: March 25, 2019, 04:00:00 pm
Something to keep in mind is that the undulating dark shapes you see on water are not shadows, they are reflections of darker elements in the environment (while the base colour tends to be a reflection of the sky). As the water surface waves, the angle of incidence on each part of the surface changes, leading to moving reflections. This is what's responsible for the separate globs of darkness.

In addition, due to the Fresnel effect, water appears less reflective the higher your viewing angle is. This means that if your tiles are from-above or typical 3/4 RPG view, there should probably not be reflections at all, or only minimal reflections, and instead we'd see through the surface of the water and into the depths.