[Spine-js] Hide element of animation

mediakitchen

Total newbie to Spine and to HTML5 game development.

I am using Pixi.js to develop a simple game and spine animations supplied to me by a client.

I have one animation that is of a drawer opening and a carrot popping out of the drawer.

The final frame of the animation has this carrot displayed.

I would like to remove this carrot when a user clicks on it.

What code would be required to do this. Here is my spine data for the drawer

The element I want to hide/remove is "HiddenCarrot"


{
"bones": [
   { "name": "root-Table" },
   { "name": "Drawer-bone", "parent": "root-Table", "length": 37.46, "x": 311.84, "y": -41.04, "rotation": -7.68 },
   {
      "name": "Carrot_Table-bone",
      "parent": "Drawer-bone",
      "length": 101.2,
      "x": 30.07,
      "y": 13.82,
      "scaleX": 0.5,
      "scaleY": 0.5,
      "rotation": -161.31
   }
],
"slots": [
   { "name": "Bedroom_Table", "bone": "root-Table", "attachment": "Bedroom_Table" },
   { "name": "Bedroom_Table-Drawer", "bone": "Drawer-bone", "attachment": "Bedroom_Table-Drawer" },
   { "name": "Bedroom_Table-DrawerOverlay", "bone": "Drawer-bone", "attachment": "Bedroom_Table-DrawerOverlay" },
   { "name": "Bedroom_Table-Cover", "bone": "root-Table", "attachment": "Bedroom_Table-Cover" },
   { "name": "HiddenCarrot", "bone": "Carrot_Table-bone" }
],
"skins": {
   "default": {
      "Bedroom_Table": {
         "Bedroom_Table": { "x": 344, "y": -84, "width": 178, "height": 190 }
      },
      "Bedroom_Table-Cover": {
         "Bedroom_Table-Cover": { "x": 344, "y": -84, "width": 178, "height": 190 }
      },
      "Bedroom_Table-Drawer": {
         "Bedroom_Table-Drawer": { "x": 27.19, "y": 11.74, "rotation": 7.68, "width": 136, "height": 61 }
      },
      "Bedroom_Table-DrawerOverlay": {
         "Bedroom_Table-DrawerOverlay": { "x": 27.19, "y": 11.74, "rotation": 7.68, "width": 136, "height": 61 }
      },
      "HiddenCarrot": {
         "HiddenCarrot": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 },
         "HiddenCarrot-masked1": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 },
         "HiddenCarrot-masked2": { "x": 6.95, "y": -16.63, "rotation": 169, "width": 216, "height": 103 }
      }
   }
},
"animations": {
   "animation": {
      "slots": {
         "HiddenCarrot": {
            "attachment": [
               { "time": 0, "name": "HiddenCarrot" }
            ]
         }
      },
      "bones": {
         "Drawer-bone": {
            "rotate": [
               { "time": 0, "angle": 0 }
            ],
            "translate": [
               {
                  "time": 0,
                  "x": 0,
                  "y": 0,
                  "curve": [ 0.358, 0.01, 0.538, 1 ]
               },
               {
                  "time": 0.1666,
                  "x": 1.56,
                  "y": 0.6,
                  "curve": [ 0.45, 0, 0.518, 0.97 ]
               },
               {
                  "time": 0.6666,
                  "x": -46.57,
                  "y": -16.21,
                  "curve": [ 0.312, 0.01, 0.544, 1 ]
               },
               { "time": 0.8333, "x": -45.47, "y": -15.47 }
            ]
         },
         "Carrot_Table-bone": {
            "rotate": [
               {
                  "time": 1,
                  "angle": 0,
                  "curve": [ 0.25, 0, 0.955, 0.42 ]
               },
               { "time": 1.1666, "angle": -14.29 },
               {
                  "time": 1.2,
                  "angle": 340.68,
                  "curve": [ 0.138, 0.7, 0.75, 1 ]
               },
               {
                  "time": 1.3333,
                  "angle": 337.09,
                  "curve": [ 0.378, 0.01, 0.53, 0.94 ]
               },
               { "time": 1.4666, "angle": -22.9 }
            ],
            "translate": [
               {
                  "time": 1,
                  "x": 0,
                  "y": 0,
                  "curve": [ 0.25, 0, 0.955, 0.42 ]
               },
               { "time": 1.1666, "x": -1, "y": 4.69 },
               {
                  "time": 1.2,
                  "x": -6.24,
                  "y": 18.84,
                  "curve": [ 0.138, 0.7, 0.75, 1 ]
               },
               {
                  "time": 1.3333,
                  "x": -14.82,
                  "y": 32.91,
                  "curve": [ 0.378, 0.01, 0.53, 0.94 ]
               },
               { "time": 1.4666, "x": -14.52, "y": 30.72 }
            ]
         }
      },
      "draworder": [
         {
            "time": 0,
            "offsets": [
               { "slot": "HiddenCarrot", "offset": -2 }
            ]
         },
         { "time": 1.184 }
      ]
   }
}
}

mediakitchen

Søren

you can do

skeleton.findSlot("HiddenCarrot").setAttachment(null); given that HiddenCarrot is the slot you want to hide. I'm afraid I don't know the exact equivalent for pixi.js but it should point you in the right direction.

mediakitchen

Ah great - thanks for the swift reply Shiu. I will use this as a starting point for my search for a solution. Many thanks

Struggling to have any success hiding this element. I noticed the element I want to remove (HiddenCarrot) did not have an attachment as far as I can see in the spine data so for testing purposes I tried your code with the "Bedroom_Table element. See below:

See this excerpt:

