[webgl] Insert and play dynamically generated Animation

towfiqi · 15 мая 2019

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);

towfiqi · 15 мая 2019

Mario · 15 мая 2019

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 · 16 мая 2019

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?

Mario · 16 мая 2019

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 · 16 мая 2019

Lovely! It worked!