drawSVG and Pixi

[benoit 55 Likes (Contributor)]

Hi,

Is there another way to do this ?
I think ```updateBoule``` is slow and ugly 

See the Pen LYBGgLN by benoitwimart (@benoitwimart) on CodePen

[GreenSock 18,876 Likes (Superhero)]

I didn't quite follow your question. Are you asking more of a PIXI question, like how is it best to copy an SVG into a PIXI/canvas graphic? I'm not a PIXI expert, sorry. In terms of GSAP, you could definitely make it more efficient by using an onUpdate for the updateBoule() call rather than calling it literally on every single tick. 

[benoit 55 Likes (Contributor)]

See the Pen JjBXXrd?editors=1111 by benoitwimart (@benoitwimart) on CodePen

 

If I understand how to deal with all ticks, I try an onUpdate on the `gsap.to()` it's not work. I can change the FPS, to view something ^^'
 

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

I'm not an expert on PIXI, but maybe the issue is that each texture takes a few ms on being loaded and processed. GSAP is drawing that super fast and every tick is being triggered on time as far as I can see. One option would be to create all the textures upfront and store them in an array and then draw on PIXI.

 

Another option here would be to export each frame and create a sprite sheet and leverage PIXI's capacities in that aspect as @OSUblake did in this example:

See the Pen bqEamV by osublake (@osublake) on CodePen

 

Yet another option I see is to draw directly on PIXI using a couple of circles and move one of them as you draw the graphic, performance in that particular case would be far better.

 

I did some drawing in PIXI a few years back. This example should be under a NDA but that was almost 6 years ago so I think is safe to share it as I believe that code is not being used anymore. Is a lot of code but is well commented so you should find the relevant bits of it:

See the Pen d2ac612530e18ee0c1921263c15cdbc7 by rhernando (@rhernando) on CodePen

 

Hopefully this helps.

 

Happy Tweening!

[benoit 55 Likes (Contributor)]

May be I need to make an await function to deal with my slow svg to texture