Draw Path (Like paint application)

[crowbar]

Hello,

 

I'm trying to use pixijs to draw a "path" behind a sprite as it moves.  I attempted to make this path by using cacheasbitmap and drawing a circle to a displayobject every frame but within 5 seconds, it froze (I think it was too much for the system to handle).

 

Can someone help me with a suggestion for how to go about drawing a path behind a moving sprite?

Thank you.

[d13]

Yes, this will work!

 

Here's the general idea:

 

Setup:

 

- Create a sprite called `painting` that's the same size as the stage.

- Create a sprite called `leader`. This is the moving sprite that will create the trail.

 

On each frame, do this:

 

- Create a temporary sprite called `follower`

- Add `follower` to the `painting`: painting.addChild(follower)

- Give it the same position as the `leader`: follower.position.set(leader.x, follower.y)

- Use `generateTexture` to take a snapshot of the painting:

var snapshot = painting.generateTexture();

- Set the painting's texture to the new snapshot:

painting.setTexture(snapshot);

- Finally, remove the temporary `follower` sprite: painting.removeChild(follower)

 

I tested this and it runs at a consistent 60fps.

However, if you want to a more complex particle trail effect, I suggest you use Proton:

 

http://a-jie.github.io/Proton/

 

If your trails fade away or change their properties over time, Proton will help you manage this very efficiently.

[crowbar]

Awesome! Thank you

[crowbar]

 

Setup:

 

- Create a sprite called `painting` that's the same size as the stage.

 

 

How do I create an empty sprite with a size.  I tried changing the .width and .height properties, but if the sprite already contains a texture it just stretches it, and I couldn't create one without a texture.

[d13]

> How do I create an empty sprite with a size

//Draw a rectanglevar rectangle = new PIXI.Graphics();rectangle.beginFill(0x000000);rectangle.drawRect(0, 0, canvas.width, canvas.height);rectangle.endFill();rectangle.boundsPadding = 0;//Generate a texture from the rectanglevar rectangleTexture = rectangle.generateTexture();//Use the texture to create a `painting` spritevar painting = new PIXI.Sprite(rectangleTexture);stage.addChild(painting);

You can take a look at this working example:

 

http://jsbin.com/wixad/3/edit?js,output

 

It works fine with the CanvasRenderer but I noticed that with the WebGLRenderer the texture's tint changes slightly over time... maybe someone out there can tell us why?

[crowbar]

But the sprite is still not empty - it's a big black rectangle.  Is this the same for you?

 

In any case, I found a way around this issue.

var painting = new PIXI.Sprite(rectangleTexture);painting.alpha = 0;var snapshot = painting.generateTexture();painting.setTexture(snapshot);painting.alpha = 1;stage.addChild(painting);

Setting the painting to alpha 0, taking the snapshot and then setting the painting alpha back to 1 creates an empty sprite.  I'm sure there is a better way to do this, but this workaround works anyway.