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.
