Ripple Animaton in Phaser

Phaser Ripple Animation

I recently needed a ripple animation for a background effect in a game I was putting together. The simplest thing would be to use a sprite sheet. After a few hours of looking and not finding, I decided to code the animation using Phaser’s graphics. Yes, I know that putting together a ripple sprite sheet is not a great artistic task, but trust me, it is beyond my poor drawing abilities.

Anyway, this is what I came up with. An object(Ripple) that draws and redraws an ellipse and then after it fades, destroys itself. I then made another object (Ripples) that adds a ripple every 1 second. Here is the result:

The Code:

How to use

 

Ripple.js

Ripples.js

Source Code

Leave a Reply