यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

How to get "Complete" event in Spine Web Player?

darceyo

Hey. I would like to know how to get Complete event in the Spine WebPlayer.
I saw some events from Unity.
But their alternatives is not working in the WebPlayer.

What i have tried:

spinePlayer.animationState.complete
spinePlayer.animationState.trackEntry.complete

Where & how i can get it's callback?

Here's the code that i found on your webplayer source, but i don't understand how to correctly get that event.

Simple example of what i want to see:
any Animation is finished -> log to browser console: "animation animation_name is finished"

Nate

darceyo how to check if webplayer is fully loaded?

I can tell you haven't read the documentation. 😉 Use the success callback:
https://esotericsoftware.com/spine-player#Advanced-playback

darceyo Where & how i can get it's callback?

<script>
new spine.SpinePlayer("player-container", {
 ...
   success: function (player) {
      player.animationState.addListener({
         complete: function () { ... }
      });
   }
});
</script>

See: http://esotericsoftware.com/spine-api-reference#AnimationState-addListener

Note that complete means something very specific and may not be the event you want. See the docs here:
http://esotericsoftware.com/spine-api-reference#AnimationStateListener

For events of a single animation instead of all animations:

var trackEntry = player.animationState.addAnimation(0, "restart", false, 5);
trackEntry.listener = { complete: function () { ... } };

See: http://esotericsoftware.com/spine-api-reference#TrackEntry-listener

Here is some Real Life code that shows how to customize the player:
http://esotericsoftware.com/files/blog/4.0-released/blog.js
It is used for this page:
http://esotericsoftware.com/blog/Spine-4.0-is-here

darceyo

also, how to check if webplayer is fully loaded?
because this code is not working in this case:

	if (document.readyState === 'complete') {
           // The page is fully loaded
	}

darceyo

Nate Note that complete means something very specific and may not be the event you want.

btw, how to catch that moment when webplayer is fully loaded?
i mean when all skins, animations is loaded and it's ready to go.

i have tried this code
if (spinePlayer.assetManager.toLoad == 0)

but it is not working for me, maybe i'm not correctly using it.
it is not working when player still in loading.
( i mean i need to check this always, if = 0 : ok we can continue, if > 0 : wait while player loads.)

darceyo

darceyo btw, how to catch that moment when webplayer is fully loaded?

oh, and i noticed a bug when previewing it on mobile, so when my first WebPlayer is loaded, and i started load the second, the skin parts disappear from first one.
do you know how to fix that?

see GIF

Nate

darceyo btw, how to catch that moment when webplayer is fully loaded?

I explained this. Please read my posts more carefully.

darceyo here you can see the running example.
https://spine-demo.netlify.app/

This works for me using FF on both desktop and mobile. Also it seems to be using a C2 runtime, not one of our runtimes, so the support we can provide is limited.

darceyo

darceyo see GIF

https://s1.gifyu.com/images/SRKww.gif

Mario

Use the success field in the configuration object to get a call when the player has initialized.
https://en.esotericsoftware.com/spine-player#Advanced-playback

A GIF does not allow us to reproduce the issue you saw and comment on it. Please provide us with a running example of the issue.

darceyo

of course, here you can see the running example.
https://spine-demo.netlify.app/

fyi :

on PC everything is working correct.
on Mobile i see what i have described earlier, the first player loaded and then it disappear part by part.
on this page i used 2 iframes, each have it's own html file (char1.html, char2.html), these files are same, before was 1 file, but i thought that 2 files will fix that issue (not fixed.)

darceyo

Nate Also it seems to be using a C2 runtime

don't focus on c2 runtime.
btw it uses your webplayer runtime.
this problem only is about the spine webplayer.

Nate This works for me using FF on both desktop and mobile.

have you tried it using Chrome too?

Nate

I only tried FF, I don't use Chrome.

Your page source doesn't have obvious HTML or code that loads our runtimes. Some code somewhere loads iframes and those seem to have spine-player in them. I see many requests for the same resources, which looks suspect:
Loading Image

I can't help with your code if you don't respect my time by putting in the effort to make helping you as easy as possible. To have us look at your code/app to debug a problem for you, you should present ONLY the problematic code. Don't make me dig through your code to figure out what I should ignore, where the actual important parts are, etc. If you provide an SSCCE then I'll look at it further:
http://www.sscce.org/

darceyo

i found the issue.

so my next question: is that possible to load few skins/parts inside one WebPlayer? (i mean few instances not only one character for example.)
(as you can see currently i'm loading each part inside a new webplayer, so when it reach the browser limit, the old webplayer just being destroyed.)

darceyo

darceyo is that possible to load few skins/parts inside one WebPlayer? (i mean few instances not only one character for example.)

or maybe it's better to replace webplayer with spine canvas runtime ?

Nate

One entire skeleton is loaded in every Spine player, all the skins, etc. Explain what you want to do.

darceyo

The idea is to load few parts of the character.
For example head, arms, legs...
But if for example i will use your example of webplayer from github, it can show only one part/skin (i have these parts as skins), because of that i made a lot of webplayers on the page and received the current issue.

Here's what i made but in pictures.
So 7 webplayers, but i want only 1 with all these parts.

Nate

Use one Spine player and configure your skeleton appropriately. You can use the runtime API to hide/show attachment and to combine skins dynamically. See this page:
https://esotericsoftware.com/spine-runtime-skins

Mario

If you want to display multiple skeletons like in a game, then please use a game engine/framework and not Spine Web Player. On mobile, there is a limit regarding the number of WebGL contexts you can have. Each player needs 1 context. It's usually somewhere between 4-8 contexts before the mobile browser gives up. This tells me you have a ton of contexts (and thus web players) running:

Please have a look at spine-phaser, which is likely the easiest web-based runtime to get going with. Don't mix and match canvas, WebGL, Player, Construct, etc. you will simply run into a huge amount of problems. Pick one tech stack and stick with it in your entire application.

Nate

Yep, though just to be clear: if you are only showing 4 or fewer skeletons on a web page and they don't interact, then spine-player can be a reasonable way to do that.