Animate water ripple?

Recommended Posts

I need to make a water ripple effect in Phaser with Phaser animation. Yes I will create spritesheet but how to

achieve it without doing too much?

I can draw with Inkscape? Is there some filter or tool I can use to draw this in inkscape?

Or should I just redraw thin ellipses on update event?

Share this post

Link to post
Share on other sites

The second pen might be more relevant (Misunderstood the ripple part)....

Here is something you might be able to use instead of spritesheets:

You use the built in cosine generator and combine it with the use of bitmapdata... You should be able to make a sprite from this I believe. You can pretty much do everything that ocean waves do by hacking the numbers in the drawWaves function.... its not super pretty  in the example, but you can for example make two waves a bit below each other to get a border effect.

Share this post

Link to post
Share on other sites

I think I misunderstood the case (Was thinking of water surface wave motion instead of top down water ripple). Here is something you might be able to use:



Here you are using graphics and converting those graphics into a sprite. This is not a must though, you could also stick to the graphics circle. Then you tween the following of the sprite (or graphics circle if you like):

1: the scale of the circle
2: the alpha value. 

 Again you use cosine functions to determine the scale speed and alpha values, added with the for loop to limit  the amount of ripples added(if you keep your mouse pressed=not good)... You can probably simulate a nice ripple effect using this example as a starting point. You can for example randomize easing functions per draw or draw the graphics object with variable linewidth each time(stronger water ripple).....  You can even add a blur filter to the ripple graphics, but you will need webGLto do so... hope this helps in any case.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.