Spine huge Freeze on adding to scene

[Ocelyn]

Hi, first of all thank you for your amazing plugin.

My setup Pixi-js: 5.3.3 Pixi-Spine: 2.1.10 Spine: 8.72 Nuxt: 2.14.4 Mac / Chrome

My problem I received some Spine model to integrate with PixiJS, they are very lightweight and simple (10~20kb each including png, atlas, json). They load very fast, but when I add them to the scene a freeze of several minutes will occur. Even if the container is visible false, the freeze will occur. Setting autoUpdate = false is not helping too. But after the freeze, the animation will play normally. Only 1 assets is enough to make the project freeze. Gere is the profiling on Chrome, walk is the name of the animation and seems to be stuck in a very long loop. I add the Container at 4000ms and then you can the CPU being crazy.

I also tested with the same configuration using the SpineBoy pro assets (with the correct pixi-spine version since it was made with Spine 3.7.94) and there is no freeze at all.

Thank you!

[Ocelyn]

spine-asset.zip Here is a Spine asset I am using if it might help.

[ivanpopelyshev]

Its not spine asset, its vue injecting its functions in everything.

Make sure it doesnt do that. I'm not vue coder , so i cant actually tell you why this thing is doing it.

[Ocelyn]

Thank you for your fast answer! I am going to double-check everything, but I am technically not using Vue to manage my Objects so Vue shouldn't be able to see that I am adding my Spine data to a Container. Also if the issue was Vue, I should have the same problem when I test with the same configuration using the SpineBoy pro assets and no freeze occurred at all.

[Ocelyn]

Sorry for the problem! I put all my code completely outside of my Vue components and no more freeze!

[cjbenavides88]

I was trying to implement pixi-spine with vue, but ended in the same issue as @Ocelyn that freezes when adding the spine to the stage, take out everything out from vue and worked fine.

Going to try tweaking vue which is the culprit of the memory leak.

[cjbenavides88]

Hi! it's me again! Managed to make it work! :D. @ivanpopelyshev give me the hint of Vue inserting functions (which are observers for reactivity). Which caused infinite recursive loops.

So my approach was to use Object.seal() to prevent Vue adding those observers.

• Pros: Can create a Vue Components from Pixi and add pixi-spine plugin.
• Cons: Totally lost reactivity for PIXI Object. (Which I think of various workarounds for this)
• Cons: Also you are forced to use the functions to update values. (Which in my opinion is not a downside)

Solution : Create a NULL Object for the component which is going to contain your PIXI Object.

Whether you call it in a function or create the PIXI Object in one of the start stages of Vue LifeCycle. Create it with Object.Seal()

Hope this helps :)

[techoes]

Hi! it's me again! Managed to make it work! :D. @ivanpopelyshev give me the hint of Vue inserting functions (which are observers for reactivity). Which caused infinite recursive loops.

So my approach was to use Object.seal() to prevent Vue adding those observers.

• Pros: Can create a Vue Components from Pixi and add pixi-spine plugin.
• Cons: Totally lost reactivity for PIXI Object. (Which I think of various workarounds for this)
• Cons: Also you are forced to use the functions to update values. (Which in my opinion is not a downside)

Solution : Create a NULL Object for the component which is going to contain your PIXI Object.

Whether you call it in a function or create the PIXI Object in one of the start stages of Vue LifeCycle. Create it with Object.Seal()

Hope this helps :)

thanks you so much