このサイトを正しく表示するには、最新のブラウザを使用し、Javascriptを有効化してください。

[Runtime] [Widget] Embedding assets with Spine Web Player

Mario

Aye, as expected, the error tells you exactly what's wrong: your assets on your server must be served through HTTPS, otherwise Chrome blocks them from loading. I'm afraid that's not something the player can fix. Btw, just copying & pasting that error is much easier than creating a video (and easier for me to consume as well).

warmanw

Mario wrote
Aye, as expected, the error tells you exactly what's wrong: your assets on your server must be served through HTTPS, otherwise Chrome blocks them from loading. I'm afraid that's not something the player can fix. Btw, just copying & pasting that error is much easier than creating a video (and easier for me to consume as well).

Thanks for your time. Yes you are right I should have just sent the error.

Posting error here so others can avoid watching the video

AssetManagerBase.ts:284 Mixed Content: The page at 'https://editor.wix.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.armanimation.epizy.com/swamzoad/mythic_water_swamzoad_3.json'. This request has been blocked; the content must be served over HTTPS.
downloadText @ AssetManagerBase.ts:284

Drako

Question: where can I leave my wishes and suggestions regarding the functionality of Spine Web Player?

Luke

Drako wrote
Question: where can I leave my wishes and suggestions regarding the functionality of Spine Web Player?

The Runtimes section of the forum may be best; we'll still take a look at your post regardless of where you put your request

warmanw

Sorry to bring this up again seems I am very close. now I moved to wordpress. that means I can host my files under the same domain

also I have installed SSL just in case.

However while spine example works I can't make my files work

I also tried to use relative urls by putting spine-player.js and spine-player.css on server and using relative URLS

no luck either.

Drako

Use always or https://armanimation.com/ only or https://www.armanimation.com/ only. Or you will get exactly this kind of blocking in the browser.

As I can see the site forcibly redirects from www to just armanimation.com (without www).

Change your links to json/atlas files from https://www.armanimation.com/works/swamzoad/ to just https://armanimation.com/works/swamzoad/ .

In theory, it should solve the problem. But in general it should work through links like

jsonUrl      : "/works/swamzoad/mythic_water_swamzoad_3.json",
atlasUrl     : "/works/swamzoad/mythic_water_swamzoad_3.atlas",

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

Nate wrote
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

Nate wrote
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. =)

Mario wrote
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

Nate wrote
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

Nate wrote
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.
[url=

zLFgmJs16HY2cnhM5S-5M4hFnuX/view]

zLFgmJs16HY2cnhM5S-5M4hFnuX/view[/url]

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)

« 前のページ次のページ »