Simple smoke effect with bitmapdata

[iKest]

Demo

I made a small example for the use BitmapData to smoke animation...

preload: function () {

        var me = this;

        me.load.image('face', 'assets/face.png');
		me.load.image('frame', 'assets/frame.png');
		me.load.image('smoke', 'assets/smoke.png');

   }

   create: function () {

        var me = this;

        me.sizeX = 198;
        me.sizeY = 249;
        me.particleCount = 30;

        me.seed = Date.now();
        me.random = new Phaser.RandomDataGenerator([me.seed]);

        me.bmd = me.make.bitmapData(me.sizeX, me.sizeY);
        me.bmd.smoothed = false;

        me.face = me.make.image(0, 0, 'face');
        me.mask = me.add.graphics(0, 0);
        me.mask.alpha = 0;
        me.mask.beginFill(0xFFFFFF);   
        me.mask.drawEllipse(me.world.centerX, me.world.centerY, 120,140);
        
        
        me.particle = me.make.image(0, 0,'smoke');
        me.particle.anchor.setTo(0.5,0.5);
        
        me.particles =  [];
        for (j = 0; j < me.particleCount; j++){
            me.particles [j]  = {
                x: me.random.integerInRange(0,me.sizeX),
                y: me.random.integerInRange(0,me.sizeY),
                velocityX: me.random.realInRange(-2,2),
                velocityY: me.random.realInRange(-2,2)
            }
        }

        
        me.mirror = me.add.image(me.world.centerX, me.world.centerY, me.bmd)
        me.mirror.anchor.setTo(0.5, 0.5);
        me.frame = me.add.image(me.world.centerX, me.world.centerY, 'frame')
        me.frame.anchor.setTo(0.5, 0.5);
        me.mirror.mask = me.mask;

        me.time.events.loop(Phaser.Timer.SECOND/24, me.updateSmoke, me);


    },

    updateSmoke: function() {

        var me = this;

        var rect = new Phaser.Rectangle(0,0,me.sizeX, me.sizeY);

        me.bmd.copyRect(me.face, rect, 0, 0, 0.5);


        for (j = 0; j < me.particleCount; j++){
            
            me.particles[j].x += me.particles[j].velocityX;
            me.particles[j].y += me.particles[j].velocityY;
        
            if (me.particles[j].x >= me.sizeX) {
                me.particles[j].velocityX = -me.particles[j].velocityX;
                me.particles [j].x = me.sizeX;
            }
            else if (me.particles[j].x <= 0) {
                me.particles[j].velocityX = -me.particles[j].velocityX;
                me.particles[j].x = 0;
                }
            if (me.particles[j].y >= me.sizeY) {
                me.particles[j].velocityY = -me.particles[j].velocityY;
                me.particles[j].y = me.sizeY;
            }
            else if (me.particles[j].y <= 0) {
                    me.particles[j].velocityY = -me.particles[j].velocityY;
                        me.particles[j].y = 0;
            }

            me.bmd.draw(me.particle, me.particles[j].x, me.particles[j].y);
        }  
     }

 

[fillmoreb]

Nice.