Jump to content

Draw Path (Like paint application)


Recommended Posts



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.

Link to comment
Share on other sites

Yes, this will work! :)


Here's the general idea:




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


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




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

Link to comment
Share on other sites




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

Link to comment
Share on other sites

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:




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?

Link to comment
Share on other sites

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.

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