Using spine animation in a project

[EdselLopez]

Hello everyone. 

I'm using spine animations in a project that I'm working on. As advised on the forums, I've turned autoUpdate off and have implemented manual updates for the spines. They are collected in an array as soon as they are created and are updated on each game tick. This approach has solved a lot of issues however a very strange corner case has come up. 

I have two spine animations. I want to play the second one when an event from the first one fires. I listen for the event on the first animation and start the second animation inside the callback. This however causes the second animation to render incorrectly on the first frame it's created and but continues to play its animation normally. What happens is that the spine object appears incorrectly positioned and flipped for just one frame. The frame it's created on, then on the next tick it gets updated and animates and renders normally. 

This does NOT happen if I manually call the update method on the spine animation on the tick I create it and it does not happen with autoUpdate enabled.

I'm going to try and create an example to show this behavior I just wanted to make a post and ask in case it's something very obvious that I might be missing.

[ivan.popelyshev]

Needs demo. Please ask at our discord ) https://discord.gg/s6SCfj2S27

[Danisimo]

I'd like to steal this thread to ask a related question. I've been struggling with implementing my own class to update the spines. As you said I currently store all created spines in an array and update them on each game tick. My issue is I can't reliably tell when to stop updating them. Imagine we have the following structure. ContainerA -> ContainerB -> spineObject. ContainerA is child of the main stage, ContainerB is child of ContainerA and spineObject is child of ContainerB. If the user does something like: ContainerB.removeChild(spineObject); I can detect via events that the spineObject was removed and remove it from the list of spines to update but what if the user does ContainerA.removeChild(ContainerB); ? In this case I'm stuck with a memory leak because I'm holding a reference to and running the update function on a spine object that is no longer on the stage.

I did some testing by just using movieClips and noticed that PIXI does indeed handle this case on it's own. Removing a movieClip from the stage stops updating it and all it's children. Any advice on how to implement similar behavior for spine objects without huge performance cost would be greatly appreciated.

[robertrocks2342]

12 hours ago, Danisimo said:

I'd like to steal this thread to ask a related question. I've been struggling with implementing my own class to update the spines. As you said I currently store all created spines in an array and update them on each game tick. My issue is I can't reliably tell when to stop updating them. Imagine we have the following structure. ContainerA -> ContainerB -> spineObject. ContainerA is child of the main stage, ContainerB is child of ContainerA and spineObject is child of ContainerB. If the user does something like: ContainerB.removeChild(spineObject); I can detect via events that the spineObject was removed and remove it from the list of spines to update but what if the user does ContainerA.removeChild(ContainerB); ? In this case I'm stuck with a memory leak because I'm holding a reference to and running the update function on a spine object that is no longer on the stage.

I did some testing by just using movieClips and noticed that PIXI does indeed handle this case on it's own. Removing a movieClip from the stage stops updating it and all it's children. Any advice on how to implement similar behavior for spine objects without huge performance cost would be greatly appreciated.

Can you please share the screenshot of the issue? I thing i can solve your problem easily

[robertrocks2342]

On 8/11/2022 at 5:34 PM, Danisimo said:

I'd like to steal this thread to ask a related question. I've been struggling with implementing my own class to update the spines. As you said I currently store all created spines in an array and update them on each game tick. My issue is I can't reliably tell when to stop updating them. Imagine we have the following structure. ContainerA -> ContainerB -> spineObject. ContainerA is child of the main stage, ContainerB is child of ContainerA and spineObject is child of ContainerB. If the user does something like: ContainerB.removeChild(spineObject); I can detect via events that the spineObject was removed and remove it from the list of spines to update but what if the user does ContainerA.removeChild(ContainerB); ? In this case I'm stuck with a memory leak because I'm holding a reference to and running the update function on a spine object that is no longer on the stage.

I did some testing by just using movieClips and noticed that PIXI does indeed handle this case on it's own. Removing a movieClip from the stage stops updating it and all it's children. Any advice on how to implement similar behavior for spine objects without huge performance cost would be greatly appreciated.

In FF Game, some characters can be obtained for free or through events, but most characters are paid and can only be purchased with diamonds or gold coins.