xSaber

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)

. . .
xSaber
  • Postovi: 12

Nate

The player appends to the HTML element with the ID that you specify with new player.SpinePlayer:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-player/src/Player.ts#L239

You can remove everything from the HTML element before creating the Spine player. This is outside Spine's realm, done using browser APIs, eg:
https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript

You could also remove the player-container HTML element entirely, add a new one, and use that. You can specify the HTML element instead of it's ID when you call new player.SpinePlayer, eg:
var currentDiv;
...
if
(currentDiv) currentDiv.remove();
currentDiv = document.createElement("div");
document.body.append(currentDiv);
new player.SpinePlayer(currentDiv, { ... } );
Avatar
Nate

Nate
  • Postovi: 11875

xSaber

thankyou

i use this code and work
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
if (btn.value === "Red") {

btn.value = "Blue";
const myNode = document.getElementById("player-container");
myNode.innerHTML = '';
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";
const myNode = document.getElementById("player-container");
myNode.innerHTML = '';
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>
xSaber
  • Postovi: 12


Natrag na Runtimes