[SOLVED] Animation is not playing when pressing UI button

I am trying to play car door open and close animation when we press UI buttons. But its not working here is my script attached to the car entity. Please refer the screen shot below. I have referred this Anim State Graph Blending | Learn PlayCanvas

AnimationDoor.attributes.add('openDoorButton', {
    type: 'entity'
});

AnimationDoor.attributes.add('closeDoorButton', {
    type: 'entity'
});

// initialize code called once per entity
AnimationDoor.prototype.initialize = function() {

    this.openDoorButton.button.on('click', function(event) {

        this.closeDoorButton.enabled = true;
        this.openDoorButton.enabled = false;
 
        this.entity.anim.setBoolean('openDoor', true);
        this.entity.anim.setBoolean('closeDoor', false);

    }, this);

    this.closeDoorButton.button.on('click', function(event) {

        this.closeDoorButton.enabled = false;
        this.openDoorButton.enabled = true;

        this.entity.anim.setBoolean('closeDoor', true);
        this.entity.anim.setBoolean('openDoor', false);


        
    }, this);

};

Hi @Vivek_Chaini! I see your Initial State is empty. If I remember correctly this breaks the anim component.

@Albertos But I dont want to play anything at the Initial moment i want it to be empty. I want to play the animation if and only if we press a button.
And hope my script is correct

As long as the conditions are not met, nothing will be played I think. Can you check what happens without an empty state?

Nothing will happend if the conditions are not met as Albertos say

But the conditions are met right. Here is my project the yellow car had animations in it.
https://playcanvas.com/editor/scene/1486070

Make sure they are not, if you don’t want to play an animation.

I don’t see a yellow car. Can you tell me the name of the entity?

Um this car

1 Like

The entity name is Ftype New Anim

Ah, sorry I was outside the store. :upside_down_face:

Please try my suggestions first.

Okay

Please note that you can’t remove the Initial State. You can rename it and use it as one of your two states.

Yea we cant remove that Initial State so will try this github link now. And looks like there is no problem with the conditions. @Albertos

Ok so first of all there are two animation one is door closing and another one is door opening. I don’t want to use the initial state because if i put either one of my animation in the initial state it will play(for ex if i put door open animation in initial state the door will be opened in the starting of the scene which is exactly i dont want) and mainly we dont have a idle animation for a car. So renaming will not work in my case i think. You can check the project I shared you will understand what’s going on @Albertos

Below the version with my suggestions applied. The only problem with this is that the doors are closing at start. This is because there is no empty state possible at the moment. Maybe @Elliott can consider looking at the possibilities for this.

https://playcanvas.com/project/974910/overview/carshowroomfork

Another option could be that you don’t use the Anim State Graph. You can check the example project below for that.

https://developer.playcanvas.com/en/tutorials/animation-without-state-graph/

Is these conditions are correct? @Albertos

@Albertos I also tried this link Animation without State Graph | Learn PlayCanvas
But here the animation keep on looping because of this script here we’re just adding the animations

AddAnimations.attributes.add('animationAssets', { 
    type: 'json', 
    array: true, 
    title: 'Animation Assets',
    schema: [{
        name: 'stateName',
        title: 'State Name',
        type: 'string',
    }, {
        name: 'asset',
        title: 'Aseet',
        type: 'asset',
        assetType: 'animation'
    }]
});


// initialize code called once per entity
AddAnimations.prototype.initialize = function() {
  
   // To mimic the older Animation component, the state name will be the name of the asset
    for (var i = 0; i < this.animationAssets.length; ++i) {
        var animationAsset = this.animationAssets[i];
        this.entity.anim.assignAnimation(animationAsset.stateName, animationAsset.asset.resource);
    }
};

is there any way to turn off loop by script of these animations i add?

You can change line 24 of the script above (line 30 of the actual script) with the line below. Here is layer, speed and loop added.

this.entity.anim.assignAnimation(animationAsset.stateName, animationAsset.asset.resource, 'Base', 1, false);

https://developer.playcanvas.com/api/pc.AnimComponent.html#assignAnimation

1 Like

@Albertos thanks

@Albertos I tried the same what you did in the Forked project but its not working for me. Can you tell me if i did the same what you did in the forked project? refer these screenshots. I don’t know what is wrong here my script is fine btw!