• Runtimes

  • 关于 Spine player layout 的疑问

    cinese

我从设计师那里得到一个 Spine 的导出文件，其中包含3个 Spine 动画名称：animation_01、animation_02、animation_03。三个动画中的角色是在动画中的位置是重合的。

SpinePlayer 组件中的 viewport：

viewport: {
      debugRender: true,
      padTop: 0,
      padLeft: 0,
      padBottom: 0,
      padRight: 0,
      ...props.layout,
    },

Spine 容器设置了宽、高，应用不同 animation 时，容器大小不变。

当我不设置 layout 的 x、y、width、height 的时候，animation_03 是正常的，animation_01、animation_02 中角色的位置在视口中有偏移。

当我设置 layout 的 x、y、width、height 的时候，就一切正常了，三个动画的角色位置完全正常。

:layout="{
          x: 0,
          y: 0,
          width: 2560,
          height: 1754,
        }"

而动画设计师表示，3个动画在编辑器中的大小位置是一样的，这是什么原因呢？

看起来确实是三个动画的坐标都是（0, 0），大小也一致。但是 视口自动行为到底指的是什么？

然后保持视口长宽比后被嵌入到Web Player的可用空间中.
这种自动视口机制可以通过Web Player的配置来定制. 如果没有给出视口配置, Web Player默认为上述的自动行为.

x和y属性指定视口的左下角在skeleton的世界坐标空间中的位置. width和height属性指定了视口的尺寸.

x, y 属性如果不指定，会怎么应用呢？为什么其中一个从（0, 0）开始（和设置layout一样），其中2个有偏移呢？

Related Discussions
...

在 Spine Web Player 中，当你不设置 layout 的 x、y、width、height 时，播放器会使用自动计算的视口。这种自动视口机制会根据当前动画的边界来计算一个包含渲染纹理的矩形，并确保动画在可用的播放器空间内完全可见。这意味着如果动画的帧大小不同，自动计算的视口可能会有所不同，从而导致角色在视口中的位置出现偏移。

当你手动设置 layout 的 x、y、width、height 时，你为所有动画指定了一个固定的视口，这样就不会受到自动计算的影响，确保所有动画在相同的视口中显示，从而避免了偏移问题。

自动视口行为是指播放器根据动画的实际边界自动调整视口的大小和位置，以确保动画在播放器中可见。如果没有指定 x 和 y，播放器会根据动画的边界自动计算这些值，这可能导致不同动画在视口中的位置不同。

When I do not set the x, y, width, and height of the layout, animation_03 looks normal, but the characters in animation_01 and animation_02 appear offset in the viewport.

It's difficult to diagnose the issue without seeing the animations themselves. If you don't specify a viewport, the player recalculates it every time the animation changes. Even if all animations start with the character at the origin, what really matters are the animation bounds.

When no viewport is explicitly set, the bounds of each animation are used to determine the viewport. This causes the viewport's size and position to change, and the player centers it within the container. As a result, the character may appear to "change position" between animations.

What you want is a fixed viewport.
Please read the other thread you created for suggestions on how to define a fixed viewport and how to make animators aware of the bounds inside the editor.