Animated particles in Phaser

In this tutorial, we will create animated particles in phaser. The phaser official site has examples for most of the things that we can do. However it lacks an example on animated particles. So we are going to explore it. It is as simple as creating a custom class for the particle with animation.

Phaser is an excellent html5 game library which is actively developed. It is one of the most cross device compatible engines out there. Earlier I posted a tutorial on creating a concentration game on phaser. It explains extending phaser sprite class, using phaser custom signals etc.

We will be creating this. Tap anywhere to create particles.

Phaser particle emitter is a class which emits particles. We will extend the Phaser particle class and add animations to it.

We are going to use this coin.png spritesheet.

coin

Creating custom Particle class

Create a custom coin particle class like this.

var CoinParticle = (function () {
    var CoinParticle = function (game,x,y) {
        Phaser.Particle.call(this,game,x,y,'coin');
        this.animations.add("rotate");
    };
    CoinParticle.prototype = Object.create(Phaser.Particle.prototype);
    CoinParticle.prototype.constructor = CoinParticle;

    CoinParticle.prototype.onEmit = function () {
        this.animations.stop("rotate",true);
        this.animations.play("rotate",60,true);
        this.animations.getAnimation('rotate').frame = Math.floor(Math.random() * this.animations.getAnimation('rotate').frameTotal);
    }

    return CoinParticle;
}());

There is an onEmit method which will run when an emitter emits this particle. In that method, we play the animation. The last line in that method will jump the animation frame to a random frame, so every particle animation don’t look the same.

Phaser Particle class is extended from the Phaser Sprite class. So everything that works on a Sprite will also work on Particles.

In the scene, we will create particles like this.

var AnimatedParticles = {};
AnimatedParticles.Boot = function (game) {
};

AnimatedParticles.Boot.prototype = {
    
    preload: function () {
        this.game.load.spritesheet("coin","images/coin.png",16,16,12);
    },

    create: function () {
        this.game.input.onTap.add(this.createParticle,this);//Create particles on tap position
    },
    
    
    
    createParticle:function (pointer,doubleTap) {
        var emitter = this.game.add.emitter(pointer.x,pointer.y,200);

        emitter.width = 10;
        emitter.setXSpeed(-100,100);
        emitter.setYSpeed(-100,100);

        emitter.particleClass = CoinParticle;
        emitter.makeParticles();
        emitter.gravity = 200;
        emitter.start(true,3000,null,50);
    }

};

That’s it and you can tap anywhere and it will create particles there. The above code is not optimized enough to be used on a game. You may need to destroy all the emitters manually. You can check the phaser examples website to learn more. Thanks for reading.

[Total: 0    Average: 0/5]
Also Read:   Godot Engine - Movement and Rotation basics
  • BHANU PRAKASH

    i tried to include this,but i am unable to do it can you help me out.