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.

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:

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

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.

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>

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

warmanw ha scritto

My Version

In your json i see this:

"spine":"4.0.56"

But you are using spine player v3.8.

warmanw ha scritto

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

Maybe your trouble is somewhere with this?

Bingo! Thanks 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 ha scritto

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.

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.

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.

Nate ha scritto

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 ha scritto

still getting an error but on white background lol

Reason:

warmanw ha scritto

backgroundColor: "#ffffffff"

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

warmanw ha scritto

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.*

You are very helpful @[cancellato]

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!

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

Mario ha scritto

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