I want to make an interactive wallpaper file, but the code provided below the video does not support high versions like 4.2, and IK and constraints will all become invalid.
So I changed to spine webplayer, and now I can play the animation I made normally, but the official documentation does not have any event code.
I hope it can move according to my mouse like in the video, or switch the animation when I click. How should this function be implemented?
How to add events in the code of spine webplayer
To add interactivity such as mouse movement or click events to your Spine Web Player animations, you can utilize JavaScript to listen for these events and then control the animation accordingly. Here's a basic example of how you can achieve this:
Mouse Movement: You can listen for mouse movement events and update the position of the animation or trigger specific animations based on the mouse position.
Click Events: You can add event listeners to detect clicks and change animations or perform other actions.
Here's a simple example of how you might implement these features:
<div id="player-container" style="width: 100%; height: 100vh;"></div>
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js"></script>
<script>
const player = new spine.SpinePlayer("player-container", {
jsonUrl: "https://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",
atlasUrl: "https://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pma.atlas",
success: function (player) {
// Set initial animation
player.setAnimation("walk", true);
// Add mouse move event listener
document.addEventListener('mousemove', function(event) {
// Example: Change animation based on mouse position
if (event.clientX < window.innerWidth / 2) {
player.setAnimation("walk", true);
} else {
player.setAnimation("run", true);
}
});
// Add click event listener
document.addEventListener('click', function() {
// Example: Switch to a different animation on click
player.setAnimation("jump", false);
});
},
error: function (player, reason) {
console.error(reason);
}
});
</script>
This code sets up a Spine Web Player and listens for mouse movements and clicks. When the mouse moves, it checks the position and changes the animation accordingly. On a click, it switches to a "jump" animation.
You can customize the animations and logic to fit your specific needs. Make sure your animations are correctly named and available in your Spine project.
Spinebot This code works, but there will be serious lag when switching animations. I hope to be able to change the perspective in one idle animation through four animation channels like the code in the video.
Davide I guess it's because of too many physical effects and the lag caused by switching animations, and this method cannot freely adjust the character's turning angle. If you can help me solve the problem, I will be very grateful. Thank you
You are setting too many times the same animations.
Change it only when it's necessary. Try something like that:
let currentAnimation = "idle";
// Add mouse move event listener
document.addEventListener('mousemove', function (event) {
// Example: Change animation based on mouse position
if (event.clientX < window.innerWidth / 3) {
if (currentAnimation !== "left") {
currentAnimation = "left";
player.setAnimation(currentAnimation, true);
}
}
else if (event.clientX > window.innerWidth * 2 / 3) {
if (currentAnimation !== "right") {
currentAnimation = "right";
player.setAnimation(currentAnimation, true);
}
}
else if (event.clientY < window.innerHeight / 3) {
if (currentAnimation !== "up") {
currentAnimation = "up";
player.setAnimation(currentAnimation, true);
}
}
else if (event.clientY > window.innerHeight * 2 / 3) {
if (currentAnimation !== "down") {
currentAnimation = "down";
player.setAnimation(currentAnimation, true);
}
}
else if (currentAnimation !== "idle") {
currentAnimation = "idle";
player.setAnimation("idle", true);
}
});
Davide Thank you very much. Although it does not completely solve the problem of lag, it is much better than before.
Davide Could you please tell me how to make it? I have almost no experience in this area,Thank you so much
With additive blending I refer to a result as shown with this example. You basically set the directions on different tracks, then increase the alpha of each direction depending on the cursor position.
However, I've analyzed your skeleton file and it cannot work with the additive blending method.
You generally set the animation in the "idle" position, while on the directional animation, you just set keys for frame 0. For example, for the left
animation, you just set keys to have the position fully left.
I invite you to take a look at the owl project to understand what I mean. You can find it here.
Last, but not least, you used a clipping attachment that's known to be impactful on performance.
Davide I understand ,thanks
I have solved this problem, if you need the code, please contact me.