"slots": [
   { "name": "Bedroom_Table", "bone": "root-Table", "attachment": "Bedroom_Table" },
   { "name": "Bedroom_Table-Drawer", "bone": "Drawer-bone", "attachment": "Bedroom_Table-Drawer" },
   { "name": "Bedroom_Table-DrawerOverlay", "bone": "Drawer-bone", "attachment": "Bedroom_Table-DrawerOverlay" },
   { "name": "Bedroom_Table-Cover", "bone": "root-Table", "attachment": "Bedroom_Table-Cover" },
   { "name": "HiddenCarrot", "bone": "Carrot_Table-bone" }
],

var slot = table.skeleton.findSlot("Bedroom_Table");
            

console.log("slot = " + slot); // Console output: [object Object]
console.log("slot.data.name = " + slot.data.name);  // Console output: Bedroom_Table      

console.log("slot.bone = " + slot.bone);   // Console output: [object Object]
console.log("slot.data.attachmentName = " + slot.data.attachmentName); // Console output: Bedroom_Table            

slot.setAttachment(null);            

console.log("slot.data.attachmentName after setting to null  = " + slot.data.attachmentName); // Console output: Bedroom_Table

If you can offer any further advice it would be really appreciated. Seems really difficult to just remove a carrot🙂

Nate

Should work. Print slot.attachment before and after. Setting a Slot attachment to null won't change the SlotData. See:
Loading Image
(check it out, the forum now expands images that are too big when you click them 8))

You should also be able to use bedroomTableDrawer.skeleton.setAttachment("Bedroom_Table", null);.

mediakitchen

Thank you for your continued assistance trying to get this to work.

I did as you suggested with the following code and it is now reporting the value of slot.attachment as null.

I can't work out how to remove the carrot in this animation so have uploaded a test file in the hope you can assist.

Here is the link:

http://www.flash-developer.co.uk/testar ... ement.html

If you click on the table the animation of the drawer coming out with the carrot will play.

Once the animation is complete, it removes the Bedroom_Table element with the following code:

table.skeleton.findSlot("Bedroom_Table").setAttachment(null);

I am only removing this table for testing purposes.

It is actually the HiddenCarrot element I need to remove at the end of the animation once the user performs a certain action. So basically the animation should play and stop at the end. When the user clicks another button I want to then remove this HiddenCarrot from the end of the animation and leave everything else the same.

However there does not appear to be an attachment associated with this element so I have no idea how I can remove/hide it


"slots": [
   { "name": "Bedroom_Table", "bone": "root-Table", "attachment": "Bedroom_Table" },
   { "name": "Bedroom_Table-Drawer", "bone": "Drawer-bone", "attachment": "Bedroom_Table-Drawer" },
   { "name": "Bedroom_Table-DrawerOverlay", "bone": "Drawer-bone", "attachment": "Bedroom_Table-DrawerOverlay" },
   { "name": "Bedroom_Table-Cover", "bone": "root-Table", "attachment": "Bedroom_Table-Cover" },
   { "name": "HiddenCarrot", "bone": "Carrot_Table-bone" }
],

I do note the "HiddenCarrot" element seems to have an attachment set in the animation code as follows:

"animations": {
   "animation": {
      "slots": {
         "HiddenCarrot": {
            "attachment": [
               { "time": 0, "name": "HiddenCarrot" }
            ]
         }
      },
      "bones": {

I did try the following code when the animation has finished playing with no success

var slotId = table.skeleton.findSlot("HiddenCarrot");   

slotId.setAttachment(null);

So possibly it needs some syntax like the following?

table.animations.animation.findSlot("HiddenCarrot").setAttachment(null);

Any advice appreciated.

Thanks

Søren

Do you set a key on the HiddenCarrot slot ? If that is the case I believe you need to set the slot to null on each frame else the key will set the slot attachment again once it's reached.

mediakitchen

Thanks for the reply. I am not familiar enough with the Spine data to know if there is a key set. The client supplied me with the spine data which I pasted into the first post of this thread. Would I be able to see if there is a key set by looking at that data? If not, how can I determine this?

So if there is a key set on the HiddenCarrot slot, would I need to use the following code once the animation is detected as finished playing?

var slotId = table.skeleton.findSlot("HiddenCarrot");   

slotId = null;

I have just by trial and error tried the following code which appears to remove the HiddenCarrot. Not sure what effect this clearAnimation call will have though?

table.skeleton.findSlot("HiddenCarrot").setAttachment(null);      

table.state.clearAnimation();

Søren

just looked through your JSON. You do have a key set for HiddenCarrot on frame 0

"animation": {
      "slots": {
         "HiddenCarrot": {
            "attachment": [
               { "time": 0, "name": "HiddenCarrot" }
            ]
         }
      },

Look at { "time": 0, "name": "HiddenCarrot" }

mediakitchen

Thanks for looking at the JSON

Ok so you say there is a key set for HiddenCarrot on frame 0.

The action I would like to occur is at the end of the animation so I assume this is no longer frame 0. I am not sure how to determine from the JSON what the number of the end frame would be - sorry I still have not got my head around how this SPINE animation works behind the scenes.

I am therefore still unclear why setting the attachment on frame X as follows did not work to remove the HiddenCarrot

table.skeleton.findSlot("HiddenCarrot").setAttachment(null);

Ha, I haven't even got to the stage where I need to reverse the animation without the HiddenCarrot element.

Nate

Setting the attachment for the carrot slot to null does clear the attachment for that slot. However, when your animation is applied it changes the attachment for that slot because you have a key set. Currently change attachment keys (AttachmentTimeline) are applied every frame, not just when playback reaches the key. This has been discussed recently and may change to only set the attachment when the key is hit, similar to EventTimeline. Here is the task:
https://trello.com/c/aDgL15v1/64-attach ... each-frame