Nate

We've created a player that can easily be embedded on any web page to show your Spine animations! It looks like this:

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 above 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>
User avatar
Nate

Nate
  • Posts: 8756

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?
Zimbres
  • Posts: 10

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
User avatar
Nate

Nate
  • Posts: 8756

Zimbres

Thanks @Nate! I've purchased a license moments ago. And thanks again for the tip!
Zimbres
  • Posts: 10

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?
asm0day
  • Posts: 2

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?
User avatar
Nate

Nate
  • Posts: 8756

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.
asm0day
  • Posts: 2

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:
I'm a Spine freelance animator. Currently -Available- :mail:
User avatar
JulioD

Kickstarter Backer
  • Posts: 16

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.
User avatar
Nate

Nate
  • Posts: 8756

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:
I'm a Spine freelance animator. Currently -Available- :mail:
User avatar
JulioD

Kickstarter Backer
  • Posts: 16

badlogic

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.
User avatar
badlogic

Mario
  • Posts: 1689

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?
lorenzorazzino
  • Posts: 1

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 :)
Searlee
  • Posts: 2

badlogic

@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?
User avatar
badlogic

Mario
  • Posts: 1689

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.
Searlee
  • Posts: 2


Return to Spine