यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

Simple LOCAL html viewer.

foriero

Hi Nate, trying to make simple local html viewer. But seems like I'm unable to load local disk json and atlas.

Files in the directory are :

ambush_skeleton.html
ambush_skeleton.json
ambush_skeleton.atlas
ambush_skeleton.png

<!DOCTYPE html>
<html>	
	<body>
		<script src="http://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
		<link rel="stylesheet" href="http://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
		<div id="player-container" style="width: 640px; height: 480px;"></div>
		<script>
			new spine.SpinePlayer("player-container", {
			      jsonUrl: "ambush_skeleton.json",
			      atlasUrl: "ambush_skeleton.atlas",
			});
		</script>
	</body>
</html>

Nate

Browsers disallow loading files locally. You can run a webserver. One easy way to do that is described here:
spine-runtimes/spine-ts at 3.8

Another alternative is to host the files on the internet somewhere.

There is a way to have a local HTML file show Spine animations, but you may not like it. Since you can't load local files and if you don't want to link to files on the internet, then you have to inline all the data. That means the images and JS need to be embedded in the HTML using data URIs. If you don't want to link to the runtime JS, you can jam that in there too.

Here's Erika's owl that is completely self contained, it doesn't load any other files:
https://www.erikari.it/uploads/703-owl-uri.html

Here's a blog post about it:
Blog: Embedding assets with Spine Web Player

Erika

Hello Marek,
I think this blog post could be useful: Blog: Embedding assets with Spine Web Player
Or also the previous one which is simpler: Blog: Spine Web Player released

I use both a lot for local files, to make things such as this: https://steamcommunity.com/sharedfiles/filedetails/?id=1848270557

Dammit, Nate was faster D:

foriero

Yes nice I see the solution. Please update the documentation for it if possible. Anyway, thank you Nate. :-)

<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", {
 skelUrl: "raptor-pro.skel",
 atlasUrl: "raptor-pma.atlas",
 rawDataURIs: {
   "raptor-pro.skel": "data:application/json;base64,ewoic2tlbGV0b...",
   "raptor-pma.atlas": "data:application/octet-stream;base64,CnJhcHRvc...",
   "raptor-pma.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
 },
 animation: "walk",
 backgroundColor: "#666666",
});
</script>

Just one last question. What if we have multiatlas? How can we define it int rawDataURIs?

One more question. How can we embed audios?

Nate

What is a multiatlas? If your atlas has multiple images, you define them by name just as you do a single image.

foriero

Ok. Get it. And audio files?

Nate

Playing audio is not provided by the Spine Runtimes. I'm afraid I've never explored how it's done for HTML or if it can be embedded.

foriero

How about this one : https://developers.google.com/web/updates/2012/02/WebGL-and-Web-Audio-API-demo-roundup

Mario

WebAudio is a pretty meh API which, depending on the browser, only supports certain audio formats. We currently have no plans to support it in the Spine Runtimes.

Herbert123

It is possible to force Chrome to load local files.

In WINDOWS:
WIN + RUN (Enter the following code):

Chrome

allow-file-access-from-files

foriero

Ok and how about HTML5 Audio -> https://www.w3schools.com/html/html5_audio.asp

Mario

Same story. Different browsers support only a subset of formats.