यह साइट एक आधुनिक ब्राउज़र में सबसे अच्छी तरह से देखी जा सकती है जिसमें जावास्क्रिप्ट सक्षम है।

(Spine Web Player) Rotate the character?

tseshadow

There is a way or method to rotate the entire character or the camera in the web player?

Mario

Depends around which axis you want to rotate. If you want to rotate to achieve a 3D effect, that's gonna be a bit hard. If you want to rotate in the x/y plane, you can simply set the rotation of the root bone of the skeleton.

tseshadow

Yes, i only want to rotate in the x/y plane. Can you give me a example to know how to call the method? or what variable i need change?

Mario

player.skeleton.getRootBone().rotation = angleInDegrees should do the trick.

tseshadow

its work but its broke the character when it rotate, maybe i need a way to do with the camera. So as not to affect the bones or animation of the character. A guy helped me to zoom using the camera, but I don't know how the code or method to rotate it would be

Mario

If it doesn't work, then that's a bug on our end that needs fixing. Please share a reproduction sample, i.e. a simple webpage that let's me inspect the assets and your code.

tseshadow

i dont know how to do that, but i can share the code and the method i use:
player creation:

var reproductor = new spine.SpinePlayer("player-container", {
                     jsonUrl: "http://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy-pro.json",
                     atlasUrl: "http://esotericsoftware.com/files/examples/4.0/spineboy/export/spineboy.atlas",                     

                     animation: "jump",
                     alpha: true,
                     backgroundColor: "#00000000",
                     showControls: false
});

this "if" is in a listener (window.wallpaperPropertyListener) because i need to read the properties in a json file:

if (properties.rotate) {
         rotate = properties.rotate.value;
         reproductor.skeleton.getRootBone().rotation = rotate;
         /*if (vle == true){
            

        document.getElementById("player-container").style.transform = "scale(-1, 1) rotate("+rotate+"deg)";
     }
     if (vle == false){
        
        document.getElementById("player-container").style.transform = "scale(1, 1) rotate(-"+rotate+"deg)";
     }*/
     
  }

if you rotate 90degress the character you can see the shoes change their form, that happens in other bones and animations in other assets.
I only need to change the rotation of the entire character without any modification in the bones, like a camera.

Mario

Ah, that's due to IK constraints (and possibly other contraints) and "works as intended", as the constraints don't take root bone rotation into account.

Sadly, in player, you can't really modify the camera, as it's updated every frame by the player itself to draw the skeleton with its current (viewport) configuration: https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-player/src/Player.ts#L837

If you need that kind of freedom, you either have to modify the player sources yourself, or use the WebGL backend instead. It gives you full control over everything, here's a barebones viewer: https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/barebones.html

The camera is accessible through renderer.camera. It doesn't offer a simple rotation method, instead you'd have to rotate the camera.up vector's x/y components, which is also not trivial. In addition to that, you'd also have to possibly offset by the skeleton root bone position relative to the camera world position. It all gets complicated fast 🙂

If that's to much of a complication, you can also look into pixi-spine or Phaser's Spine integration. Those are full-fledged game toolkits who should make whatever you want to do a lot easier.

Nate

Rotating the root bone via code is the same as rotating the root bone in the editor. You see Spineboy's feet behave strangely because the feet bones are set to not inherit rotation from parent bones:
Bones - Spine User Guide: Transform inheritance

There is not an easy way around that. We provide a workaround for position (Skeleton x and Skeleton y) and scale (Skeleton scaleX and Skeleton scaleY) and those work even for bones that have translate or scale inheritance disabled, but we don't have a similar skeleton property for rotation. Maybe we should?

Anyway, rotating the root bone is likely sufficient for many skeletons. Not all skeletons use disable inherit rotation.

You could modify the camera in config.update(), but you'd need to be careful as the player sets the zoom and position every frame just before that. As Mario mentioned, manipulating the camera can be tricky. It's extra hard because if you don't get it exactly right, often the result is that nothing is displayed, making debugging difficult.