web-player loaded display confusion, 骨骼动画加载显示错乱。version4.2.66
The issue you're experiencing with the Spine web player displaying animations incorrectly could be related to several factors. One common cause is a mismatch between the version of the exported Spine assets and the version of the Spine runtime being used. Ensure that the major and minor versions of your exported assets match those of your runtime. Additionally, check if the blending modes and alpha settings are correctly configured, as these can affect how animations are rendered, especially if there are black blocks or transparency issues. If you are using a newer version like 4.2.66, make sure that your runtime supports this version and that all necessary configurations are correctly set.
this is spine assets file
I’m using the same player configuration as you, and I cannot reproduce the issue. This is what I see:
Could you share the code for your entire webpage so I can analyze whether something might be interfering with the player? If you prefer not to share your code publicly, you can send it to contact@esotericsoftware.com.
OK thanks , I have already sent it to your email!. title is spine-demo
I found that there is no problem with local loading, but CDN loading is not working.
We’ve received your project, but I’m unable to run it. There seems to be an issue with the dependencies, as the installation process fails with both npm and yarn.
I found that there is no problem with local loading, but CDN loading is not working.
I have no rendering problem in both cases.
Can you provide a version of your project that can be installed and run locally?
Davide ok
`<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-control" content="no-cache">
<link rel="icon" href="/logo.ico" />
<title></title>
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.66/dist/iife/spine-player.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.66/dist/spine-player.css">
</head>
<body>
<div id="container"></div>
</body>
<script>
new spine.SpinePlayer("container", {
skeleton: 'https://qiniu.other.cq-wnl.com/xindongrichang/spine/qingnian1.json',
atlas: 'https://qiniu.other.cq-wnl.com/xindongrichang/spine/qingnian1.atlas',
animation: "daiji",
premultipliedAlpha: false,
alpha: true,
backgroundColor: "#BBD86C",
preserveDrawingBuffer: true,
defaultMix: 0,
// viewport: {
// debugRender: true,
// },
// debug: {
// meshes: true
// },
showControls: true,
showLoading: false,
});
</script>
</html>`
Why is the image url not parameterized?
That URL is dynamically concatenated using the location of the atlas file and the image names within the atlas file.
You can actually parametrize it with a trick explained in the documentation in this paragraph. You can do like this:
rawDataURIs can also be used to use atlas images from a different path or (if CORS is enabled) a different domain.
For example, if the name of the image is raptor-pma.png
:
new spine.SpinePlayer("player", {
skeleton: "raptor-pro.json",
atlas: "raptor-pma.atlas",
rawDataURIs: {
"raptor-pma.png": "https://YOUR-PARAMETRIZED/IMAGE.png"
}
}
If you do like this, the image raptor-pma.png
will be downloaded from https://YOUR-PARAMETRIZED/IMAGE.png
.