kfconeone

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.
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
Avatar utente
kfconeone
  • Messaggi: 2

Mario

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.
Avatar utente
Mario

Mario
  • Messaggi: 3154

kfconeone

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:
1. Why only deforming doesn't work on the vue? or more specifically, how to use npm spine-ts correctly?

2. 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!
Avatar utente
kfconeone
  • Messaggi: 2

Mario

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
Avatar utente
Mario

Mario
  • Messaggi: 3154


Torna a Bugs