• Off-topic
  • Standalone/embeded Spine Web player question

Hello.

Sorry if this question is too vague but I've been trying to solve this for some time and I haven't had much luck.

I want to export my animation to be easily viewable by clients by simply uploading a saved web page with the exported .json .atlas .png and web player files in the html files folder but I've had no luck.

I followed the spine player blog here and tried to recreate the same player locally with the same files provided in the example but I couldn't do it.

Then I came across this blog Embedding assets with Spine Web Player which sounded promising and I have yet to try but it looks like too much work doing it every time.

At the end of that blog it is says

We'll include a new export option in the next version of Spine, giving you a one click solution to do all the above. The end result will be a .html file you can open from disk with any web browser. This way friends and co-workers to easily view your work. Stay tuned and keep an eye out for our next release!

Is it implemented yet? The blog is more than three years old and I can't find any info about such feature.

Also if someone has a standalone .htlm and associated folder with what I'm trying to achieve I would love it if you could share it. Maybe looking at it and replacing files and urls I can frankenstein a solution to my problem.

Thanks!

  • Nate ответили на это сообщение.
    Related Discussions
    ...

    Unfortunately we haven't gotten to release an export to HTML feature. We do still want to!

    Gjergji I followed the spine player blog here and tried to recreate the same player locally with the same files provided in the example but I couldn't do it.

    Why? What happened?

    Note to serve the image files, you need to put the files on a web server. You can run a local web server with Python to test. Usually people would upload the files to a web server on the internet.

    Embedding everything into a single HTML file would usually be a step after you get HTML and separate data, atlas files working. However, it would also allow you to view the HTML directly, without a web server.

    • Gjergji ответили на это сообщение.

      Nate
      First I wanna say that my HTML knowledge is very limited.
      I guess it is easy for most people in the industry to have access to servers but I'm finding it hard to get some free server storage that support direct URLs

      I was able to set up a server that supports direct URLs for files but not for folders, which I guess is the reason me trying to replicate the spineboy demo in spine web player didn't work on my portfolio.
      So for example in my server the URL to spineboy.atlas is example/spineboy/spineboy.atlas and the .png is example/spineboy/spineboy.png but if you can't access example/spineboy/ as a directory, that's why I think the player can't scan for the PNG files even though one can deduct what the url would be.

      So I thought I could do something like Erka has done here with the old web player. Basically I tried to replace all the web URLs with addresses to the local folder. In my mind feeding all the information locally sounded logical but I guess this is beyond my basic understanding of how the new player works.

      I guess if I can't do this easily in a standalone file then I better find a cheap server to upload files of just export the work as videos for the time being and wait for the export to HTML feature.

      It's hard to help unless you explain what you did, what you wanted to happen, and what happened instead. When we don't have a concrete issue to assist with, we can only give broad information.

      The player doesn't scan for files (that's not something generally done on the web like it is on a local filesystem), you provide it the exact paths to each file.

      That said, the atlas file contains more paths. For example:
      https://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pma.atlas
      The first line (and any line after a blank line) are paths to a atlas page image file. The player will find it as a sibling to the .atlas file, so it will look for:
      https://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pma.png
      You can modify the atlas file with a text editor, or change your atlas packing so the resulting atlas has the paths you want.

      To be sure, this is the page you should be looking at:
      https://esotericsoftware.com/spine-player

      The config section shows how to give it URLs:
      https://esotericsoftware.com/spine-player#Configuration

      The minimum you need is (but don't use JSON skeleton data, use binary, it is smaller):

      <script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.min.css">
      
      <div id="player-container" style="width: 640px; height: 480px;"></div>
      
      <script>
      new spine.SpinePlayer("player-container", {
      	jsonUrl: "https://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",
      	atlasUrl: "https://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pma.atlas",
      	animation: "run"
      });
      </script>

      Like this: http://n4te.com/x/8853-TjbI.txt.html

      Put that in an HTML file and open it with a browser. It works locally, without a web server, because the images are loaded from our web server.

      To change it to use your own files, you need to put them on a web server somewhere. Alternatively you can embed the files in the HTML:
      https://esotericsoftware.com/spine-player#Embedding-data

      The HTML changes like this:

      <script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.min.js"></script>
      <link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.min.css">
      
      <div id="player-container" style="width: 640px; height: 480px;"></div>
      
      <script>
      new spine.SpinePlayer("player-container", {
      	jsonUrl: "spineboy-pro.json",
      	atlasUrl: "spineboy-pma.atlas",
      	rawDataURIs: {
      		"spineboy-pro.json": "data:application/json;base64,<base64 encoded spineboy-pro.json>",
      		"spineboy-pma.atlas": "data:application/octet-stream;base64,<base64 encoded spineboy-pma.atlas>",
      		"spineboy-pma.png": "data:image/png;base64,<base64 encoded spineboy-pma.png>"
      	},
      	animation: "run"
      });
      </script>

      Those <base64 encoded ____> parts are placeholders for the base64 data you need. To get that, find some online tool like this:
      https://www.base64encode.org/
      Give it the files and paste the base64 data into your HTML, where the placeholder is.

      The HTML looks like this: http://n4te.com/x/8854-2iso.txt

      And here it is rendered as an HTML page: http://n4te.com/x/8854-2iso.txt.html

      If you right click that link and save the HTML to your computer, you'll find you can open it and it works because the JSON and images are embedded in the HTML.