Sp.spine is undefined

hello,
I want to set animationStateData using

var animStateData = new sp.spine.AnimationStateData(); animStateData.defaultMix = 2; this.skelet.setAnimationStateData(animStateData);

in onLoad function, but console displays:
Simulator: 40:TypeError: sp.spine is undefined at a (....\library\bundle.project.js?009:NaN:0)

anything wrong?

also,
1- sp.Skeleton function
getCurrent(trackindex):sp.spine.TrackEntry
return null…
Seems related to the fact that sp.spine is missing
should I add some import/require statement?

2- other spine-related issue, I tried to get the trackEntry using this example (https://github.com/cocos-creator/example-cases/blob/master/assets/cases/spine/SpineCtrl.js):
spine.setStartListener(trackEntry => { var animationName = trackEntry.animation ? trackEntry.animation.name : ""; cc.log("[track %s][animation %s] start.", trackEntry.trackIndex, animationName); });

But in my output console it seems that trackEntry is just 0, and not an object.

did anybody test spine in cocos creator?

In Creator, you connect with Spine using the Spine component. So instead of using sp.spine.foo, you will access the properties and methods of the Spine component. In the examples, they start the script by requiring the component:

 editor: {
        requireComponent: sp.Skeleton
    },

So, to get started you would need to create an empty node, then add a Spine Skeleton component, and add your script. The lines above check to make sure that there is a Spine Skeleton component attached to the same node that the script is attached to.

Next in the onLoad event, they get a reference to the Spine Skeleton component in the like this:
var spine = this.spine = this.getComponent('sp.Skeleton');

This is a little confusing, because naming it “spine” makes it look like we are referencing the sp.spine API. Also, there is no reason to make two references to the same component, other than brevity. To make it easier to understand, you could change this line to:

this.mySkeleton = this.getComponent('sp.Skeleton');

Now, you can do things like this:

//Add event listener:
this.mySkeleton.setStartListener(trackEntry => {
    var animationName = trackEntry.animation ? trackEntry.animation.name : "";
    cc.log("[track %s][animation %s] start.", trackEntry.trackIndex, animationName);
});

//Set an animation:
this.mySkeleton.setAnimation(0, 'walk', true);

//Set an animation mix:
this.mySkeleton.setMix(anim1, anim2, 0.2);

Hope this clears it up. I tested with 1.4 and it works fine.

thank you for the detailed answer! :heart_eyes:

I had done exactly what you describe, exept the requireComponent: sp.Skeleton part!
What was weird is that everything worked, this.getComponent('sp.Skeleton'); returned the component as specified by documentation, with correct method setStartListener also working, and listener actually called during runtime… but with incorrect parameter (0 instead of skeleton) :confounded: Weeeird…
With requireComponent, the listener listens with correct parameter.

sp.spine namespace is still undefined, though…