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.
