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
Benutzeravatar
Erika

Erikari
  • Beiträge: 3060

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. 8)
  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. :grinteeth:
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Benutzeravatar
ypmits
  • Beiträge: 17

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?
Mario hat geschrieben: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!
Benutzeravatar
Erika

Erikari
  • Beiträge: 3060

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
Benutzeravatar
ypmits
  • Beiträge: 17

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.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

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
Benutzeravatar
Erika

Erikari
  • Beiträge: 3060

warmanw

:D 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>
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

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
Luke

Luke
  • Beiträge: 111

Drako

warmanw hat geschrieben:My Version
In your json i see this:
"spine":"4.0.56"
But you are using spine player v3.8.
warmanw hat geschrieben:https://esotericsoftware.com/files/spine-player/3.8/spine-player.js
Maybe your trouble is somewhere with this?
Drako
  • Beiträge: 27

Nate

Bingo! Thanks Drako!
Benutzeravatar
Nate

Nate
  • Beiträge: 11845

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 (?).
Drako
  • Beiträge: 27

Nate

Drako hat geschrieben: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.
Benutzeravatar
Nate

Nate
  • Beiträge: 11845

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.
Drako
  • Beiträge: 27

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.
Benutzeravatar
Nate

Nate
  • Beiträge: 11845

warmanw

Drako hat geschrieben: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 :D 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
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

Drako

Nate hat geschrieben: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 hat geschrieben:still getting an error but on white background lol
Reason:
warmanw hat geschrieben:backgroundColor: "#ffffffff"
Why not just alpha false and color #ffffff ? Same for me.
warmanw hat geschrieben: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.*
Drako
  • Beiträge: 27

warmanw

You are very helpful @Drako

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!
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

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

Mario
  • Beiträge: 3027

warmanw

Mario hat geschrieben: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
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

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).
Benutzeravatar
Mario

Mario
  • Beiträge: 3027

warmanw

Mario hat geschrieben: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
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

Drako

Question: where can I leave my wishes and suggestions regarding the functionality of Spine Web Player?
Drako
  • Beiträge: 27

Luke

Drako hat geschrieben: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
Luke

Luke
  • Beiträge: 111

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.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Benutzeravatar
warmanw

Kickstarter Backer
  • Beiträge: 322

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",
Drako
  • Beiträge: 27


Zurück zu Tutorials