Esoteric Software

[Nate]

We've created a player that can easily be embedded on any web page to show your Spine animations! Check out this blog post for more info:
Blog: Spine Web Player released

Read the documentation here:
Spine Web Player

You can't use the Spine Web Player on the forum yet, but you will be able to in the future!

To show how it works, the HTML and JavaScript for the player is:

<!-- Include the JavaScript and CSS files -->
<script src="https://esotericsoftware.com/files/spine-player/3.7/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css">

<!-- Create a container element -->
<div id="player"></div>

<!-- Create the player with your settings and container ID -->
<script>
new spine.SpinePlayer("player", {
jsonUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pro.json",
atlasUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pma.atlas",
animation: "walk",
backgroundColor: "#cccccc",
});
</script>

[Zimbres]

Hi there!

Just to be sure, it's ok to place 3 players on the same page? I would like to insert some animations on a website, it is ok?

[Nate]

@Zimbres, yes 3 should be fine. I believe 4 is also fine, but after that mobile browsers may not render more canvases. IIRC desktop browsers have a slightly higher limit to the number of canvases they will render at once. However, you can get clever and remove canvases that are off screen. For example, that is how our demos page is able to have 11 canvases:
Spine: Demos

[Zimbres]

Thanks @Nate! I've purchased a license moments ago. And thanks again for the tip!

[asm0day]

Hello. Is there a way to specify the textures as well? There may be cases (like mine) where the files I reference, can't be loaded from the same "directory" as the main file. Like a field for an array of URLs of textures to be used?

[Nate]

@asm0day, you can see here the player calls loadTextureAtlas. There it downloads the .atlas file and collects a path for each atlas page image using parent + "/" + path where path is the image name in the .atlas file. Currently the best you can do is modify the image names in your .atlas file. Eg instead of page1.png you could try ../otherdir/page1.png or whatever you need. If that doesn't work, worst case you could modify the AssetManager code.

We'll see what badlogic thinks about allowing you to specify a list of URLs. Or maybe the image names could be used as URLs?

[asm0day]

Thank you @Nate for the reply. The issue is with the links format. I have links like https://firebasestorage.googleapis.com//assets%2F%2FSpearMan.png?alt=media&token=2b71fcb3-961f-4cff-a0bc-61e520e8b167
That's why not being able to specify the links, is a problem for my case. Anyways I will look into hosting a web player my self for now. Thank you.

[JulioD]

Hello, I'm pretty new with HTML so I think is not possible but... is there a way to protect the spine files (.json) we have to upload to use the Spine Web Player? Or at least hidden it a bit more.. because seems so easy to get it right now if you inspect the code. It's a pity because this tool looks super powerful to build your web/portfolio around it but is risky to upload your spine files instead of a gif.

[Nate]

I'm afraid it's not possible to protect the Spine JSON files. You could obfuscate the data and make it harder to extract, but that won't stop someone who is determined since at some point the Spine Web Player has to download and use the JSON data.

[JulioD]

I see .. thanks for the response. Maybe in the future will be cool to have the .JSON files protected by a password when you download it and try to open it in Spine

[Mario]

You can do that on the server side. Just require authentication and authorization when a user views the website you embed the Spine player in. Still, as soon as such a player can see the animation, it means they also downloaded the JSON, which can not be protected.

[lorenzorazzino]

I have some slot with blend on screen and additive, exported json and atlas with premultiplied data but still doesn't work on Spine Player... any help?

[Searlee]

Any chance we can get a version of this that doesn't require atlas'. Our projects can't use .atlas files for certain reasons and having to export them specifically for Spine Player is a pain. Thanks

[Mario]

@lorenzorazzino the player should be able to display these correctly. Could you file an issue on the runtime tracker, including your assets? https://github.com/esotericsoftware/spine-runtimes/issues

@Searlee I'm afraid we do not have plans to have the player work without an atlas. Can you describe your use case a bit more?

[Searlee]

@badlogic Thanks for the reply. it was just an exploratory question. we make online slot machine games and the workflow currently doesn't allow for them due to having to quantise and scale and edit the images way after the artwork is spined. We will probably be using atlas' in the future as we're moving onto pixi.js . I'm pushing for it at least as it's considerably more efficient using them.

[moonseed]

Hello!

Is there a way to run spine animations in a web view without uploading assets to a server first? I want to add Spine animations to an iBooks eBook but the "same origin policy" (https://en.wikipedia.org/wiki/Same-origin_policy) blocks rendering. A folder consisting of an html, spine-widget.js, json and atlas works nicely when viewed from a web-server and when the html file is dropped onto a Firefox browser window but Safari and Chrome have the block restriction. Can spine-widget.js be altered to allow animation data to be accessed and run locally?

Thanks.

[Nate]

That is a browser restriction. You can remove the restriction with a browser specific incantation, eg for Chrome start it using the parameters --allow-file-access-from-files and/or --disable-web-security. If you want to make it easy for others to just click an HTML file and have it work, you would need to inline the entire spine-widget.js in your HTML file.

[moonseed]

Thank-you for your reply.
I added the entire spine-widget.js to the bottom of the html code between a <script type="text/javascript"></script> tag but am still getting the same browser restriction error. Should the .json and .atlas be inlined as well and how?

[Nate]

Yes, I should have mentioned you'll need to include the JSON and atlas data too. I've never actually done this, but you should be able to make it work!

[moonseed]

I think there is something in the spine-widget.js that can be changed to point to local file resources as opposed to making an HTTP request but I'm not sure how to code that. It would be great to have an HTML export direct from Spine that can be used anywhere. A couple of other programs I've recently tried have this function but Spine's usability and features are much nicer. Thanks!

[Mario]

Spine uses XMLHttpRequest to load assets. This requires pointing at a URL, i.e. http://, https://, but also file://. Depending on the "browser" you use to view the local files, just specifying a file:// or relative URL might do the trick.

[moonseed]

Hi. I'm still having trouble getting this to work locally outside of Firefox even when specifying a file:// path. Can I send you my test folder to have a look? I am hoping to have the animation play when the html file is dragged into a Safari window. This would be optimal in creating content for iBooks as opposed to using GIF or APNG. Many thanks.

[Mario]

Sure, send us your files via email. That said, iBooks does not support WebGL or Canvas, so it's unlikely this will work even if we can resolve the path issues.

[moonseed]

Thank-you! I sent test files to contact@esotericsoftware.com. I included also an example using DragonBones where I imported Spine's Power-up animation (Powerup example) into DB then exported to HTML and assigned local assets. I was able to get the DragonBones HTML export to work locally in Safari and iBooks as well as Adobe Digital Editions. I think DB is using WebGL??

[MichelVictor]

I want to do the same thing, how to use file://? I didn't find a way to work it locally.