Jump to content

Keep position of sprites when animating them


Richacinas
 Share

Recommended Posts

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:

ottoStructure.jpg.cd46c27f444d016402eaa87856d48c39.jpg

 

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

Link to comment
Share on other sites

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

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.

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...