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

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

Erika

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:

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.
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.
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. 8)
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
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.

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. :grinteeth:

Erika

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

This question seems pretty similar to the one asked in this post: Spine Web Player - custom button to change animation?
Mario ：
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");
}

[/quote]

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

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
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
This is currently not planned, but we might consider it for the future.
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

Back again. I am changing my website to Wix where I can embed HTML element. and it works with Spine Raptor example, however when I change the URLs it throws error. Telling that Couldn't load text, Couldn't load texture

Version that WORKS

<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
 jsonUrl: "https://esotericsoftware.com/files/examples/3.8/raptor/export/raptor-pro.json",
 atlasUrl: "https://esotericsoftware.com/files/examples/3.8/raptor/export/raptor-pma.atlas",
 animation: "walk",
 backgroundColor: "#666666",
});
</script>

My Version

<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
 jsonUrl: "http://www.armanimation.epizy.com/swamzoad/mythic_water_swamzoad_3.json?i=1",
 atlasUrl: "http://www.armanimation.epizy.com/swamzoad/mythic_water_swamzoad_3.atlas",
 animation: "breathe",
 showControls: false,
 alpha: true,
 backgroundColor: "#ffffffff"
});
</script>

Luke

Hello,

Have you verified that your files were successfully uploaded to the server where you are hosting your content?
If you remove the "?i=1" from the end of your jsonUrl, does that make a difference?

If the absolute URL does not work, could you try using a relative URL and see if that works?
Spine Web Player: JSON and atlas URL

Drako

warmanw ：
My Version

In your json i see this:

"spine":"4.0.56"

But you are using spine player v3.8.

warmanw ：
https://esotericsoftware.com/files/spine-player/[b]3.8[/b]/spine-player.js

Maybe your trouble is somewhere with this?

Nate

Bingo! Thanks Drako!

Drako

It's just that someone really likes to change the data format with each version.

Meanwhile, the documentation block on the site only describes the json file format for spine v3.8 (?).

Nate

Drako ：
It's just that someone really likes to change the data format with each version.

:nyeh:

Keeping the JSON format up to date is painful, but you're right we should do a full review of it. Most Spine users never need to look at it, since the Spine Runtimes handle parsing it. Also personally I find the spine-libgdx parsing code to be easier to read than the format page.

Drako

Can you somehow keep separate pages on the site with descriptions of formats for different versions? Or do you already have it, but I cannot find it? Friend asks. ©

To be honest, it took me a decent amount of time to compare what I see in example files with what I see on the site. And for understanding that I see the difference in versions (3.x vs 4.x). And then I saw a code on the forum to downgrade the format from 3.6 to 2.1.27, changes in names, etc...

Btw, the most unexpected change in json-format (v4) for me is the Bézier curve.

Nate

We don't have pages for previous JSON format versions. We can start doing that though.

By example files, do you mean example projects or source code? The easiest way to see how the JSON is interpreted is to look at the spine-libgdx SkeletonJson class. For example, for 4.0.

In 4.0 the new graph meant Bezier curves had to be done completely differently. The old way wasn't powerful enough and some things weren't possible, like a curve between two keys with the same value.

warmanw

Drako ：

In your json i see this:

"spine":"4.0.56"

But you are using spine player v3.8.
Maybe your trouble is somewhere with this?

Thanks! Really changed something.. but not much 😃 still getting an error but on white background lol

However I just noticed that Wix editor specifically asks urls with https. my urls do not had ssl certificate

Drako

Nate ：
By example files, do you mean example projects or source code?

I mean examples of json-files - https://github.com/EsotericSoftware/spine-runtimes/tree/4.0/spine-ts/spine-player/example/assets =)

I already mentioned that I am working on a full conversion from format v2.1.27 to 4.1-beta. Well, now at 4.1-beta. It was planned 3.8. But they don’t change horses on the crossing.

Took up the development of the converter to v.3.8. It so happened that I saw a page with information about Spine web player - Spine Web Player

I connected to it, played around, started experimenting with conversion adjusting to the format description for json-files - Spine: JSON export format

And then something went wrong ... Strange errors, but if I read the documentation, it should work.

Took examples of json-files again - https://github.com/EsotericSoftware/spine-runtimes/tree/4.0/spine-ts/spine-player/example/assets

Found inconsistencies in some places, corrected the converter. For a week I adjusted various small details by looking in javascript for web player, including Bezier curves. And... (just don't laugh!) and then it dawned on me: I mixed up the versions. And now I have converter for json-files from v2.1.27 to v4.1-beta, not to v3.8.

My initial mistake was that I did not think about the likelihood of the existence of Spine web player v3.8. And that the description of the format on the site is not for spine v4.

Well, no one really scolds me for that. Reverse engineering. Was fun. =)

warmanw ：
still getting an error but on white background lol

Reason:

warmanw ：
backgroundColor: "#ffffffff"

Why not just alpha false and color #ffffff ? Same for me.

warmanw ：
However I just noticed that Wix editor specifically asks urls with https.

Buy ssl-certificate for your site. Inexpensive pleasure.

For the sake of experiment, I took your files. There are no problems with them - https://www.norbdragon.com/uploads/spine18/

I will delete them tomorrow. Or now, if you insist.

my variant:

<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.5/dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/4.0/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
  jsonUrl: "mythic_water_swamzoad_3.json",
  atlasUrl: "mythic_water_swamzoad_3.atlas",
  alpha: true,
  backgroundColor: "#ffffffff",
  showControls: true
});
</script>

If your files on same site as your wix, you can use relative links to your files, not full url. Perhaps this will give you a bypass of the problem with the obligatory https.

Something like:

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

PS: you don't have "breathe" animation there. So I removed this line.

PPS: you can take all files to your wix-site, if wix hate non-wix sites. I'm about spine-player.js, spine-player.css and yours mythic_water_swamzoad_3.*

warmanw

You are very helpful @[已注销]

I bought SSL certificate just not sure how to install yet.

Wix does not offer FTP connection, they allow some media management but just for editing the page using drag and drop.

Also there is an editor for devs but also that is for uploading JS code and not files.

What about your variant it also did not work when I replaced with my URLs. There was no error right, but it shows loading forever.

Thanks for your time!

Mario

Could you show what the browser devdlopment console output is? In most browsers, you can access it via the F12 key. My guess is that you are running into cross-origin issues, i.e. you player is on the Wix domain, but your assets are on a different domain that also doesn't use SSL. Browsers don't like loading assets from other domains, unless that other domain has SSL enabled and responds with proper CORS HTTP(S) headers, i.e. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

warmanw

Mario ：
Could you show what the browser development console output is?

I recorded a video, showing the issue
https://drive.google.com/open?id=1HG3S5QS7ak694eo4wBmo1fbWuBfvNG1X&authuser=warmanw%40gmail.com&usp=drive_fs