• RuntimesBugs
  • web-player loaded display confusion, 骨骼动画加载显示错乱。version4.2.66


Related Discussions
...

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

spine-cat.zip
534kB

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.

    Davide I found that there is no problem with local loading, but CDN loading is not working.
    I have already sent it to your email!. title is spine-demo

    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>`

      Davide I know what the problem is now. I changed the file name and uploaded it to CDN, but the image file name of the Atlas file was not modified, resulting in the use of the wrong image。

        tanghao

        Glad you identified the problem 🙂
        If you need any further assistance, just ask!

          Davide
          Thank you very much for your help. Why is the image url not parameterized? Sometimes the file name may be modified, which may cause it not working.

            tanghao

            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.

              Davide ok, thanks