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>
Avatar de l’utilisateur
Nate

Nate
  • Messages: 8700

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
  • Messages: 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
Avatar de l’utilisateur
Nate

Nate
  • Messages: 8700

Zimbres

Thanks @Nate! I've purchased a license moments ago. And thanks again for the tip!
Zimbres
  • Messages: 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
  • Messages: 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?
Avatar de l’utilisateur
Nate

Nate
  • Messages: 8700

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
  • Messages: 2


Revenir vers Spine