zangbianxuegu

If you want a fixed viewport, don't set a viewport for each animation, but set a global viewport as explained in the documentation:

zangbianxuegu

The viewport coordinates and dimensions work as in the Spine editor.

The bottom left corner of the viewport (the green rectangle) corresponds to the x, y coordinates you specify.
In this case, since you specified the viewport being in x: 0, y:0, the bottom left coordinate of the viewport is centered with the world origin. In spineboy skeleton, the world origin and the root bone are in the same coordinates, so the root bone is centered with the bottom left corner of the viewport.

Then, you specify width: 200, height: 300 and as you can see we have a rectangle with a proportion of 2/3.
10% define the red rectangle that is 10% bigger.

Once the viewport is defined, the spine player fit it horizontally or vertically in canvas. In the center of your canvas you have the coordinate (100;150) of the world origin.

The piece of code you provided above set a fixed global viewport. If you change animation, no shrink/enlargment occurs. That happens only if no global view is provided, or specific animation viewports are provided.

Even if you do not have the editor, once you know where the world origin is, than is super easy to set the desired viewport. You know that the bottom-left corner is the x,y coordinate you provide. Just proceed by incremental steps:

• Set x,y to 0,0, width/height to a reasonable size, and paddings to 0%. See where the bottom left coordinate of the rectangle that represent the viewport is placed.
• Increase the width by a certain amount. You will see the the bottom-left coordinate remain in the same place, but the rectangle is larger.
• If you want to move the rectangle, focus on the bottom-left corder. For example, move it a little left by subtracting a certain amount to the x coordinate.

Iterate over the coordinates and width/height until you find the viewport with your desired size. That will be kept consistent across all animation.

zangbianxuegu Unfortunately, Davide is currently on vacation so it will take some time for him to respond.

By the way, the code you showed us is too long and probably even contains lines that are not directly related to the problem you are experiencing, so we would appreciate it if you could show us the code with a minimum of content. Instead, if you have no problem sharing the full code, it would be faster for us to check if you could email us a minimal project file that can reproduce the problem: contact@esotericsoftware.com
Please include the URL of this forum thread in the email so we know the context. Then we can take a look at what's wrong.

zangbianxuegu Thanks for submitting your project file! I understand your problem. You want to do something like root movement. I'm sure there will be advice from another staff member later on how to achieve this, but I just want to say that the project you sent me did not match the version of the runtime with the version of the skeleton data, so I would recommend fixing that. (The project you sent us was using spine-pixi 4.2 for the runtime, but the skeleton data was exported from 4.1.16.)

The major and minor version for the Spine editor used to export JSON or binary data must always match the Spine Runtimes version. Somehow it seems to have worked this time, but there may be problems in the future, so please upgrade your editor version and export the skeleton data again.

zangbianxuegu Sorry for the confusion, but the display problem itself has nothing to do with version mismatch. I'm sure another staff member can answer you about that, so please wait a while for a more detailed answer!

zangbianxuegu Sorry to keep you waiting. I have already asked Mario to review the project you sent us yesterday and this thread, but he has not had enough time to do so as he is providing very extensive support. I think he might respond today if he finds the time, but I can't make any promises. Please wait as I am sure he will see it in order.

Your code does many things that can not work. Let's start with:

    function setPosition(pos) {
      container.style.left = pos.x + "px";
      container.style.top = pos.y + "px";
    }

    function playAnimation(animation) {
      if (player) {
        player.animationState?.clearTracks();
        let loop = false;
        if (animation.includes("idle")) {
          loop = true;
        } else {
          loop = false;
        }
        player.setAnimation(animation, loop);
        player.play();
      }
    }

    function handlePosAction(pos, animation) {
      setTimeout(() => {
        setPosition(coords[pos]);
        playAnimation(animation);
      }, 0);
    }

    function handleMove() {
      remainingSteps = 1;
      handlePosAction(curPos, "right_move");
    }

    window.onload = () => {
      const animation = coords[curPos].direction + "_idle";
      handlePosAction(curPos, animation);
    };

When window.onload() is called, you call handlePosAction() which in turn calls playAnimation() in a setTimeout() handler. Depending on various server/browser related factors, the player and skeleton may not have been loaded at that time, resulting in an error, e.g.

Uncaught TypeError: Cannot read properties of null (reading 'data')
    at SpinePlayer.setViewport (Player.ts:724:40)
    at SpinePlayer.setAnimation (Player.ts:711:20)
    at playAnimation ((index):167:16)
    at (index):175:9

