Aaron McGuire

Animate sprite on a graphics path with Pixi 5

Recommended Posts

Hi, I'm trying to duplicate this in Pixi but the points don't seem to work the same way in Pixi 5.

Anyone have success with doing something like this, or have tips? Seems that you can get point information from a lot of places in a "new PIXI.Graphics()" object e.g. ...

graphic.geometry.graphicsData.shape.points

graphic.geometry.graphicsData.points

graphic.geometry.points;

What's the point of all of this?? (Dad joke)

Share this post


Link to post
Share on other sites

Thanks Ivan!

Really appreciate your help 🙌

I put together an example https://www.pixiplayground.com/#/edit/pPTWD0iyuzrFQ4xUTYtY_

I'm trying to make "circleNob" animate along the top of the path at same time but I can only get it to work after the path has been created.

I'm not sure where "geometry.invalidate" would fit in here.

Share this post


Link to post
Share on other sites

"geometry.updateBatches" generates all geometry for graphicsData. IF a "graphicsData.shape" is polygon, then its points are copied in "graphicsData.points". All "arc"'s and lineTo's are actually a way to make polygon, they can't be re-processed, that's why you can animate them only with clear() and refill-ing.

In Flash arc's and all curves  were preserved before tesselation, and morph shapes animations worked with them. In pixijs its not the case yet. You can modify polygon points manually but that's it.

You didnt specify what exactly did you figure out, i dont see commentary about it.

Currently we are working on improving Graphics, that "invalidate()" method didnt even exist a month ago. Your input will be appreciated. Also, because of that , there's nothing about dynamic modification in docs - its just bleeding edge, you have to look inside pixijs sources for it: https://github.com/pixijs/pixi.js/tree/dev/packages/graphics/src  Its a mess but we're patching it slowly: https://github.com/pixijs/pixi.js/pull/6077

For example, if you want better gradient, use filling like a Rope, you can modify "addUvs" method.

Share this post


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

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.