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.
Nemaš dopuštenje za pregledavanje privit(a)ka dodan(og)ih postu.
Avatar
kfconeone
  • Postovi: 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
Mario

Mario
  • Postovi: 3078

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
kfconeone
  • Postovi: 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
Mario

Mario
  • Postovi: 3078


Natrag na Bugs