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

        //turn the stage blue
        game.stage.backgroundColor = 0x43A8BB;

        //make the ripples
        this.ripples = new Ripples();

        //place the ripples
        this.ripples.y = game.height * .6;
        this.ripples.x = game.width / 2;



class Ripple extends Phaser.Group {
    constructor() {
        super(game); =;
        //the elipse width
        this.ww = 1;
        //how much to speed up = 1;
        //add the graphics to the class
        //start the timer / 20, this.updateRipple, this);
    drawRipple() {
        //height is 20% of the width
        this.hh = this.ww / 5;
        //set the thickness and color, 0xffffff);
        //draw the elipse       , 0, this.ww, this.hh);
    updateRipple() {
        //grow the ripple
        this.ww +=;
        //turn down the alpha
        this.alpha -= .01;
        //clear the graphics;
        //if the alpha is faded enough
        //destroy the object
        if (this.alpha < .01) {


class Ripples extends Phaser.Group
		 super(game);, this.addRipple, this);
		var r=new Ripple();

Source Code

Leave a Comment