Spine Runtimes WebPlayer image loading problem

NorthZero

Hello, I am facing a challenging issue when embedding Spine animations into a webpage and running the code locally. I have been practicing with the official sample animation projects, and everything runs smoothly when embedding a project without skins, such as "Spineboy". However, when attempting to embed a project with skins, like "mix-and-match," I am encountering difficulties in loading the images.

Nate

I am encountering difficulties in loading the images.

Use the browser dev console (F12) to look at what happens to the requests.

NorthZero

Nate I tried the F12 key but didn't find any abnormal requests.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.0.*/dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.0.*/dist/spine-player.css">

<div id="player-container" style="width: 100%; height: 100%;"></div>

<script>
    new spine.SpinePlayer("player-container", {
        jsonUrl: "http://esotericsoftware.com/files/examples/4.0/mix-and-match/export/mix-and-match-pro.json",
        atlasUrl: "http://esotericsoftware.com/files/examples/4.0/mix-and-match/export/mix-and-match.atlas",
        animation: "walk",
        showControls: true,
        alpha: true,
       backgroundColor: "#21252b",
        premultipliedAlpha: false
    }); 
</script>
</body>
</html>

SilverStraw

I think the default skin is active which doesn't contain any attachments. You probably need to define the skin name property to use with the Spine web player.

NorthZero

That's awesome thanks you! I tried defining the skin name and successfully resolved the issue.