Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

spine-webgl - runing multiple animations from one skeleton

Rok Slana

Hello good people of Esoteric Software & beyond.

I am working on a web project for my company. Currently it consists of HTML, CSS, Pixi and spine-webgl library. For clarification I'm not working in TS though just plain JS.

I'd need to play more than one animation that is derived from one skeleton and my problem is that if I play only one instance of this animation it is working fine but the more instances that I add the faster the animations become (2 instances are twice the speed, 3 instances even faster etc).

I've been working on this for a week now to no avail - mind you I am new to this. Here is my code (mostly derived from the examples provided via Spine)

// This is where I send animations that I want to be played
 function setAnimationsToPlay(animationsToPlayArr){

    if(animationsToPlayArr != null || animationsToPlayArr != undefined || animationsToPlayArr > 0){
         
       playAnimations = true;
       animationsList = animationsToPlayArr;
       skeletonsPlaying = {};

        for( var key of Object.keys(skeletons)){            

            for(let i = 0; i< animationsToPlayArr.length; i++){

                let keyString = key;
                let myStr = animationsToPlayArr[i][0];

                if(myStr == keyString){

                    let newSkeleton = Object.create(skeletons[key]);  // I create new object for every instance - didn't solve the problem
                    skeletonsPlaying[i] = newSkeleton;
                }                
            }  

            lastFrameTime = Date.now() / 1000;
            requestAnimationFrame(render);          
        }
    }
    
    else{console.log('Data missing');}
}

// Modified renderer from the example code
function render() {

    let gl = ctx.gl;
    let now = Date.now() / 1000;
    let delta = now - lastFrameTime;
    lastFrameTime = now;

    gl.clear(gl.COLOR_BUFFER_BIT);  

    for(let i = 0; i < animationsList.length; i++){

        let currentSkeletonJSON = skeletonsPlaying[i].JSON;

        let valueX = animationsList[i][1];
        let valueY = animationsList[i][2];

        resize(currentSkeletonJSON, valueX, valueY); // So far this is working fine
 
        // Apply the animation state based on the delta time.
        let state = currentSkeletonJSON.state;
        state.update(delta);
        state.apply(currentSkeletonJSON.skeleton);
        currentSkeletonJSON.skeleton.updateWorldTransform();

        // Bind the shader and set the texture and model-view-projection matrix.
        shader.bind();
        shader.setUniformi(spine.Shader.SAMPLER, 0);
        shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);

        // Start the batch and tell the SkeletonRenderer to render the active skeleton.
        batcher.begin(shader);
        skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
        skeletonRenderer.draw(batcher, currentSkeletonJSON.skeleton);

        batcher.end();
        shader.unbind();
    }      

    playAnimations === true ?  requestAnimationFrame(render) : console.log('animation stopped');
}

Any clarification or advice on this would be greatly appreciated as I am out of ideas and stuck. Thank you in advance.

Nate

the more instances that I add the faster the animations become

This sounds like you update your AnimationState more than once each frame. Updating it steps it forward, so that would play your animations too fast. However, you want an AnimationState per skeleton. I can't tell that from the code you posted.

Rok Slana

Thank you for replying. To clarify the above code:

I load all my animations into 'skeletons' JSON object (as in Spine example code) that I don't use later on for rendering.

I create multiple skeletons objects in setAnimationsToPlay() for the reason you mentioned - kind of cloning the desirad skeleton multiple times - and put them in an empty JSON. I used Object.Create because I wasn't sure if there is maybe an reference problem here.

let newSkeleton = Object.create(skeletons[key]);
skeletonsPlaying[i] = newSkeleton;

In render() I iterate over these skeletons and if I understand correctly every skeleton should have it's own AnimationState. But it still renders them faster than expected.

for(let i = 0; i < animationsList.length; i++){
    //animatonsList.length ==  skeletonsPlaying.length
    let currentSkeletonJSON = skeletonsPlaying[i].JSON;
    let state = currentSkeletonJSON.state;

Should I have multiple skeletonRenderes ? It's kind of strange because I can render multiple animations simultaneously already. If they aren't same animations, they render with correct timing. I am talking about animations, not one animation with different skins.

Nate

You should not use Object.create. It does not create a copy and is not the same as creating a new instance. Use new Skeleton(data) where data is the SkeletonData.

You don't need multiple skeleton renderers.

I can't follow your code because it doesn't show where you load the JSON or where you create AnimationState instances.

Rok Slana

Yes. Thank you very much. I misunderstood how this works. I thought that all animations are loaded only once and by using Object.create that this makes a brand new instance of each from bottom up - for later use.

I've got it working now. Thank you again for your time. Cheers !

Nate

Glad you got it working!

The animations are loaded only once. They are stored in the SkeletonData. You can have many Skeleton instances that share the same SkeletonData.

Rok Slana

Thank you for clarification. This is my solution now ( currently working with only one .json and .atlas file).

//Start loading assets 

---


function load() {

if (assetManager.isLoadingComplete()) {
    skeletonsData = {
        sym: loadSkeletonsData("sym.json")
    }; 
}
else {
requestAnimationFrame(load);
}
}

//Store skeletonsData 

---


function loadSkeletonsData(name) {

atlas = assetManager.require( name + '.atlas');
atlasLoader = new spine.AtlasAttachmentLoader(atlas);
skeletonLoader = new spine.SkeletonJson(atlasLoader);
skeletonLoader.scale = 1;
let skeletonData = skeletonLoader.readSkeletonData(assetManager.require(name));

return {
    skeletonData:skeletonData
};
}

//Create skeleton instances from skeletonsData 

---


function createSkeletonInstance(initialAnimation, premultipliedAlpha, skin){

if (skin === undefined) skin = "default";
let skeleton = new spine.Skeleton(skeletonsData.sym.skeletonData);
skeleton.setSkinByName(skin);
let bounds = calculateSetupPoseBounds(skeleton);
let animationStateData = new spine.AnimationStateData(skeleton.data);
let animationState = new spine.AnimationState(animationStateData);
animationState.setAnimation(0, initialAnimation, true,0);

return {
    skeleton: skeleton,
    state: animationState, 
    bounds: bounds, 
    premultipliedAlpha: premultipliedAlpha};     
}

//Create skeletons 

---


function setAnimationsToPlay(animationsToPlayArr){

    createdSkeletons = {};

    for(let i = 0; i < animationsToPlayArr.length; i++){
    
        let animationName = animationsToPlayArr[i][0] + ''; 
        let newSkeleton = createSkeletonInstance(animationName, false, "default");
        createdSkeletons[i] = newSkeleton;                            
    }  

    lastFrameTime = Date.now() / 1000;
    requestAnimationFrame(render);  
}        
else{
   console.log('Data missing');}
}

If there is something to improve on how to load and manage multiple skeletons of single 'origin' I am open to suggestions.

Nate

It's not super clear when your functions are called, but they look good.

A skeleton has one or two skins. By default it has a Skeleton defaultSkin and a null Skeleton skin. To look up an attachment, Skeleton getAttachment looks first in the skin (if not null), then in defaultSkin. You are setting skin to the default skin, which doesn't necessarily hurt but isn't necessary either. Mainly if you ever look up an attachment that isn't in the default skin, it'd check the default skin twice. If skin === undefined you could just avoid setting the skin.

Rok Slana

Great. Thank you Nate.