Animate sprite on a graphics path with Pixi 5

[Aaron McGuire]

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)

[ivan.popelyshev]

its possible . we made PR for it but someone changed my demo @ pixi-playground. But yeah, its possible - you have to change "shape.points" and then call "graphics.geometry.invalidate()", and it'll recalculate triangulation and everything

[ivan.popelyshev]

Here, graphics hacking demo:  https://www.pixiplayground.com/#/edit/2MNgciqVQdM0wN8CQwRyD . "shape.points" works for polygons . just "graphicsData.points" works for calculated stuff like Rects, but i dont know if you can modify it.

[Aaron McGuire]

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.

[Aaron McGuire]

Figured it out. Be interested if there's a better way of doing this...

https://www.pixiplayground.com/#/edit/Na_YWwcSQ29BdmW6wsqL8 

[ivan.popelyshev]

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