Keep position of sprites when animating them

[Richacinas]

Hello there,

 

What an amazing engine to render on webGL/Canvas! We are getting such a boost on performance thanks to this great library. Now, let's go to the point:

 

We managed to partly migrate all our SVG animations to canvas using PixiJS. In order to do that, we had to parse our SVG so we could have a Container/Sprite/Textures structure that Pixi could manage and understand.

 

We finally did it, and we have an Object like the onw you can see on the attached image:

 

It is coming from the SVG you can find here:

http://lab.pre.rtve.es/el-cuento/app/public/static/image/otto.svg

 

So, what we have, is a lot of containers (what used to be groups in our SVG) and inside them, more Containers and finally Sprites containing Textures (what used to be paths). 

 

THE PROBLEM:

We want to use Pixi's AnimatedSprite class so we can animate the mouth of our character, and when we do it, it works, but we lose the position of our Textures and they show at the upper left corner of our character. I can't see any position on this Sprites and Textures, so I guess they are just drawed where they are supposed to be and therefore when we try to animate them, we lose this relativeness to the parent and position.

 

Any way to make them stay in place?

 

Thank you very very much

[ivan.popelyshev]

Sorry, this needs more details. If you dont recreate Sprite/AnimatedSprite and set position only one time it should be fine. If the problem is in relative position of mouth itself, then something with texture trimming can be done (frame=(x,y,w,h), orig=(0,0,w,h), trim=(-offsetX, -offsetY, w, h))

[Richacinas]

I would love to post a link to codepen so we can understand each other faster, but I'm not sure if I will be able as I depend on some libraries that I can't load from a cdn.