Jump to content

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


Link to comment
Share on other sites


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.

Link to comment
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!!!
Link to comment
Share on other sites

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

Use a sprite sheet.



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

Link to comment
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.

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...