Jump to content

Trailing path effect with pixi


Recommended Posts

I am porting my game from direct canvas writing to pixi framework. 

and there I have objects with trailing path effect, 

I am making this ovewriting on each render step, the whole stage background color and small alpha. 

I have ported it to pixi this way:



    var graphics = new PIXI.Graphics();    // draw a circle    graphics.beginFill(canvasBg);    graphics.drawRect(0, 0, canvasWidth,canvasHeight);    stage.addChild(graphics);
    var animate = function() {....            graphics.beginFill(canvasBg,0.1);      graphics.drawRect(0, 0, canvasWidth,canvasHeight);      graphics.lineStyle(1,player.color);      graphics.drawCircle(player.x, player.y,player.r);....    };

But it has the performanse problem: as I understand pixi makes array of all graphics operations and renders the array, Is it possible to flatten it ? or is it makable only with textures ?


And another question - my approach does not work if  some background image under the game stage lays - has anybody solution for it ? 


Link to comment
Share on other sites

What I am trying to do now. is to organize 2 textures and one sprite with old scene , and render previous texture to new with some effect ( that changes alpha ) 

    var tBg = PIXI.Texture.fromImage('images/bg.jpg');    var sBg = new PIXI.Sprite(tBg); // Background    var mH  =  new PIXI.Matrix(); // Some plays with transformation matrix . without success     //mH.tx=1;    //mH.ty=1;    // textures switcher    var tl1 = [      new PIXI.RenderTexture(renderer,canvasWidth, canvasHeight),      new PIXI.RenderTexture(renderer,canvasWidth, canvasHeight)    ];    var s1 = new PIXI.Sprite(tl1[0]);    var graphics = new PIXI.Graphics();    stage.addChild(sBg); // Background    stage.addChild(s1); // Field with trailing path effect....    var animate = function() {...      graphics.clear();      graphics.lineStyle(2,player.color);      graphics.drawCircle(player.x, player.y,player.r);      tl1[nextTextureCnt].clear();      tl1[nextTextureCnt].render(s1,mH); // try to render previous scene but with some transformation - here should be transofrmation that changes alpha// or even some effect window ? for blurring      tl1[nextTextureCnt].render(graphics, false);nextTextureCnt = nextTextureCnt ? 1 :0 ;...}
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...