Esoteric Software

[warmanw]

It worked, Finally, Thanks Drako

[Drako]

I'm happy for you. =)

It remains to figure out what else to do here while waiting for the new version of spine web player. The bug with the rotation of bones in version 4.1.5 bothers me a lot.

---

Question:

Can I reuse a Spine Web Player object for new assets (with changed links for json/atlas/png-files) without destroying it and creating a new one? Can't find answer.

In the examples, I only see the creation of an object with the specified file links like:

test = new spine.SpinePlayer("player-container", {
jsonUrl: "test.json",
atlasUrl: "test.atlas",
skin: "normal",
backgroundColor: "#2a313d",
showLoading: 1
});

I ideally need an object that will show different models, depending on external factors. Without the need to recreate it with new links for new assets. With command something like:

spine_player.skeletonchange({
jsonUrl: "test2.json",
atlasUrl: "test2.atlas",
skin: "normal",
backgroundColor: "#2a313d",
showLoading: 1
});

spine_player.skeletonchange({
jsonUrl: "test3.json",
atlasUrl: "test3.atlas",
skin: "evil",
animation: "walk",
backgroundColor: "#2a313d",
showLoading: 1
});

[Nate]

The Spine player isn't designed with the ability to reload/change the assets. It's possible, but care would need to be taken to ensure the old assets are disposed and no references are left.

You can see the source for how it works. The AssetManager is used to load the assets. When they are all loaded, loadSkeleton is called.

However, why not just create a new player instance? It is cleaner to dispose the old one and replace it with a new one. What is the benefit to reusing the player?

[Drako]

However, why not just create a new player instance? It is cleaner to dispose the old one and replace it with a new one. What is the benefit to reusing the player?

How I know, WebGL can't be so easy disposed in browser. Garbage accumulates, memory leaks, etc.

So I thought: but you can reuse just one same object, right? Minimal garbage on webpage.

But I may be wrong. Perhaps there are no problems with dispose WebGL and create new one. Many many many times.

[Nate]

Theoretically it should be fine. I don't see the player having a way to dispose its assets. It has stopRendering, but that's all. We should probably add a dispose method. For now you can do:

player.stopRendering();
player.assetManager.dispose();

You may need to remove the HTML elements the player added, too. Or you could remove the DIV you pointed the player at and create a new DIV for the next player. Sorry, you are getting into uncharted territory! We're glad to improve the player for use cases like this though.

[Mario]

As Nate said, the player isn't designed to deal with on-the-fly changes of the displayed skeleton. Most potential leaks stem from resources like buffers and textures. We do explicitely delete such resources, but WebGL implementations differ in when they actually let go of the resource on the GPU side. Some appear to rely on the JS GC to do their work.

Even if we made player "reloadable", that wouldn't fix that issue. In fact, just killing the first player instance, and creating a new one is much less error prone in that regard.

I'll add a dispose() method to the player, so you don't have to much around with its internals. See https://github.com/EsotericSoftware/spine-runtimes/issues/2020

If you need more controlmthan that, then player is not a good option. You could either directly use spine-webgl, or a more established framework like pixi or Phaser, which support Spine as well (through our spine-ts core runtimes).

[Drako]

Or you could remove the DIV you pointed the player at and create a new DIV for the next player.

Something like this is what I'm using right now. =)

If you need more controlmthan that, then player is not a good option.

No, this is just a functionality for a web page for viewing game models and their animations. We select a game character, let's say from the list on the left, and look at its animation in DIV with spine web player.

At the moment, I implemented it through deleting DIV with "spine object" and creating it again (with new spine object), but I don’t like the process aesthetically. And console warnings after some plays are no fun.

WARNING: Too many active WebGL contexts. Oldest context will be lost.

[Nate]

