Spine-TS - How to rotate the entire spine object

bapho

Hi,

I'm trying to put together a basic implementation of Spine-TS (WebGL version) into a project. In my previous ventures with Spine for PhaserCE, I'm able to rotate the entire Spine object by rotating the Phaser group object where it belongs to. Unfortunately, by having to directly try implementing Spine-TS without the existing implementations from Pixi.js or Phaser 2.x or 3.x, I'm a little stumped at how to get some very basic things done, like this one. I want to rotate the entire spine object from a certain pivot, not the root bone (I know how to rotate the root bone already). Any help would be appreciated!

Nate

The Skeleton class has translation and scale for the whole skeleton (and the skeleton scale still scales bones that have inherit scale disabled), but it doesn't have rotation.

Rotating the root bone is the easiest way. Is there a reason you don't want to do that? Otherwise the next easiest way may be to rotate the camera.

If your usage is only to draw a single skeleton, the Spine Web Player is the easiest way to achieve that. You can hide the UI controls and you still have full control over playback using AnimationState.

bapho

Hi Nate,

Been looking around webgl and rotation and so far from what I've seen, all of them need a shader program that does the rotation needs to be compiled. So Not really getting anywhere there.

Yes, I don't want to rotate the root bone because I've other uses for its rotation and it will break the character rigged because not all child bones inherit rotation and scaling 🙂. The purpose of rotating the entire character is just to quickly get them to look properly on the scene.

On the camera rotation idea, I think I can try that. Got a way for me to do that?

About the single skeleton, I got another question - I'm using one of the samples provided and I'd like to ask if the shader, ctx, and batcher - does each skeleton have their own, or can they be made to work on multiple skeletons at once?

As for the webplayer, I'll keep that in mind, but I'd like to try out some options first before I resort to it.

Nate

If you show the code you are using, I can help you rotate the camera.

You can draw multiple skeletons (or multiple instances of the same skeleton) in a single context using the same batcher and shader.

Most of what is in each GL context is separate. Do you actually have multiple contexts? That would would mean multiple WebGL canvases on your page. If so you can pass a Downloader to the AssetManager. See the blog post JS linked below.

The web player is best if it meets your needs. We used it for all the animations on this page, and some of them are interactive:
http://esotericsoftware.com/blog/Spine-4.0-is-here
The JS looks like:
http://esotericsoftware.com/files/blog/4.0-released/blog.js
Managing everything yourself will be a lot more code, so it's only worth doing if you need the extra flexibility.

bapho

Hi Nate,

You know what, you gave me something to think about, (like why go through this pain of manipulating webgl stuff.) So I looked at what I was doing and the main reason the character is stuck unrotatable is because I scale the main bone body for 'breathing' and the other limb bones connected to it have the inherit scale and rotation turned off, and I wanted to simulate it without resorting to locking the bone and image and scaling it. But thinking about it, this doesn't make too much sense, so I was able to fix the problem by changing how my bones work.

Now I can rotate and scale the root bone through the skeleton object as expected.

As for the multiple contexts, batchers and shaders, thanks for letting me know! My project may need me to load and unload different spine skeletons from the scene. I've yet to try and see what happens if I add multiple skeletons.