Forums » Help » particle system using spawnentity

Hi guys, I've just bought impact and been playing around.

Loving it so far, nice and easy to get started! (I'm new to HTML5 / canvas but not to web dev) but I have a question!

I've thrown together a very simple particle system partly from the example in "introuducing html5 game dev" - jesse freeman, a snippit from the a webpage (I think it was the clorwork.net chap actually) and partly from a little canvas tinkering I've learnt.

The problem I have is the FPS tanks when creating a few particles.

code is very basic:

the particle and sparks

ig.module(
        'game.entities.particle'
    ).requires(
        'impact.entity'
    ).defines(function(){

        EntityParticle = ig.Entity.extend({
            // single pixel sprites
            size: { x:1, y:1 },

            // particle will collide but not effect other entities
            type: ig.Entity.TYPE.NONE,
            checkAgainst: ig.Entity.TYPE.NONE,
            collides: ig.Entity.COLLIDES.LITE,

            // default particle lifetime & fadetime
            lifetime: 5,
            fadetime: 1,
            alpha: 255,

            colours : {r:0,g:0,b:0},

            // particles will bounce off other entities when it collides
            minBounceVelocity: 0,
            bounciness: 1.0,
            friction: { x:0, y:0 },

            init:function( x, y, settings ){
                this.parent( x, y, settings );

                // take velocity and add randomness to vel
                var vx = this.vel.x;
                var vy = this.vel.y;
                this.vel.x = vx; //(Math.random()*2-1)*vx;
                this.vel.y = (Math.random()*2-1)*vy;

                // init timer for fadetime
                this.idleTimer = new ig.Timer();
            },

            update: function() {
                // check if particle has exsisted past lifetime
                // if so, remove particle
                if(this.idleTimer.delta() > this.lifetime){
                    this.kill();
                    return;
                }

                // fade the particle effect using the aplha blend
                this.alpha = this.idleTimer.delta().map( this.lifetime - this.fadetime, this.lifetime, 1, 0 );

                this.parent();
            },

            draw: function() {
                var c = ig.system.context;
                var s = ig.system.scale;
                var x = this.pos.x * s - ig.game.screen.x * s;
                var y = this.pos.y * s - ig.game.screen.y * s;
                var id = c.createImageData( 1, 1 );
                var imgdata  = id.data;
                imgdata[0] = this.colours.r;
                imgdata[1] = this.colours.g;
                imgdata[2] = this.colours.b;
                imgdata[3] = 255;
                c.putImageData( id, x, y );
                c.restore();
            }

        });


        BlueSparks = EntityParticle.extend({
            // shorter lifetime
            lifetime:2.0,
            fadetime: 1,

            // velocity value to be set
            vel: {},
            gravityFactor: 1,

            // bounce a little less
            bounciness: 0.1,

            init:function( x, y, settings ){
                
                this.vel = { x: (Math.random() < 0.5 ? -1 : 1)*Math.random()*100,
                    y: (Math.random() < 0.5 ? -1 : 1)*Math.random()*100 };


                // send to parent
                this.parent( x, y, settings );
                this.colours = {r:0,g:0,b:Math.random()*255};

            }
        });
    });

how its called:

ig.module('game.entities.player')

.requires('impact.entity','game.entities.particle')

.defines
    (   function(){

            EntityPlayer = ig.Entity.extend({
                animSheet: new ig.AnimationSheet('media/tiles/test1.gif',32,32),
                size: {x:32,y:32},
                offset: {x:4,y:4},
                flip:false,
                accelGround: 100,
                friction: {x:600, y:1200},
                maxVel: {x:300,y:300},



                init: function(x,y,settings) {

                    this.parent(x,y,settings);
                    this.addAnim('idle',1,[1]);

                },

                update: function()
                {
                    var acclr = this.standing ? 0 : this.accelGround;
                    if (ig.input.state('right'))
                    {
                        this.accel.x = acclr;
                        this.flip = true;
                    }
                    else if (ig.input.state('left'))
                    {
                        this.accel.x = -acclr;
                        this.flip = false;

                    }
                    else
                    {
                        this.accel.x = 0;
                    }
                if (ig.input.state('up'))
                {
                    this.accel.y = -acclr;

                }
                else if (ig.input.state('down'))
                {
                    this.accel.y = acclr;
                }
                else
                    this.accel.y = 0;


                    if (ig.input.state('fire'))

                    {

                        for (var i=0;i<=20;i++){
                            ig.game.spawnEntity(BlueSparks,this.pos.x,this.pos.y);

                        }

                    }




                 this.currentAnim.flip.x = this.flip;
                    this.parent();
                }



            });
        }
    );

so just click the mouse and let it do its thing...

the problem is the drop in FPS

system lag -0.5 to -0.9 "resting state" and draw 2ms

as soon as just 1 lot of particles are created it shoots up to ~2ms
there are 127 entities
entity update can rise to 2 or more ms
Entity checks and collisions 2 to 4ms
Draw tops out at about 3ms

My system is a fully kitted out Alienware M14x r2 corei7

I played around with fade and "kill" times and reducing these really helped alot (as i expected they'll be less entities and things to draw etc), but doesn't really make for similar effects I've seen in other impactJS games.

so I think i've missed something here, or there is a major bottle neck?

if i place 5 of the spawnEntity in the main loop it drops to 50fps - so, can any of your coding geniuses shed any light for a noob??

much obliged chaps.

mark

This benchmark may give you an idea of what FPS you can expect to have for a certain number of sprites on screen.

You may get a lower FPS because it appears you're also doing some other fancy work as well.

What FPS rate do you have before it "tanks" to ~50FPS?

thanks for the link... well it gets to way above 1200 before the FPS hits 50, at 1400 its 40FPS... so maybe I'm doing something daft else where.... its gets to 1600 at 40FPS before i gave up.

Maybe I should download impact again and start afresh. The changes are only plotting a pixel on the canvas using RGBA and is used in a similar fashion in a different impact plugin....

sorry for double post, it was worse when i used a sprite sheet for the particle (it was a 2 x 8 sheet with some different shades of red and a 1px sprite size)..

It's the draw override thats killing you. Use a 1 by X dimension sprite, where x is the particle gradient, shades of blue in your case? Then you can simply get a random frame from the spritesheet rather than trying to draw pixel data on the fly. Using the same method you could dynamically set the frame based on the particle's alpha, like I've done here:

http://impactjs.com/forums/private/1gam-wip-asteroids-clone-help-with-particles

cheers Rybar, hmm originally I used sprites but surely tinkering with the canvas in draw shouldn't kill it? I was working on some other manipulations at the canvas level for my current project so maybe I'll have to have a re-think now! I'll have another crack this eve

maybe I'm just being greedy wanting over 9000 particles all at once! lol

oh i played asteroids! congrats mate, on a well made game! cleared the level tho and just waited around to tick up the score lol :D

cheers, removing the call to draw has removed quite a bit of the FPS handicap; pitty tho as I was hoping to offer some simple sprite customisation by tinkering with the canvas directly!