Hey I'm finally back to working on my daughter's reading app (a labor of love on and off for 2 years!) - and resurrected a couple of old animations using a simple widget approach rather than webgl/canvas/pixijs etc - and so far the results are pretty good. But since I'm adding some of them dynamically to be switched out based on the child's activity - I'm running into a "too many active widgets" problem - I guess they don't dispose or get completely removed when their container HTML gets emptied. I'm also getting some performance problems as I add 3 widgets initially, then 2 more for each activity - with Chrome error messages like
Violation] 'requestAnimationFrame' handler took <N>ms
Is there a way to programatically remove the widget - so I can run that when the child completes an activity? My working demo is here https://pedantic-murdock-4c9d10.netlify.com/
Maybe I need to ditch the widget and use the webgl version? For that do I need to use pixijs or something?
I've answered my own question at least in part - my initial version of my app at https://readvisually.org uses Pixijs with Spine, and Chrome's memory usage shows around 220MB in Task Manager (up from a base of around 140MB with just 1 other tab open). When I open my NON pixi, widget version - it rockets up to nearly 400MB. I wanted to use plain HTML to make constructing the activities with templates and CSS a little easier - but it looks like using Pixijs is way better for memory.
So if you go to the netlify address above you'll find the Pixijs version, which stays at around 230MB memory even with new animations being added. Way better than the widget as far as that goes. The widget is super sweet in that it's way easy to use and stick into any webpage - but using the spine Pixijs library (I upgraded to the latest of each with no need to alter my code from 2 years ago) - makes it very easy to add and remove animations, putting them into Pixi containers where you can manipulate the x, y, and even alpha - which is easier than using the spine-webgl library - which I also tried out. That was also pretty easy to get working (although making sure the background was transparent took some Googling) - but overall it wasn't nearly as easy to get what I wanted as it is with the pixi-spine library.
