• Runtimes
  • How to add events in the code of spine webplayer


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?

Related Discussions
...

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:

  1. 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.

  2. 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님이 이에 답장했습니다.

      LancerKoi

      Hi 🙂

      Could you share the code you ended up with as a starting point?
      If we can run it ourselves, we'll be able to experience the serious lag you mentioned and use that version as a baseline to suggest improvements.

        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님이 이에 답장했습니다.

            LancerKoi

            I see no lag at all with this solution, even on my phone, but it might depend on the device.
            Rather than setting a different animation each time, you could try additive blending to mix all animations together and make the movement smoother.

              Davide Could you please tell me how to make it? I have almost no experience in this area,Thank you so much

              • Davide님이 이에 답장했습니다.

                LancerKoi

                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.

                  • Davide 님이 이 게시물을 좋아합니다..