spine-web-player doen't work properly on my Vue project

kfconeone · 18 янв 2022

It is not like that I can't run the animation on Vue, Spine Boy work perfectly, and even some of my old animations; But suddenly the new animations I create keep freezing, and only on my Vue Project, still work on vanilla javascript.

I've tried to create bunch of animations over a week and compared the json file I exported but without any luck...

here is my spine project and the files I export, could anyone help?
test.7z

well, what I discovered lately is that when I used some mesh transform, it just ignored, but work fine with all the scaling, translating and rotation, seems like "deform" doen't work on my project.

Mario · 18 янв 2022

Your 7z does only contain assets. Please provide a minimal, executable code example that shows the issue in conjunction with Vue. If everything works in vanilla JS, it's likely that Vue is interfering.

kfconeone · 19 янв 2022

Sorry about my lacking of details, below is my additional informations:

this is my repository

vue Demo

vue
<script setup lang="ts">
import * as spine from "@esotericsoftware/spine-player";
import "@esotericsoftware/spine-player/dist/spine-player.css";
import { onMounted } from "vue";

onMounted(() => {
  console.log("Hello World");
  initSpine();
});

function initSpine() {
  // @ts-ignore
  new spine.SpinePlayer("player-container", {
    jsonUrl: "mySpine/skeleton.json",
    atlasUrl: "mySpine/skeleton.atlas",
    showControls: true,
    backgroundColor: "#00000000",
    alpha: true,
    success: function (player: any) {
      console.log(player);
      player.animationState.addListener({
        event: function (t: any) {
          // switch (t.animation.name) {
          //   case "surf":
          //     player.animationState.setAnimation(0, "jump", true);
          //     break;
          //   case "jump":
          //     player.animationState.setAnimation(0, "Skateboard", true);
          //     break;
          //   case "jump2":
          //     player.animationState.setAnimation(0, "surf", true);
          //     break;
          //   case "Skateboard":
          //     player.animationState.setAnimation(0, "jump2", true);
          //     break;
          // }
        }
      });
      player.animationState.setAnimation(0, "animation", true);
    }
  });
}
</script>

<template>
  <div id="player-container"></div>
</template>

vanilla Demo

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Spine Testing</title>
  </head>
  <body>
    <div id="player-container"></div>
    <script src="http://esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
    <link
      rel="stylesheet"
      href="http://esotericsoftware.com/files/spine-player/4.0/spine-player.css"
    />

<script>
  new spine.SpinePlayer("player-container", {
    jsonUrl: "skeleton.json",
    atlasUrl: "skeleton.atlas",
    showControls: true,
    backgroundColor: "#00000000",
    alpha: true,
    // Added:
    success: function (player) {
      // console.log(player);
      // player.animationState.addListener({
      //   event: function (t: any) {
      //     switch (t.animation.name) {
      //       case "surf":
      //         player.animationState.setAnimation(0, "jump", true);
      //         onToOff();
      //         break;
      //       case "jump":
      //         player.animationState.setAnimation(0, "Skateboard", true);
      //         break;
      //       case "jump2":
      //         player.animationState.setAnimation(0, "surf", true);
      //         break;
      //       case "Skateboard":
      //         player.animationState.setAnimation(0, "jump2", true);
      //         break;
      //     }
      //   }
      // });
      // player.animationState.setAnimation(0, "animation", true);
    },
  });
</script>
  </body>
</html>

And allow me to list my questions:

Why only deforming doesn't work on the vue? or more specifically, how to use npm spine-ts correctly?
As above, I used eventListener to trigger some functions, but when I change the page(not only vue, but all the SPA frameworks), spine-player was still working, and triggered lots of errors; it means that spine-player keep playing, So how do I dispose the spine player before my leaving?

Thanks again!

Mario · 19 янв 2022

You Spine skeleton was exported with Spine 4.0. Your vanilla JS version uses spine-player 4.0:
https://github.com/kfconeone/spine-testing/blob/main/vanilla/index.html#L10

You Vue version uses spine-player 4.1:
https://github.com/kfconeone/spine-testing/blob/main/vue/package.json#L11

You editor and runtimes major.minor version must match, see Versioning - Spine User Guide