Play animation on key

@yaustar
Xan you tell me a button to play animations when a button on a keyboard is pressed? Thanks in advance.

This tutorial explains that in depth check it out:

https://developer.playcanvas.com/en/tutorials/animation-blending/

2 Likes

:+1:

@Leonidas
It says that “Keyboard” is undefined, i’ll give you edit access so you can see, its called"Gamers team FPS"

Try posting first the code you tried to use.

k

var AnimationBlending = pc.createScript('AnimationBlending');

AnimationBlending.states = {
    idle: { 
        animation: 'idle.json' 
    },
    shoot: { 
        animation: 'fire.json' 
    },
    move: { 
        animation: 'walk.json' 
    },
    jump: { 
        animation: 'jump.json' 
    }
};


// initialize code called once per entity
AnimationBlending.prototype.initialize = function() {
    this.blendTime = 0.2;

    this.setState('idle');

AnimationBlending.prototype.setState = function (state) {
    var states = AnimationBlending.states;
    
    this.state = state;
    // Set the current animation, taking 0.2 seconds to blend from
    // the current animation state to the start of the target animation.
    this.entity.animation.play(states[state].animation, this.blendTime);
};};
if (this.app.keyboard.isPressed(pc.KEY_W)) {
        this.setState('move');
    }
if (this.app.keyboard.isReleased(pc.KEY_W)) {
        this.setState('idle');
    }
if (this.app.keyboard.isPressed(pc.KEY_A)) {
        this.setState('move');
    }
if (this.app.keyboard.isReleased(pc.KEY_A)) {
        this.setState('idle');
    }
if (this.app.keyboard.isPressed(pc.KEY_S)) {
        this.setState('move');
    }
if (this.app.keyboard.isReleased(pc.KEY_S)) {
        this.setState('idle');
    }
if (this.app.keyboard.isPressed(pc.KEY_A)) {
        this.setState('move');
    }
if (this.app.keyboard.isReleased(pc.KEY_A)) {
        this.setState('idle');
    }
if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        this.setState('jump');
    }
if (this.app.keyboard.isReleased(pc.KEY_SPACE)) {
        this.setState('idle');
    }
if (this.app.keyboard.isPressed(pc.MOUSEBUTTON_LEFT)) {
        this.setState('shoot');
    }
if (this.app.keyboard.isReleased(pc.MOUSEBUTTON_LEFT)) {
        this.setState('idle');
    }
// initialize code called once per entity
AnimationBlending.prototype.initialize = function() {
    
};

// update code called every frame
AnimationBlending.prototype.update = function(dt) {
    
};
````Code Highlight`

You can use the following button to highlight your code in the post, and make it more readable:

image

2 Likes

Format your code, and make sure you paste correctly when taking code from examples, on line 32 you have double curly brackets closing:

};};

The first one is meant for the initialize method. After you do that and there are no errors, try running your code.

1 Like

hmmm, it still says it is wrong

does that tutorial still work?

Yes, if you launch it plays fine.

You still have code not properly formatted, these if statements should be inside the update method:

AnimationBlending.prototype.update = function(dt) {

if (this.app.keyboard.isPressed(pc.KEY_W)) {
        this.setState('move');
    }
if (this.app.keyboard.isReleased(pc.KEY_W)) {
        this.setState('idle');
    }
if (this.app.keyboard.isPressed(pc.KEY_A)) {
        this.setState('move');
    }
if (this.app.keyboard.isReleased(pc.KEY_A)) {
        this.setState('idle');
 }
};

Also on line 76 you have a second initialize method, that overrides the definition of the first one, remove it.

I’d suggest try taking some Javascript tutorials, there are plenty online. They will make you more confident on how these things play out.

2 Likes