Spine 的 WebPlayer

注意：Spine软件本体和Spine-WebPlayer可能不是共用一套版本号，比如Spine4.0.64导出的文件，可以用Spine-WebPlayer4.0.30播放

Spine-WebPlayer包括一个JS库和一个CSS库，两者都是必须的

npm包引入

可以通过npm安装@esotericsoftware/spine-player，然后就可以使用了
代码参考这里：https://github.com/GZhonghui/WebTools/blob/master/src/views/misc/Nikke.vue
再强调一遍，这软件没做任何版本兼容，一定要注意包的版本
大致这样选：Spine a.b.c 就对应 Spine-WebPlayer a.b.<最新>（就是版本号前两个数字要一致）

CDN引入

不是很适合于Vue工程，本人不常用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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">
</head>
 
<body>
  <div id="container" style="max-width:1080px; aspect-ratio: 16/9"></div>
</body>
<script>
  new spine.SpinePlayer("container", {
    skelUrl: "assets/c060_00.skel",
    atlasUrl: "assets/c060_00.atlas",
    premultipliedAlpha: true,
    backgroundColor: "#00000000",
    alpha: true,
    viewport: {
      debugRender: false,
    },
    debug: {
      meshes: false
    },
    showControls: false,
    success: function(player) {
      const animations = player.skeleton.data.animations;
      const likedAnims = ['expression_0', 'action'];
 
      // 获取所有动画名称
      const animNames = animations.map(a => a.name);
      console.log(animNames);
 
      // 查找likedAnims中第一个存在于动画列表中的动画
      let animToPlay = null;
      for (let i = 0; i < likedAnims.length; i++) {
        if (animNames.includes(likedAnims[i])) {
          animToPlay = likedAnims[i];
          break;
        }
      }
 
      // 如果没有找到喜欢的动画，就播放第一个动画
      if (!animToPlay && animations.length > 0) {
        animToPlay = animations[0].name;
      }
 
      // 播放选定的动画
      if (animToPlay) {
        console.log(animToPlay);
        // 使用正确的API设置动画
        player.animationState.setAnimation(0, animToPlay, true);
      }
    },
    error: function(player, message) {
      console.error("Spine load error:", message);
    }
  });
</script>
</html>

Zhonghui

User Tools

Site Tools

−Table of Contents

Spine 的 WebPlayer

npm包引入

CDN引入

Page Tools