Note in addition to removing the HTML the player adds, you also need the code I posted (stopRendering() may be sufficient if removing the HTML destroys the WebGL canvas, I haven't tried it) OR to call dispose() once Mario adds it.

The browser still has a limit to how many canvases you can have. We juggle the canvases on the demos page as you scroll to make it seem like there are more than 4:
Spine: Demos

[Drako]

Note in addition to removing the HTML the player adds, you also need the code I posted (stopRendering() may be sufficient if removing the HTML destroys the WebGL canvas, I haven't tried it) OR to call dispose() once Mario adds it.

I use now something like that:

spine4portraits.pause();
spine4portraits.stopRendering();
spine4portraits = null;

+ remove DIV where was player/canvas.

---

Btw

Theoretically it should be fine. I don't see the player having a way to dispose its assets. It has stopRendering, but that's all. We should probably add a dispose method. For now you can do:

player.stopRendering();
player.assetManager.dispose();

When I add

player.assetManager.dispose();

after stopRendering() I get new warnings in console:

WebGL: INVALID_OPERATION: bindTexture: attempt to use a deleted object

It is somewhere in spine-webgl/src/GLTexture.ts

bind(unit = 0) {
let gl = this.context.gl;
this.boundUnit = unit;
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_2D, this.texture); <==== warning about this line
}

[Mario]

That means something is using the texture you deleted via player.assetManager.dispose(). Please always post full stack traces if possible. The above doesn't help locating the issue.

[Drako]

I partially modified the spine-player.js (v4.1.5) for myself, so it's probably better to wait for the new version and experiment with it already. Without my modifications.

[warmanw]

Hello I am stuck again integrating spine web player in my portfolio,

I actually have it integrated but I am having issues with layout. with multiple players on the one page they break the sites structure.

I tried to use iFrame but it seems not filling up the height of its parent container.

here is a 2:30 min video showing the issue.
https://drive.google.com/file/d/1jqq--zLFgmJs16HY2cnhM5S-5M4hFnuX/view

[Nate]

Welcome to the horrible world of web UI. It really is terrible.

Better to link us to a web page with the thing you have not showing up like you want.

[warmanw]

I made an example page.
https://armanimation.com/

---

I have controls such as those but whatever I try does not work (considering my 0.1 knowledge of web development)

[Drako]

Yeap. Your web development skills...

Can you just use MS Paint and draw what you want there? What do you want to see on your page.

[warmanw]

In short I want to create static gallery in a grid view.

With iFrame all works great I can put player wherever I want nothing breaks. but I have no idea how to make the size dynamic. 100% height does not fill the parent container.

With HTML code it fills the parent as I expect, and mobile screen looks fine, but it breaks the site layout. it renders in different container together with the rest players.

https://drive.google.com/file/d/1jvLtWs3bCiCr0yLmdqPAC847QwsFuzfg/view

[Nate]

The right way to work on web UI junk is to press F12 to open the dev tools and adjust CSS. Once you figure out what HTML/CSS you need, then you can figure out what to change in WordPress. Web UI is nasty enough without WordPress between you and the HTML/CSS.

Find this DIV (a parent of the iframe):

To find it, right click the Spine player, Inspect (probably called something else in Chrome, I use FF), then look at the parents. Hover the DIV in the web tools with the mouse so you can see the bounds in the page. Its bounds are not the size you want, so the iframe inside it is not the size you want. That DIV's parent has a flex layout:

The flex layout doesn't know how tall you want its children.

You need a way to know how tall you want your player. You could make it a fixed height. More likely you probably want to use a CSS aspect ratio "hack" so that the player's height is based on its width, and then set a maximum width. We do this for example here (resize the page to see the first big player change width/height):
Blog: Spine 4.0 is here
Right click, Inspect, the first big player:

The aspect ratio sizing works because reasons:
https://css-tricks.com/aspect-ratio-boxes/

If you find all this to be a huge mess, that's because it is. WordPress adds a TON of HTML junk. Suffering through this is just what people do. I suggest creating a minimal HTML page where you can work on your HTML/CSS without WordPress or any other junk. Get it working like you want there, at the size you want and behaving like you want when the page is resized (eg drag the edge of the dev tools to make the page more narrow), then try to transplant your working thing into WP.

---

Oh, one more thing, browsers have a limit for how many WebGL canvases they can have on a single page. I think 4 is safe, but you might want to try it on a few browsers (including mobile) or research it further. On our demos page we remove canvases that are off screen and reuse them for different demos as you scroll down. It's ridiculous and complex, but it works! You'd have to make your browser extremely tall to be able to tell that only 4 demos can be visible at once.
Spine: Demos
Actually, it looks like we use 5. You can see it if you zoom your browser waaaay out. The top 2 demos don't render because there's 7 demos visible and we use only 5 canvases.

[warmanw]

Thanks for detailed explanation now I clearly see I need to back off and just use gifs

@Nate, @Drako
I really appreciate your help!

[Nate]

Ahhh, GIFs suck!

[Drako]

Well, that's an option too. =)

The problem is that this forum is not dedicated to teaching website layout, imho. I definitely don't have the time or desire to teach someone from scratch.

Perhaps you should ask around among your acquaintances who can help you with your site. For conditional 2-3 glasses of beer at the bar?

[Erika]

It sure would be so nice to have some minimal vanilla templates that do these things so that even the monkeys like me can replace/readapt the example to their needs.
(show multiple demos and dispose them off screen, example reusing the same player).

This would make displaying a portfolio online so much easier for artists.

[Drako]

(show multiple demos and dispose them off screen, example reusing the same player).

Yeah. It would help me a lot. An official example instead of inventing his own bicycle, which possibly uses the wrong size wheels.

[Mario]

The issue with the canvas shuffling is, that it's not trivial and very specific to the page you want to integrate it with.

In other news, @Drako, SpinePlayer.dispose() is now implemented in 4.0 and 4.1-beta. https://github.com/EsotericSoftware/spine-runtimes/issues/2020

[Drako]

In other news, @Drako, SpinePlayer.dispose() is now implemented in 4.0 and 4.1-beta.

Good! I'll see how it works a little later, when I'm done with current affairs.