Esoteric Software

[Erika]

Learn how to embed your assets like skeletons, atlases, and images directly in your HTML/JS Spine Web Player code.

Sometimes, all you want in life is a simple .html file that contains all the assets needed to show off your fine Spine skeleton, its animations, and its skins. No pesky web servers required. Just double click the .html file on your disk, and your browser will show your beautiful art.

We've added this capability to Spine Web Player and by proxy spine-ts and all its backends for WebGL or Canvas! You can read how it's done in today's blog post:

Blog: Embedding assets with Spine Web Player

[ypmits]

Hi Spine team,
This is so incredibly awesome. For me especially. I'd like to show working versions of my animations on my portfolio-website and this is exactly what I expected to see
I know you guys/girls are busy with a better export-functionality of the html-webplayer thingy, but I still do have some notes/questions you might have an answer to or take a look at:

1. Is there some built-in (maybe secret) API I can use to trigger animations/skins? It would be great to have some user-interaction in my website which highlights the best animation I have of the current rig.
2. Will there be an easy way to set the 'viewport' of the future-webexport? Right now I have to go to either 'mov' or 'avi' in export to get a preview, to then get some viewport-settings, which I can then add to the embed-options in the webplayer. And since I have lots of animations which are all very different in size I have to do that manually for everyone. Very cumbersome.
3. Could the preloader of the webplayer please have a transparent background? Right now the player can, but the preloader can't. It's white now.
4. Lots of animations have a lot of details. It would be nice to have an optional zooming-option (or scaling) whenever you're mousing over
5. I've made a spine-component in Vue (which I'll share with the community at some later stage) but it's giving me a warning in Chrome. Looks like it should be handled in some future release of the player. It's probably nothing. The warning is also being shown without my 'Vue' wrapper by the way.

pirateCook.png

The Chrome warning in question:

A cookie associated with a cross-site resource at http://esotericsoftware.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

And also, thank you all for the best 2D-animation-software available. It has given me wings.

[Erika]

Hello ypmits, let's get down to the questions!

1. This question seems pretty similar to the one asked in this post: Spine Web Player - custom button to change animation?

When you create the player via JavaScript, just assign it to a variable, then reference it in your click listener. Something like:

var player = new spine.SpinePlayer("player", ...);
function changeAnimation() {
player.setAnimation("jump");
}

For setting skins, you'll need this: player.skeleton.setSkinByName(name); player.skeleton.setSlotsToSetupPose();

2. The player calculates a viewport that fits for each animation, you can set padding etc. as explained in the webplayer documentation here: Spine Web Player: Viewports

3. The loading screen takes the backgroundColor from the configuration. if that doesn't work, you can file an issue on the spine-runtimes GitHub repository: GitHub - EsotericSoftware/spine-runtimes: 2D skeletal animation runtimes for Spine.
Spine Web Player: Background color

4. This is currently not planned, but we might consider it for the future.

5. It's hard to say where that cookie comes from, we don't set any cookies in the player. We would have to see the your vue component in action and be able to debug what's going on.

We're happy you're enjoying Spine! I'd love ot see the final result so make sure to post in the Showcase section once you're done!

[ypmits]

Hi there Erika,

sorry for the very very late reply.... but I still wanted to thank you for the lovely help you gave me. I have it all running now on my website (http://www.ypmits.nl). It's perfect for showing of stuff I've made. Keep up the great work.

Greetings,
Ypmits

[warmanw]

Hello, I was looking to embed the spine assets into my Portfolio on Adobe Portfolio.

They allow elements to be embedded but I am not sure I understand how to include spine web player. is there a way with one embed code include everything.

[Erika]

Hello Arman, if you try to embed this file, does it show up?
https://www.erikari.it/uploads/769-owl-uri.html
or this one?
https://www.erikari.it/uploads/803-raptor-pro.html

(I do this on my own website btw! with this code:)

<iframe style="width: 100%; height: 100%;" src="https://www.erikari.it/uploads/770-owl-uri.html"></iframe>

If it does, then you can make your own by following this tutorial:
Blog: Embedding assets with Spine Web Player

[warmanw]

actually first thing I did was embedding your HTML and exactly that owl, sorry lol

no it does not work. I wrote to Adobe support hoping they can enable that in future. for now I was thinking just embed youtube with loop enabled and controls hidden. should work as a gif