hi with this code
<input type="button" value="Red" id="btn" />
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
if (btn.value === "Red") {
btn.value = "Blue";
json = "../../assets/Mina/placeholder.json";
atlas = "../../assets/Mina/placeholder.atlas";
new player.spinePlayer("player-container", {
jsonUrl: json,
atlasUrl: atlas,
alpha: true,
backgroundColor: "#00000000",
premultipliedAlpha: true,
animation: "IDLE",
});
} else {
btn.value = "Red";
json = "../../assets/Mina/placeholder2.json"; // json path for player
atlas = "../../assets/Mina/placeholder2.atlas"; // atlas path for player
new player.spinePlayer("player-container", {
jsonUrl: json,
atlasUrl: atlas,
alpha: true,
backgroundColor: "#00000000",
premultipliedAlpha: true,
animation: "IDLE",
});
}
});
</script>
it work, but everytime i click on the button it create a new player underneath i want to replace it (i want a button to display different skeletons) after getting that to work, make an image gallery which change skeleton
how to replace player and not append a new one?
click on button once (the way it works now, and not the way I dont want it):
[player 1] (new)
click on button twice:
[player 1] (old)
[player 2] (new)
click on button thrice:
[player 1] (old)
[player 2] (old)
[player 3] (new)
. . .
I want it to be (this is what code doesnt do but i want it to do), click once:
[player 1] (new)
click twice:
[player 1] (new, different json and atlas path)
. . .
