• Editor

  • Simple LOCAL html viewer.

    anglais
Related Discussions
...

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>

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

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?

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

Ok. Get it. And audio files?

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.

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.

It is possible to force Chrome to load local files.

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

Chrome

allow-file-access-from-files

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