as for the code i just use: setAnimation
http://en.esotericsoftware.com/spine-player#Advanced-playback
yes, I tryed spine-player, most likely I will use something else, but for now this is the test.
I created a little wrapper:
function isAnimationPlaying(obj: any, animationName: string|null = null): boolean {
const currentTrackEntry = obj.animationState.tracks;
if (currentTrackEntry.length === 0) {
return false;
}
if (currentTrackEntry.length > 0 && animationName === null) {
return true;
}
const current = obj.animationState.getCurrent(0);
if (current) {
if (current.animation.name === animationName) {
return !(currentTrackEntry[0].animationEnd === currentTrackEntry[0].animationLast && !currentTrackEntry[0].loop);
}
}
return false;
}
function startAnimation(obj: any, name: string, loop: boolean = true, onComplete: (() => void) | null = null): void {
if (isAnimationPlaying(obj, name)) {
return;
}
if (onComplete && typeof onComplete === 'function') {
const completeHandler = function () {
obj.animationState.removeListener(l);
obj.animationState.clearTracks();
onComplete();
};
const l = {
complete: completeHandler,
};
obj.animationState.addListener(l);
}
obj.setAnimation(name, loop);
}
And my all test looks like this:
const jsControlledPlayer1 = new spine.SpinePlayer("container1", {
jsonUrl: "./assets/Lumberjack2/json/Lumberjack.json",
atlasUrl: "./assets/Lumberjack2/json/Lumberjack.atlas",
animation: "idle",
showControls: false,
premultipliedAlpha: true,
alpha: true,
preserveDrawingBuffer: true,
viewport: {
x: -200,
y: 10,
width: 1500,
height: 1500,
},
});
const jsControlledPlayer2 = new spine.SpinePlayer("container2", {
jsonUrl: "./assets/Lumberjack2/json/Lumberjack.json",
atlasUrl: "./assets/Lumberjack2/json/Lumberjack.atlas",
animation: "idle",
showControls: false,
premultipliedAlpha: true,
alpha: true,
preserveDrawingBuffer: true,
viewport: {
x: -200,
y: 10,
width: 1500,
height: 1500,
},
});
document.getElementById("idle")?.addEventListener("click", (): void => {
startAnimation(jsControlledPlayer1, 'idle');
startAnimation(jsControlledPlayer2, 'idle');
});
document.getElementById("attackPhysical")?.addEventListener("click", (): void => {
startAnimation(jsControlledPlayer1, 'attackPhysical', false, (): void => {
startAnimation(jsControlledPlayer1, 'idle');
});
startAnimation(jsControlledPlayer2, 'defendPhysical', false, (): void => {
startAnimation(jsControlledPlayer2, 'idle');
});
});
document.getElementById("attackMagical")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'attackMagical', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
startAnimation(jsControlledPlayer2, 'defendMagical', false, () => {
startAnimation(jsControlledPlayer2, 'idle');
});
});
document.getElementById("defendPhysical")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'defendPhysical', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
startAnimation(jsControlledPlayer2, 'attackPhysical', false, () => {
startAnimation(jsControlledPlayer2, 'idle');
});
});
document.getElementById("defendMagical")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'defendMagical', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
startAnimation(jsControlledPlayer2, 'attackMagical', false, () => {
startAnimation(jsControlledPlayer2, 'idle');
});
});
document.getElementById("recover")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'recover', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
});
document.getElementById("damaged")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer2, 'attackPhysical', false, () => {
startAnimation(jsControlledPlayer2, 'idle');
});
startAnimation(jsControlledPlayer1, 'damaged', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
});
document.getElementById("cursed")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'cursed', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
});
document.getElementById("win")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'win', false, () => {
startAnimation(jsControlledPlayer1, 'idle');
});
startAnimation(jsControlledPlayer2, 'die', false, () => {});
});
document.getElementById("die")?.addEventListener("click", () => {
startAnimation(jsControlledPlayer1, 'die', false, () => {});
startAnimation(jsControlledPlayer2, 'win', false, () => {
startAnimation(jsControlledPlayer2, 'idle');
});
});