On my machine, I do not see the skeleton when I load the page because of that.

You need to move the logic from window.onload() into the success handler of the Spine player. This also allows us to remove the setTimeout() call in handlePosAction().

You also queue an empty animation. The complete listener will be called for that empty animation as well. Empty animations do not have their animation field set, so the handler code in complete fails. I added a check.

The default mix duration is set to something != 0. This means that when switching from one animation to the next, there will be interpolation. Your skeleton is extremely complicated and when previewing it in Spine in the preview pane, switching between animations, one can see that the transitions between animations are broken. This is not something the Spine player can fix. That is something you need to fix in your Spine project in the Spine Editor. @Misaki can possibly help you with that. In any case, I've set the default mix duration to 0.

Finally, in handlePosAction() you call setPosition() before playAnimation(). setPosition() will immediately move the <div> containing the <canvas>, while the player hasn't rendered a new frame with the new animation yet. This results in a noticable flicker. It can be fixed by first playing the new animation, and then moving the <div> in the next frame.

Here's the entire fixed code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>spine</title>
  <script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.css" />
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: bisque;
    }

    .grid {
      position: relative;
      left: 150px;
      top: 400px;
      display: flex;
      flex-wrap: wrap;
      width: 600px;
      height: 60px;
    }

    .item {
      width: 80px;
      height: 60px;
      box-sizing: border-box;
      border: 1px solid green;
    }

    .container {
      position: absolute;
      left: -30px;
      top: -10px;
      width: 300px;
      height: 200px;
    }

    .btn {
      position: absolute;
      left: 200px;
      top: 600px;
      width: 100px;
      height: 40px;
    }
  </style>
</head>

<body>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div id="container" class="container"></div>
  </div>
  <div>
    <button type="button" class="btn" onclick="handleMove()">Move</button>
  </div>
  <script>
    const coords = [
      {
        x: -30,
        y: -10,
        direction: "right",
      },
      {
        x: 50,
        y: -10,
        direction: "front",
      },
      {
        x: 130,
        y: -10,
        direction: "right",
      },
      {
        x: 210,
        y: -10,
        direction: "right",
      },
      {
        x: 290,
        y: -10,
        direction: "right",
      },
      {
        x: 370,
        y: -10,
        direction: "right",
      },
      {
        x: 370,
        y: -70,
        direction: "front",
      },
    ];
    const player = new spine.SpinePlayer("container", {
      skeleton: "./spine/yuyan.json",
      atlas: "./spine/yuyan.atlas",
      alpha: true,
      backgroundColor: "#00000000",
      showControls: false,
      viewport: {
        debugRender: true,
        padTop: 0,
        padLeft: 0,
        padBottom: 0,
        padRight: 0,
        x: -300,
        y: -200,
        width: 600,
        height: 400,
      },
      success: (player) => {
        const animation = coords[curPos].direction + "_idle";
        handlePosAction(curPos, animation);
        player.animationState.data.defaultMix = 0;

        player.animationState?.addListener({
          complete: function (entry) {
            if (!entry.animation) return; // empty animation, do nothing
            if (entry.animation.name.includes("move")) {
              remainingSteps--;
              curPos++;
              if (remainingSteps > 0) {
                const animation = coords[curPos].direction + "_move";
                handlePosAction(curPos, animation);
              } else {
                const animation = coords[curPos].direction + "_idle";
                handlePosAction(curPos, animation);
              }
            }
          },
        });
      },
    });

    let curPos = 0;
    let remainingSteps = 0;

    function setPosition(pos) {
      container.style.left = pos.x + "px";
      container.style.top = pos.y + "px";
    }

    function playAnimation(animation) {
      if (player) {
        if (animation.includes("idle")) {
          loop = true;
        } else {
          loop = false;
        }
        player.setAnimation(animation, loop);
        player.play();
      }
    }

    function handlePosAction(pos, animation) {
      playAnimation(animation);
      requestAnimationFrame(() => setPosition(coords[pos]));
    }

    function handleMove() {
      remainingSteps = 1;
      handlePosAction(curPos, "right_move");
    }
  </script>
</body>

</html>

Now, this is clearly going to be some kind of game. I would STRONGLY suggest to not use Spine player for games. Please use spine-phaser or spine-pixi.