Lovely! It worked!

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?

You are correct! I don't know why I did not check that earlier. Thanks for your help!

Just tried that. still gray.

For reference, I am having the same issue as this:
I want to set the SpineWidget background transparent

Thanks

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

Hi,

I have character skeleton. It has multiple face parts and multiple animations : blink, laugh, speaking etc. The speaking animation only works with mouth slot and the blink animation only works with the eyes slot and the brows slot.

What I am trying to do is, mix 2 animations so that they run together. For example, I want to mix the blink and the speaking animations so that they run together and make it look like the character is blinking while speaking.

I tried setMix without any luck. I am not sure I have correctly implemented it though.

        

animationStateData.setMix("blink", "speak", 0.8)
animationState.setAnimation(0, "blink", true);

Thanks

Ok. I figured it out. Looks like I have to play the 2nd animation in different track.

I have one other question. How do I change the canvas background to transparent? Its currently gray. I tried clearColor but its still gray.

canvas = document.getElementById("canvas");
var config = { alpha: true };
gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
gl.clearColor(1, 0, 0, 1);

Daniel,

Great Work! from the video tutorial you shared, a one line takes around 4-5 seconds to sync. Can this be faster with a powerful machine?

Thanks

oh crap I am not using it for a game, but a helping bot as a web app. If I knew I needed the PRO version of spine to open the file, I wouldnt have bought the file and Spine essential version . Spine PRO is way expensive for me and the project.

All I wanted was to animate the bunny to jerk a little when its poked. So I made the jerk animation in the trial version of Spine and when I tried to export the animation, I found out I need to buy the full version. But looks like I need the PRO version. Is it possible for you to make a jerk animation for me?

And are you guys running any kind of promotional offer on PRO version?

Thanks

Hi,

I just bought a spine model from Erikari:
https://www.gamegorillaz.com/2d-game-assets-art/characters-sprites/fluffy-bunny-2d-animated-sprite

And also bough Spine essential to edit it. But when I load the spine file, some images are missing:

When I opened it with Spine trial version, the images loaded fine.. Is this a spine bug? or is the model file missing anything?

Thanks