# Particles System

## Recommended Posts

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;} `

##### Share on other sites

Hi,

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

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.

##### Share on other sites

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!!!
##### Share on other sites

"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.

##### Share on other sites

@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.

##### Share on other sites

Or is there other way?

##### Share on other sites

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`

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

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

you'll have:

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

Ok! Thank you!

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.