Animate water ripple?

[spinnerbox]

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?

[spinnerbox]

Does Phaser ellipse has some option to draw just the border?

Or i just draw two ellipses  one on top of the other and maybe use mask?

[samid737]

EDIT: 
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.

[samid737]

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.