Esoteric Software

[towfiqi]

Hi,

Suppose I have animation dynamically generated in json format:

"head_irirs": {
"bones": {
"r_iris": {
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.0667, "x": 0.09, "y": 4.5, "curve": "stepped" },
{ "time": 0.2667, "x": 0.09, "y": 4.5 },
{ "time": 0.3333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3333, "x": 0, "y": 0 },
{ "time": 1.4, "x": -0.13, "y": -3.27, "curve": "stepped" },
{ "time": 1.5667, "x": -0.13, "y": -3.27 },
{ "time": 1.6667, "x": 0, "y": 0 }
]
},
"l_iris": {
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.0667, "x": -0.09, "y": 4.5, "curve": "stepped" },
{ "time": 0.2667, "x": -0.09, "y": 4.5 },
{ "time": 0.3333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3333, "x": 0, "y": 0 },
{ "time": 1.4, "x": 0, "y": -3.27, "curve": "stepped" },
{ "time": 1.5667, "x": 0, "y": -3.27 },
{ "time": 1.6667, "x": 0, "y": 0 }
]
}
}
}

How do I insert and play it? Is something like this possible?

var irisAnim = {"bones": {
"r_iris": {
"translate": [
{ "time": 0, "x": 0, "y": 0 },
..........

animationState.setAnimation(0, irisAnim, true);

[badlogic]

The SkeletonJson class is responsible for taking in JSON and outputting the corresponding JavaScript objects. You might be able to just call (or adapt) the SkeletonJson#readAnimation() method to convert your JSON to an Animation instance.

[towfiqi]

I tried this:

var irisMove = {
"bones": {
"r_iris": {
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.0667, "x": 0.09, "y": 4.5, "curve": "stepped" },
{ "time": 0.2667, "x": 0.09, "y": 4.5 },
{ "time": 0.3333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3333, "x": 0, "y": 0 },
{ "time": 1.4, "x": -0.13, "y": -3.27, "curve": "stepped" },
{ "time": 1.5667, "x": -0.13, "y": -3.27 },
{ "time": 1.6667, "x": 0, "y": 0 }
]
},
"l_iris": {
"translate": [
{ "time": 0, "x": 0, "y": 0 },
{ "time": 0.0667, "x": -0.09, "y": 4.5, "curve": "stepped" },
{ "time": 0.2667, "x": -0.09, "y": 4.5 },
{ "time": 0.3333, "x": 0, "y": 0, "curve": "stepped" },
{ "time": 1.3333, "x": 0, "y": 0 },
{ "time": 1.4, "x": 0, "y": -3.27, "curve": "stepped" },
{ "time": 1.5667, "x": 0, "y": -3.27 },
{ "time": 1.6667, "x": 0, "y": 0 }
]
}
}
};

var irisSkeleton = new spine.SkeletonJson(irisMove);
var irisAnimation = irisSkeleton.readAnimation();
animationState.setAnimation(1, irisAnimation, true);

And I got this error:

Uncaught TypeError: Cannot read property 'slots' of undefined

Any idea?

---

Any update?

[badlogic]

This should work:

var skeletonData = ... // spine.SkeletonData instance you previously loaded
var irisMove = { ... } // As you have it above
new spine.SkeletonJson(null).readAnimation(irisMove, "irisMove", skeletonData) // This will add the animation to the skeletonData

[towfiqi]

Lovely! It worked!