Spine Web Player released!

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/[i][b]/assets%2F[/b][/i]%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? :hmm: 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. :whew:

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 :tear: .. 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 :rolleyes:

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-filesand/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!