Particles System

[vitolipari]

Hi to everybody, i created an animation whit a lot of sprite, i would handle a particle system. 

I set the position of every pertile ( a sprite ) every frame.

I see, the animation is slow until all sprite are added to stage, after finish to add sprite into the stage, the animation become fast and fluid!!!!

Is there an alternative solution???

I'm sorry for my english

 

There is a part of code

 

var SpiralMotion = {... };  SpiralMotion.motion = function(){  if(!SpiralMotion.stoped) requestAnimFrame( SpiralMotion.motion ); // particle operationsfor( var i=0; i<SpiralMotion.particles.length; i++ ){ // rotationSpiralMotion.particles[i].rotation += SpiralMotion.particles[i].rotationSpeed;  // positionSpiralMotion.particles[i].ray -= 2; if( SpiralMotion.particles[i].ray < 0 ) SpiralMotion.particles[i].ray = 0;else{SpiralMotion.particles[i].phy -= 0.2; SpiralMotion.particles[i].position.x = SpiralMotion.center.x + SpiralMotion.particles[i].ray * Math.cos( SpiralMotion.particles[i].phy ); SpiralMotion.particles[i].position.y = SpiralMotion.center.y + SpiralMotion.particles[i].ray * Math.sin( SpiralMotion.particles[i].phy ); } // depthSpiralMotion.particles[i].z -= 0.01;if( SpiralMotion.particles[i].z < 0.2 ) SpiralMotion.particles[i].z = 0.2;else SpiralMotion.particles[i].scale.x = SpiralMotion.particles[i].scale.y = SpiralMotion.particles[i].z; SpiralMotion.particles[i].alpha += 0.01;if( SpiralMotion.particles[i].alpha > SpiralMotion.particles[i].maxAlpha ) SpiralMotion.particles[i].alpha = SpiralMotion.particles[i].maxAlpha; SpiralMotion.particles[i].life++;} // aggiunta nuove particle a range di 10var range = 10;if( SpiralMotion.particles.length < SpiralMotion.np -range ){for( var i = 0; i < range; i++ ){var newParticle = SpiralMotion.born();SpiralMotion.particles.push( newParticle );SpiralMotion.stage.addChild( newParticle );} SpiralMotion.stage.children.sort(depthCompare);}      // render the stage    SpiralMotion.renderer.render(SpiralMotion.stage);        SpiralMotion.frame++;    }   SpiralMotion.born = function(){var textureIndex = Math.floor( ( this.textures.length ) * Math.random() );var newParticle = new PIXI.Sprite( this.textures[textureIndex] );newParticle.z = newParticle.scale.x = newParticle.scale.y = this.scaleRange.min + ( this.scaleRange.max - this.scaleRange.min ) * Math.random(); newParticle.position.x  = this.center.x + newParticle.ray * Math.cos( newParticle.phy );newParticle.position.y  = this.center.y + newParticle.ray * Math.sin( newParticle.phy );newParticle.anchor.x  = 0.5;newParticle.anchor.y  = 0.5; newParticle.maxAlpha = this.alphaRange.min + ( ( this.alphaRange.max - this.alphaRange.min  ) * Math.random() );newParticle.alpha = 0;newParticle.rotationSpeed = this.rotationSpeed.min + ( ( this.rotationSpeed.max - this.rotationSpeed.min ) * Math.random() ); newParticle.life = 0;return newParticle; }  // taken from  function depthCompare(a, { if (a.z < b.z)    return -1; if (a.z > b.z)   return 1; return 0;} 

 

[JDW]

Hi,

first of all, you could use SpriteBatch if you're building a particle engine :

http://www.goodboydigital.com/pixijs/docs/classes/SpriteBatch.html

You need one spritebatch for each texture. It will be significantly faster.

You could try to create all of your particles at the same time, with the "visible" property set to false, and then set it to true for one particle per frame.

[vitolipari]

Hi to every body and Thanks for Answer!!!!
 

I looked this [ https://github.com/GoodBoyDigital/pixi.js/blob/dev/examples/example%2018%20-%20Batch/index.html ], i create an animation with about 2000 sprite. 

I expected to find something like this [ http://www.goodboydigital.com/pixijs/bunnymark/ ] but i have a very very slow animation !!!!

 

This is part of my code

 

 var MotionCup = { stage : null,renderer : null, // some code}; MotionCup.init = function( setObj ){// some code }; MotionCup.play = function(setObj){ if( !this.ready ){MotionCup.init(setObj);setTimeout( MotionCup.play, 1);} else{ MotionCup.stoped = false; // settings stage// create an new instance of a pixi stagethis.stage = new PIXI.Stage( this.background ); // create a renderer instancethis.renderer = new PIXI.WebGLRenderer(this.canvasSize.w, this.canvasSize.h); // add the renderer view element to the DOMtargetDiv.appendChild(this.renderer.view); // creating spritebatchthis.particlesSystem = new PIXI.SpriteBatch();this.stage.addChild(this.particlesSystem); // setting particlesfor( var i=0; i<this.np; i++ ){ var textureIndex = Math.floor( ( this.textures.length ) * Math.random() );this.particles[i] = new PIXI.Sprite.fromImage( this.texturePath + this.pics[textureIndex] ); this.particles[i].position.x  = config.startPoint[i].x;this.particles[i].position.y  = config.startPoint[i].y;this.particles[i].anchor.x  = 0.5;this.particles[i].anchor.y  = 0.5; this.particles[i].rotationSpeed = this.rotationSpeed.min + ( ( this.rotationSpeed.max - this.rotationSpeed.min ) * Math.random() );this.particles[i].life = 0; this.particlesSystem.addChild(this.particles[i]); } requestAnimFrame( this.motion );} }; MotionCup.stop = function(){this.stoped = true;this.ready = false;this.frame = 0;}  MotionCup.motion = function(){ if(!MotionCup.stoped) requestAnimFrame( MotionCup.motion ); // operations sui particlesfor( var i=0; i<MotionCup.particles.length; i++ ){ MotionCup.particles[i].rotation += MotionCup.particles[i].rotationSpeed; // positionMotionCup.particles[i].position.x += 1; MotionCup.particles[i].position.y += 1;  MotionCup.particles[i].life++;}     // render the stage    MotionCup.renderer.render(MotionCup.stage);        MotionCup.frame++;}

 

I'm sorry for long code and for my english!!!

[msha]

"this.particles[i] = new PIXI.Sprite.fromImage( this.texturePath + this.pics[textureIndex] );"

Use a sprite sheet.

 

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js

    ......    if(sprite.texture.baseTexture !== this.currentBaseTexture)    {        this.flush();        this.currentBaseTexture = sprite.texture.baseTexture;    .....

"this.flush();"  <- it's expensive, and it's called every time a sprite with a different baseTexture needs to be rendered. If you use a sprite sheet, they will all have the same baseTexture.

[xerver]

@Msha nailed it, your objects are not batched well because the way it works is it iterates through a container and when it hits a new texture it flushes and starts a new batch which happens a lot for you (since your texture is random). What you should do is create a single BaseTexture that is a single image of all your sprite variations. Then for ech individual sprite texture create a Texture object with the proper frame to show only that sprite portion of the larger BaseTexture. Then all your sprites will batch up since the underlying BaseTexture is the same.

[vitolipari]

Thank you for answer!
Have i to use assetLoader? 

Or is there other way?

[msha]

Thank you for answer!

Have i to use assetLoader? 

Or is there other way?

There are several ways AFAIK. I use AssetLoader. You can use TexturePacker to pack the images, here is a command I use in my build script to pack all images in "images/to-pack" into single texture atlas and put it in "www/img/":

TexturePacker  --png-opt-level "0" --algorithm "Basic" --disable-rotation --trim-mode "None"  --format "json" --data www/img/atlas.json   --sheet www/img/atlas.png images/to-pack

Then load it like this: 

var loader = new PIXI.AssetLoader(["img/atlas.json"], true);loader.onComplete = onLoad;loader.load();

and instead of

PIXI.Sprite.fromImage(this.texturePath + this.pics[textureIndex]); 

you'll have:

PIXI.Sprite.fromFrame(this.pics[textureIndex]);

[vitolipari]

Ok! Thank you!