Jump to content

Give me a idea to implement water layer with 2d


GBear
 Share

Recommended Posts

hi.

i wanna develop like under effect with pixi.js

i want character move under water like this

this has water layer..

it will be 2.5d..

i wanna develop with pixi.js like this but i don't have any idea 

please give me ideas to implement water...

thx

Link to comment
Share on other sites

Thats just a water layer above the character layer, there are probably a few nice filters on the water layer.

Water refracts light differently to air so you see entities under water differently, although that video didnt implement that, the character sprite was identical out of the water as they were partially submerged, in which case, I guess you just overlay the animating water texture and add the 'splash/ripple' texture where the character meets the water.

Water shaders can be pretty difficult but there is lots of info out there about creating one/several.

It would be seriously cool to have the submerged parts of sprites render as if they are underwater, also with a shadow visible on the surface from the non-submerged bits, with light glare/reflection/refraction, and with the physics simulation taking into account the difference between air and water. Now there is a challenge.

Link to comment
Share on other sites

thx mattstyles..

yes there seem to need  few filter like displacement and reflection  with water wave....

I'm worry about  submerged parts you said..

i'm always worrying about optimizing  so i can't use every filter or shader or many many separated images easily T-T

if you have idea to implement more light...  like  screen get similar like under image

please give me some ideas..

이미지 1.png

Link to comment
Share on other sites

I'm still not convinced the character sprite changes, it just looks to me like the water texture overlays it, there is then the 'ripple', which is half infront and half behind the sprite, and there is a nice reflection too which I'm assuming is crop of the image, reflected, and then with a graduated opacity. It's a nice effect but I'm still not convinced its a particularly heavy effect, it just looks like texture layering.

Oh, it looks like maybe the feet of the characters are darker than the knees, so maybe a simple graduated opacity thing for the parts of the sprite below the water line would work. You'd have to work out where the water line was and cut up the sprite though.

Link to comment
Share on other sites

thx. mattstyles...

i will show you examples soon ^^/

first, I will cut  overlaid parts like under knee of character. 
second,  add  ripple

third, add effect like  glare/reflection/refraction , or something

first example have first,second..
 

 

see you soon..^^/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...